@charset "UTF-8";
/* ============================================================
   宿一門 · 課程頁（courses.html）＋ 回看頁（replay.html）
   ------------------------------------------------------------
   疊在 v3.css 之上，只補課程頁專用件：
     · 題頭（不佔整屏）
     · 三階課程卡 →「層」長出面板
     · 期數卡（登堂班十三期 / 入室班四期）→「層」長出面板
     · 請益 / 門生席區塊
     · 問答 →「折」
     · 收尾句 →「流」逐字洇開
   純 CSS + 原生 JS，零第三方依賴
   ============================================================ */

/* ================= 題頭（比山門矮，快進正題） ================= */
.c-hero{position:relative;z-index:2;
  padding:clamp(132px,17vw,208px) 0 clamp(8px,2vw,18px)}
.c-hero .standfirst{max-width:40em}

/* ================= 分組題（登堂班 · 十三期） ================= */
.c-group{margin-top:clamp(34px,4.4vw,56px);display:flex;align-items:baseline;gap:14px;
  font-weight:400;font-size:clamp(.92rem,1.5vw,1.06rem);letter-spacing:.3em;color:var(--ink-3)}
.c-group::after{content:'';flex:1;height:1px;background:var(--rule)}
.c-group em{font-style:normal;font-size:.78rem;letter-spacing:.24em;color:var(--ink-4)}

/* ================= 三階課程：三張獨立卡 =================
   刻意不做成課表式的行——「行」是表格的近親，上下用線串起來就是一張價目表。
   卡片各有邊界、各有投影、各自留白，三階才是三個東西。 */
.lv-stack{margin-top:clamp(30px,4vw,48px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px)}
.c-lv{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);
  padding:clamp(24px,2.9vw,36px);cursor:pointer;box-shadow:var(--card-sh);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.c-lv::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--zhu),rgba(158,43,37,.42));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .75s var(--ease-slow);pointer-events:none}
.c-lv .lv-idx{display:block;font-size:.72rem;letter-spacing:.4em;color:var(--gold);white-space:nowrap}
.c-lv .lv-t{display:block;margin-top:.9em}
.c-lv .lv-name{display:block;font-weight:400;font-size:clamp(1.3rem,2.1vw,1.6rem);
  letter-spacing:.16em;color:var(--ink)}
.c-lv .lv-form{display:block;margin-top:.6em;font-size:.78rem;letter-spacing:.2em;color:var(--gold-l)}
.c-lv .lv-b{display:block;margin-top:1.15em;padding-top:1.05em;border-top:1px solid var(--rule);flex:1}
.c-lv .lv-desc{display:block;font-size:.92rem;line-height:1.98;color:var(--ink-2)}
.c-lv .lv-incl{display:block;margin-top:.7em;font-size:.76rem;letter-spacing:.1em;color:var(--ink-4)}
.c-lv .c-go{margin-top:1.05em;opacity:.6}
.c-lv:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ================= 期數卡：彼此留白，各自成卡 =================
   上一版用 gap:1px 露底色當分隔線，那條線讓整組看起來像一張表格。
   改成真正的間隔＋獨立圓角＋投影；窄檔排不滿時 flex 居中，不留右邊缺角。 */
.c-grid{--cg:clamp(12px,1.4vw,18px);margin-top:clamp(18px,2.4vw,26px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cg)}
/* 期數卡：內容**從頂邊起排**（標籤、標題、說明一眼對齊），「推開」釘住卡底。
   原本是 justify-content:flex-end（底部對齊）＋標籤絕對定位——說明一旦兩行，
   那張卡的標題就被往上頂一行（術數五期說明行數是 2,1,2,1,1，正好錯位 21.3px）。
   標籤改成排進流內後，它落在的位置與原本絕對定位幾乎一致（左內距 2.2vw vs 2.4vw）。 */
.c-card{position:relative;display:flex;flex-direction:column;justify-content:flex-start;
  flex:0 0 calc((100% - 3 * var(--cg)) / 4);min-width:0;overflow:hidden;
  background:var(--card-bg);border:1px solid var(--card-line);border-radius:6px;
  padding:clamp(18px,2.2vw,26px);min-height:clamp(132px,13vw,164px);cursor:pointer;
  box-shadow:var(--card-sh);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .55s var(--ease),background .55s var(--ease)}
.c-card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--zhu),rgba(158,43,37,.42));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .75s var(--ease-slow);pointer-events:none}
.c-grid.col-5 .c-card{flex-basis:calc((100% - 4 * var(--cg)) / 5)}
.c-card .c-tag{display:block;margin-bottom:.5em;line-height:1.45;
  font-size:.7rem;letter-spacing:.32em;color:var(--gold)}
.c-card .c-name{font-weight:400;font-size:clamp(1.04rem,1.5vw,1.26rem);line-height:1.6;
  letter-spacing:.14em;color:var(--ink)}
.c-card .c-note{margin-top:.5em;font-size:.76rem;line-height:1.75;color:var(--ink-4)}
/* 餘量全部落到「說明」與「推開」之間，同一列的標題因此永遠齊。 */
.c-card .c-go{margin-top:auto;padding-top:.65em}
.c-card:focus-visible{border-color:var(--gold);box-shadow:0 0 0 2px rgba(150,119,44,.35),var(--card-sh-hi)}

/* 「推開 →」：桌面懸停才亮，觸屏常顯 */
.c-go{display:block;margin-top:.7em;min-height:1.4rem;font-size:.72rem;
  letter-spacing:.24em;color:var(--ink-4);opacity:.45;
  transition:opacity .5s var(--ease),color .5s var(--ease)}
.c-go i{font-style:normal;display:inline-block;transition:transform .5s var(--ease)}

/* ================= 請益 / 門生席 ================= */
.c-block{margin-top:clamp(30px,4vw,48px);display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px)}
.c-block-copy{background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);
  padding:clamp(28px,3.8vw,48px);box-shadow:var(--card-sh)}
.c-block-copy .c-kicker{font-size:.74rem;letter-spacing:.44em;color:var(--gold)}
.c-block-copy h3{margin-top:.85em;font-weight:400;font-size:clamp(1.3rem,2.4vw,1.72rem);
  letter-spacing:.16em;color:var(--ink)}
.c-block-copy p{margin-top:1em;font-size:.95rem;line-height:2.08;color:var(--ink-2)}
.c-points{margin-top:clamp(20px,2.6vw,30px);padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:.7em}
.c-points li{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:1em;
  font-size:.87rem;line-height:1.95;color:var(--ink-3)}
.c-points b{font-weight:400;color:var(--ink-4);letter-spacing:.12em}
.c-block-act{background:var(--paper-2);border:1px solid var(--card-line);border-radius:var(--card-r);
  padding:clamp(28px,3.8vw,48px);box-shadow:var(--card-sh);
  display:flex;flex-direction:column;justify-content:center;gap:14px;text-align:center}
.c-act-k{font-size:.72rem;letter-spacing:.46em;text-indent:.46em;color:var(--ink-4)}
.c-act-v{font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:.16em;color:var(--ink);line-height:1.4}
.c-act-note{margin-top:6px;font-size:.76rem;line-height:1.9;color:var(--ink-4)}
.c-block-act .btn{width:100%}

/* ================= 問答（折） ================= */
.faq{margin-top:clamp(34px,4.6vw,56px);border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(12px,2vw,22px);width:100%;text-align:left;
  padding:clamp(18px,2.5vw,28px) clamp(2px,1vw,10px);
  font-size:clamp(1rem,1.7vw,1.14rem);letter-spacing:.1em;color:var(--ink);
  transition:color .45s var(--ease)}
.faq-btn .q-no{font-size:.72rem;letter-spacing:.4em;color:var(--gold)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .66s var(--ease-slow)}
.faq-item.open .faq-body{grid-template-rows:1fr}
.faq-in{overflow:hidden;min-height:0}
.faq-in p{padding:0 clamp(2px,1vw,10px) clamp(20px,2.8vw,30px);
  max-width:44em;font-size:.93rem;line-height:2.1;color:var(--ink-2);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .55s var(--ease)}
.faq-item.open .faq-in p{opacity:1;transform:none;transition-delay:.1s}
.faq-item.open .faq-btn{color:var(--gold)}
.faq-item.open .f-ar::after{transform:scaleY(0)}

/* ================= 回看入口（低調一條） ================= */
.rp-strip{margin-top:clamp(40px,5.6vw,68px);border:1px solid var(--card-line);
  border-radius:var(--card-r);box-shadow:var(--card-sh);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 26px;padding:clamp(20px,2.8vw,30px) clamp(22px,3vw,38px);
  background:var(--card-bg)}
.rp-strip .rs-k{font-size:.72rem;letter-spacing:.44em;color:var(--ink-4)}
.rp-strip .rs-t{margin-top:.55em;font-size:.98rem;letter-spacing:.1em;color:var(--ink-3)}

/* ================= 收尾句（流：逐字洇開） ================= */
.c-coda{position:relative;z-index:2;text-align:center;
  padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,116px)}
.c-coda p{font-size:clamp(1.34rem,3.2vw,2.2rem);letter-spacing:.2em;text-indent:.2em;
  line-height:1.9;color:var(--ink)}
.c-coda .ch{display:inline-block;opacity:.12;filter:blur(7px);transform:translateY(.12em);
  transition:opacity 1.3s var(--ease),filter 1.3s var(--ease),transform 1.3s var(--ease)}
.c-coda.lit .ch{opacity:1;filter:blur(0);transform:none}

/* ================= 面板補充（左欄大字／三日安排／按鈕） ================= */
.fig-mark{text-align:center;line-height:1.1}
.fig-mark b{display:block;font-weight:400;font-size:clamp(2.4rem,5.6vw,4.2rem);
  letter-spacing:.24em;text-indent:.24em;color:var(--ink)}
.fig-mark small{display:block;margin-top:.9em;font-size:.72rem;letter-spacing:.4em;
  text-indent:.4em;color:var(--gold)}

.p-block{margin-top:clamp(18px,2.4vw,28px);padding-top:clamp(14px,1.9vw,20px);
  border-top:1px solid var(--line)}
.p-block h4{margin-bottom:.9em;font-weight:400;font-size:.74rem;
  letter-spacing:.44em;color:var(--gold)}
.p-kv{display:flex;flex-direction:column;gap:.66em}
.p-kv li{display:grid;grid-template-columns:5.4em minmax(0,1fr);
  gap:1em;font-size:.85rem;line-height:1.9;color:var(--ink-3)}
.p-kv b{font-weight:400;color:var(--ink-4);letter-spacing:.12em}
.p-cta{margin-top:clamp(22px,2.8vw,32px);display:flex;flex-wrap:wrap;gap:12px}
.p-cta .btn{min-height:46px;padding:0 24px;font-size:.88rem;letter-spacing:.16em}
.sheet-panel.open .panel-body > *:nth-child(n+8){transition-delay:.41s}

/* ================= 回看頁（replay.html） ================= */
.rp{position:relative;z-index:2;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(120px,16vw,180px) var(--gut) clamp(56px,8vw,90px)}
.rp-card{width:min(520px,100%);text-align:center;background:var(--paper-2);
  border:1px solid var(--line);padding:clamp(34px,5vw,56px) clamp(24px,4vw,46px)}
.rp-seal{margin:0 auto clamp(18px,2.6vw,26px);width:clamp(56px,6.4vw,88px);height:auto;opacity:.9}
.rp-kicker{font-size:.72rem;letter-spacing:.5em;text-indent:.5em;color:var(--gold)}
.rp-title{margin-top:.8em;font-weight:400;font-size:clamp(1.4rem,3vw,1.9rem);
  letter-spacing:.16em;color:var(--ink)}
.rp-sub{margin-top:.9em;font-size:.86rem;color:var(--ink-4);letter-spacing:.1em}
.rp-form{margin-top:clamp(24px,3.2vw,34px);display:flex;gap:10px}
.rp-input{flex:1;min-width:0;height:50px;padding:0 16px;font:inherit;font-size:.94rem;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px}
.rp-input:focus{outline:none;border-color:var(--gold)}
.rp-form .btn{flex:none;min-height:50px;padding:0 26px}
.rp-hint{margin-top:14px;min-height:1.4rem;font-size:.84rem;color:var(--zhu);letter-spacing:.06em}
.rp-note{margin-top:clamp(18px,2.4vw,26px);font-size:.78rem;line-height:1.95;color:var(--ink-4)}
.rp-stage{width:min(1040px,100%)}
.rp-stage-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding-bottom:clamp(14px,2vw,20px);border-bottom:1px solid var(--rule)}
.rp-stage-head h2{font-weight:400;font-size:clamp(1.16rem,2.2vw,1.5rem);
  letter-spacing:.14em;color:var(--ink)}
.rp-lock{font-size:.8rem;letter-spacing:.24em;color:var(--ink-4);
  padding:8px 16px;border:1px solid var(--rule);transition:color .4s var(--ease),border-color .4s var(--ease)}
.rp-lock:hover{color:var(--zhu);border-color:rgba(158,43,37,.4)}
.rp-video{margin-top:clamp(18px,2.6vw,28px);position:relative;width:100%;aspect-ratio:16/9;
  background:var(--paper-3);border:1px solid var(--rule);overflow:hidden}
.rp-video>*{position:absolute;inset:0;width:100%;height:100%}
.rp-video iframe{border:0}
.rp-ph{display:grid;place-items:center;color:var(--ink-4);
  font-size:.84rem;letter-spacing:.24em}

/* ================= 回看頁 · 分集目錄 =================
   只在 config.js 的 replayList 填了影片 ID 時才出現（replay.html 的 JS 判的）；
   一講都沒填就整塊不下發，回看頁退回單片模式。 */
.rp-body{display:grid;gap:clamp(20px,2.6vw,32px)}
.rp-body.has-list{grid-template-columns:minmax(0,272px) minmax(0,1fr);align-items:start}
.rp-list{border:1px solid var(--card-line);border-radius:var(--card-r);
  background:var(--card-bg);box-shadow:var(--card-sh);
  padding:clamp(14px,2vw,18px) 0;max-height:min(74svh,640px);overflow:auto}
.rl-k{padding:0 clamp(16px,2.2vw,20px) .7em;font-size:.7rem;letter-spacing:.44em;
  text-indent:.44em;color:var(--gold)}
.rl-items{display:flex;flex-direction:column}
/* 模組名＝分組題：細線起頭，不搶講題 */
.rl-mod{padding:.85em clamp(16px,2.2vw,20px) .3em;margin-top:.6em;
  border-top:1px solid var(--rule);font-size:.72rem;letter-spacing:.18em;color:var(--ink-4)}
.rl-mod:first-child{margin-top:0;border-top:0}
.rl-btn{display:grid;grid-template-columns:2.15em minmax(0,1fr);gap:.5em;width:100%;
  padding:.5em clamp(16px,2.2vw,20px);text-align:left;font-size:.84rem;
  line-height:1.6;color:var(--ink-3);
  transition:color .35s var(--ease),background .35s var(--ease)}
.rl-btn b{font-weight:400;letter-spacing:.06em;color:var(--ink-4);
  font-variant-numeric:tabular-nums;transition:color .35s var(--ease)}
/* 還沒上傳的講次：灰掉、不可點（不藏，讓學員看得到完整課表） */
.rl-btn[disabled]{opacity:.4;cursor:default}
.rl-btn.on{color:var(--ink);background:rgba(158,43,37,.055)}
.rl-btn.on b{color:var(--zhu)}
.rp-now{margin-top:.95em;min-height:1.2em;font-size:.8rem;letter-spacing:.12em;color:var(--ink-4)}

/* ================= 響應 ================= */
@media(hover:hover){
  /* 回看頁分集：指到哪一講，哪一講轉朱砂 */
  .rl-btn:not([disabled]):hover{color:var(--zhu);background:rgba(158,43,37,.05)}
  .rl-btn:not([disabled]):hover b{color:var(--zhu)}
  .c-lv:hover,.c-card:hover{transform:translateY(-6px);border-color:rgba(158,43,37,.42);
    box-shadow:var(--card-sh-hi)}
  .c-lv:hover::before,.c-card:hover::before{transform:scaleX(1)}
  .c-lv:hover .c-go,.c-card:hover .c-go{opacity:1;color:var(--zhu)}
  .c-lv:hover .c-go i,.c-card:hover .c-go i{transform:translateX(6px)}
  /* 滑過哪張、哪張亮，其餘收一檔。必須 !important——卡片進場用 animation-fill:both，
     動畫的 opacity 會一直壓住普通宣告。 */
  .c-grid:hover > .c-card:not(:hover){opacity:.75!important}
  .lv-stack:hover > .c-lv:not(:hover){opacity:.75!important}
  .faq-btn:hover{color:var(--zhu)}
}
@media(hover:none){
  .c-go{opacity:.6}
  .c-lv:active,.c-card:active,.faq-btn:active{background:rgba(158,43,37,.07)}
}
@media(max-width:1080px){
  .c-card,.c-grid.col-5 .c-card{flex-basis:calc((100% - 2 * var(--cg)) / 3)}
}
@media(max-width:960px){
  .c-block{grid-template-columns:1fr}
  .c-block-act{text-align:left}
  .c-block-act .btn{width:auto;align-self:flex-start}
}
@media(max-width:860px){
  .lv-stack{grid-template-columns:1fr}
  .c-card,.c-grid.col-5 .c-card{flex-basis:calc((100% - var(--cg)) / 2)}
  /* 回看頁：窄檔收單欄，播放器提到上面（學員進來是為了看，不是為了翻目錄） */
  .rp-body.has-list{grid-template-columns:1fr}
  .rp-main{order:-1}
  .rp-list{max-height:40svh}
}
/* 手機：面板左欄改橫向題款帶（`.panel-art` 在 v3.css 的 760 檔轉 row），
   面板裡的圖示縮成徽記。**必須寫在本檔**——`.fig-mark` 的基準宣告在本檔、
   載入在 v3.css 之後，寫在 v3.css 的媒體查詢裡會被這裡壓掉。 */
@media(max-width:760px){
  .fig-mark b{font-size:1.14rem;letter-spacing:.2em;text-indent:.2em}
  .fig-mark small{display:none}
}
@media(max-width:560px){
  .c-hero{padding-top:clamp(112px,26vw,150px)}
  .c-lv{padding:clamp(22px,5vw,28px)}
  /* 手機：期數卡也不並列，改單欄 */
  .c-grid{--cg:11px}
  .c-card,.c-grid.col-5 .c-card{flex-basis:100%;min-height:0;padding:clamp(16px,4.4vw,20px)}
  .c-card .c-tag{margin-bottom:.4em}
  .c-card .c-name{margin-top:0}
  .p-kv li{grid-template-columns:1fr;gap:.15em}
  .p-kv b{color:var(--gold);font-size:.78rem}
  .rp-form{flex-direction:column}
  .rp-form .btn{width:100%}
  .rp-strip{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .c-coda .ch{opacity:.55;filter:none;transform:none;
    transition:opacity .45s var(--ease)}
  .c-coda.lit .ch{opacity:1}
  .faq-body{transition:grid-template-rows .3s var(--ease)}
  .c-lv:hover,.c-card:hover{transform:none}
  .c-grid:hover > .c-card:not(:hover),
  .lv-stack:hover > .c-lv:not(:hover){opacity:1!important}
}