/* ==========================================================================
   彩虹世紀 — 質感修整層
   在原本 style.css 之後載入，只覆寫需要調整的部分，不動既有結構。

   修正三類問題：
   1. 頁首頁尾 5px 彩虹粗邊 —— 品牌色沒問題，但 5px 實心漸層很像早期網頁。
      收成 2px，並在頁尾改成細線，識別留著、份量拿掉。
   2. .section-title 有兩條互相衝突的規則（flex 後面被 block 蓋掉），
      造成標題與 eyebrow 對不齊。改用明確的 .sec-head。
   3. 節奏與字級：原本區塊留白 6.5rem 但內容只有一句話，顯得空；
      標題 line-height 1.5 對大字來說太鬆。
   ========================================================================== */

:root{
  --ink-soft:#3c4a54;
  --hair:#e4e7e4;
  --shadow:0 1px 2px rgba(29,40,48,.04),0 8px 24px rgba(29,40,48,.06);
  --shadow-lift:0 2px 4px rgba(29,40,48,.05),0 18px 40px rgba(29,40,48,.10);
}

/* ---- 1. 彩虹收斂 ---- */
.site-header{border-top-width:2px}
footer{border-top:1px solid var(--line);position:relative}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--rainbow)}

/* ---- 2. 版心與節奏 ---- */
.section{padding-block:5rem}
.section+.section{border-top:1px solid var(--hair)}
.statement{padding-block:4rem}
.statement h2,.sec-head h2,.channel-strip h2{line-height:1.3;letter-spacing:.01em}

.sec-head{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  column-gap:2rem;margin-bottom:2.6rem}
.sec-head .eyebrow{grid-column:1/-1;margin:0 0 .7rem}
.sec-head h2{margin:0;font-size:clamp(1.7rem,2.9vw,2.5rem);color:var(--navy)}
.sec-more{align-self:end;font-size:.9rem;color:var(--navy);white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.sec-more:hover{border-bottom-color:var(--gold)}
@media (max-width:640px){
  .sec-head{grid-template-columns:1fr}
  .sec-more{justify-self:start;margin-top:.8rem}
}

/* ---- 3. 事實帶 ---- */
.facts{background:var(--navy);color:#fff;padding:3.2rem max(6vw,calc((100vw - 1280px)/2))}
.facts dl{margin:0;display:grid;gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.facts dl>div{position:relative;padding-left:1.3rem}
.facts dl>div::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;
  width:2px;background:rgba(255,255,255,.22)}
.facts dt{font-size:.72rem;letter-spacing:.18em;color:#f5c24b;font-weight:700}
.facts dd{margin:.45rem 0 .3rem;display:flex;align-items:baseline;gap:.35rem}
.facts dd b{font-family:"Noto Serif TC","PMingLiU",serif;font-size:2.7rem;
  line-height:1;font-weight:600;letter-spacing:.02em}
.facts dd span{font-size:.9rem;opacity:.8}
.facts p{margin:0;font-size:.84rem;line-height:1.7;color:rgba(255,255,255,.74)}

/* ---- 4. 產品分類 ---- */
.cat-grid{display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
.cat-card{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--hair);box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.cat-photo{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--paper)}
.cat-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.cat-card:hover .cat-photo img{transform:scale(1.045)}
.cat-body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.3rem}
.cat-en{font-size:.68rem;letter-spacing:.16em;color:var(--gold);font-weight:700;
  text-transform:uppercase}
.cat-card strong{font-family:"Noto Serif TC","PMingLiU",serif;font-size:1.22rem;
  color:var(--navy);font-weight:600;letter-spacing:.02em}
.cat-area{font-size:.8rem;color:var(--muted)}

/* ---- 5. 日本製造商 ---- */
.maker-section{background:var(--paper)}
.maker-lead{margin:-1.6rem 0 2rem;color:var(--muted);max-width:40em}
.maker-wall{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--hair);border:1px solid var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.maker-wall li{background:#fff;padding:1.5rem 1rem;text-align:center;
  font-size:1.02rem;letter-spacing:.06em;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;min-height:82px}

/* ---- 6. 合作模式 ---- */
.svc-grid{display:grid;gap:1px;background:var(--hair);
  border-block:1px solid var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.svc-grid a{background:#fff;padding:1.5rem 1.4rem;display:flex;align-items:center;
  gap:.9rem;transition:background .2s ease}
.svc-grid a:hover{background:var(--paper)}
.svc-no{font-size:.75rem;letter-spacing:.1em;color:var(--gold);font-weight:700}
.svc-grid strong{flex:1;font-size:1.05rem;color:var(--navy);font-weight:600}
.svc-go{color:var(--muted);transition:transform .2s ease}
.svc-grid a:hover .svc-go{transform:translateX(4px);color:var(--navy)}

/* ---- 7. 合作通路 ---- */
.ch-wall{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.ch-wall a{display:block;padding:.75rem 1.25rem;border:1px solid var(--line);
  border-radius:999px;font-size:.95rem;color:var(--ink-soft);
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.ch-wall a:hover{border-color:var(--navy);color:var(--navy);background:#fff}

/* ---- 8. 線上通路 ---- */
.channel-strip{padding-block:4rem}

@media (prefers-reduced-motion:reduce){
  .cat-card,.cat-photo img,.svc-go,.sec-more{transition:none}
  .cat-card:hover{transform:none}
  .cat-card:hover .cat-photo img{transform:none}
}

/* ---- 9. 收尾細節 ---- */
/* 頁首是 sticky 92px，錨點捲過去時標題會被蓋住 */
.section,.facts,.hero{scroll-margin-top:104px}

/* 七項服務在雙欄時最後一格會空著，灰底透出來像破洞。
   改成格線用外框畫，空格維持白色就看不出來。 */
.svc-grid,.maker-wall{background:#fff}
.svc-grid a,.maker-wall li{box-shadow:0 0 0 1px var(--hair)}
.maker-wall{border:0}

/* 品類卡的圖已裁過、比例不一，統一由卡片控制 */
.cat-photo img{object-position:center}

/* ==========================================================================
   10. 按鍵 —— 商務質感
   原本是 1px 實線框、沒有任何過渡，按起來沒有回饋，也沒有層次。
   高級感來自克制與精準，不是厚重的漸層：
   極細的邊、兩層陰影（近處接觸陰影 + 遠處柔光）、
   深色鍵頂端一道內光模擬受光面、金色只當點綴線用。
   ========================================================================== */
.button,.nav-contact,.channel-actions a{
  --btn-ease:cubic-bezier(.2,.7,.3,1);
  position:relative;
  font-weight:600;
  letter-spacing:.06em;
  border-radius:2px;
  transition:transform .22s var(--btn-ease),box-shadow .22s var(--btn-ease),
             background-color .22s ease,border-color .22s ease,color .22s ease;
}
.button{gap:1.6rem;padding:.95rem 1.35rem}
.button span{transition:transform .22s var(--btn-ease)}

/* 主要鍵：深藍受光面 */
.button.primary,.nav-contact{
  background:linear-gradient(180deg,#252A9B 0%,#1C1F87 55%,#171A73 100%);
  border-color:#171A73;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 1px 2px rgba(23,26,115,.24),
             0 6px 16px -6px rgba(23,26,115,.42);
}
.button.primary:hover,.nav-contact:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 2px 4px rgba(23,26,115,.22),
             0 14px 28px -10px rgba(23,26,115,.5);
}
.button.primary:active,.nav-contact:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 3px rgba(9,26,52,.45),0 1px 2px rgba(23,26,115,.2);
}
.button.primary:hover span{transform:translateX(4px)}

/* 次要鍵：紙面上的細框，hover 時由左長出金線 */
.button.secondary{
  background:#fff;border-color:var(--line);color:var(--navy);
  box-shadow:0 1px 2px rgba(29,40,48,.05),0 4px 14px -8px rgba(29,40,48,.22);
}
.button.secondary::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--btn-ease)}
.button.secondary:hover{
  transform:translateY(-1px);border-color:var(--navy);
  box-shadow:0 2px 4px rgba(29,40,48,.06),0 14px 26px -12px rgba(28,31,135,.3)}
.button.secondary:hover::after{transform:scaleX(1)}
.button.secondary:active{transform:translateY(0);box-shadow:none}
.button.secondary:hover span{transform:translateX(4px)}

/* 深藍底上的鍵 */
.channel-actions a{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.channel-actions a:hover{
  background:#fff;border-color:#fff;color:var(--navy);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.channel-actions a:active{transform:translateY(0)}
.channel-actions a span{transition:transform .22s var(--btn-ease)}
.channel-actions a:hover span{transform:translate(3px,-3px)}

/* 通路膠囊 */
.ch-wall a{transition:all .22s var(--btn-ease);background:#fff;
  box-shadow:0 1px 2px rgba(29,40,48,.04)}
.ch-wall a:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(29,40,48,.06),0 10px 20px -10px rgba(28,31,135,.35)}

/* 鍵盤操作要看得見焦點 */
.button:focus-visible,.nav-contact:focus-visible,.channel-actions a:focus-visible,
.ch-wall a:focus-visible,.sec-more:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .button,.nav-contact,.channel-actions a,.ch-wall a,.button span{transition:none}
  .button:hover,.nav-contact:hover,.channel-actions a:hover,.ch-wall a:hover{transform:none}
}

/* ==========================================================================
   11. 立體感 —— 統一的高度階層
   光源一律從上方來：近處一道緊貼的接觸陰影 + 遠處一片柔散開的投影，
   深色面再加一條頂端內光當受光面。
   階層固定四級，不讓每個元素各自浮動，否則畫面會很吵：
     紙面（不浮） → 面板 e1 → 卡片 e2 → 抬起 e3 → 強調 e4
   ========================================================================== */
:root{
  --e1:0 1px 2px rgba(29,40,48,.05),0 2px 8px -4px rgba(29,40,48,.10);
  --e2:0 1px 2px rgba(29,40,48,.06),0 8px 20px -8px rgba(29,40,48,.16);
  --e3:0 2px 4px rgba(29,40,48,.07),0 18px 40px -14px rgba(29,40,48,.24);
  --e4:0 4px 10px rgba(29,40,48,.08),0 32px 64px -22px rgba(29,40,48,.30);
  --lit:inset 0 1px 0 rgba(255,255,255,.14);
}

/* 頁首浮在內容上，本來就該有厚度 */
.site-header{box-shadow:var(--e1)}

/* 深色帶：平塗改成極淡的漸層，加頂端受光線 */
.facts{
  background:linear-gradient(180deg,#252A9B 0%,#1C1F87 60%,#171A73 100%);
  box-shadow:var(--lit),var(--e2)}
.channel-strip{
  background:linear-gradient(180deg,#252A9B 0%,#1C1F87 60%,#171A73 100%);
  box-shadow:var(--lit),var(--e2)}

/* 卡片 */
.cat-card{box-shadow:var(--e2)}
.cat-card:hover{box-shadow:var(--e3)}
.lineup-card{box-shadow:var(--e1)}
.lineup-card:hover{box-shadow:var(--e3)}

/* 網格型面板：靜止貼平、指到才浮起，才不會整片都在飄 */
.maker-wall li,.svc-grid a{
  transition:box-shadow .24s cubic-bezier(.2,.7,.3,1),transform .24s cubic-bezier(.2,.7,.3,1);
  position:relative}
.maker-wall li:hover,.svc-grid a:hover{
  box-shadow:0 0 0 1px var(--hair),var(--e2);transform:translateY(-2px);z-index:1}

/* 內文與主視覺的照片：細邊＋淺陰影，才不會像直接貼在紙上 */
.original-content .original-image,.hero-image img,.about-story img{
  box-shadow:var(--e2)}
.cat-photo{box-shadow:inset 0 0 0 1px rgba(29,40,48,.05)}

/* 通路膠囊維持輕，只在指到時抬起（第 10 節已定義 hover） */
.ch-wall a{box-shadow:var(--e1)}

@media (prefers-reduced-motion:reduce){
  .maker-wall li,.svc-grid a{transition:none}
  .maker-wall li:hover,.svc-grid a:hover{transform:none}
}

/* ==========================================================================
   12. 立體感加強
   只把陰影調深會變濁。真正讓人看出層次的是三件事：
     a. 元素之間有明確的前後關係（疊壓、交錯）
     b. 受光面有亮邊，背光面有接觸陰影
     c. 底色分層 —— 卡片要浮，底就不能跟卡片一樣白
   ========================================================================== */

/* a. 底色分層：卡片區改用比紙面再深一階的底，白卡才浮得出來 */
.cat-section,.svc-section{
  background:linear-gradient(180deg,#f2f0ea 0%,#efece5 100%)}
.maker-section{background:#fff}
.partner-band{background:linear-gradient(180deg,#f2f0ea 0%,#efece5 100%)}

/* b. 深色帶往上下各壓一點，明確疊在相鄰區塊之上 */
.facts{position:relative;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 -6px 18px -8px rgba(23,26,115,.35),
             0 14px 32px -12px rgba(23,26,115,.45)}
.channel-strip{position:relative;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 -6px 18px -8px rgba(23,26,115,.35),
             0 14px 32px -12px rgba(23,26,115,.45)}

/* c. 卡片：頂端亮邊 + 更明確的落地陰影 */
.cat-card,.lineup-card{
  border-color:rgba(29,40,48,.09);
  box-shadow:inset 0 1px 0 #fff,
             0 1px 1px rgba(29,40,48,.06),
             0 6px 12px -6px rgba(29,40,48,.22),
             0 20px 36px -18px rgba(29,40,48,.30)}
.cat-card:hover,.lineup-card:hover{
  box-shadow:inset 0 1px 0 #fff,
             0 2px 3px rgba(29,40,48,.07),
             0 12px 22px -8px rgba(29,40,48,.26),
             0 38px 62px -24px rgba(29,40,48,.38)}
.cat-card:hover{transform:translateY(-6px)}

/* 主視覺的照片壓在下一段之上 */
.hero-image{position:relative;z-index:1}
.hero-image img{box-shadow:0 18px 40px -18px rgba(29,40,48,.45)}

/* 頁首厚一點，滑動時明顯浮在內容上 */
.site-header{
  box-shadow:0 1px 0 rgba(29,40,48,.06),0 8px 24px -12px rgba(29,40,48,.28)}

/* 製造商牆與服務格：靜止就有薄薄一層，指到再抬高 */
.maker-wall li,.svc-grid a{
  box-shadow:0 0 0 1px var(--hair),0 2px 6px -4px rgba(29,40,48,.18)}
.maker-wall li:hover,.svc-grid a:hover{
  box-shadow:0 0 0 1px rgba(28,31,135,.25),
             0 8px 16px -6px rgba(29,40,48,.22),
             0 24px 40px -20px rgba(29,40,48,.32);
  transform:translateY(-3px)}

/* 通路膠囊 */
.ch-wall a{
  box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(29,40,48,.06),
             0 5px 10px -5px rgba(29,40,48,.22)}
.ch-wall a:hover{
  box-shadow:inset 0 1px 0 #fff,0 2px 3px rgba(29,40,48,.08),
             0 14px 24px -10px rgba(28,31,135,.38);
  transform:translateY(-3px)}

/* 內文照片 */
.original-content .original-image{
  box-shadow:0 2px 4px rgba(29,40,48,.08),0 22px 44px -20px rgba(29,40,48,.38)}

@media (prefers-reduced-motion:reduce){
  .cat-card:hover,.maker-wall li:hover,.svc-grid a:hover,.ch-wall a:hover{transform:none}
}

/* ==========================================================================
   13. 捲動進場
   起始狀態掛在 [data-reveal-ready] 底下 —— 這個屬性由 reveal.js 加上，
   所以 JS 沒載入或壞掉時，頁面就是完整畫面，不會整片空白。
   ========================================================================== */
[data-reveal-ready] .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1) var(--reveal-delay,0ms),
             transform .8s cubic-bezier(.2,.7,.3,1) var(--reveal-delay,0ms)}
[data-reveal-ready] .reveal.is-in{opacity:1;transform:none}

/* 圖片本身再多一段放大收回，質感會比純淡入好 */
[data-reveal-ready] .cat-card.reveal .cat-photo img,
[data-reveal-ready] .lineup-card.reveal img{
  transform:scale(1.06);
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1) var(--reveal-delay,0ms)}
[data-reveal-ready] .cat-card.reveal.is-in .cat-photo img,
[data-reveal-ready] .lineup-card.reveal.is-in img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  [data-reveal-ready] .reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   14. 線條插圖
   跟著文字顏色走（currentColor），所以深藍帶上是白的、白底上是金的，
   不用為每個情境各做一份圖檔。
   ========================================================================== */
.ico{width:26px;height:26px;display:block;flex:none}

/* 事實帶：圖示在標籤上方，用半透明白，不搶數字 */
.facts .ico{color:rgba(255,255,255,.55);margin-bottom:.8rem;width:30px;height:30px;
  transition:color .3s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.facts dl>div:hover .ico{color:#f5c24b;transform:translateY(-2px)}

/* 合作方式：圖示在編號與名稱之間 */
.svc-grid .ico{color:var(--gold);width:24px;height:24px;
  transition:color .25s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.svc-grid a:hover .ico{color:var(--navy);transform:scale(1.08)}

/* 畫進場時圖示的線條自己描一遍，比單純淡入有意思 */
[data-reveal-ready] .reveal .ico [stroke-dasharray],
[data-reveal-ready] .reveal .ico path,
[data-reveal-ready] .reveal .ico rect,
[data-reveal-ready] .reveal .ico circle{
  stroke-dasharray:120;stroke-dashoffset:120;
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1)
             calc(var(--reveal-delay,0ms) + 120ms)}
[data-reveal-ready] .reveal.is-in .ico path,
[data-reveal-ready] .reveal.is-in .ico rect,
[data-reveal-ready] .reveal.is-in .ico circle{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .facts .ico,.svc-grid .ico{transition:none}
  [data-reveal-ready] .reveal .ico path,
  [data-reveal-ready] .reveal .ico rect,
  [data-reveal-ready] .reveal .ico circle{
    stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}