/* 基礎變數 */
:root { --c-bg:#050504; --c-panel:#0d0c0b; --c-panel-2:#15110e; --c-line:#6f3a19; --c-orange:#de641e; --c-orange-2:#ff8b3b; --c-gold:#e6b66d; --c-text:#f7efe6; --c-muted:#b9aa9b; --shadow:0 24px 70px rgba(0,0,0,.5); --font-en:"Arial Black",Impact,sans-serif; --font-script:"Brush Script MT","Segoe Script","Lucida Handwriting",cursive; --radius:4px; }
/* 全域 */
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; color:var(--c-text); background:radial-gradient(circle at 62% 6%,rgba(222,100,30,.16),transparent 20%),linear-gradient(180deg,#090807,#050504); font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; line-height:1.65; letter-spacing:0; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.9)),url("../img/bg-black-wood-ai.jpg") center/cover fixed; opacity:.9; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.reveal-mock { opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; }
.reveal-mock.is-visible { opacity:1; transform:translateY(0); }
/* 頁首 */
.mock-header { position:fixed; z-index:40; top:0; left:0; right:0; height:78px; display:flex; align-items:center; gap:34px; padding:0 clamp(28px,6vw,92px); background:rgba(5,5,4,.56); border-bottom:1px solid rgba(230,182,109,.08); backdrop-filter:blur(12px); }
.mock-header.is-scrolled { background:rgba(5,5,4,.92); border-color:rgba(230,182,109,.22); }
.mock-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.mock-brand img { width:180px; height:58px; object-fit:contain; object-position:left center; }
.mock-brand-text { color:var(--c-muted); font-size:.82rem; font-weight:800; white-space:nowrap; opacity:.95; }
.brand-mark { width:44px; height:44px; display:inline-flex; color:var(--c-orange-2); }
.mock-brand strong,.footer-brand strong { display:block; font-size:1.72rem; line-height:1; letter-spacing:.08em; font-weight:900; }
.mock-brand small,.footer-brand small { display:block; color:var(--c-muted); font-size:.62rem; letter-spacing:.22em; }
.mock-nav { display:flex; justify-content:center; gap:36px; flex:1; font-size:.98rem; font-weight:800; }
.mock-nav a { position:relative; color:var(--c-text); padding:26px 0; opacity:.92; }
.mock-nav a::after { content:""; position:absolute; left:0; right:0; bottom:17px; height:2px; background:var(--c-orange); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.mock-nav a:hover,.mock-nav a.active { color:var(--c-orange-2); }
.mock-nav a:hover::after,.mock-nav a.active::after { transform:scaleX(1); }
.mock-order-btn { color:#fff; background:#06c755; border-radius:var(--radius); padding:11px 24px; font-weight:900; white-space:nowrap; }
.mock-order-btn:hover { color:#fff; background:#08d960; }
.mock-nav-toggle { display:none; margin-left:auto; color:var(--c-text); background:transparent; border:1px solid rgba(230,182,109,.28); border-radius:var(--radius); padding:9px 12px; }
/* 主視覺 */
.mock-hero { min-height:100vh; padding:118px clamp(28px,6vw,92px) 34px; display:grid; grid-template-columns:minmax(300px,460px) 1fr; gap:28px; align-items:center; position:relative; overflow:hidden; border-bottom:1px solid rgba(222,100,30,.24); }
.hero-copy { position:relative; z-index:2; }
.hero-stack { margin:0 0 10px; font-family:var(--font-en); font-size:clamp(4.8rem,8vw,7.6rem); line-height:.9; letter-spacing:0; text-transform:uppercase; }
.hero-stack span { display:block; color:#f4f0e9; text-shadow:0 8px 28px rgba(0,0,0,.48); }
.hero-stack span:nth-child(2) { color:var(--c-orange-2); }
.hero-copy h1 { margin:4px 0 0; font-size:3.7rem; font-weight:950; letter-spacing:.18em; }
.hero-subtitle { display:flex; align-items:center; gap:18px; margin:8px 0; color:var(--c-orange-2); font-size:1.22rem; font-weight:900; letter-spacing:.12em; }
.hero-subtitle::after { content:""; width:110px; height:1px; background:var(--c-line); }
.hero-desc { margin:0 0 22px; color:#fff; font-weight:800; }
.hero-actions { display:flex; gap:14px; }
.mock-btn { min-width:132px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius); padding:10px 20px; font-weight:900; border:1px solid var(--c-line); }
.mock-btn.primary { background:var(--c-orange); border-color:var(--c-orange); color:#fff; }
.mock-btn.ghost { background:rgba(0,0,0,.25); color:var(--c-text); }
.hero-visual { position:absolute; inset:0; z-index:1; min-height:0; display:block; pointer-events:none; }
.hero-photo { width:100%; height:100%; border-radius:0; transform:none; }
.hero-photo-real { overflow:hidden; border:0; box-shadow:none; background:#090807; }
.hero-photo-real img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero-note { display:none; }
/* 假照片 */
.fake-photo { position:relative; overflow:hidden; background:radial-gradient(circle at 50% 32%,rgba(255,139,59,1),rgba(222,100,30,.72) 26%,rgba(44,28,18,.9) 56%,rgba(6,6,5,.96) 78%),linear-gradient(135deg,#241711,#060504); border:1px solid rgba(222,100,30,.42); box-shadow:var(--shadow); }
.fake-photo::before { content:""; position:absolute; inset:10%; border:1px dashed rgba(255,255,255,.18); border-radius:inherit; }
.fake-photo::after { content:""; position:absolute; inset:-20%; background:repeating-linear-gradient(45deg,transparent 0 18px,rgba(255,255,255,.035) 19px 20px); }
.fake-photo span { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.42); font-family:var(--font-en); font-size:1.1rem; letter-spacing:.28em; }
.alt-a { background:radial-gradient(circle at 46% 35%,rgba(188,94,64,.95),rgba(75,45,30,.76) 34%,rgba(7,7,6,.96) 72%); }
.alt-b { background:radial-gradient(circle at 48% 36%,rgba(255,139,59,.9),rgba(210,128,56,.58) 30%,rgba(9,8,7,.96) 74%); }
.alt-c { background:radial-gradient(circle at 52% 38%,rgba(255,93,74,.82),rgba(139,48,34,.68) 32%,rgba(8,7,6,.96) 74%); }
/* 共用區塊 */
.mock-section { max-width:1220px; margin:0 auto; padding:52px clamp(20px,4vw,52px); }
.section-title { text-align:center; margin:0 0 18px; }
.section-script { margin:0; color:var(--c-orange-2); font-family:var(--font-script); font-size:2.1rem; line-height:1; }
.section-title h2 { margin:-2px 0 0; color:#fff; font-size:clamp(2.1rem,4.5vw,4.1rem); font-weight:950; line-height:1.2; text-shadow:0 10px 32px rgba(0,0,0,.46); }
/* 關於 */
.mock-about { display:grid; grid-template-columns:minmax(300px,500px) 1fr; gap:48px; align-items:center; }
.about-photo { position:relative; padding:28px 0 0 32px; }
.about-photo-card { position:relative; }
.about-main-img { width:100%; height:auto; display:block; object-fit:contain; border:1px solid rgba(222,100,30,.42); box-shadow:var(--shadow); }
.quality-stamp { position:absolute; left:-24px; bottom:-26px; width:188px; height:164px; display:flex; align-items:center; justify-content:center; transform:rotate(-12deg); }
.quality-stamp img { width:100%; height:100%; display:block; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(0,0,0,.58)); }
.about-copy h2 { margin:0 0 8px; color:#fff; font-size:clamp(2.1rem,4.5vw,4.1rem); font-weight:950; line-height:1.2; text-shadow:0 10px 32px rgba(0,0,0,.46); }
.about-copy > p:not(.section-script) { color:var(--c-muted); max-width:620px; margin:0 0 26px; }
.icon-row { display:grid; grid-template-columns:repeat(4,minmax(90px,1fr)); gap:18px; }
.icon-item { text-align:center; color:var(--c-text); font-weight:800; }
.icon-item b { display:block; white-space:nowrap; font-size:.92rem; }
.ai-icon { width:82px; height:82px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:8px; }
.ai-icon img { width:100%; height:100%; display:block; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.48)); }
/* 菜單 */
.menu-board { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--c-line); background:rgba(0,0,0,.32); }
.menu-card { padding:16px 18px 20px; border-right:1px solid rgba(111,58,25,.72); text-align:center; }
.menu-card:last-child { border-right:0; }
.menu-photo { height:150px; margin-bottom:10px; overflow:hidden; box-shadow:none; background:#080706; }
.menu-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.menu-card h3 { margin:0 0 4px; font-size:1.22rem; font-weight:950; }
.menu-card h3 small { display:block; color:var(--c-muted); font-size:.78rem; font-weight:800; letter-spacing:0; }
.menu-card p { min-height:46px; margin:0; color:var(--c-muted); font-size:.92rem; }
.menu-card strong { display:block; margin-top:8px; color:var(--c-orange-2); font-size:1.3rem; letter-spacing:.06em; }
.menu-card small { color:var(--c-text); font-size:.8rem; }
.recommend-board { max-width:860px; margin:0 auto; grid-template-columns:repeat(2,1fr); }
.price-board { grid-template-columns:repeat(5,1fr); }
.price-card { padding:16px 14px 22px; }
.price-card h3 { color:#fff; font-size:1.42rem; }
.price-card strong { font-size:1.65rem; }
.cake-price-section { padding-top:24px; }
.cake-price-board .price-card { min-height:166px; display:flex; flex-direction:column; justify-content:center; }
.price-note { max-width:900px; margin:18px auto 0; padding:18px 22px; border:1px solid rgba(111,58,25,.72); background:rgba(0,0,0,.32); text-align:center; }
.price-note p { margin:0; color:#f4eadf; font-weight:900; }
.price-note p + p { margin-top:4px; color:var(--c-muted); font-weight:800; }
/* 相簿 */
.mock-gallery { max-width:1230px; margin:0 auto; padding:8px clamp(20px,4vw,52px) 42px; text-align:center; }
.mock-gallery h2 { margin:0 0 14px; font-size:clamp(2.1rem,4.5vw,4.1rem); font-weight:950; line-height:1.2; text-shadow:0 10px 32px rgba(0,0,0,.46); }
.gallery-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:start; }
.gallery-photo { height:auto; margin:0; overflow:visible; border:1px solid rgba(222,100,30,.35); box-shadow:none; background:#080706; }
.gallery-photo img { width:100%; height:auto; display:block; object-fit:contain; transition:filter .35s ease; }
.gallery-photo:hover img { filter:saturate(1.12); }
.play-card { padding:0; color:#fff; cursor:pointer; }
.play-mark { position:absolute; z-index:3; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%); }
/* 影片 */
.mock-video { padding-top:18px; }
.video-shell { max-width:980px; margin:0 auto; border:1px solid var(--c-line); background:#000; box-shadow:var(--shadow); }
.video-shell video { width:100%; aspect-ratio:16/9; display:block; object-fit:cover; background:#000; }
/* 流程 */
.steps-board { display:grid; grid-template-columns:repeat(5,1fr); gap:0; padding:18px 18px 20px; border:1px solid var(--c-line); background:rgba(0,0,0,.28); }
.step-card { position:relative; text-align:center; padding:0 12px; }
.step-card:not(:last-child)::after { content:""; position:absolute; right:-20px; top:42px; width:40px; border-top:2px dotted var(--c-orange); }
.step-icon { width:76px; height:76px; display:inline-flex; padding:17px; color:#fff; border:1px solid var(--c-line); border-radius:50%; }
.step-card b { display:block; color:var(--c-orange-2); font-size:1.42rem; line-height:1; margin-top:8px; }
.step-card h3 { margin:2px 0; font-size:1.1rem; font-weight:950; }
.step-card p { margin:0; color:var(--c-muted); font-size:.86rem; }
/* 評價 */
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.review-grid article { padding:20px 24px; border:1px solid var(--c-line); border-radius:10px; background:rgba(0,0,0,.28); text-align:center; }
.stars { color:#ffc247; letter-spacing:.12em; }
.review-grid p { margin:8px 0; color:#f0e8df; }
.review-grid span { color:var(--c-muted); }
/* FAQ與地圖 */
.section-desc { margin:8px auto 0; max-width:760px; color:var(--c-muted); }
.faq-list { max-width:920px; margin:0 auto; display:grid; gap:12px; }
.faq-list details { border:1px solid rgba(111,58,25,.72); background:rgba(0,0,0,.32); padding:16px 18px; }
.faq-list summary { cursor:pointer; color:#fff; font-weight:950; }
.faq-list p { margin:10px 0 0; color:var(--c-muted); }
.map-layout { display:grid; grid-template-columns:1.4fr .8fr; gap:24px; align-items:stretch; }
.map-frame { min-height:360px; border:1px solid rgba(222,100,30,.42); background:#050504; overflow:hidden; }
.map-frame iframe { width:100%; height:100%; display:block; border:0; filter:saturate(.9) contrast(1.05) brightness(.86); }
.map-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; padding:28px; border:1px solid rgba(111,58,25,.72); background:rgba(0,0,0,.32); }
.map-card > i { color:var(--c-orange-2); font-size:2rem; }
.map-card h3 { margin:0; color:#fff; font-size:1.35rem; font-weight:950; }
.map-card p { margin:0; color:var(--c-muted); }
.map-card .mock-btn { gap:8px; }
.mock-btn.line-cta { background:#06c755; border-color:#06c755; color:#fff; }
.mock-btn.line-cta:hover { background:#08d960; border-color:#08d960; color:#fff; }
.map-open-link { display:inline-flex; align-items:center; gap:8px; color:var(--c-orange-2); font-weight:900; }
/* 頁尾 */
.mock-footer { max-width:none; margin:0; padding:52px clamp(22px,6vw,88px) 42px; display:block; border-top:1px solid rgba(111,58,25,.72); background:linear-gradient(rgba(3,6,11,.86),rgba(3,6,11,.94)),url("../img/footer-japanese-map.jpg") center/cover no-repeat #060b15; }
.footer-brand-row { max-width:1250px; margin:0 auto 34px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.1); text-align:center; }
.footer-brand-link { width:500px; max-width:100%; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.footer-brand-link img { width:500px; height:auto; max-width:100%; display:block; object-fit:contain; }
.footer-brand-link span { color:var(--c-muted); font-size:.92rem; font-weight:900; white-space:nowrap; text-align:center; }
.footer-columns { max-width:1250px; margin:0 auto; display:grid; grid-template-columns:.75fr 1.05fr 1.2fr; gap:clamp(28px,5vw,78px); padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.13); }
.footer-col h2 { margin:0 0 20px; color:var(--c-orange-2); font-size:1.05rem; font-weight:950; }
.footer-link-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer-link-list li { display:flex; align-items:center; gap:12px; color:#9aa3b2; }
.footer-link-list i { width:21px; color:#8e98a8; text-align:center; }
.footer-link-list a,.footer-address,.hours-group p { color:#9aa3b2; }
.line-link i,.line-link a { color:#06c755; }
.hours-group { margin:0 0 16px; }
.hours-group b { display:block; color:#f3eadf; font-size:.98rem; margin-bottom:3px; }
.hours-group p { margin:0; line-height:1.55; }
.footer-address { margin:0 0 10px; }
.footer-follow-title { margin-top:22px !important; }
.footer-social-icons { display:flex; align-items:center; gap:18px; }
.footer-social-icons a { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.04); }
.footer-social-icons a:hover,.footer-link-list a:hover { color:var(--c-orange-2); }
.footer-visitor-stats { max-width:1250px; margin:24px auto 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; color:#9aa3b2; font-size:.86rem; }
.visitor-stat-title { color:var(--c-orange-2); font-weight:950; }
.footer-visitor-stats .visitor-stat { min-height:31px; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.045); color:#9aa3b2; text-decoration:none; }
.footer-visitor-stats .visitor-stat-primary { border-color:rgba(219,132,57,.38); background:rgba(219,132,57,.12); }
.footer-visitor-stats strong { color:#f3eadf; }
.footer-visitor-stats a.visitor-stat:hover { color:var(--c-orange-2); border-color:rgba(219,132,57,.58); }
.footer-copy { max-width:1250px; margin:28px auto 0; color:#9aa3b2; font-size:.92rem; text-align:center; }
/* 平板 */
@media (max-width:1040px) {
.mock-header { padding:0 24px; gap:18px; }
.mock-nav { gap:18px; }
.mock-hero { grid-template-columns:1fr; min-height:auto; }
.hero-visual { min-height:420px; }
.hero-photo { height:420px; }
.mock-about { grid-template-columns:1fr; }
.menu-board,.gallery-grid,.price-board { grid-template-columns:repeat(2,1fr); }
.steps-board { grid-template-columns:1fr; gap:18px; }
.step-card:not(:last-child)::after { display:none; }
.review-grid { grid-template-columns:1fr; }
.map-layout { grid-template-columns:1fr; }
.footer-columns { grid-template-columns:1fr; gap:30px; }
}
/* 手機 */
@media (max-width:720px) {
.mock-header { height:70px; padding:0 16px; gap:12px; }
.mock-brand { min-width:auto; }
.mock-brand img { width:142px; height:48px; }
.mock-brand-text { font-size:.72rem; }
.brand-mark { width:36px; height:36px; }
.mock-nav-toggle { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; padding:0; }
.mock-nav-toggle span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.mock-order-btn { display:none; }
.mock-nav { position:absolute; top:100%; left:12px; right:12px; display:none; flex-direction:column; gap:0; background:rgba(5,5,4,.98); border:1px solid var(--c-line); padding:8px; }
.mock-nav.is-open { display:flex; }
.mock-nav a { padding:10px 12px; }
.mock-nav a::after { display:none; }
.mock-hero { padding:96px 18px 34px; }
.hero-stack { font-size:4rem; }
.hero-copy h1 { font-size:2.5rem; }
.hero-actions { flex-direction:column; }
.hero-visual { min-height:300px; }
.hero-photo { height:300px; }
.hero-note { right:2%; bottom:12%; font-size:2rem; }
.mock-section { padding:42px 18px; }
.icon-row,.menu-board,.gallery-grid,.price-board { grid-template-columns:1fr; }
.menu-card { border-right:0; border-bottom:1px solid rgba(111,58,25,.72); }
.menu-card:last-child { border-bottom:0; }
.gallery-photo { height:auto; }
.section-title h2,.mock-gallery h2 { font-size:1.65rem; }
.about-main-img { height:auto; }
.quality-stamp { left:-16px; bottom:-22px; width:136px; height:120px; }
.footer-brand-link img { width:500px; height:auto; max-width:100%; }
.footer-brand-link span { font-size:.78rem; }
.map-frame { min-height:280px; }
}
/* 小螢幕 */
@media (max-width:380px) {
.mock-brand img { width:124px; height:44px; }
.mock-brand-text { font-size:.66rem; }
}