/* =========================================================
   Niiice Layout2 — base.css
   reset + token 應用 + typography + header/footer + 共用元件 + RWD
   值全部依 CAPTURE_REPORT（母站實測），不憑感覺。
   斷點：tablet ≤1024px、mobile ≤767px、offcanvas 窄機 ≤689px
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { text-decoration: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography（Blocksy root + kit-16）---------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);          /* 16px */
  line-height: var(--lh-body);        /* 1.65 */
  letter-spacing: 1px;
  color: var(--color-text);           /* palette-3 */
  background: var(--color-bg);        /* palette-7 */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);        /* palette-4 */
  line-height: var(--lh-heading);     /* 1.5 */
  letter-spacing: var(--ls-heading);  /* 1px */
  font-weight: 400;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); } /* 32px w500 ls2px */
h2 { font-size: var(--fs-h2); }  /* 22px w400 */
h3 { font-size: var(--fs-h3); }  /* 18px */
h4 { font-size: var(--fs-h4); }  /* 16px */
h5 { font-size: var(--fs-h5); }  /* 14px */
h6 { font-size: var(--fs-h6); }  /* 14px */

a { color: var(--color-accent); transition: color .2s ease, background-color .2s ease, opacity .3s ease; }
a:hover { color: var(--color-accent-hover); }

/* ---------- Container / 版面節奏 ---------- */
.niiice-container {
  max-width: var(--container-max);    /* 1290px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

/* 大區塊垂直節奏：桌機 104px 上下 → 手機 48 上 / 80 下 */
.niiice-section {
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

/* 全站 hairline 語彙 */
.niiice-hairline-top { border-top: var(--hairline); }
.niiice-hairline-bottom { border-bottom: var(--hairline); }

/* ---------- Eyebrow 英文小標（自訂 bbd15a7：DM Sans 14px w300 uppercase）---------- */
.niiice-eyebrow {
  display: block;
  font-size: var(--eyebrow-fs);
  font-weight: var(--eyebrow-fw);
  letter-spacing: var(--ls-typo);
  text-transform: uppercase;
  color: var(--color-heading);
}

/* 內頁 banner H1（自訂 f42a517：w400 uppercase，size 繼承 h1） */
.niiice-banner-title {
  font-weight: var(--banner-h1-fw);
  text-transform: uppercase;
}

/* 區塊標題列（左 eyebrow + h2｜右描述，各頁共通模式） */
.niiice-section-head {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
}
.niiice-section-head__left { flex: 0 0 30%; }
.niiice-section-head__right { flex: 1 1 auto; }

/* ---------- 內頁 banner 共通元件（CAPTURE 附錄 3）---------- */
.niiice-banner {
  position: relative;
  min-height: var(--banner-min-h);    /* 250px */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: var(--hairline);
}
.niiice-banner__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
}

/* ---------- Scrim / overlay 工具（文字疊圖保底可讀，規格 §4 鐵律 4）---------- */
.niiice-cover { position: relative; background-size: cover; background-position: center; }
.niiice-cover > * { position: relative; z-index: 2; }
.niiice-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--palette-4);
  opacity: 0;
  pointer-events: none;
}
.niiice-overlay-20::before { opacity: .2; }   /* hero / 內頁 banner */
.niiice-overlay-40::before { opacity: .4; }   /* CTA */
/* 白字疊圖再加底部漸層 scrim 保底（capture ④ hero 建議） */
.niiice-scrim-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(58, 49, 44, .45), rgba(58, 49, 44, 0) 45%);
}

/* ---------- 按鈕（CAPTURE ① 按鈕表）---------- */
/* kit 預設按鈕：底 palette-7、字 palette-3、框 1px palette-5、radius 64px、12px 40px、15px w500 */
.niiice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  background: var(--palette-7);
  border: 1px solid var(--palette-5);
  border-radius: var(--radius-pill);
  padding: var(--btn-pad);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.niiice-btn:hover {
  background: var(--palette-6);
  color: var(--palette-9);
}

/* 手風琴內「了解更多」：透明底，hover 底 palette-7 */
.niiice-btn--ghost { background: transparent; }
.niiice-btn--ghost:hover { background: var(--palette-7); color: var(--palette-3); }

/* case-accordion 白框鈕：透明底白字白框、4px 24px；hover 白底字 palette-4 */
.niiice-btn--white {
  background: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
  padding: 4px 24px;
}
.niiice-btn--white:hover { background: #FFFFFF; color: var(--palette-4); }

/* 專案卡「SEE MORE」：上下框線 1px、左右 0、radius 0、padding 12px、兩端對齊 */
.niiice-btn--seemore {
  width: 100%;
  justify-content: space-between;
  border-width: 1px 0;
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
}
.niiice-btn--seemore:hover { background: transparent; color: var(--color-accent-hover); }

/* contact 送出鈕：底 palette-11、字 palette-4、uppercase、radius 80px、12px 48px */
.niiice-btn--submit {
  background: var(--palette-11);
  color: var(--palette-4);
  text-transform: uppercase;
  border-radius: var(--radius-pill-lg);
  padding: var(--btn-submit-pad);
  border: 0;
}
.niiice-btn--submit:hover { background: var(--palette-6); color: var(--palette-3); }

/* ---------- 分類 chip（news 卡 / 專案卡 / 單篇 hero 共用，CAPTURE 附錄 4）---------- */
.niiice-chip {
  display: inline-block;
  font-size: 14px;
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  background: var(--palette-7);
  padding: 0 8px;
  transition: background-color .2s ease;
}
.niiice-chip:hover { background: var(--palette-6); color: var(--palette-3); }
.niiice-chip--white { background: #FFFFFF; }

/* 日期（全站 Y.m.d 14px） */
.niiice-date {
  font-size: var(--typo-secondary-fs);
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}

/* ---------- 圖片佔位（無圖時保 locator）---------- */
.niiice-img-empty {
  background: var(--palette-11);
  border: var(--hairline);
  min-height: 120px;
  width: 100%;
}

/* 卡片圖 hover 透明度（全站慣例） */
.niiice-img-hover { transition: opacity .3s ease; }
a:hover .niiice-img-hover,
.niiice-img-hover:hover { opacity: .8; }

/* ---------- 通用手風琴（服務 / 獎項 / FAQ = jet-accordion 重刻）---------- */
.niiice-accordion { border-bottom: var(--hairline); }
.niiice-accordion__item { border-top: var(--hairline); }
.niiice-accordion__label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 0;
  font-size: 20px;
  letter-spacing: var(--ls-typo);
  color: var(--palette-4);
  text-align: left;
  background: transparent;
}
.niiice-accordion__label::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--palette-4);
  transition: transform .3s ease;
}
.niiice-accordion__item.is-open > .niiice-accordion__label::after {
  content: "\00d7"; /* × */
}
.niiice-accordion__content {
  display: none;
  padding-bottom: 40px;
}
.niiice-accordion__item.is-open > .niiice-accordion__content {
  display: block;
  animation: niiice-move-up .35s ease both;
}
@keyframes niiice-move-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 通用輪播骨架（hero / about intro；main.js 對應）---------- */
.niiice-slider { position: relative; overflow: hidden; }
.niiice-slider__track {
  display: flex;
  transition: transform .5s ease; /* speed 500ms（母站 slick/swiper 同值） */
}
.niiice-slider__slide { flex: 0 0 100%; min-width: 100%; }
.niiice-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  font-size: 18px;
  line-height: 1;
  color: var(--palette-7);
  padding: 8px 12px;
}
.niiice-slider__arrow--prev { left: 8px; }
.niiice-slider__arrow--next { right: 8px; }

/* 專案輪播箭頭（外側、深底半透明方塊） */
.niiice-slider__arrow--boxed {
  background: var(--overlay-arrow);
  color: #FFFFFF;
  transition: background-color .2s ease;
}
.niiice-slider__arrow--boxed:hover { background: var(--overlay-arrow-hover); }

/* ---------- Case-accordion（jet-image-accordion 重刻骨架）---------- */
.niiice-case {
  display: flex;
  gap: 16px;
  height: var(--case-h);              /* 480px */
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.niiice-case__item {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  transition: flex-grow .5s cubic-bezier(.85, 0, .15, 1); /* 500ms circ ease */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.niiice-case.has-active .niiice-case__item.is-active {
  flex-grow: 3; /* active 佔 60%（2 items 時 3:1 ≒ 60/40 展開感） */
}
.niiice-case__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.niiice-case__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-case);          /* #3A312C33 */
  transition: background-color .5s ease;
}
.niiice-case__item.is-active::after { background: var(--overlay-case-active); } /* #3A312C66 */
.niiice-case__content {
  position: relative;
  z-index: 2;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}
.niiice-case__content h3 { color: #FFFFFF; font-size: 18px; }

/* ---------- 進場動畫（fadeIn 等價：IntersectionObserver）---------- */
[data-niiice-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-niiice-reveal].is-inview {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-niiice-reveal] { opacity: 1; transform: none; transition: none; }
  .niiice-slider__track { transition: none; }
  .niiice-case__item { transition: none; }
}

/* =========================================================
   Header（CAPTURE ⑤：頂列 36px palette-6 + 中列 80px palette-7）
   ========================================================= */
.site-header {
  position: sticky;
  top: calc(-1 * var(--header-topbar-h)); /* 捲動後頂列滑出、中列 80px 固定 */
  z-index: 100;
}
.site-header__topbar {
  height: var(--header-topbar-h);
  background: var(--palette-6);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.site-header__topbar-text {
  font-size: 14px;
  letter-spacing: var(--ls-typo);
  color: var(--palette-4);
  white-space: nowrap;
}
.site-header__main {
  height: var(--header-main-h);
  background: var(--palette-7);
  border-bottom: var(--hairline);
  transition: background-color .2s ease, backdrop-filter .2s ease;
}
.site-header.is-sticky .site-header__main {
  background: rgba(255, 250, 247, .85);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img,
.site-header__logo .custom-logo { max-height: 48px; width: auto; }
.site-header__title {
  font-size: 25px;
  font-weight: 700;
  color: var(--palette-4);
}
/* 母站實況：選單緊貼 LOGO 靠左（P4 截圖對照修正）；CTA 推最右成框鈕 */
.site-header__nav { margin-left: 0; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-nav a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--ls-typo);
  text-transform: capitalize;
  color: var(--palette-4);
}
.site-nav a:hover { color: var(--color-accent-hover); }
.site-header__cta {
  margin-left: auto;
  font-size: 14px;
  letter-spacing: var(--ls-typo);
  color: var(--palette-4);
  border: 1px solid var(--palette-5);
  padding: 10px 18px;
}
.site-header__cta:hover { color: var(--color-accent-hover); }

/* 漢堡（手機才顯示；純 CSS 三線） */
.site-header__burger { display: none; }
.site-header__burger-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.site-header__burger-bars i {
  display: block;
  height: 2px;
  background: var(--palette-4);
  transition: background-color .2s ease;
}
.site-header__burger:hover .site-header__burger-bars i { background: var(--color-accent-hover); }

/* ---------- Offcanvas（Blocksy 側欄重刻：65vw、≤689px 90vw、底 palette-7）---------- */
.niiice-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.niiice-offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(58, 49, 44, .4);
  opacity: 0;
  transition: opacity .3s ease;
}
.niiice-offcanvas__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 65vw;
  background: var(--palette-7);
  padding: 64px 32px 32px;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
}
.niiice-offcanvas__close {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 24px;
  line-height: 1;
  color: var(--palette-4);
  padding: 8px;
}
.niiice-offcanvas__close:hover { color: var(--color-accent-hover); }
.niiice-offcanvas__menu {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.niiice-offcanvas__menu a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--ls-typo);
  color: var(--palette-4);
}
.niiice-offcanvas__cta { align-self: flex-start; }

html.niiice-menu-open .niiice-offcanvas {
  visibility: visible;
  pointer-events: auto;
}
html.niiice-menu-open .niiice-offcanvas__backdrop { opacity: 1; }
html.niiice-menu-open .niiice-offcanvas__panel { transform: translateX(0); }
html.niiice-menu-open { overflow: hidden; }

/* =========================================================
   Footer（CAPTURE ⑤：整塊 palette-11）
   ========================================================= */
.site-footer {
  background: var(--palette-11);
  font-size: 14px;
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}
.site-footer a { color: var(--palette-3); }
.site-footer a:hover { color: var(--color-accent-hover); }

.site-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 72px 0 32px;
}
.site-footer__brand { flex: 0 0 30%; }
.site-footer__logo img,
.site-footer__logo .custom-logo { max-height: 48px; width: auto; }
.site-footer__title {
  font-size: 25px;
  font-weight: 700;
  color: var(--palette-4);
}
.site-footer__contact { margin-top: 16px; }
.site-footer__row { line-height: var(--typo-secondary-lh); }
.site-footer__row.is-empty { display: none; }

.site-footer__right {
  flex: 0 0 70%;
  display: flex;
  justify-content: flex-end;
  gap: 72px;
}
.site-footer__nav-list {
  display: flex;
  gap: 48px;
}
.site-footer__nav-list a { font-size: 14px; }
.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 104px;
}
.site-footer__social a { font-size: 14px; }

.site-footer__bottom {
  border-top: var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0 24px;
  font-size: 14px;
}

/* ---------- 回頂鈕 ---------- */
.niiice-backtotop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--palette-7);
  border: var(--hairline);
  color: var(--palette-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.niiice-backtotop.is-visible { opacity: 1; visibility: visible; }
.niiice-backtotop:hover { background: var(--palette-6); }

/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 1024px) {
  .niiice-container { max-width: 1024px; }
  .niiice-case { height: var(--case-h-t); } /* 320px */
}

@media (max-width: 767px) {
  .niiice-container { max-width: 767px; }

  /* 手機字級同桌機（capture ①：≤767px 無另設字級），只有節奏改變 */
  .niiice-section {
    margin-top: var(--section-gap-m-top);      /* 48px */
    margin-bottom: var(--section-gap-m-bottom);/* 80px */
  }

  .niiice-section-head { flex-direction: column; }
  .niiice-section-head__left,
  .niiice-section-head__right { flex: 1 1 auto; width: 100%; }

  .niiice-banner { min-height: var(--banner-min-h-m); } /* 240px */

  /* header：選單 / CTA 收進 offcanvas，露出漢堡 */
  .site-header__nav,
  .site-header__cta { display: none; }
  .site-header__burger {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 12px; /* 觸控目標 ≥44px */
  }

  /* case-accordion 直向（上下展開） */
  .niiice-case {
    flex-direction: column;
    height: var(--case-total-h-m); /* total 400px */
  }
  .niiice-case__item { min-height: 0; }

  /* footer 直排；導覽選單手機隱藏（母站行為） */
  .site-footer__top {
    flex-direction: column;
    padding-top: 24px;
  }
  .site-footer__brand,
  .site-footer__right { flex: 1 1 auto; width: 100%; }
  .site-footer__right { justify-content: flex-start; gap: 32px; }
  .site-footer__nav { display: none; }
  .site-footer__bottom { flex-wrap: wrap; }
}

@media (max-width: 689px) {
  .niiice-offcanvas__panel { width: 90vw; }
}