:root{--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
/* 網站風格示意（/styles）：沿用舊版自製示意 UI，圖片自行託管 */
/* ═══════════ THEMES（網站主題示意） ═══════════ */
.th-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-bottom:2rem}
.th-tab{
  text-align:left;border:1.5px solid var(--line);background:var(--paper);border-radius:14px;
  padding:.85rem 1rem;font-family:var(--sans);color:var(--ink);transition:border-color .3s,background .3s,transform .3s var(--ease);
  display:flex;gap:.75rem;align-items:center;
}
.th-tab:hover{border-color:var(--ink-3)}
.th-tab[aria-selected="true"]{border-color:var(--ink);background:#fff;box-shadow:0 14px 30px -24px rgba(27,67,112,.6)}
.th-tab .sw{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.th-tab b{display:block;font-size:.95rem;line-height:1.35}
.th-tab small{display:block;font-size:.74rem;color:var(--ink-3);line-height:1.4}
.th-panel{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.th-panel[hidden]{display:none}
.th-stage{position:relative;padding-bottom:2.2rem}
.th-demo-tag{
  position:absolute;z-index:5;top:.32rem;right:.8rem;background:var(--ink);color:#fff;
  font-size:.72rem;letter-spacing:.08em;padding:.25rem .75rem;border-radius:999px;font-weight:700;
}
.th-hint{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem}
.hint-chip{font-size:.74rem;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.15rem .65rem}
.hint-chip.dash{border:1.5px dashed var(--ink-2)}

/* 瀏覽器外框 */
.mk{border-radius:14px;background:#fff;border:1px solid #CFD9E2;box-shadow:0 40px 70px -40px rgba(18,49,79,.55),0 10px 22px -18px rgba(18,49,79,.35);overflow:hidden}
.mk-bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:#EEF2F5;border-bottom:1px solid #DCE3E9}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:#D3DAE0}
.mk-bar i:nth-child(1){background:#F0A39A}.mk-bar i:nth-child(2){background:#F2CF83}.mk-bar i:nth-child(3){background:#9FD2A6}
.mk-url{margin-left:.6rem;flex:1;max-width:60%;background:#fff;border-radius:6px;font-size:.66rem;color:#8797A5;padding:.12rem .6rem;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-screen{container-type:inline-size;aspect-ratio:16/10;overflow:hidden;position:relative}
.mk-site{font-size:1cqw;line-height:1.6;transition:transform 7s cubic-bezier(.45,.05,.4,1)}
.th-stage:hover .mk-screen .mk-site,.mk-screen:focus-within .mk-site{transform:translateY(calc(-100% + 62.5em))}
@media (hover:none){.mk-screen{overflow-y:auto;-webkit-overflow-scrolling:touch}.th-stage:hover .mk-screen .mk-site{transform:none}}
.mk-site img{width:100%;height:100%;object-fit:cover;display:block}
.mk-site h4,.mk-site h5,.mk-site p{margin:0}
.mk-site .addon{position:relative;outline:.18em dashed currentColor;outline-offset:.5em;border-radius:.3em}
.mk-site .addon::after{
  content:attr(data-addon);position:absolute;left:-.6em;top:-2.3em;white-space:nowrap;
  font-family:var(--sans);font-size:1.05em;font-weight:700;letter-spacing:.02em;line-height:1;
  background:#1B4370;color:#fff;padding:.45em .7em;border-radius:99em;
}

/* 手機外框 */
.ph{position:absolute;right:-1rem;bottom:0;width:clamp(150px,24%,200px);border-radius:26px;background:#101418;padding:7px;box-shadow:0 30px 50px -24px rgba(10,20,30,.6);z-index:4}
.ph-screen{container-type:inline-size;border-radius:20px;overflow:hidden;aspect-ratio:9/18.5;position:relative;background:#fff}
.ph-screen::before{content:"";position:absolute;z-index:3;top:6px;left:50%;transform:translateX(-50%);width:34%;height:12px;border-radius:99px;background:#101418}
.ph .mk-site{font-size:1cqw}
.th-stage:hover .ph .mk-site{transform:translateY(calc(-100% + 205em))}

/* 主題說明 */
.th-info h3{font-size:1.4rem;font-weight:900;line-height:1.35}
.th-kind{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--carrot)}
.th-meta{margin-top:1rem;display:grid;gap:.55rem;font-size:.88rem;color:var(--ink-2)}
.th-meta div{display:grid;grid-template-columns:4.6em 1fr;gap:.6rem}
.th-meta dt{color:var(--ink-3)}
.th-sub{margin-top:1.3rem;font-size:.78rem;font-weight:700;color:var(--ink-3);letter-spacing:.06em}
.th-list{list-style:none;margin-top:.5rem;display:grid;gap:.35rem}
.th-list li{position:relative;padding-left:1.2rem;font-size:.86rem;color:var(--ink-2);line-height:1.65}
.th-list li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--carrot);background:var(--carrot-soft)}
.th-price{margin-top:1.3rem;padding:1rem 1.1rem;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.th-price p:first-child{font-size:.78rem;color:var(--ink-3)}
.th-price strong{display:block;font-size:1.45rem;font-weight:900;letter-spacing:-.01em;line-height:1.35}
.th-price span{display:block;margin-top:.3rem;font-size:.8rem;color:var(--ink-2);line-height:1.7}
.th-price a{color:var(--carrot);font-weight:700;text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.chip{font-size:.76rem;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.22rem .65rem;color:var(--ink-2)}
.chip b{color:var(--carrot);font-weight:700;margin-left:.25rem}
.th-go{margin-top:1.4rem;width:100%;justify-content:center}

/* ── 主題 A：暖色生活感（店家基本型） ── */
.ta{background:#F5EDE1;color:#3A2A1F;font-family:var(--sans)}
.ta-nav{display:flex;align-items:center;justify-content:space-between;padding:2.2em 6em}
.ta-logo{font-family:var(--serif);font-size:2.2em;font-weight:900;letter-spacing:.08em}
.ta-nav nav{display:flex;gap:3.2em;font-size:1.35em;color:#6F5B4B}
.ta-btn{display:inline-block;background:#B4552D;color:#FFF6EC;border-radius:99em;padding:.8em 1.8em;font-size:1.3em;font-weight:700}
.ta-hero{display:grid;grid-template-columns:1fr 1fr;gap:5em;align-items:center;padding:3em 6em 6em}
.ta-eye{font-size:1.25em;letter-spacing:.3em;color:#B4552D;text-transform:uppercase}
.ta-hero h4{margin-top:.6em;font-family:var(--serif);font-weight:900;font-size:5.4em;line-height:1.28;letter-spacing:.02em}
.ta-hero p.ta-lead{margin-top:1.4em;font-size:1.55em;color:#6F5B4B;line-height:1.8;max-width:24em}
.ta-acts{display:flex;gap:2em;align-items:center;margin-top:2.4em}
.ta-link{font-size:1.35em;font-weight:700;border-bottom:.12em solid #3A2A1F;padding-bottom:.15em}
.ta-arch{height:42em;border-radius:22em 22em 1.6em 1.6em;overflow:hidden;box-shadow:0 3em 5em -3em rgba(80,45,20,.45)}
.ta-sec{padding:5em 6em;background:#FBF6EE}
.ta-sec h5{font-family:var(--serif);font-size:3em;font-weight:900;display:flex;justify-content:space-between;align-items:baseline}
.ta-sec h5 small{font-family:var(--sans);font-size:.42em;font-weight:500;color:#8A7461}
.ta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6em;margin-top:2.6em}
.ta-card .ta-ph{height:19em;border-radius:1.4em;overflow:hidden}
.ta-card b{display:block;margin-top:1em;font-family:var(--serif);font-size:1.8em}
.ta-card span{display:block;font-size:1.3em;color:#8A7461;margin-top:.2em}
.ta-info{display:grid;grid-template-columns:1fr 1.2fr;gap:4em;padding:5em 6em;background:#3A2A1F;color:#F5EDE1}
.ta-info h5{font-family:var(--serif);font-size:2.8em;font-weight:900}
.ta-info dl{margin-top:2em;display:grid;gap:1.1em;font-size:1.4em}
.ta-info dl div{display:grid;grid-template-columns:6em 1fr;border-bottom:1px solid rgba(245,237,225,.18);padding-bottom:.8em}
.ta-info dt{color:#D9B99A}
.ta-map{border-radius:1.4em;min-height:24em;background:
  linear-gradient(90deg,transparent 48%,rgba(255,255,255,.55) 48% 50%,transparent 50%),
  linear-gradient(0deg,transparent 38%,rgba(255,255,255,.45) 38% 40%,transparent 40%),
  linear-gradient(35deg,transparent 60%,rgba(255,255,255,.35) 60% 61.5%,transparent 61.5%),
  #CDBBA4;position:relative}
.ta-map::after{content:"";position:absolute;left:47%;top:30%;width:2.4em;height:2.4em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#B4552D;box-shadow:0 0 0 .7em rgba(180,85,45,.25)}
.ta-foot{padding:2.2em 6em;background:#2C1F16;color:#A89180;font-size:1.2em;display:flex;justify-content:space-between}

/* ── 主題 B：清爽柔和服務感（預約服務型） ── */
.tb{background:#FBF8F6;color:#4B403E;font-family:var(--sans);font-weight:300}
.tb-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2.2em 6em}
.tb-nav nav{display:flex;gap:2.6em;font-size:1.3em;letter-spacing:.1em}
.tb-logo{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:3.2em;font-weight:500;letter-spacing:.04em;text-align:center}
.tb-nav .tb-cta{justify-self:end;font-size:1.3em;letter-spacing:.1em;border:1px solid #4B403E;padding:.6em 1.5em;border-radius:99em;font-weight:400}
.tb-hero{position:relative;margin:0 6em;height:44em;border-radius:2em;overflow:hidden}
.tb-hero img{object-position:center 40%}
.tb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,248,246,.92) 0%,rgba(251,248,246,.7) 38%,rgba(251,248,246,0) 62%)}
.tb-hero-txt{position:absolute;z-index:2;left:6em;top:50%;transform:translateY(-50%);max-width:36em}
.tb-script{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:2.4em;color:#9C7F77}
.tb-hero h4{margin-top:.3em;font-size:4.4em;font-weight:300;line-height:1.45;letter-spacing:.08em}
.tb-hero p{margin-top:1.2em;font-size:1.45em;line-height:1.9;color:#7A6D6A}
.tb-btn{display:inline-block;margin-top:2.2em;background:#8BA293;color:#fff;border-radius:99em;padding:.9em 2.2em;font-size:1.35em;letter-spacing:.12em;font-weight:500}
.tb-sec{display:grid;grid-template-columns:.9fr 1.1fr;gap:6em;padding:6em 12em;align-items:center}
.tb-ph{height:34em;border-radius:17em 17em 2em 2em;overflow:hidden}
.tb-sec h5{font-size:1.25em;letter-spacing:.35em;color:#9C7F77;font-weight:500}
.tb-sec h6{margin:.4em 0 0;font-size:3em;font-weight:300;letter-spacing:.1em}
.tb-menu{margin-top:2.2em;display:grid;gap:1.3em;font-size:1.5em}
.tb-menu div{display:flex;align-items:baseline;gap:.8em}
.tb-menu div i{flex:1;border-bottom:1px dotted #CDB9B3}
.tb-menu small{display:block;font-size:.78em;color:#9A8E8B}
.tb-book{margin:0 12em 5em;padding:3.4em 4em;background:#F1E6E2;border-radius:2em;color:#4B403E}
.tb-book h6{margin:0;font-size:2em;font-weight:400;letter-spacing:.12em}
.tb-days{display:flex;gap:1em;margin-top:2em}
.tb-days span{flex:1;text-align:center;background:#fff;border-radius:1em;padding:1em 0;font-size:1.3em;line-height:1.5}
.tb-days span b{display:block;font-size:1.6em;font-weight:500}
.tb-days span.on{background:#8BA293;color:#fff}
.tb-times{display:flex;flex-wrap:wrap;gap:.8em;margin-top:1.4em}
.tb-times span{border:1px solid #CDB9B3;border-radius:99em;padding:.5em 1.4em;font-size:1.3em;background:#FBF8F6}
.tb-times span.off{opacity:.4;text-decoration:line-through}
.tb-foot{padding:2.4em 6em;border-top:1px solid #EADBD6;display:flex;justify-content:space-between;font-size:1.2em;color:#9A8E8B}

/* ── 主題 C：深色高質感（品牌形象型） ── */
.tc{background:#0E0E0F;color:#ECE8E1;font-family:'Space Grotesk',var(--sans)}
.tc-nav{display:flex;justify-content:space-between;align-items:center;padding:2.4em 6em;border-bottom:1px solid #26262A}
.tc-logo{font-size:2em;font-weight:700;letter-spacing:.5em}
.tc-nav nav{display:flex;gap:3em;font-size:1.25em;color:#8C877E;letter-spacing:.08em}
.tc-cta{font-size:1.25em;border:1px solid #C9A86A;color:#C9A86A;padding:.6em 1.5em;letter-spacing:.1em}
.tc-hero{display:grid;grid-template-columns:1.15fr .85fr;min-height:52em}
.tc-hero-txt{padding:6em 5em 5em 6em;display:flex;flex-direction:column;justify-content:space-between}
.tc-kick{font-size:1.2em;letter-spacing:.3em;color:#C9A86A}
.tc-hero h4{font-size:8em;font-weight:500;line-height:.98;letter-spacing:-.03em;margin-top:.35em}
.tc-hero h4 em{font-style:normal;color:#C9A86A}
.tc-sub{display:flex;gap:2em;align-items:flex-end;justify-content:space-between;border-top:1px solid #33332F;padding-top:2em}
.tc-sub p{font-family:var(--sans);font-size:1.5em;line-height:1.8;color:#B3ADA3;max-width:22em}
.tc-sub b{font-size:1.3em;letter-spacing:.14em;white-space:nowrap}
.tc-img{position:relative}
.tc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,15,0) 60%,rgba(14,14,15,.8))}
.tc-sec{padding:6em;display:grid;grid-template-columns:repeat(3,1fr);gap:3em;border-top:1px solid #26262A}
.tc-sec div{border-top:1px solid #C9A86A;padding-top:1.6em}
.tc-sec small{font-size:1.2em;color:#C9A86A;letter-spacing:.2em}
.tc-sec b{display:block;margin-top:.7em;font-family:var(--sans);font-size:2em;font-weight:700}
.tc-sec p{margin-top:.7em;font-family:var(--sans);font-size:1.35em;line-height:1.8;color:#8C877E}
.tc-work{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;border-top:1px solid #26262A}
.tc-work-txt{padding:5em 6em}
.tc-work-txt h5{font-size:4em;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.tc-work-txt p{margin-top:1.4em;font-family:var(--sans);font-size:1.4em;color:#8C877E;line-height:1.8}
.tc-work .tc-ph{height:40em;filter:brightness(1.7) contrast(1.1)}
.tc-img img{filter:grayscale(1) contrast(1.08)}
.tc-contact{padding:6em;display:flex;justify-content:space-between;align-items:flex-end;background:#161618}
.tc-contact h5{font-size:6.4em;font-weight:500;letter-spacing:-.03em;line-height:1}
.tc-contact h5 em{font-style:normal;color:#C9A86A}
.tc-contact span{font-family:var(--sans);font-size:1.35em;color:#C9A86A;letter-spacing:.1em}

/* ── 主題 D：極簡專業＋明亮點綴（活動課程型） ── */
.td{background:#F3F0E8;color:#1F2D25;font-family:var(--sans)}
.td-top{background:#2F5D46;color:#F3F0E8;text-align:center;font-size:1.25em;padding:.8em;letter-spacing:.1em}
.td-top b{color:#F2C46B}
.td-nav{display:flex;justify-content:space-between;align-items:center;padding:2.2em 6em}
.td-logo{display:flex;align-items:center;gap:.8em;font-size:2em;font-weight:900;letter-spacing:.06em}
.td-logo i{width:1.3em;height:1.3em;border-radius:50%;background:#E2A93B;box-shadow:.55em 0 0 #D9643A}
.td-nav nav{display:flex;gap:2.8em;font-size:1.35em;font-weight:500}
.td-btn{display:inline-block;background:#1F2D25;color:#F3F0E8;border-radius:.6em;padding:.8em 1.7em;font-size:1.3em;font-weight:700}
.td-hero{display:grid;grid-template-columns:1fr 1fr;gap:5em;padding:3em 6em 5em;align-items:center}
.td-hero h4{font-size:4.9em;font-weight:900;line-height:1.22;letter-spacing:-.01em}
.td-hero h4 span{background:linear-gradient(transparent 62%,#F2C46B 62% 92%,transparent 92%)}
.td-hero p{margin-top:1.3em;font-size:1.5em;color:#4F5C55;line-height:1.85}
.td-facts{display:flex;gap:1em;margin:2em 0 2.4em;flex-wrap:wrap}
.td-facts span{border:1.5px solid #1F2D25;border-radius:99em;padding:.45em 1.2em;font-size:1.25em;font-weight:700}
.td-pic{position:relative;height:44em}
.td-pic .td-ph{position:absolute;inset:0 0 0 4em;border-radius:1.6em;overflow:hidden}
.td-badge{position:absolute;left:0;bottom:4em;background:#fff;border-radius:1.2em;padding:1.4em 1.8em;box-shadow:0 2em 3em -2em rgba(31,45,37,.4);font-size:1.25em;line-height:1.5}
.td-badge b{display:block;font-size:1.5em;color:#D9643A}
.td-sec{padding:5em 6em;background:#FFFDF8}
.td-sec h5{font-size:3em;font-weight:900;display:flex;justify-content:space-between;align-items:baseline}
.td-sec h5 small{font-size:.42em;font-weight:500;color:#6A756F}
.td-rows{margin-top:2.4em;border-top:2px solid #1F2D25}
.td-row{display:grid;grid-template-columns:8em 1fr 11em 10em;gap:2em;align-items:center;padding:1.8em 0;border-bottom:1px solid #DAD5C8}
.td-date{font-family:'Space Grotesk',sans-serif;line-height:1.1}
.td-date b{display:block;font-size:3.2em;font-weight:700}
.td-date small{font-size:1.2em;color:#6A756F;letter-spacing:.14em}
.td-row h6{margin:0;font-size:1.9em;font-weight:700}
.td-row p{font-size:1.3em;color:#6A756F}
.td-st{justify-self:start;font-size:1.25em;font-weight:700;padding:.35em 1em;border-radius:99em;background:#DDEBE2;color:#2F5D46}
.td-st.few{background:#FBE3D3;color:#B34A22}
.td-st.full{background:#E6E3DC;color:#8A8F8B}
.td-row .td-btn{text-align:center}
.td-row .td-btn.off{background:#CFCBC1;color:#fff}
.td-gal{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:2em;padding:0 6em 5em;background:#FFFDF8}
.td-gal .td-g{height:22em;border-radius:1.2em;overflow:hidden}
.td-gal .td-q{background:#2F5D46;color:#F3F0E8;border-radius:1.2em;padding:2.4em;font-size:1.4em;line-height:1.8}
.td-gal .td-q b{display:block;font-size:1.4em;margin-bottom:.5em;color:#F2C46B}
.td-foot{padding:2.2em 6em;background:#1F2D25;color:#A9B5AE;font-size:1.2em;display:flex;justify-content:space-between}

/* ── 手機版示意共用 ── */
.m-pad{padding:0 7em}
.m-nav{display:flex;justify-content:space-between;align-items:center;padding:10em 7em 5em}
.m-burger{width:7em;height:5em;background:linear-gradient(currentColor 0 0) 0 0/100% .8em no-repeat,linear-gradient(currentColor 0 0) 0 50%/100% .8em no-repeat,linear-gradient(currentColor 0 0) 0 100%/70% .8em no-repeat}
.m-img{height:95em;overflow:hidden}
.m-h{font-size:12em;line-height:1.3}
.m-p{font-size:5.4em;line-height:1.75}
.m-btn{display:block;text-align:center;font-size:5.4em;padding:.8em 0;border-radius:99em;margin-top:1.2em;font-weight:700}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.chip{font-size:.76rem;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.22rem .65rem;color:var(--ink-2)}
.chip b{color:var(--carrot);font-weight:700;margin-left:.25rem}
@media (max-width:1080px){.th-panel{grid-template-columns:1fr}.ph{right:.4rem}}
@media (max-width:820px){.th-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.th-tab{padding:.7rem .75rem;gap:.55rem}.th-tab .sw{width:26px;height:26px}.th-tab small{display:none}.ph{width:34%;right:-.2rem;bottom:-.4rem}.th-stage{padding-bottom:3.4rem}.th-hint{padding-right:36%}}