/* 一頁式飯店官網 Demo（虛構）— 共用版型，各店以 body[data-store] 換主題 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
:root{--ink:#1d2733;--bg:#fff;--card:#fff;--line:#e3e7ec;--accent:#0b7a8f;--accent2:#e8f6f8;--hero1:#0b7a8f;--hero2:#59c3d3;--heroInk:#fff;--radius:14px}
body[data-store=A]{--ink:#123040;--bg:#f3fafb;--accent:#0a7f95;--accent2:#dff4f7;--hero1:#06627a;--hero2:#4fc6d8;--radius:18px}
body[data-store=B]{--ink:#ece7dc;--bg:#17181b;--card:#222327;--line:#3a3a3f;--accent:#d4af62;--accent2:#2c2a24;--hero1:#101114;--hero2:#3a3326;--heroInk:#f3e6c4;--radius:4px}
body[data-store=C]{--ink:#4a3426;--bg:#fff8ef;--card:#fff;--line:#f1dcc4;--accent:#e0743c;--accent2:#ffeede;--hero1:#ffb36b;--hero2:#ff8fa3;--heroInk:#4a2416;--radius:22px}
body[data-store=D]{--ink:#20352c;--bg:#f2f5f1;--card:#fff;--line:#d6e0d6;--accent:#3f7a5c;--accent2:#e3eee6;--hero1:#2f5b4a;--hero2:#9cbfae;--radius:10px}
body[data-store=E]{--ink:#14223a;--bg:#f4f6fa;--card:#fff;--line:#d9dfea;--accent:#1f4fa3;--accent2:#e6edf9;--hero1:#0d1f45;--hero2:#2a5bb8;--radius:6px}
body[data-store=B] .sec h2,body[data-store=B] .brand{font-family:"Noto Serif TC","Songti TC",serif;letter-spacing:.08em}
body[data-store=D] .sec h2{font-family:"Noto Serif TC","Songti TC",serif}
body[data-store=E] .sec h2{text-transform:uppercase;letter-spacing:.04em}
body[data-store=C] .room{border-width:2px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 18px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:18px;color:var(--ink);text-decoration:none}
.brand small{font-weight:500;font-size:12px;color:var(--accent);margin-left:6px}
.topbar nav{margin-left:auto;display:flex;gap:14px;font-size:14px}
.topbar nav a{color:var(--ink);text-decoration:none;opacity:.85}
.topbar nav a:hover{color:var(--accent)}
.hero{position:relative;min-height:440px;display:flex;align-items:flex-end;color:var(--heroInk);background:linear-gradient(135deg,var(--hero1),var(--hero2));overflow:hidden}
.hero svg.art{position:absolute;inset:0;width:100%;height:100%}
.hero .in{position:relative;padding:40px 22px 46px;max-width:1080px;margin:0 auto;width:100%}
.hero .kicker{display:inline-block;font-size:13px;letter-spacing:.1em;border:1px solid currentColor;border-radius:99px;padding:2px 12px;opacity:.9}
.hero h1{font-size:clamp(30px,6vw,54px);line-height:1.2;margin:12px 0 8px}
.hero p{font-size:clamp(15px,2.2vw,18px);max-width:620px;margin:0 0 18px;opacity:.95}
.hero .cta{display:inline-block;background:var(--heroInk);color:var(--hero1);font-weight:700;padding:10px 20px;border-radius:var(--radius);text-decoration:none;border:0;cursor:pointer;font-size:15px}
body[data-store=B] .hero .cta{background:var(--accent);color:#16130b}
.hero .cta.ghost{background:transparent;color:var(--heroInk);border:1px solid currentColor;margin-left:8px}
.fact{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:13.5px;opacity:.92}
main{max-width:1080px;margin:0 auto;padding:0 18px}
.sec{padding:44px 0 8px}
.sec h2{font-size:26px;margin:0 0 4px}
.sec .lead{margin:0 0 18px;opacity:.75}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.room,.fac,.info{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.room .pic{height:130px;position:relative}
.room .pic svg{width:100%;height:100%;display:block}
.room .bd{padding:14px 16px 16px}
.room h3{margin:0 0 2px;font-size:18px}
.room .price{font-size:22px;font-weight:800;color:var(--accent)}
.room .price small{font-size:12px;font-weight:500;opacity:.75;color:var(--ink)}
.room .meta{font-size:13.5px;opacity:.85;margin:4px 0 0}
.fac{padding:14px 16px}
.fac h3{margin:0 0 4px;font-size:16px;display:flex;gap:8px;align-items:center}
.fac .ico{width:30px;height:30px;border-radius:50%;background:var(--accent2);display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.fac p{margin:2px 0;font-size:13.5px;opacity:.88}
.notoffer{margin:14px 0 0;font-size:13.5px;padding:10px 14px;border-radius:var(--radius);background:var(--accent2)}
.info{padding:16px 18px}
.info dl{margin:0;display:grid;grid-template-columns:7.5em 1fr;gap:8px 12px;font-size:14.5px}
.info dt{font-weight:700;color:var(--accent)}
.info dd{margin:0}
.map{height:180px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-bottom:14px}
.map svg{width:100%;height:100%;display:block}
footer{margin-top:50px;padding:26px 18px 90px;text-align:center;font-size:13px;border-top:1px solid var(--line);opacity:.85}
footer .fict{font-weight:800;font-size:15px;color:var(--accent)}
/* 客服泡泡 */
.bubble{position:fixed;right:18px;bottom:18px;z-index:50;width:62px;height:62px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:26px;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer}
body[data-store=B] .bubble{color:#16130b}
.bubble .dot{position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;background:#2ecc71;border:2px solid #fff}
.chat{position:fixed;right:18px;bottom:92px;z-index:60;width:370px;max-width:calc(100vw - 24px);height:540px;max-height:calc(100vh - 120px);background:#fff;color:#1d2733;border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.chat[hidden]{display:none}
.chat header{background:var(--hero1);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px}
body[data-store=C] .chat header{color:#4a2416;background:var(--hero1)}
.chat header b{font-size:15px}
.chat header small{display:block;font-size:11.5px;opacity:.85}
.chat header button{margin-left:auto;background:transparent;border:0;color:inherit;font-size:22px;cursor:pointer}
.chat .log{flex:1;overflow:auto;padding:12px;background:#f6f7f9;display:flex;flex-direction:column;gap:8px}
.m{max-width:86%;padding:8px 11px;border-radius:12px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.m.u{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
body[data-store=B] .m.u{color:#16130b}
body[data-store=C] .m.u{background:#e0743c}
.m.b{align-self:flex-start;background:#fff;border:1px solid #e3e7ec;border-bottom-left-radius:4px}
.m.b .who{display:block;font-size:11px;color:#6b7684;margin-bottom:2px}
.m.sys{align-self:center;background:transparent;color:#6b7684;font-size:12px;padding:2px}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0;background:#fff;border-top:1px solid #e3e7ec}
.chips button{font-size:12.5px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 10px;cursor:pointer;color:#1d2733}
.chat form{display:flex;gap:6px;padding:8px 10px 10px;background:#fff}
.chat input{flex:1;font-size:15px;padding:9px 10px;border:1px solid #cfd6de;border-radius:10px}
.chat form button{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:0 14px;font-weight:700;cursor:pointer}
body[data-store=B] .chat form button{color:#16130b}
.chat .note{font-size:11px;color:#6b7684;text-align:center;padding:0 10px 8px;background:#fff}
@media (max-width:640px){
  .topbar nav{display:none}
  .hero{min-height:380px}
  .info dl{grid-template-columns:1fr;gap:2px}
  .info dd{margin-bottom:8px}
  .chat{right:0;left:0;bottom:0;width:100%;max-width:none;height:78vh;max-height:none;border-radius:16px 16px 0 0}
  .chat:not([hidden])~.bubble{display:none}
}