/* ===== 日日嶼木 I’S DAY — 全站樣式 ===== */
:root{
  --bg:#F7F4EF; --ink:#2E2B26; --primary:#5A4634; --accent:#8B6F52;
  --gold:#C8A87C; --line:#EAE3D6; --line2:#E7DFD2; --sand:#F2EDE4;
  --sub:#6B655B; --muted:#A79C8B; --field:#FDFCFA; --fieldline:#D8CDBA;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans TC',sans-serif;font-size:15px;line-height:1.7;}
a{color:var(--primary);text-decoration:none;cursor:pointer}
a:hover{color:var(--accent)}
input,select,textarea,button{font-family:'Noto Sans TC',sans-serif}
img{max-width:100%}
@keyframes pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.serif{font-family:'Noto Serif TC',serif}
.kicker{margin:0 0 8px;font-size:12px;letter-spacing:4px;color:var(--accent)}
.pg-title{font-family:'Noto Serif TC',serif;font-size:34px;font-weight:600;margin:0 0 44px;letter-spacing:3px}
.sec-title{font-family:'Noto Serif TC',serif;font-size:30px;font-weight:600;margin:0 0 30px;letter-spacing:2px}
.sub-title{font-family:'Noto Serif TC',serif;font-size:24px;font-weight:600;margin:0 0 30px;letter-spacing:2px}

/* 按鈕 */
.btn{border-radius:8px;cursor:pointer;letter-spacing:2px;font-size:14px;border:none;transition:box-shadow .2s,background .2s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{box-shadow:0 4px 14px rgba(90,70,52,.35)}
.btn-ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-ghost:hover{background:#EFE9DE}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{box-shadow:0 4px 14px rgba(0,0,0,.25)}
.btn-lg{padding:13px 30px;font-size:15px}
.btn-xl{padding:14px 40px;font-size:16px;letter-spacing:3px}
.btn-sm{padding:7px 12px;font-size:12px;letter-spacing:0}

/* 卡片與佔位圖 */
.card{background:#fff;border:1px solid var(--line);border-radius:8px}
.hov{transition:box-shadow .25s}
.hov:hover{box-shadow:0 6px 22px rgba(46,43,38,.1)}
.ph{position:relative;background:repeating-linear-gradient(45deg,#EDE7DC,#EDE7DC 12px,#E3DACA 12px,#E3DACA 24px)}
.ph-lg{background:repeating-linear-gradient(45deg,#EDE7DC,#EDE7DC 14px,#E3DACA 14px,#E3DACA 28px)}
.ph-label{position:absolute;bottom:10px;left:12px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--accent)}
.ph-label.top{bottom:auto;top:14px;left:16px}
.tag{font-size:11px;border:1px solid var(--fieldline);color:var(--accent);border-radius:8px;padding:2px 10px;white-space:nowrap}

/* 表單 */
.field{padding:12px 14px;border:1px solid var(--fieldline);border-radius:8px;font-size:14px;background:var(--field);color:var(--ink);width:100%}
textarea.field{resize:vertical}

/* 導覽列 */
header.site{position:sticky;top:0;z-index:60;background:rgba(247,244,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.nav-inner{max-width:1180px;margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;gap:28px}
.brand{cursor:pointer;display:flex;align-items:center;gap:10px}
.brand img{height:40px;display:block}
.brand .zh{font-family:'Noto Serif TC',serif;font-size:21px;font-weight:600;letter-spacing:2px;line-height:1}
.brand .en{font-size:10px;letter-spacing:3px;color:var(--accent)}
nav.main{display:flex;gap:26px;margin-left:auto;align-items:center}
nav.main a{font-size:14px;letter-spacing:1px}
.nav-cta{display:flex;align-items:center;gap:14px}
.cart-btn{cursor:pointer;position:relative;padding:6px;background:none;border:none}
.cart-badge{position:absolute;top:-2px;right:-4px;background:var(--primary);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px}
.mobile-nav{display:none}

/* 提示 */
.toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:80;background:var(--primary);color:var(--bg);padding:9px 22px;border-radius:8px;font-size:13px;letter-spacing:1px;animation:fadeUp .25s ease}

/* 網格 */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* 首頁 */
.hero{margin-top:0;position:relative;height:540px;display:flex;align-items:center;justify-content:center}
.hero-card{text-align:center;background:rgba(247,244,239,.85);padding:44px 60px;border-radius:8px;max-width:800px;margin:0 20px}
.hero-card h1{font-family:'Noto Serif TC',serif;font-size:42px;font-weight:600;margin:0 0 14px;letter-spacing:3px}
.hero-card p{margin:0 0 28px;color:var(--sub);font-size:16px;letter-spacing:1px}
.trust{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--sand)}
.trust-grid{max-width:1180px;margin:0 auto;padding:26px 28px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.trust-item{display:flex;align-items:center;gap:14px;justify-content:center}
.trust-ico{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Noto Serif TC',serif;font-size:17px;flex:none}
.work-tile{position:relative;cursor:pointer;height:300px;border-radius:8px;overflow:hidden}
.work-ol{position:absolute;inset:0;background:rgba(46,43,38,.55);color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;transition:opacity .25s}
.work-tile:hover .work-ol{opacity:1}

/* 服務流程 */
.steps{display:flex;align-items:flex-start;gap:8px}
.step{flex:1;display:flex;align-items:flex-start;gap:8px}
.step-num{width:46px;height:46px;border-radius:50%;background:var(--primary);color:var(--bg);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-family:'Noto Serif TC',serif;font-size:17px}
.step-arrow{color:var(--gold);font-size:20px;margin-top:12px}

/* 作品集 */
.masonry{column-count:3;column-gap:20px}
.masonry>div{break-inside:avoid;margin-bottom:20px}
.pill{border:1px solid var(--fieldline);border-radius:8px;padding:8px 20px;font-size:13px;letter-spacing:1px;cursor:pointer;background:#fff;color:var(--sub)}
.pill.on{background:#3E4A3D;color:#fff;border-color:#3E4A3D}
.pill-sm{padding:6px 16px;font-size:12px}

/* 商店 */
.shop-grid{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start}
.side-btn{text-align:left;border:none;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;background:transparent;color:var(--sub);width:100%}
.side-btn.on{background:#3E4A3D;color:#fff}
.addon{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:11px 16px;cursor:pointer;font-size:14px}
.addon.on{border-color:#3E4A3D;background:#F4F1E9}
.addon input{accent-color:var(--primary);width:16px;height:16px}
.qty-box{display:flex;align-items:center;border:1px solid var(--fieldline);border-radius:8px;background:#fff}
.qty-box button{border:none;background:transparent;padding:8px 14px;font-size:16px;cursor:pointer;color:var(--accent)}
.ptab{border:none;background:transparent;padding:12px 26px;font-size:14px;letter-spacing:1px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}
.ptab.on{color:#3E4A3D;border-bottom-color:#3E4A3D}
.opt-btn{flex:1;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:14px;font-size:14px;cursor:pointer;text-align:left}
.opt-btn.on{border-color:#3E4A3D;background:#F4F1E9}

/* FAQ */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:8px}
.faq-q{cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 22px}
.faq-a{margin:0;padding:14px 22px 18px;color:var(--sub);font-size:14px;border-top:1px solid var(--sand)}

/* Footer */
footer.site{background:var(--primary);color:#E9E4D8;margin-top:0}
.foot-grid{max-width:1180px;margin:0 auto;padding:52px 28px 40px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.foot-label{margin:0 0 12px;font-size:12px;letter-spacing:2px;color:var(--gold)}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{height:58px;width:auto;display:block}
.foot-brand .zh{font-family:'Noto Serif TC',serif;font-size:20px;letter-spacing:3px;color:#E9E4D8;white-space:nowrap}
.foot-brand .en{font-size:10px;letter-spacing:3px;color:var(--gold);white-space:nowrap}
.foot-bottom{border-top:1px solid rgba(233,228,216,.15);text-align:center;padding:16px;font-size:12px;color:#A08D75}

/* LINE 浮動按鈕 */
.line-fab{position:fixed;right:26px;bottom:26px;z-index:70;width:56px;height:56px;border-radius:50%;background:#06C755;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer;box-shadow:0 6px 18px rgba(6,199,85,.4);transition:transform .2s}
.line-fab:hover{transform:scale(1.06)}

/* ===== 響應式 ===== */
@media (max-width:960px){
  .g4{grid-template-columns:1fr 1fr}
  .five-grid{grid-template-columns:repeat(3,1fr) !important}
  .masonry{column-count:2}
  .shop-grid{grid-template-columns:1fr}
  .steps{flex-wrap:wrap}
  .step{flex:1 1 40%}
}
@media (max-width:760px){
  .nav-inner{padding:0 18px;gap:12px}
  .brand{gap:7px;flex:none}
  .brand img{height:36px}
  .brand .zh{font-size:18px;letter-spacing:1px;white-space:nowrap}
  .brand .en{font-size:9px;letter-spacing:2px;white-space:nowrap}
  .nav-cta{gap:8px;margin-left:auto}
  .nav-cta .btn{padding:8px 12px !important;white-space:nowrap}
  nav.main{display:none}
  .menu-btn{display:block}
  .mobile-nav{display:flex;flex-direction:column;border-top:1px solid var(--line2);background:var(--bg);padding:10px 28px 18px;gap:2px}
  .mobile-nav a{padding:10px 0;font-size:15px;letter-spacing:1px;border-bottom:1px solid var(--sand)}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .five-grid{grid-template-columns:1fr 1fr !important}
  .trust-grid{grid-template-columns:1fr;gap:12px}
  .trust-item{justify-content:flex-start}
  .masonry{column-count:1}
  .hero{height:460px}
  .hero-card{padding:32px 24px}
  .hero-card h1{font-size:30px}
  .pg-title{font-size:28px}
  .sec-title{font-size:24px}
  .hero-btns{flex-direction:column}
  .checkout-grid,.cart-grid,.contact-grid,.about-grid,.prod-grid{grid-template-columns:1fr !important}
  .step{flex:1 1 100%}
  .step-arrow{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
}

/* ===== 家具選配（流程式） ===== */
.wsteps{display:flex;align-items:flex-start;flex-wrap:wrap;row-gap:14px;margin-bottom:34px}
.wstep{display:flex;align-items:center}
.wstep-item{text-align:center;cursor:pointer;min-width:64px}
.wdot{position:relative;width:44px;height:44px;border-radius:50%;border:1.5px solid #C8A87C;color:#8B6F52;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif TC',serif;font-size:16px;margin:0 auto;background:#fff;transition:all .2s}
.wstep-item.cur .wdot{background:#5A4634;color:#F7F4EF;border-color:#5A4634}
.wbadge{position:absolute;top:-6px;right:-8px;background:#3E4A3D;color:#fff;font-size:10px;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.wlabel{display:block;font-size:12px;letter-spacing:1px;color:#6B655B;margin-top:6px}
.wstep-item.cur .wlabel{color:#3E4A3D;font-weight:500}
.wline{width:36px;height:1.5px;background:#D8CDBA;margin:22px 6px 0}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fitem{background:#fff;border:1.5px solid #EAE3D6;border-radius:8px;cursor:pointer;text-align:center;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.fitem:hover{box-shadow:0 6px 22px rgba(46,43,38,.08)}
.fitem.on{border-color:#3E4A3D;background:#F8F5EE}
.fimg{height:130px;display:flex;align-items:center;justify-content:center;background:#FBF9F4;border-bottom:1px solid #F2EDE4}
.fimg img{width:100%;height:100%;object-fit:cover}
.fitem.on .fimg{background:#F4F1E9}
.fbody{padding:12px 14px 14px}
.fcheck{position:absolute}
@media (max-width:760px){
  .fgrid{grid-template-columns:1fr 1fr}
  .wline{width:16px}
  .wdot{width:38px;height:38px;font-size:14px}
  .wstep-item{min-width:52px}
}

/* ===== 銷售頁區塊 ===== */
.pain-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pain-num{display:inline-block;background:#8B6F52;color:#fff;font-size:12px;letter-spacing:2px;padding:3px 14px;border-radius:8px}
.idea-row{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center;margin-bottom:26px}
.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cmp th,.cmp td{padding:14px 16px;font-size:14px;border-bottom:1px solid var(--sand);text-align:center}
.cmp th{background:var(--sand);color:var(--accent);font-weight:500;letter-spacing:1px}
.cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--accent);white-space:nowrap}
.cmp .hi{background:#F4F1E9;font-weight:500;color:var(--primary)}
.cmp thead .hi{background:var(--primary);color:#fff}
.chk{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 8px;background:#FAF8F3;border:1px solid #EFE8DC;border-radius:8px}
.chk-icon{width:38px;height:38px;border-radius:50%;background:#F1E9DC;color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.chk-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plan-b .chk-icon{background:#EEE6DC;color:var(--primary)}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
@media (max-width:760px){
  .idea-row{grid-template-columns:1fr;gap:14px}
  .cmp th,.cmp td{padding:10px 8px;font-size:12px}
  .fhome{grid-template-columns:1fr !important}
}

/* ===== 服務頁：五大重點與方案卡 ===== */
.five-row{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;padding:22px 0;border-bottom:1px dashed var(--line)}
.five-num{width:60px;height:60px;border-radius:50%;border:1.5px solid var(--gold);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Noto Serif TC',serif;font-size:26px}
.plan{border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.plan-head{padding:26px 30px 22px;color:#fff}
.plan-a .plan-head{background:#8B6F52}
.plan-b .plan-head{background:#5A4634}
.plan-body{background:#fff;border:1px solid var(--line);border-top:none;padding:26px 30px;flex:1;display:flex;flex-direction:column}
.plan-price{font-family:'Noto Serif TC',serif;font-size:34px;font-weight:600}
.flow-step{display:flex;gap:14px;padding:9px 0;font-size:14px}
.flow-dot{width:24px;height:24px;border-radius:50%;background:var(--sand);color:var(--accent);flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}
.deliver{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 20px;text-align:center}
.deliver-ico{width:52px;height:52px;border-radius:50%;background:var(--sand);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-family:'Noto Serif TC',serif;font-size:15px;letter-spacing:1px}
@media (max-width:760px){
  .plan-grid{grid-template-columns:1fr !important}
  .five-num{width:50px;height:50px;font-size:22px}
  .five-row{grid-template-columns:54px 1fr;gap:14px}
}

/* ===== 服務頁銷售長圖 ===== */
.sales-wrap{max-width:720px;margin:0 auto}
.sales-img{display:block;width:100%;border-radius:8px;margin:0 0 4px}
.sales-cta{position:sticky;bottom:0;z-index:40;background:rgba(247,244,239,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line2);padding:12px 16px;display:flex;justify-content:center;gap:12px}
.sales-cta-btn{width:min(420px,100%);display:flex;align-items:center;justify-content:center;gap:12px}