/* REPLACE START: style.css（FATISM主題｜高質感＋動態背景｜RWD 980/640） */
:root{--bg:#fffaf2;--bg-2:#fff7e8;--fg:#0d0d0e;--muted:#6b7280;--line:#ece5d5;--card:#ffffff;--ink:#0f172a;--brand:#222222;--brand-2:#4b5563;--accent-egg:#ffd26a;--accent-peach:#ffc0a4;--accent-matcha:#b9e3b1;--accent-cream:#fff3c4;--accent-lav:#e5e7ff;--radius:16px;--radius-sm:12px;--blur:14px;--shadow-sm:0 6px 16px rgba(0,0,0,.07);--shadow:0 12px 30px rgba(0,0,0,.1);--shadow-lg:0 20px 60px rgba(0,0,0,.16);--space:min(1200px,92vw)}
:root[data-theme="dark"]{--bg:#0b0b0c;--bg-2:#0f1114;--fg:#f5f7fa;--muted:#9aa3ae;--line:#1c2230;--card:#111317;--ink:#f5f7fa;--brand:#f5f7fa;--brand-2:#9aa3ae;--accent-egg:#e3b955;--accent-peach:#e2a891;--accent-matcha:#9bcf95;--accent-cream:#4a432a;--accent-lav:#2a2e45;--shadow-sm:0 6px 16px rgba(0,0,0,.35);--shadow:0 12px 30px rgba(0,0,0,.45);--shadow-lg:0 20px 60px rgba(0,0,0,.55)}
*{box-sizing:border-box}html,body{height:100%}html:focus-within{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{margin:.2em 0 .45em;letter-spacing:.3px}h1{font-size:clamp(32px,5vw,48px);line-height:1.15;font-weight:850;color:var(--ink)}h2{font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--ink)}h3{font-size:clamp(18px,2.4vw,22px);font-weight:750;color:var(--ink)}
p{margin:0 0 12px}a{color:inherit;text-decoration:none;transition:opacity .22s ease,transform .22s ease}a:hover{opacity:.92}
img{max-width:100%;height:auto;display:block;border-radius:inherit}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:40px 0}
.container{width:var(--space);margin:0 auto}
.section{padding:88px 0}@media(max-width:980px){.section{padding:72px 0}}@media(max-width:640px){.section{padding:60px 0}}
:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,210,106,.35);border-radius:12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ==== 動態背景（柔和漸層氣泡＋手帳格紙） ==== */
body::before{content:"";position:fixed;inset:-10% -5%;z-index:-2;background:radial-gradient(800px 800px at 15% 0%,var(--accent-cream),transparent 60%),radial-gradient(900px 900px at 85% -10%,var(--accent-peach),transparent 62%),radial-gradient(720px 720px at 20% 105%,var(--accent-matcha),transparent 58%),radial-gradient(840px 840px at 80% 110%,var(--accent-lav),transparent 60%);filter:blur(60px) saturate(120%);animation:bgFloat 26s ease-in-out infinite alternate}
@keyframes bgFloat{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-1.5%,0) scale(1.02)}100%{transform:translate3d(0,1.5%,0) scale(1)}}
body::after{content:"";position:fixed;inset:0;z-index:-1;background-image:linear-gradient(to right, color-mix(in oklab,var(--line) 70%,transparent) 1px, transparent 1px),linear-gradient(to bottom, color-mix(in oklab,var(--line) 70%,transparent) 1px, transparent 1px);background-size:36px 36px;background-position:0 0;mix-blend-mode:soft-light;opacity:.65;animation:gridDrift 40s linear infinite}
@keyframes gridDrift{0%{background-position:0 0}100%{background-position:360px 180px}}
/* ==== Header（玻璃擬態＋手作圓角） ==== */
.header-wrap{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 78%,transparent);backdrop-filter:saturate(160%) blur(var(--blur));border-bottom:1px solid color-mix(in oklab,var(--line) 86%,transparent)}
.header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 200deg at 50% 50%,var(--accent-egg),var(--accent-peach),var(--accent-matcha),var(--accent-egg));box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),var(--shadow-sm)}
.brand-name{font-weight:900;letter-spacing:.4px;color:var(--ink)}
.nav{display:flex;gap:22px;justify-content:center}
.nav a{position:relative;opacity:.85}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;transform:scaleX(0);transform-origin:left;background:currentColor;opacity:.18;transition:transform .25s ease,opacity .25s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);opacity:.5}
.header-ops{display:flex;align-items:center;gap:10px}
.theme-btn,.menu-btn{width:42px;height:42px;border-radius:12px;background:linear-gradient(180deg,var(--card),color-mix(in oklab,var(--card) 72%,var(--bg)));display:grid;place-items:center;box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:transform .18s ease,box-shadow .18s ease}
.theme-btn:hover,.menu-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.menu-btn{display:none}@media(max-width:980px){.nav{display:none}.menu-btn{display:grid}}
/* ==== Drawer ==== */
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.open{display:block}
.drawer .overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.drawer .panel{position:absolute;inset:0 0 0 auto;width:min(86vw,360px);background:linear-gradient(180deg,var(--bg),var(--bg-2));border-left:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-lg)}
.drawer .panel a{padding:14px 12px;border-radius:14px;background:color-mix(in oklab,var(--card) 80%,transparent);border:1px solid var(--line);transition:transform .18s ease,box-shadow .18s ease}
.drawer .panel a:hover{transform:translateX(2px);box-shadow:var(--shadow-sm)}
/* ==== Hero ==== */
.hero{padding:56px 0 44px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:24px}}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--muted)}
.lead{color:var(--muted)}
.hero-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
/* ==== Button（軟糖質感） ==== */
.btn{padding:12px 18px;border-radius:14px;background:linear-gradient(180deg,var(--accent-egg),color-mix(in oklab,var(--accent-egg) 85%,#000));color:#111;font-weight:900;letter-spacing:.2px;box-shadow:0 6px 16px rgba(255,210,106,.35);border:1px solid rgba(255,255,255,.35);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,210,106,.45)}
.btn:active{transform:translateY(0)}
.btn.alt{background:linear-gradient(180deg,var(--card),color-mix(in oklab,var(--card) 70%,var(--bg)));color:var(--fg);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
/* ==== Grid / Card（高級紙張＋手作邊） ==== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.grid-3{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--card),color-mix(in oklab,var(--card) 65%,var(--bg)));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card-media{aspect-ratio:1/1;background:color-mix(in oklab,var(--accent-cream) 35%,transparent);position:relative;overflow:hidden}
.card-media img{transition:transform .5s ease;image-rendering:-webkit-optimize-contrast}
.card:hover .card-media img{transform:scale(1.03)}
.card-body{padding:16px 16px 18px}
.card-title{font-weight:900;letter-spacing:.2px;color:var(--ink)}
.card-sub{font-size:13px;color:var(--muted)}
.price{font-weight:950;margin-top:8px;color:var(--ink)}
/* ==== Tag / Badge ==== */
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.tag{font-size:12px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--card))}
.badge{font-size:11px;padding:4px 8px;border-radius:999px;background:color-mix(in oklab,var(--accent-matcha) 25%,transparent);border:1px solid color-mix(in oklab,var(--accent-matcha) 40%,transparent)}
/* ==== About ==== */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}@media(max-width:980px){.about{grid-template-columns:1fr;gap:22px}}
.portrait{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,var(--card),var(--bg));box-shadow:var(--shadow)}
.about .bio{font-size:18px;color:var(--muted)}
/* ==== Exhibition Timeline ==== */
.timeline{border-left:2px solid var(--line);padding-left:18px;margin-left:6px;display:flex;flex-direction:column;gap:18px}
.tl-item{position:relative;padding-bottom:8px}
.tl-item::before{content:"";position:absolute;left:-11px;top:6px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,transparent 60%),var(--ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--line) 80%,transparent)}
.tl-head{font-weight:950;color:var(--ink)}
.tl-body{color:var(--muted)}
/* ==== Form（可選） ==== */
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--card));color:var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.input::placeholder{color:color-mix(in oklab,var(--muted) 70%,transparent)}
.textarea{min-height:120px;resize:vertical}
.input:focus{outline:0;box-shadow:0 0 0 3px rgba(185,227,177,.35);border-color:color-mix(in oklab,var(--accent-matcha) 30%,var(--line))}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:640px){.form-row{grid-template-columns:1fr}}
/* ==== Footer ==== */
.footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted);background:linear-gradient(180deg,transparent,rgba(127,127,127,.06))}
.socials{display:flex;gap:12px}
/* ==== Reveal（進場動畫） ==== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.65,.3,1),transform .6s cubic-bezier(.2,.65,.3,1)}
.reveal.show{opacity:1;transform:none}
/* ==== Skeleton（載入骨架） ==== */
.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,color-mix(in oklab,var(--accent-cream) 45%,transparent),color-mix(in oklab,var(--accent-cream) 75%,transparent),color-mix(in oklab,var(--accent-cream) 45%,transparent))}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:shimmer 1.6s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* ==== Table（價格表等） ==== */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line)}
.table thead th{background:linear-gradient(180deg,var(--card),color-mix(in oklab,var(--card) 70%,var(--bg)));text-align:left}
.table tbody tr:hover{background:color-mix(in oklab,var(--accent-cream) 35%,transparent)}
/* ==== Scrollbar 美化 ==== */
*::-webkit-scrollbar{height:12px;width:12px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,color-mix(in oklab,var(--accent-egg) 30%,transparent),color-mix(in oklab,var(--accent-peach) 22%,transparent));border:3px solid transparent;border-radius:999px;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}
/* ==== 小工具 ==== */
.hide{display:none!important}.center{display:grid;place-items:center}.muted{color:var(--muted)}.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.round{border-radius:var(--radius)}.round-sm{border-radius:var(--radius-sm)}.shadow{box-shadow:var(--shadow)}.shadow-lg{box-shadow:var(--shadow-lg)}
/* ==== Gallery（作品牆） ==== */
.gallery{columns:3 280px;column-gap:16px}
.gallery .tile{display:inline-block;width:100%;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.gallery .tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* ==== Product 卡（商品頁高級感） ==== */
.product-card{display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(180deg,var(--card),color-mix(in oklab,var(--card) 65%,var(--bg)));border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.product-price{font-weight:950;letter-spacing:.2px;color:var(--ink)}
.product-actions{display:flex;gap:8px}
.badge-new{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;border:none}
.badge-hot{background:linear-gradient(180deg,#ef4444,#b91c1c);color:#fff;border:none}
/* ==== Breadcrumb ==== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:14px}
.breadcrumb a{opacity:.9}
.breadcrumb .sep{opacity:.45}
/* ==== Rule（標題分隔） ==== */
.rule{display:flex;align-items:center;gap:14px}
.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
/* ==== CTA 帶狀 ==== */
.band{padding:22px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--bg),var(--card));box-shadow:var(--shadow-sm)}
/* ==== RWD 微調 ==== */
@media(max-width:980px){.header{height:66px}.brand-logo{width:28px;height:28px}.hero{padding:44px 0 36px}.card-body{padding:14px}}
@media(max-width:640px){.theme-btn,.menu-btn{width:40px;height:40px;border-radius:12px}.section{padding:56px 0}.nav a::after{display:none}}
/* REPLACE END: style.css（FATISM主題｜高質感＋動態背景） */