/* ==========================================================================
   加盟頁 /partner · 夜空月光 Night Moon(正式版)
   建立在 theme-night.css 之上(色彩 token、夜空底、NightSerif、按鈕、卡片、膠囊、頁尾都在那支);
   這裡只放加盟頁自己的版面。本頁不再載入 site.css(它有淺/深色切換分支,會把夜空蓋掉)。
   頁面順序:第一屏(小標 + 標題 + 副標 + 兩顆按鈕)→ 你是哪一種(三張小卡)→ 開店流程 → 費用與合約(三張卡)→ 常見問題 → 留資料表單。
   一次只講一個重點,細節(問答)用可展開的 <details> 收著。
   語氣比首頁更收斂:不放閃爍星與流星,只留靜態星點、金色細線、合約式卡片。
   動態只有一個:底部行動列滑走(只動 transform)。
   ========================================================================== */

/* ---------- 基底 ---------- */
html { scroll-behavior: smooth; }
/* 重設用 :where() 包起來(權重 0),元件自己的 margin / color 才蓋得過去 */
:where(.fj) :where(p, h1, h2, h3, figure, ol, ul) { margin: 0; padding: 0; }
:where(.fj) :where(ul, ol) { list-style: none; }
:where(.fj) a { color: inherit; }
.fj { line-height: 1.7; overflow-wrap: break-word; }
/* 內文避免最後一行只剩一兩個字(支援的瀏覽器才生效,不支援就照舊斷行) */
:where(.fj) :where(p, li, summary, a) { text-wrap: pretty; }
.fj section[id] { scroll-margin-top: 12px; }

.fj-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------- 頁首 ----------
   品牌列用共用的 .n-top / .n-brand(標誌、字級、窄螢幕縮字都在 theme-night.css);這裡只管限寬與黏頂。
   霧面底用共用的 .n-frost,但手機頁首不黏頂、要透明(底部已有固定行動列),所以手機把霧面關掉 */
.fj-top { position: relative; z-index: 30; }
@media (max-width: 700.98px) {
  .fj-top.n-frost { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.fj-top-in { max-width: 1080px; margin: 0 auto; }
.fj-nav { display: none; }
.fj-back { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }   /* 返回點餐:手機靠右;太窄時收掉品牌旁的「加盟合作」小字讓出位置 */
@media (max-width: 419.98px) { .fj-top .n-brand-sub { display: none; } }

/* ---------- 第一屏 ---------- */
.fj-hero { position: relative; }
/* 手機:照片只留一條窄帶(第一屏要放得下標題、副標、兩顆按鈕),高度跟著螢幕高度走 */
.fj-hero-ph {
  position: relative; overflow: hidden; background: #1a2a55;
  height: 112px; height: clamp(96px, 17vh, 170px);
}
/* 照片右邊有外文道具書(原圖 x≥760)、右上兩罐香料的外文標籤(x≥730):窄帶放大 1.45 倍、以 46% 為中心縮放,
   看得到的範圍約原圖 x 129~750(外文都在框外),雞排比以前大、窄帶裡看得清楚。用 transform 不動版面(舊瀏覽器只是不放大) */
.fj-hero-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%;
  -webkit-transform: scale(1.45); transform: scale(1.45); -webkit-transform-origin: 46% 50%; transform-origin: 46% 50%; }
/* 照片保留原色:下緣用遮罩淡出到夜空(不疊色塊,才不會跟頁面漸層底接出一條縫) */
.fj-hero-ph {
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .55) 76%, transparent);
  mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .55) 76%, transparent);
}
.fj-hero-in { position: relative; z-index: 1; isolation: isolate; max-width: 1080px; margin: -10px auto 0; padding: 0 16px 0; }
.fj-sky { z-index: -1; height: 260px; top: 20px; }
.fj-kicker { font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--n-moon-hi); }
/* 主標套共用 .n-h1(明體、米白 --n-ink);這裡只放大字級與行距 */
.fj-hero h1 {
  margin-top: 6px;
  font-size: 26px; font-size: clamp(23px, 7.3vw, 34px); line-height: 1.4; letter-spacing: .03em;
}
/* 標題在逗號後分兩段、每段不拆開:手機放不下整句時只會在逗號後換行,不會剩一兩個字掉到下一行 */
.fj-hero h1 span { display: inline-block; max-width: 100%; }
.fj-lead { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--n-ink-2); max-width: 32em; }
/* 中文短句只在標點後換行(「條件」「看過」這類詞不被拆在兩行),折成多行時平均分配;
   overflow-wrap:anywhere 兜底:真的整段放不下才強拆,不會撐出橫向捲動(不支援 text-wrap 的舊瀏覽器只是照常斷行)。
   只用在欄寬夠放下最長一段(約 15 個字)的地方;流程四步桌機是四欄、欄很窄,不套用(強拆會讓句號掉到行首) */
.fj-lead, .fj-sub, .fj-term p, .fj-ticks li { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.fj-steps span { text-wrap: balance; }
@media (max-width: 700.98px) { .fj-steps span { word-break: keep-all; overflow-wrap: anywhere; } }
/* 兩顆按鈕:手機並排各半,第一屏就按得到 */
.fj-cta { display: flex; gap: 10px; margin-top: 16px; }
.fj-cta .n-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; white-space: normal; }

/* ---------- 區塊框架 ---------- */
.fj-sec { padding-top: 56px; }
.fj-hero + .fj-wrap > .fj-sec:first-child { padding-top: 44px; }
.fj-head { margin-bottom: 22px; }
.fj-head h2 {
  margin-top: 10px; font-family: var(--n-serif); font-weight: 900;
  font-size: 24px; font-size: clamp(22px, 6.2vw, 36px); line-height: 1.45; letter-spacing: .04em; color: var(--n-ink);
  text-wrap: balance;   /* 折行時兩行等長,不會剩一個孤字(LINE iOS 17.5+ / 新版 Chrome;舊版照常斷行,關鍵標題另用 span 保護) */
}
.fj-head h2 span { display: inline-block; }   /* 標題只在逗號後斷行,不留孤字 */
.fj-sub { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--n-ink-2); max-width: 36em; }

/* ---------- 條列(費用與合約三張卡共用):每條前面一個月黃勾 ---------- */
.fj-ticks { margin-top: 12px; }
.fj-ticks li {
  position: relative; padding: 10px 0 10px 26px; font-size: 14.5px; line-height: 1.7; color: var(--n-ink);
  border-top: 1px solid var(--n-line);
}
.fj-ticks li::before {
  content: ""; position: absolute; left: 3px; top: 18px; width: 10px; height: 5px;
  border-left: 2px solid var(--n-moon); border-bottom: 2px solid var(--n-moon); transform: rotate(-45deg);
}

/* ---------- 月光帶(費用與合約):整段換一層冷月光底,拉出段落節奏 ---------- */
.fj-band {
  position: relative; margin-top: 56px; padding: 48px 0 52px;
  background: var(--n-grain), radial-gradient(90% 60% at 50% 0%, var(--n-moonlight), transparent 70%), linear-gradient(180deg, rgba(8, 18, 49, .55), rgba(17, 34, 76, .5));
  border-top: 1px solid var(--n-line); border-bottom: 1px solid var(--n-line);
}
.fj-band .fj-head { margin-bottom: 22px; }

/* ---------- 開店流程:手機直式時間軸,桌機橫排 ---------- */
.fj-steps { position: relative; counter-reset: st; }
.fj-steps::before {
  content: ""; position: absolute; left: 17px; top: 18px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, rgba(240, 192, 56, .7), rgba(240, 192, 56, .2));
}
.fj-steps li { counter-increment: st; position: relative; padding: 6px 0 18px 54px; }
.fj-steps li::before {
  content: counter(st); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--n-serif); font-weight: 900; font-size: 16px; color: var(--n-moon-hi);
  background: #13244f; border: 1.5px solid var(--n-moon);
}
.fj-steps b { display: block; font-size: 16.5px; font-weight: 900; color: var(--n-ink); letter-spacing: .08em; }
.fj-steps span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.75; color: var(--n-ink-2); }

/* ---------- 專屬點餐系統:圖示格。每一格點了才展開,一次只開一項(name="fj-sys" 同組互斥,舊瀏覽器由頁面底部小腳本補);
   說明統一放在格子下面的共用面板(.fj-sys-panel,由小腳本填;小腳本沒跑時,說明就在格子裡展開) ---------- */
.fj-sys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 760px; }
.fj-sys-item { position: relative; background: var(--n-chip-bg); border: 1px solid var(--n-line-2); box-shadow: none; transition: background .2s, border-color .2s; }
.fj-sys-item summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 100px; padding: 14px 6px 12px;
  text-align: center; cursor: pointer; list-style: none; color: var(--n-ink); -webkit-tap-highlight-color: transparent;
}
.fj-sys-item summary::-webkit-details-marker { display: none; }
.fj-sys-ico { display: block; width: 30px; height: 30px; fill: none; stroke: var(--n-moon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fj-sys-item h3 { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; line-height: 1.45; color: inherit; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.fj-sys-item p { padding: 0 8px 12px; font-size: 14.5px; line-height: 1.85; color: var(--n-ink-2); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.fj-sys-item[open] { background: var(--n-moon-grad); border-color: transparent; box-shadow: var(--n-moon-glow); }
.fj-sys-item[open] summary, .fj-sys-item[open] p { color: var(--n-on-moon); }
.fj-sys-item[open] .fj-sys-ico { stroke: var(--n-on-moon); }
.fj-sys-item:last-child:nth-child(3n + 1) { grid-column: 2; }   /* 最後一列只剩一格時放中間 */
.fj-sys.has-panel .fj-sys-item p { display: none; }
.fj-sys-panel {
  max-width: 760px; min-height: 6.4em; margin-top: 14px; padding: 16px 18px; display: flex; align-items: center;
  border: 1px solid var(--n-moon-line); border-left: 3px solid var(--n-moon); border-radius: var(--n-radius); background: var(--n-glass); background-color: var(--n-night-2);
  font-size: 15px; line-height: 1.9; color: var(--n-ink); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
.fj-sys-panel.is-hint { color: var(--n-muted); border: 1px dashed var(--n-line-2); background: none; }


/* ---------- 三張卡(你是哪一種、費用與合約共用):手機直排,寬螢幕並排三欄 ---------- */
.fj-terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fj-term { padding: 18px 16px 8px; }
.fj-term::before {
  content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(240, 192, 56, 0), var(--n-moon) 30%, var(--n-moon) 70%, rgba(240, 192, 56, 0));
}
.fj-term h3 { font-size: 17px; font-weight: 900; letter-spacing: .14em; color: var(--n-moon-hi); }
.fj-term .fj-ticks { margin-top: 8px; }
.fj-term .fj-ticks li:first-child { border-top: 0; }
/* 「你是哪一種」的卡:標籤 + 一段話(沒有條列) */
.fj-term p { margin-top: 8px; padding-bottom: 8px; font-size: 14.5px; line-height: 1.8; color: var(--n-ink-2); }

/* ---------- 表單 ---------- */
.fj-apply {
  position: relative; margin-top: 56px; padding: 48px 0 60px;
  background: radial-gradient(80% 50% at 50% 0%, var(--n-moonlight), transparent 70%);
  border-top: 1px solid var(--n-line);
}
.fj-apply .fj-head { max-width: 640px; margin-left: auto; margin-right: auto; }
.fj-form { max-width: 640px; margin: 0 auto; padding: 18px 16px; display: grid; gap: 16px; border-color: rgba(240, 192, 56, .26); }
.fj-form .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fj-form label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 800; letter-spacing: .06em; color: var(--n-ink-2); }
.fj-form label i { font-style: normal; color: var(--n-moon); }
/* 輸入欄、下拉、多行欄一律用共用的 .n-field(深底、聚焦光圈、月黃箭頭、深底下拉選項、自動填入蓋底都在 theme-night.css) */
.fj-form button { white-space: normal; }
.fj-note { font-size: 13px; line-height: 1.8; color: var(--n-muted); }
.fj-note a { display: inline-block; padding: 12px 2px; margin: -12px 0; color: var(--n-moon-hi); }
.msg { display: none; padding: 12px 14px; border-radius: var(--n-radius-xs); font-size: 14.5px; line-height: 1.7; }
.msg.ok { display: block; color: var(--n-ok); background: var(--n-ok-bg); border: 1px solid var(--n-ok-line); }
.msg.err { display: block; color: var(--n-warn); background: var(--n-warn-bg); border: 1px solid var(--n-warn-line); }

/* ---------- 頁尾 ---------- */
.fj-foot { margin-top: 0; }

/* ---------- 手機底部黏性 CTA ----------
   平常藏著(HTML 上預設 is-hidden);第一屏的兩顆按鈕和表單都不在畫面上時才滑出來(頁尾腳本控制)。
   霧面底用共用的 .n-frost(HTML 上已加);position:fixed 不吃 body 的左右安全區內距,自己補(iPhone 橫拿不被瀏海 / 圓角切到) */
.fj-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 10px;
  padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: max(14px, var(--n-safe-l)); padding-right: max(14px, var(--n-safe-r));
  border-top: 1px solid var(--n-line);
  transition: transform .22s var(--n-ease);
}
.fj-sticky-cta.is-hidden { transform: translateY(110%); }
.fj-sticky-cta .n-btn { min-width: 0; min-height: 48px; padding: 0 10px; }
.fj-sticky-cta .call { flex: 1 1 40%; }
.fj-sticky-cta .go { flex: 1 1 60%; }
/* 已經捲過「開店流程」:固定列只留「直接留資料」一顆(看過的段落不再提醒) */
.fj-sticky-cta.past-process .call { display: none; }
.fj-sticky-cta.past-process .go { flex: 1 1 100%; }
.fj { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 窄手機(≤359) ---------- */
@media (max-width: 359px) {
  .fj-sticky-cta { gap: 8px; padding-left: max(10px, var(--n-safe-l)); padding-right: max(10px, var(--n-safe-r)); }
  .fj-sticky-cta .n-btn { font-size: 14.5px; letter-spacing: .02em; padding: 0 6px; }
  .fj-cta .n-btn { font-size: 15px; letter-spacing: .02em; padding: 0 6px; }
}

/* ---------- 大手機 / 平板 ---------- */
@media (min-width: 560px) {
  .fj-form .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fj-form { padding: 24px 22px; }
}

/* ---------- 桌機(≥701):底部列變右下浮鈕、第一屏照片放大 ---------- */
@media (min-width: 701px) {
  .fj { padding-bottom: 0; }
  .fj-wrap, .fj-top-in, .fj-hero-in { padding-left: 28px; padding-right: 28px; }
  .fj-top { position: sticky; top: 0; border-bottom: 1px solid var(--n-line); }   /* 霧面底由 .n-frost 提供 */
  .fj-top-in { min-height: 62px; }
  .fj-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .fj-back { margin-left: 8px; }
  .fj-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
    font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--n-ink-2); text-decoration: none;
  }
  .fj-nav a:hover { color: var(--n-moon-hi); background: rgba(255, 255, 255, .04); }
  .fj section[id] { scroll-margin-top: 74px; }

  .fj-cta { margin-top: 24px; }
  .fj-cta .n-btn { flex: 0 1 auto; min-width: 200px; padding: 0 26px; }
  .fj-hero-ph { height: 46vw; max-height: 420px; }
  .fj-hero-in { margin-top: -28px; }
  .fj-lead { font-size: 15.5px; }

  .fj-sec { padding-top: 80px; }
  .fj-band, .fj-apply { margin-top: 80px; padding: 68px 0 76px; }
  .fj-head { margin-bottom: 30px; }
  .fj-sub { font-size: 16px; }

  .fj-sticky-cta {
    left: auto; right: 24px; right: max(24px, var(--n-safe-r)); bottom: 24px; padding: 0; gap: 0;
    background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .fj-sticky-cta .call { display: none; }
  /* 右下浮鈕:霧面深藍 + 金框(畫面上的實心月黃留給第一屏的主按鈕) */
  .fj-sticky-cta .go {
    flex: none; min-height: 52px; padding: 0 24px; border-radius: 999px;
    color: var(--n-moon-hi); background: rgba(12, 26, 61, .92); border: 1px solid var(--n-moon-line);
    box-shadow: 0 10px 30px rgba(2, 8, 26, .5), 0 0 0 1px rgba(240, 192, 56, .08);
  }
  .fj-sticky-cta .go:hover { color: #fff3c4; border-color: var(--n-moon); filter: none; }
  .fj-sticky-cta.is-hidden { transform: translateY(calc(100% + 48px)); }

  .fj-terms { gap: 14px; }
  .fj-term { padding: 22px 22px 10px; }
  /* 2026-10-02:流程、費用、留資料三段的左邊界對齊(以前問答置中在 820、表單置中在 640,往下捲時內容忽左忽右) */
  .fj-apply .fj-head, .fj-form { margin-left: 0; margin-right: auto; }

  /* 流程橫排:四顆圓點一條金線 */
  .fj-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .fj-steps::before { left: 12.5%; right: 12.5%; top: 17px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, rgba(240, 192, 56, .25), rgba(240, 192, 56, .75), rgba(240, 192, 56, .25)); }
  .fj-steps li { padding: 50px 4px 0; text-align: center; }
  .fj-steps li::before { left: 50%; margin-left: -18px; }
}

/* ---------- 寬桌機(≥900):第一屏左字右照 ---------- */
@media (min-width: 900px) {
  .fj-hero {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 48px; isolation: isolate;
    max-width: 1080px; margin: 0 auto; padding: 48px 28px 16px;
  }
  .fj-hero-ph {
    order: 2; height: auto; max-height: none; aspect-ratio: 5 / 4; border-radius: var(--n-radius-xl);
    box-shadow: 0 0 0 1px rgba(255, 196, 110, .3), 0 16px 46px rgba(242, 161, 74, .2), 0 24px 60px rgba(2, 8, 26, .45);
  }
  .fj-hero-ph { -webkit-mask-image: none; mask-image: none; }
  /* 右圖(5:4,跟照片同比例):放大 1.364 倍,看得到的範圍約原圖 x 60~720、y 60~588,外文書與香料罐標籤都在框外 */
  .fj-hero-ph img { object-position: 50% 50%; -webkit-transform: scale(1.364); transform: scale(1.364); -webkit-transform-origin: 25% 31.2%; transform-origin: 25% 31.2%; }
  /* 月亮從照片右上角後面探出來:跟品牌 LOGO 同方向的彎月(亮面在左、缺口朝右上),
     形狀用會員卡、頁尾月亮圖示同一條線(SVG 遮罩),不再用圓形挖洞 */
  .fj-hero::after {
    content: ""; position: absolute; z-index: -1; top: 6px; right: -6px; width: 120px; height: 120px; pointer-events: none;
    background: var(--n-moon);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 14 80 84'%3E%3Cpath d='M70 14a42 42 0 1 0 34 60A34 34 0 0 1 70 14z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 14 80 84'%3E%3Cpath d='M70 14a42 42 0 1 0 34 60A34 34 0 0 1 70 14z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 18px rgba(240, 192, 56, .5)); opacity: .95;
  }
  .fj-hero-in { order: 1; margin: 0; padding: 0; }
  .fj-sky { top: -40px; height: 320px; left: -40px; right: -40px; }
  .fj-sky .n-sky-halo { left: 38%; top: 170px; }
  .fj-hero h1 { font-size: clamp(34px, 3.7vw, 46px); }
  .fj-lead { font-size: 16.5px; }
}

/* ---------- 三張卡並排(≥960):卡內最長一行(約 14 個字)放得下才並排,再窄就維持直排 ---------- */
@media (min-width: 960px) {
  .fj-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 減少動態:不平滑捲動(theme-night.css 已把所有動畫縮到瞬間) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}