/* ==========================================================================
   Lazy Dept. 首頁專屬樣式（home.css）
   來源：design/home-b/index.html <style> 區段，扣掉已搬進 site.css 的共用
   段落（tokens／header／nav／btn／wave／section 標題／footer／float-line／
   基礎 reset），只留首頁專屬的 hero、痛點、服務、流程、作品、價格、FAQ、CTA。
   ========================================================================== */

/* ── Hero：午睡場景 ── */
.hero{
  background:linear-gradient(180deg, var(--sky) 0%, var(--day) 100%);
  padding:64px 0 0;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;max-width:1080px;margin:0 auto;padding:0 32px}
.hero .eyebrow{
  display:inline-block;font-family:var(--round);font-size:14px;color:var(--navy);
  background:var(--cream);border-radius:999px;padding:5px 16px;margin-bottom:20px;
}
h1{font-size:clamp(38px,5.4vw,62px);line-height:1.35;margin-bottom:18px}
/* nowrap：品牌名被折成「偷閒部／門」很難看，而中文沒有詞邊界、瀏覽器
   預設任意字元都可斷行。寧可整個「偷閒部門」掉到下一行，也不要拆開 */
h1 em{font-style:normal;color:var(--tangerine);white-space:nowrap}
.hero p.sub{font-size:18px;color:var(--navy-soft);max-width:30em;margin-bottom:34px}
.cta-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:56px}
/* 場景插畫 */
.scene{position:relative}
.scene svg{width:100%;height:auto;display:block}
.zzz{animation:zfloat 3.2s ease-in-out infinite}
.zzz.z2{animation-delay:1.1s}
.zzz.z3{animation-delay:2.2s}
@keyframes zfloat{
  0%{transform:translate(0,0);opacity:0}
  25%{opacity:1}
  100%{transform:translate(14px,-30px);opacity:0}
}
.cloud-drift{animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(16px)}}

/* ── 痛點 ── */
/* ── 煩惱診斷區 ── */
.pains{background:var(--day);padding-top:24px}
.pains .lead{color:var(--navy-soft);font-size:16.5px;margin-top:-4px}

/* [hidden] 的預設 display:none 特異性最低，會被 .combos li{display:flex}、
   .js-only{display:inline-block} 這類規則蓋掉，JS 設了 hidden 也藏不住東西。
   這條把它釘回去——診斷區的顯示／隱藏全靠 hidden 屬性運作 */
.diagnose [hidden]{display:none !important}

/* 沒有 JS 時這些提示是騙人的（點不動），所以預設藏起來，
   由 JS 掛上 [data-js="on"] 才顯示 */
.js-only{display:none}
.diagnose[data-js="on"] .js-only{display:inline-block}
.diagnose[data-js="on"] .mood-label{display:inline-block}

/* 舞台：左泡泡／人物／右泡泡 */
.stage{display:grid;grid-template-columns:1fr 260px 1fr;gap:18px;align-items:center;margin-top:36px}
.col{display:flex;flex-direction:column;gap:16px}
.bub{
  position:relative;background:var(--cloud);border:2px solid transparent;border-radius:20px;
  padding:16px 20px;font-size:15.5px;line-height:1.7;text-align:left;width:100%;
  box-shadow:0 4px 14px rgba(40,64,90,.08);font-family:var(--sans);color:var(--navy);
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
/* 沒有 JS 就不該長得像可以點的東西 */
.diagnose[data-js="on"] .bub{cursor:pointer}
.diagnose[data-js="on"] .bub:hover{transform:translateY(-3px)}
.bub:focus-visible{outline:3px solid var(--tangerine);outline-offset:3px}
.col-l .bub::after,.col-r .bub::after{content:"";position:absolute;top:26px;border:10px solid transparent}
.col-l .bub::after{right:-18px;border-left-color:var(--cloud)}
.col-r .bub::after{left:-18px;border-right-color:var(--cloud)}
/* 弧形錯位：頭尾兩顆外推，中間那顆最靠近人物 */
.col-l .bub:nth-child(1),.col-l .bub:nth-child(5){transform:translateX(-26px)}
.col-l .bub:nth-child(2),.col-l .bub:nth-child(4){transform:translateX(-12px)}
.col-r .bub:nth-child(1),.col-r .bub:nth-child(5){transform:translateX(26px)}
.col-r .bub:nth-child(2),.col-r .bub:nth-child(4){transform:translateX(12px)}
.bub[aria-pressed="true"]{background:#FDE6DA;border-color:var(--tangerine)}
.col-l .bub[aria-pressed="true"]::after{border-left-color:#FDE6DA}
.col-r .bub[aria-pressed="true"]::after{border-right-color:#FDE6DA}
.bub .tick{
  position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;
  background:var(--tangerine);color:#fff;font-size:15px;line-height:26px;text-align:center;
  opacity:0;transform:scale(.6);transition:.16s ease;
}
.bub[aria-pressed="true"] .tick{opacity:1;transform:scale(1)}

/* 中央人物：三態表情＋手勢由 [data-mood] 切換 */
.hero-figure{display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-figure svg{width:230px;height:230px}
.mood-label{
  display:none;font-family:var(--round);font-size:16px;color:var(--navy-soft);
  background:var(--cloud);border-radius:999px;padding:6px 18px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(40,64,90,.07);
}
[data-mood="stressed"] .face-ok,[data-mood="stressed"] .face-zzz,
[data-mood="better"] .face-cry,[data-mood="better"] .face-zzz,
[data-mood="relaxed"] .face-cry,[data-mood="relaxed"] .face-ok{display:none}
[data-mood="stressed"] .arms-relax,
[data-mood="better"] .arms-stress,[data-mood="relaxed"] .arms-stress{display:none}

.pains .answer{text-align:center;margin-top:44px;font-family:var(--round);font-size:21px}
.pains .answer b{color:var(--tangerine);font-weight:400}
.pains .answer span{display:block;font-family:var(--sans);font-size:15px;color:var(--navy-soft);margin-top:6px}

/* 解方區。沒有 JS 時整份清單都攤開（SEO 讀得到）；
   JS 模式下由 diagnose.js 對個別卡片下 hidden */
.diag-result{margin-top:48px}
.result-head{text-align:center;margin-bottom:22px}
.result-head h3{font-size:26px}
.result-head p{color:var(--navy-soft);font-size:15.5px}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mod{background:var(--cloud);border-radius:20px;padding:22px 24px;box-shadow:0 4px 14px rgba(40,64,90,.07)}
.mod .ico{
  width:44px;height:44px;border-radius:14px;background:var(--sky);margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
}
.mod .ico svg{width:30px;height:30px}
.mod h4{font-family:var(--round);font-size:19px;font-weight:400;margin-bottom:4px}
.mod p{font-size:14.5px;color:var(--navy-soft)}
/* 靜態價格行：無 JS／搜尋引擎唯一的價格來源；JS 模式改由徽章接手，同卡只留一套數字 */
.mod .price-line{font-size:13.5px;color:var(--navy-soft);margin-top:10px;padding-top:10px;border-top:1px dashed rgba(40,64,90,.18)}
.diagnose[data-js="on"] .mod .price-line{display:none}
.mod .price-badge{display:inline-block;margin-top:10px;padding:4px 12px;border-radius:999px;background:var(--tangerine);color:#fff;font-size:13.5px}
.mod .price-badge[hidden]{display:none}
.combos{margin-top:24px;background:var(--cream);border-radius:22px;padding:26px 28px}
.combos h4{font-family:var(--round);font-size:20px;font-weight:400;margin-bottom:14px}
.combos ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.combos li{display:flex;gap:12px;font-size:15.5px;align-items:flex-start}
.combos .pair{
  flex:none;font-family:var(--round);font-size:13.5px;color:var(--tangerine-deep);
  background:#fff;border-radius:999px;padding:3px 12px;margin-top:3px;white-space:nowrap;
}
/* 總價列：跟著 #diagResult 顯示；js-only 讓無 JS 訪客只看卡上靜態價。
   js-only 既有規則是 inline-block，區塊容器要覆寫成 block */
.diag-price{text-align:center;margin:26px 0 6px}
.diag-price .total{font-family:var(--round);font-size:20px}
.diag-price .total b{font-size:30px;color:var(--tangerine);font-weight:400;margin:0 4px}
.diag-price .note{font-size:13.5px;color:var(--navy-soft);margin-top:4px}
.diagnose[data-js="on"] .diag-price{display:block}
.diag-cta{
  margin-top:30px;text-align:center;background:var(--cloud);border-radius:22px;
  padding:32px 26px;box-shadow:0 4px 14px rgba(40,64,90,.07);
}
.diag-cta h4{font-family:var(--round);font-size:22px;font-weight:400;margin-bottom:6px}
.diag-cta p{color:var(--navy-soft);font-size:15px;margin-bottom:20px}
.diag-cta .alt{margin-top:14px;margin-bottom:0;font-size:14.5px}
.diag-cta .alt a{color:var(--tangerine);text-decoration:underline}

/* ── 服務 ── */
.services{background:var(--cloud)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc{
  background:var(--day);border-radius:26px;padding:34px 28px;text-align:center;
  transition:transform .15s ease;
}
.svc:hover{transform:translateY(-6px)}
.svc .icon{width:84px;height:84px;margin:0 auto 18px}
.svc h3{font-size:22px;margin-bottom:10px}
.svc p{font-size:15px;color:var(--navy-soft);text-align:left}
.svc .for{
  display:inline-block;margin-top:16px;font-size:13px;color:var(--navy);
  background:var(--cream);border-radius:999px;padding:4px 14px;
}

/* ── 流程 ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{
  background:var(--cloud);border-radius:22px;padding:28px 24px;position:relative;
  box-shadow:0 4px 14px rgba(40,64,90,.07);
}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:-16px;left:22px;
  width:36px;height:36px;border-radius:50%;background:var(--tangerine);color:#fff;
  font-family:var(--round);font-size:18px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 var(--tangerine-deep);
}
.step h3{font-size:20px;margin:8px 0 8px}
.step p{font-size:14.5px;color:var(--navy-soft)}
.flow .note{text-align:center;margin-top:40px;font-family:var(--round);font-size:19px;color:var(--navy)}
.flow .note em{font-style:normal;color:var(--tangerine)}

/* ── 作品 ── */
.works{background:var(--cloud)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.work{border-radius:22px;overflow:hidden;background:var(--day);box-shadow:0 4px 14px rgba(40,64,90,.07)}
/* 佔位色塊放的是案名，可能長到換行——給左右內距與行高（同 works.css） */
.work .shot{height:180px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--round);font-size:17px;letter-spacing:2px;padding:0 24px;text-align:center;line-height:1.6}
/* 真圖與佔位色塊同尺寸：img.shot 需額外補 object-fit（設計稿只有 div 佔位，沒有 img） */
img.shot{object-fit:cover;width:100%}
.work:nth-child(1) .shot{background:#6FA8C9}
.work:nth-child(2) .shot{background:#E8A87C}
.work:nth-child(3) .shot{background:#8FBC94}
.work .meta{padding:20px 24px 24px}
.work .type{font-size:12.5px;color:var(--tangerine);font-weight:700;letter-spacing:1px}
.work h3{font-size:19px;margin:6px 0 4px}
.work p{font-size:14px;color:var(--navy-soft)}
.works .more{display:block;text-align:center;margin-top:40px;font-family:var(--round);font-size:17px}
.works .more span{border-bottom:3px solid var(--cream);padding-bottom:3px}

/* ── FAQ ── */
.faq{background:var(--cloud)}
.faq details{max-width:760px;margin:0 auto 14px;background:var(--day);border-radius:18px}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 26px;font-weight:700;font-size:16.5px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::after{content:"＋";font-family:var(--round);color:var(--tangerine);font-size:20px}
.faq details[open] summary::after{content:"－"}
.faq details p{padding:0 26px 20px;color:var(--navy-soft);font-size:15px}

/* ── CTA ── */
.cta{
  background:linear-gradient(180deg, var(--day) 0%, var(--sky) 100%);
  text-align:center;padding:90px 0 80px;
}
.cta h2{font-size:clamp(28px,4.2vw,42px);margin-bottom:12px}
.cta p{color:var(--navy-soft);font-size:17px;margin-bottom:34px}
.cta .alt{margin-top:22px;font-size:14.5px;color:var(--navy-soft)}
.cta .alt a{border-bottom:2px dotted var(--navy-soft);padding-bottom:2px;margin:0 6px}
.cta .alt a:hover{color:var(--navy);border-color:var(--navy)}

/* 表單與 LINE 並排。表單較寬（欄位多），LINE 側欄固定窄欄當輔助路徑 */
.cta-cols{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:28px;align-items:start;text-align:left;max-width:920px;margin:0 auto;
}
.cta-side{
  background:#fff;border-radius:var(--r-lg,22px);padding:28px 26px;text-align:center;
}
.cta-side h3{font-family:var(--round);font-size:20px;font-weight:400;margin-bottom:8px}
.cta-side p{font-size:14.5px;margin-bottom:20px}
.cta-side .alt{margin-top:18px;font-size:14px}

/* 診斷區 CTA 兩顆按鈕：LINE 為主、表單為輔 */
.diag-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .scene{max-width:420px;margin:0 auto}

  /* Hero 在手機收成單欄後會整整吃掉一屏，客人得盲滑才看得到診斷區。
     插畫縮窄＋各段間距收緊，讓「點點看，可複選」在第一屏就露頭。
     桌機是左右並排、高度不吃緊，所以這段只寫在手機。 */
  .hero{padding-top:40px}
  .hero-grid{gap:12px}
  .hero .eyebrow{margin-bottom:14px}
  .hero p.sub{font-size:16.5px;margin-bottom:20px}
  .cta-row{margin-bottom:20px}
  .scene{max-width:260px}
  /* 原本這行還帶著 .bubbles——診斷區改成三欄舞台後那個 class 已不存在，一併移除 */
  .svc-grid,.steps,.work-grid,.mods{grid-template-columns:1fr}
  .steps{row-gap:32px}

  /* 診斷區：人物移到最上面縮小，泡泡收單欄，尾巴改朝上 */
  .stage{grid-template-columns:1fr;gap:14px}
  .hero-figure{order:-1;margin-bottom:10px}
  .hero-figure svg{width:170px;height:170px}
  .col-l .bub,.col-r .bub{transform:none !important}
  .col-l .bub::after,.col-r .bub::after{
    top:-18px;left:28px;right:auto;
    border-left-color:transparent;border-right-color:transparent;border-bottom-color:var(--cloud);
  }
  .col-l .bub[aria-pressed="true"]::after,.col-r .bub[aria-pressed="true"]::after{
    border-left-color:transparent;border-right-color:transparent;border-bottom-color:#FDE6DA;
  }
  .combos li{flex-direction:column;gap:6px}

  /* CTA：表單與 LINE 側欄收單欄，表單在上（主要路徑） */
  .cta-cols{grid-template-columns:1fr;gap:20px}
}