@font-face{font-family:"UDNHei";src:url("粗黑體.ttc") format("truetype");font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;overflow-x:hidden}body{font-family:"UDNHei","Noto Sans TC",sans-serif;background:#2864a2;color:#fff}
img{max-width:100%;display:block}button{font:inherit}.section-inner{width:min(1180px,calc(100% - 40px));margin:auto}
.hero-section{width:100%;aspect-ratio:1550/1000;background:url("images/2026_.png") center/cover no-repeat}
.platform-section{position:relative;min-height:760px;background:#04122c;overflow:hidden}.platform-stage{position:absolute;inset:0}.platform-video{width:100%;height:100%;object-fit:cover}.platform-text-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.platform-copy{position:relative;z-index:2;padding-top:48px;text-shadow:0 2px 8px #000}.platform-copy h1,.section-heading h1,.star-heading h1{font-size:42px;line-height:1.25;margin:0 0 18px}.platform-copy p,.section-heading p,.star-heading p{font-size:20px;line-height:1.7;max-width:900px;margin:0}
.shared-bg{background:#2864a2 url("images/bg3-4.png") center top/cover fixed no-repeat}.content-section,.interview-section{padding:72px 0}.section-heading{margin-bottom:48px}.section-heading h1,.orange-title{color:#e34401;text-shadow:2px 2px 0 #10286c}.topic-buttons{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:30px 0}.topic-button{width:120px;border:0;background:none;padding:0;cursor:pointer;opacity:.65;transform:scale(.9);transition:.2s}.topic-button.is-active{opacity:1;transform:scale(1)}.topic-panels{min-height:600px}.topic-panel{display:none;font-size:18px;line-height:1.65}.topic-panel.is-active{display:block}.topic-panel p{max-width:980px;margin:0 auto 18px}.topic-panel [style*="text-align: right"]{text-align:right!important}
.u-life-coverflow-wrap,.u-video-ring-wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:16px}.carousel-arrow{width:46px;height:46px;border:0;border-radius:50%;font-size:36px;line-height:1;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;flex:0 0 auto}.u-life-coverflow{min-height:320px;flex:1}.u-life-panel{margin-top:28px}.u-video-ring-scene{width:min(960px,100%);overflow:hidden}.u-video-ring{position:relative;min-height:520px}.u-video-ring-item{position:absolute;left:50%;top:0;width:56%;transform:translateX(-50%);transition:.45s;opacity:.35}.u-video-ring-item.is-active{opacity:1;z-index:3}.u-video-ring-frame{aspect-ratio:16/9}.u-video-ring-frame iframe,.video-frame iframe{width:100%;height:100%;border:0}.u-video-ring-caption{text-align:center;font-size:22px;line-height:1.45;margin-top:14px}
.orange-title{font-size:38px;margin:0 0 36px}.interview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 90px;align-items:start}.interview-card{min-width:0}.video-frame{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px}.interview-quote{font-size:30px;line-height:1.35;margin:28px 0 0;white-space:normal;overflow-wrap:anywhere}.interview-speaker{font-size:30px;line-height:1.35;text-align:right;margin:24px 0 0;color:#e0e0e0}.star-section{position:relative;min-height:900px;background:#102b65 url("images/star.png") center/cover no-repeat;overflow:hidden}.star-heading{padding-top:58px;position:relative;z-index:3}.star-heading h1{color:#9bc8ff;text-shadow:0 0 14px rgba(249,182,125,.65)}.star-wall-highlight{color:#ffe4a6;font-size:1.18em;font-weight:700}.u-star-wall-container{position:absolute;inset:0}.u-star-wall-write-btn{position:absolute;right:7%;bottom:8%;border:0;background:none;cursor:pointer}.contest-fab{position:fixed;right:-1px;bottom:24px;width:350px;z-index:9999}.contest-fab img{width:100%}
@media(max-width:767px){.section-inner{width:calc(100% - 32px)}.hero-section{aspect-ratio:1550/1000;background-size:contain;background-color:#102b65}.platform-section{min-height:100svh}.platform-copy{padding-top:28px}.platform-copy h1,.section-heading h1,.star-heading h1{font-size:30px}.platform-copy p,.section-heading p,.star-heading p{font-size:18px}.content-section,.interview-section{padding:52px 0}.topic-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.topic-button{width:100%;grid-column:span 2}.topic-button:nth-child(4){grid-column:2/span 2}.topic-button:nth-child(5){grid-column:4/span 2}.topic-panels{min-height:0}.topic-panel{font-size:16px}.u-life-coverflow{min-height:250px}.carousel-arrow{width:36px;height:36px;font-size:28px}.u-video-ring{min-height:390px}.u-video-ring-item{width:82%}.u-video-ring-caption{font-size:16px}.orange-title{font-size:30px;margin-bottom:28px}.interview-grid{grid-template-columns:1fr;gap:52px}.interview-quote{font-size:20px;line-height:1.55;margin-top:22px}.interview-speaker{font-size:16px;line-height:1.55;margin-top:18px}.star-section{min-height:760px}.star-heading{padding-top:28px;background:rgba(9,31,74,.35);border-radius:18px;padding:22px 18px;margin-top:18px}.contest-fab{right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:178px}}
@media(max-width:390px){.interview-quote{font-size:18px}.interview-speaker{font-size:15px}.contest-fab{width:165px;right:7px}}


/* =========================================================
   CLEAN V1.1｜人生續寫：恢復 Step 53 的人物新舊照＋輪播＋介紹卡
   ========================================================= */
#block-21 .u-life-coverflow-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:100%;
  max-width:900px;
  margin:38px auto 0;
  padding:0 12px;
  overflow:visible;
}
#block-21 .u-life-coverflow{
  flex:1 1 auto;
  min-width:0;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  overflow:visible;
}
#block-21 .u-life-thumb{
  position:relative;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:width .3s ease,height .3s ease,opacity .3s ease,box-shadow .3s ease;
}
#block-21 .u-life-thumb-center{
  width:220px;
  height:220px;
  opacity:1;
  z-index:3;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
#block-21 .u-life-thumb-near{
  width:130px;
  height:130px;
  opacity:.75;
  z-index:2;
}
#block-21 .u-life-thumb-far{display:none}
#block-21 .u-life-thumb-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .35s ease;
}
#block-21 .u-life-thumb-photo-old{opacity:0}
#block-21 .u-life-thumb:hover .u-life-thumb-photo-new{opacity:0}
#block-21 .u-life-thumb:hover .u-life-thumb-photo-old{opacity:1}
#block-21 .u-life-thumb-caption{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  padding:6px 4px;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:.8rem;
  line-height:1.25;
  text-align:center;
}
#block-21 .u-life-thumb-near .u-life-thumb-caption{
  font-size:.7rem;
  padding:4px 2px;
}
#block-21 .carousel-arrow{
  flex:0 0 46px;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  z-index:10;
}
#block-21 .u-life-panel{
  width:100%;
  max-width:900px;
  min-height:420px;
  margin:30px auto 0;
  padding:20px;
  background:#fff;
  color:#252525;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  overflow:auto;
}
#block-21 .u-life-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
#block-21 .u-life-table colgroup col{width:50%}
#block-21 .u-life-table th,
#block-21 .u-life-table td{
  text-align:left;
  vertical-align:top;
  padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:.95rem;
  line-height:1.7;
  word-break:break-word;
  overflow-wrap:break-word;
}
#block-21 .u-life-table tr:first-child th{
  font-weight:700;
  color:#5c7bf0;
  border-bottom:2px solid #5c7bf0;
}
#block-21 .u-life-table th[colspan="2"]{
  font-weight:700;
  color:#5c7bf0;
  background:rgba(92,123,240,.06);
  border-bottom:0;
  padding-bottom:6px;
}
#block-21 .u-life-table td[colspan="2"]{padding-top:4px}
#block-21 .u-life-table tr:last-child td{border-bottom:0}
#block-21 .u-life-note{
  margin-top:12px;
  font-size:.85rem;
  opacity:.7;
  text-align:right;
}
.u-life-mobile-progress{display:none!important}

@media (max-width:767px){
  #block-21{overflow:hidden}
  #block-21 #lifeCoverflowWrap{
    min-height:230px;
    margin:18px auto 0;
    padding:14px 2px 42px;
    justify-content:space-between;
    gap:6px;
  }
  #block-21 #lifeCoverflow{
    min-height:170px;
    gap:18px;
    overflow:visible;
  }
  #block-21 #lifeCoverflow .u-life-thumb{display:none!important}
  #block-21 #lifeCoverflow .u-life-thumb-center,
  #block-21 #lifeCoverflow .u-life-thumb-next{display:block!important}
  #block-21 #lifeCoverflow .u-life-thumb-center{
    width:148px;
    height:148px;
    opacity:1;
    z-index:3;
  }
  #block-21 #lifeCoverflow .u-life-thumb-next{
    position:relative;
    width:88px;
    height:88px;
    opacity:.82;
    z-index:2;
  }
  #block-21 #lifeCoverflow .u-life-thumb-next::before{
    content:"下一位";
    position:absolute;
    top:-25px;
    left:50%;
    transform:translateX(-50%);
    padding:3px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:#1f5794;
    font-size:12px;
    line-height:1.4;
    font-weight:700;
    white-space:nowrap;
    z-index:6;
  }
  #block-21 #lifeCoverflow .u-life-thumb-caption{
    font-size:12px;
    padding:5px 3px;
  }
  #block-21 #lifeCoverflow .u-life-thumb-next .u-life-thumb-caption{
    font-size:10px;
    padding:4px 2px;
  }
  #block-21 #lifePrev,
  #block-21 #lifeNext{
    flex:0 0 38px;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    font-size:28px;
  }
  #block-21 .u-life-mobile-progress{
    display:block!important;
    position:absolute;
    left:50%;
    bottom:6px;
    transform:translateX(-50%);
    width:max-content;
    max-width:calc(100% - 90px);
    color:rgba(255,255,255,.88);
    font-size:12px;
    line-height:1.5;
    text-align:center;
    pointer-events:none;
  }
  #block-21 #lifePanel{
    width:100%;
    max-width:100%;
    min-height:0;
    max-height:none;
    margin-top:8px;
    padding:12px;
    overflow:visible;
  }
  #block-21 .u-life-table th,
  #block-21 .u-life-table td{
    padding:8px 6px;
    font-size:.82rem;
    line-height:1.7;
    overflow-wrap:anywhere;
  }
}

@media (max-width:360px){
  #block-21 #lifeCoverflowWrap{gap:3px;padding-left:0;padding-right:0}
  #block-21 #lifeCoverflow{gap:12px}
  #block-21 #lifeCoverflow .u-life-thumb-center{width:128px;height:128px}
  #block-21 #lifeCoverflow .u-life-thumb-next{width:70px;height:70px}
  #block-21 #lifePrev,#block-21 #lifeNext{
    flex-basis:34px;width:34px;height:34px;min-width:34px;min-height:34px;
  }
}


/* =========================================================
   CLEAN V1.2B｜AI 三影片輪播完全重建
   不再依賴 video-ring-mobile.js / Nicepage / 3D coverflow
   ========================================================= */
#block-14 .clean-ai-carousel{
  position:relative;
  width:min(1050px,100%);
  margin:48px auto 0;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 52px;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:22px;
}
#block-14 .clean-ai-stage{
  grid-column:2;
  grid-row:1;
  position:relative;
  width:100%;
  min-height:500px;
}
#block-14 .clean-ai-slide{
  display:none;
  width:100%;
  max-width:760px;
  margin:0 auto;
}
#block-14 .clean-ai-slide.is-active{
  display:block;
}
#block-14 .clean-ai-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px;
  background:#000;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
#block-14 .clean-ai-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  opacity:1;
}
#block-14 .clean-ai-caption{
  margin:20px 0 0;
  color:#fff;
  font-size:22px;
  line-height:1.45;
  text-align:center;
}
#block-14 .clean-ai-arrow{
  grid-row:1;
  align-self:center;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  z-index:5;
}
#block-14 .clean-ai-prev{grid-column:1}
#block-14 .clean-ai-next{grid-column:3}
#block-14 .clean-ai-progress{
  grid-column:2;
  grid-row:2;
  margin-top:8px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.5;
  text-align:center;
}
@media(max-width:767px){
  #block-14 .clean-ai-carousel{
    margin-top:30px;
    grid-template-columns:38px minmax(0,1fr) 38px;
    column-gap:6px;
  }
  #block-14 .clean-ai-stage{
    min-height:310px;
  }
  #block-14 .clean-ai-slide{
    max-width:100%;
  }
  #block-14 .clean-ai-video{
    border-radius:8px;
  }
  #block-14 .clean-ai-caption{
    margin-top:14px;
    font-size:16px;
    line-height:1.5;
  }
  #block-14 .clean-ai-arrow{
    width:36px;
    height:36px;
    font-size:28px;
  }
  #block-14 .clean-ai-progress{
    margin-top:4px;
    font-size:12px;
  }
}


/* =========================================================
   CLEAN V1.3B｜星海互動牆保留 Step 53 舊版視覺
   重要：star.png 是「單顆星星」素材，不能拿來當整區背景。
   舊版真正背景為 86841965-552b-8b29-5ee1-1a5d2aacba73.png
   ========================================================= */
#block-18.star-section{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:1377px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background-color:#102b65 !important;
  background-image:url("images/86841965-552b-8b29-5ee1-1a5d2aacba73.png") !important;
  background-position:50% 50% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* 舊版文字區：維持背景圖上方的標題／說明 */
#block-18 .star-heading{
  position:relative !important;
  z-index:60 !important;
  width:min(1140px,calc(100% - 40px)) !important;
  margin:0 auto !important;
  padding:50px 0 60px !important;
  pointer-events:none !important;
}
#block-18 .star-heading h1{
  margin:0 !important;
  padding:0 !important;
  color:#9bc8ff !important;
  font-size:42px !important;
  line-height:1.3 !important;
  text-align:left !important;
  text-shadow:0 0 12px rgba(249,182,125,.45) !important;
}
#block-18 .star-heading p{
  width:100% !important;
  max-width:100% !important;
  margin:16px 0 0 !important;
  padding:0 !important;
  color:#d8e7f8 !important;
  font-size:20px !important;
  line-height:1.9 !important;
  text-align:left !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
}
#block-18 .star-wall-highlight{
  color:#ffe4a6 !important;
  font-size:1.18em !important;
  font-weight:700 !important;
}

/* 星星功能層仍覆蓋整張舊背景 */
#block-18 #starWallContainer,
#block-18 .u-star-wall-container{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* star.png 只允許由 JS 產生的 .u-star 使用 */
#block-18 .u-star{
  position:absolute !important;
  width:40px !important;
  height:40px !important;
  margin-left:-20px !important;
  margin-top:-20px !important;
  background-image:url("images/star.png") !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  cursor:pointer !important;
  z-index:10 !important;
}
#block-18 .u-star-tooltip{
  position:absolute !important;
  z-index:300 !important;
  min-width:160px !important;
  max-width:260px !important;
  padding:10px 12px !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.95) !important;
  color:#333 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
  font-size:.85rem !important;
  line-height:1.6 !important;
  pointer-events:none !important;
}

/* 保留舊版「我要留言」素材定位邏輯 */
#block-18 #starWallWriteBtn,
#block-18 .u-star-wall-write-btn{
  position:absolute !important;
  z-index:20 !important;
  left:auto !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:500px !important;
  max-width:38vw !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  cursor:pointer !important;
}
#block-18 #starWallWriteBtn img,
#block-18 .u-star-wall-write-btn img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
}

@media(max-width:1199px){
  #block-18.star-section{min-height:1135px !important;}
}
@media(max-width:991px){
  #block-18.star-section{min-height:869px !important;}
}
@media(max-width:767px){
  #block-18.star-section{
    min-height:100svh !important;
    background-position:center center !important;
    background-size:cover !important;
  }
  #block-18 .star-heading{
    width:calc(100% - 28px) !important;
    margin:14px auto 0 !important;
    padding:18px 16px 20px !important;
    border-radius:18px !important;
    background:rgba(9,31,74,.45) !important;
    pointer-events:none !important;
  }
  #block-18 .star-heading h1{
    font-size:clamp(24px,7vw,34px) !important;
    line-height:1.35 !important;
    text-align:center !important;
  }
  #block-18 .star-heading p{
    margin-top:12px !important;
    font-size:15px !important;
    line-height:1.9 !important;
    text-align:center !important;
  }
  #block-18 .u-star{
    width:30px !important;
    height:30px !important;
    margin-left:-15px !important;
    margin-top:-15px !important;
  }
  #block-18 .u-star-tooltip{
    min-width:0 !important;
    width:min(72vw,260px) !important;
    max-width:72vw !important;
    font-size:.82rem !important;
  }
  #block-18 #starWallWriteBtn,
  #block-18 .u-star-wall-write-btn{
    right:14px !important;
    bottom:14px !important;
    width:min(46vw,190px) !important;
    max-width:none !important;
    transform:none !important;
  }
}


/* =========================================================
   CLEAN V1.4｜星海互動牆三項微調
   1. 我要留言按鈕移到左側
   2. 消除與上一區塊的邊界感
   3. 標題改白色＋放大柔和光暈
   ========================================================= */

/* 1｜留言按鈕回到左下 */
#block-18 #starWallWriteBtn,
#block-18 .u-star-wall-write-btn{
  left:0 !important;
  right:auto !important;
  bottom:0 !important;
}

/* 2｜讓上一區與星海互動牆自然銜接：
   用與星海頂部相近的深藍漸層覆蓋 section 頂端，
   並向上吃掉 2px，避免出現水平接縫。 */
#block-18.star-section{
  margin-top:-2px !important;
  border-top:0 !important;
  box-shadow:none !important;
}
#block-18.star-section::before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:0;
  height:150px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    #03142f 0%,
    rgba(3,20,47,.78) 24%,
    rgba(16,43,101,.28) 70%,
    rgba(16,43,101,0) 100%
  );
}

/* 標題與星星要位於漸層之上 */
#block-18 .star-heading{
  z-index:60 !important;
}
#block-18 #starWallContainer,
#block-18 .u-star-wall-container{
  z-index:5 !important;
}

/* 3｜標題改成白色，並把光暈範圍拉大、變柔和 */
#block-18 .star-heading h1{
  color:#ffffff !important;
  text-shadow:
    0 0 8px rgba(249,182,125,.80),
    0 0 20px rgba(249,182,125,.58),
    0 0 38px rgba(249,182,125,.38),
    0 0 58px rgba(249,182,125,.20) !important;
}

@media(max-width:767px){
  #block-18 #starWallWriteBtn,
  #block-18 .u-star-wall-write-btn{
    left:14px !important;
    right:auto !important;
    bottom:14px !important;
  }

  #block-18.star-section::before{
    height:110px;
  }

  #block-18 .star-heading h1{
    color:#ffffff !important;
    text-shadow:
      0 0 7px rgba(249,182,125,.82),
      0 0 18px rgba(249,182,125,.58),
      0 0 34px rgba(249,182,125,.34),
      0 0 48px rgba(249,182,125,.18) !important;
  }
}


/* =========================================================
   CLEAN V1.5｜訪談影片區 → 星海互動牆背景連續化
   先使用現有素材，不需要新增背景圖。
   ========================================================= */

/* 三個訪談區共用完全相同的深藍底色，避免捲動時 section 色塊跳動 */
html body #block-16.interview-section,
html body #block-17.interview-section,
html body #block-15.interview-section{
  position:relative !important;
  background:#031a3d !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* shared-bg 原本可能有背景圖／fixed background，
   在三個訪談 section 自己統一底色後不讓它從縫隙露出。 */
html body .shared-bg{
  background-color:#031a3d !important;
}

/* 最後一個訪談區與星海直接貼合，不留 margin / border / seam */
html body #block-15{
  margin-bottom:0 !important;
  padding-bottom:72px !important;
}
html body #block-18.star-section{
  margin-top:0 !important;
  border-top:0 !important;
}

/* 取消上一版較明顯的獨立色塊式漸層，
   改成從訪談區同一深藍自然淡入星海背景。 */
html body #block-18.star-section::before{
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:220px !important;
  pointer-events:none !important;
  background:linear-gradient(
    to bottom,
    #031a3d 0%,
    rgba(3,26,61,.96) 10%,
    rgba(3,26,61,.78) 32%,
    rgba(3,26,61,.42) 58%,
    rgba(3,26,61,0) 100%
  ) !important;
}

/* 星海標題與留言功能維持上一版 */
html body #block-18 .star-heading{
  z-index:60 !important;
}
html body #block-18 #starWallContainer,
html body #block-18 .u-star-wall-container{
  z-index:5 !important;
}

@media(max-width:767px){
  html body #block-16.interview-section,
  html body #block-17.interview-section,
  html body #block-15.interview-section,
  html body .shared-bg{
    background-color:#031a3d !important;
  }

  html body #block-15{
    padding-bottom:52px !important;
  }

  html body #block-18.star-section::before{
    height:150px !important;
  }
}


/* =========================================================
   CLEAN V1.6｜星星安全區＋新留言定位動畫＋白色殘留修正
   ========================================================= */

/*
  左側白色膠囊是 starWallWriteBtn 的舊圖片／舊尺寸規則在 Clean 架構下殘留。
  背景圖本身已經畫有「我要留言」人物與文字，所以不再顯示按鈕圖片；
  按鈕本身保留為透明點擊熱區，留言功能仍然存在。
*/
#block-18 #starWallWriteBtn,
#block-18 .u-star-wall-write-btn{
  left:2.5% !important;
  right:auto !important;
  bottom:2% !important;
  width:360px !important;
  max-width:28vw !important;
  height:230px !important;
  max-height:28vh !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  opacity:1 !important;
  overflow:hidden !important;
}
#block-18 #starWallWriteBtn img,
#block-18 .u-star-wall-write-btn img{
  display:none !important;
}

/* 新留言星星：放大 → 閃一下 → 強光定位 → 約 1 秒後柔和退光 */
#block-18 .u-star.u-star-new-arrival{
  z-index:180 !important;
  transform-origin:center center !important;
  will-change:transform,opacity,filter;
  animation:cleanStarArrival 2.65s cubic-bezier(.22,.8,.24,1) both !important;
}

@keyframes cleanStarArrival{
  0%{
    transform:scale(2.2);
    opacity:0;
    filter:brightness(1) drop-shadow(0 0 0 rgba(255,230,80,0));
  }
  9%{
    transform:scale(2.2);
    opacity:1;
    filter:brightness(1.45)
      drop-shadow(0 0 10px rgba(255,235,90,.95))
      drop-shadow(0 0 24px rgba(255,190,70,.70));
  }
  16%{
    transform:scale(2.08);
    opacity:.18;
  }
  23%{
    transform:scale(2.08);
    opacity:1;
    filter:brightness(1.85)
      drop-shadow(0 0 15px rgba(255,240,110,1))
      drop-shadow(0 0 34px rgba(255,185,70,.92))
      drop-shadow(0 0 54px rgba(249,182,125,.60));
  }
  62%{
    transform:scale(1.7);
    opacity:1;
    filter:brightness(1.75)
      drop-shadow(0 0 15px rgba(255,240,110,1))
      drop-shadow(0 0 32px rgba(255,185,70,.88))
      drop-shadow(0 0 50px rgba(249,182,125,.54));
  }
  82%{
    transform:scale(1.28);
    opacity:1;
    filter:brightness(1.35)
      drop-shadow(0 0 10px rgba(255,230,90,.62))
      drop-shadow(0 0 22px rgba(249,182,125,.36));
  }
  100%{
    transform:scale(1);
    opacity:1;
    filter:brightness(1) drop-shadow(0 0 0 rgba(255,225,95,0));
  }
}

/* 星星本身永遠裁切在星海 section 內，不得進入上方影片區 */
#block-18.star-section,
#block-18 #starWallContainer{
  overflow:hidden !important;
}

@media(max-width:767px){
  #block-18 #starWallWriteBtn,
  #block-18 .u-star-wall-write-btn{
    left:0 !important;
    bottom:0 !important;
    width:48vw !important;
    max-width:210px !important;
    height:180px !important;
    max-height:26vh !important;
  }

  #block-18 .u-star.u-star-new-arrival{
    animation-duration:2.45s !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #block-18 .u-star.u-star-new-arrival{
    animation-duration:.35s !important;
  }
}


/* =========================================================
   CLEAN V1.7｜留言按鈕恢復＋新留言光暈時序＋星星下移
   ========================================================= */

/* 恢復真正可見的「我要留言」按鈕圖片 */
#block-18 #starWallWriteBtn,
#block-18 .u-star-wall-write-btn{
  left:2.5% !important;
  right:auto !important;
  bottom:2% !important;
  width:360px !important;
  max-width:28vw !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:220 !important;
}
#block-18 #starWallWriteBtn img,
#block-18 .u-star-wall-write-btn img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

/*
  新留言星星總動畫：
  0~約0.45秒：出現／閃一下
  約0.45~1.45秒：維持強光 1 秒
  約1.45~3.45秒：用 2 秒慢慢退光
*/
#block-18 .u-star.u-star-new-arrival{
  animation:cleanStarArrivalV17 3.45s linear both !important;
}

@keyframes cleanStarArrivalV17{
  0%{
    transform:scale(2.15);
    opacity:0;
    filter:brightness(1) drop-shadow(0 0 0 rgba(255,230,80,0));
  }
  8%{
    transform:scale(2.15);
    opacity:1;
    filter:brightness(1.75)
      drop-shadow(0 0 15px rgba(255,240,110,1))
      drop-shadow(0 0 34px rgba(255,185,70,.92))
      drop-shadow(0 0 54px rgba(249,182,125,.60));
  }
  13%{
    transform:scale(2.05);
    opacity:.25;
    filter:brightness(1.4)
      drop-shadow(0 0 12px rgba(255,235,100,.85))
      drop-shadow(0 0 28px rgba(255,185,70,.72));
  }
  16%{
    transform:scale(2.05);
    opacity:1;
    filter:brightness(1.85)
      drop-shadow(0 0 16px rgba(255,245,120,1))
      drop-shadow(0 0 36px rgba(255,190,70,.95))
      drop-shadow(0 0 58px rgba(249,182,125,.65));
  }

  /* 約 0.55s ~ 1.45s：保持強光 */
  42%{
    transform:scale(1.72);
    opacity:1;
    filter:brightness(1.85)
      drop-shadow(0 0 16px rgba(255,245,120,1))
      drop-shadow(0 0 36px rgba(255,190,70,.95))
      drop-shadow(0 0 58px rgba(249,182,125,.65));
  }

  /* 約 1.45s ~ 3.45s：慢慢退光 */
  65%{
    transform:scale(1.45);
    opacity:1;
    filter:brightness(1.55)
      drop-shadow(0 0 13px rgba(255,238,105,.78))
      drop-shadow(0 0 29px rgba(249,182,125,.58));
  }
  82%{
    transform:scale(1.22);
    opacity:1;
    filter:brightness(1.28)
      drop-shadow(0 0 8px rgba(255,232,95,.42))
      drop-shadow(0 0 18px rgba(249,182,125,.28));
  }
  100%{
    transform:scale(1);
    opacity:1;
    filter:brightness(1) drop-shadow(0 0 0 rgba(255,225,95,0));
  }
}

@media(max-width:767px){
  #block-18 #starWallWriteBtn,
  #block-18 .u-star-wall-write-btn{
    left:14px !important;
    right:auto !important;
    bottom:14px !important;
    width:min(46vw,190px) !important;
    height:auto !important;
  }
  #block-18 .u-star.u-star-new-arrival{
    animation-duration:3.45s !important;
  }
}


/* CLEAN V1.8｜「我要留言」按鈕往右移 300px */
@media (min-width:768px){
  #block-18 #starWallWriteBtn,
  #block-18 .u-star-wall-write-btn{
    left:calc(2.5% + 300px) !important;
    right:auto !important;
  }
}

/* 手機維持 V1.7 原位置，避免 300px 位移造成按鈕超出畫面 */


/* CLEAN V1.12｜手機版過渡修正＋留言牆白條移除 */
@media(max-width:767px){
  html body #block-14{
    position:relative !important;
    background-color:#2864a2 !important;
    padding-bottom:150px !important;
  }
  html body #block-14::after{
    content:"";
    position:absolute;left:0;right:0;bottom:0;height:150px;
    pointer-events:none;z-index:0;
    background:linear-gradient(to bottom,
      rgba(40,100,162,0) 0%,
      rgba(31,80,135,.38) 28%,
      rgba(18,54,103,.72) 62%,
      #031a3d 100%) !important;
  }
  html body #block-14 > *{position:relative;z-index:1}
  html body #block-16.interview-section{
    margin-top:0!important;border-top:0!important;box-shadow:none!important;
    background:#031a3d!important;
  }
}

/* 不使用 write.png：避免 Safari / LINE WebView 的白色長條 */
html body #block-18 #starWallWriteBtn,
html body #block-18 .u-star-wall-write-btn{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:190px!important;height:64px!important;max-width:none!important;max-height:none!important;
  padding:0 22px!important;overflow:visible!important;
  border:2px solid rgba(255,235,176,.95)!important;border-radius:999px!important;
  background:rgba(227,68,1,.94)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.24),0 0 18px rgba(255,196,93,.28)!important;
  color:#fff!important;font-size:22px!important;font-weight:700!important;
  line-height:1!important;text-indent:-9999px;white-space:nowrap;
}
html body #block-18 #starWallWriteBtn::after,
html body #block-18 .u-star-wall-write-btn::after{
  content:"我要留言";display:block;text-indent:0;color:#fff;white-space:nowrap;
}
html body #block-18 #starWallWriteBtn img,
html body #block-18 .u-star-wall-write-btn img{
  display:none!important;width:0!important;height:0!important;opacity:0!important;
}
@media(min-width:768px){
  html body #block-18 #starWallWriteBtn,
  html body #block-18 .u-star-wall-write-btn{
    left:calc(2.5% + 300px)!important;right:auto!important;bottom:2%!important;
  }
}
@media(max-width:767px){
  html body #block-18 #starWallWriteBtn,
  html body #block-18 .u-star-wall-write-btn{
    left:14px!important;right:auto!important;bottom:14px!important;
    width:154px!important;height:54px!important;padding:0 18px!important;font-size:18px!important;
  }
  html body #block-18.star-section::before{
    height:190px!important;
    background:linear-gradient(to bottom,
      #031a3d 0%,
      rgba(3,26,61,.94) 18%,
      rgba(3,26,61,.65) 48%,
      rgba(3,26,61,.22) 76%,
      rgba(3,26,61,0) 100%)!important;
  }
}


/* =========================================================
   CLEAN V1.13｜恢復原本「我要留言」圖片
   ========================================================= */

/* 取消 V1.12 的 CSS 膠囊外觀，恢復原圖本身 */
html body #block-18 #starWallWriteBtn,
html body #block-18 .u-star-wall-write-btn{
  display:block !important;
  width:360px !important;
  height:auto !important;
  max-width:28vw !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:transparent !important;
  font-size:0 !important;
  text-indent:0 !important;
}

/* 移除 V1.12 額外畫出的「我要留言」文字 */
html body #block-18 #starWallWriteBtn::after,
html body #block-18 .u-star-wall-write-btn::after{
  content:none !important;
  display:none !important;
}

/* 原本的「我要留言」圖片一定要顯示 */
html body #block-18 #starWallWriteBtn img,
html body #block-18 .u-star-wall-write-btn img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  border:0 !important;
}

/* 桌機仍維持先前要求：往右移 300px */
@media(min-width:768px){
  html body #block-18 #starWallWriteBtn,
  html body #block-18 .u-star-wall-write-btn{
    left:calc(2.5% + 300px) !important;
    right:auto !important;
    bottom:2% !important;
  }
}

/* 手機恢復原圖，尺寸控制在畫面內 */
@media(max-width:767px){
  html body #block-18 #starWallWriteBtn,
  html body #block-18 .u-star-wall-write-btn{
    left:14px !important;
    right:auto !important;
    bottom:14px !important;
    width:min(46vw,190px) !important;
    height:auto !important;
    max-width:none !important;
  }
}


/* =========================================================
   CLEAN V1.14｜保留「我要留言」原圖，處理 iPhone/LINE 白條
   ========================================================= */

/*
  不再隱藏留言圖片。
  將按鈕容器收斂到圖片本身尺寸，移除可能被 WebKit
  畫成白色長條的背景、最小尺寸、陰影、outline 與 appearance。
*/
html body #block-18 #starWallWriteBtn,
html body #block-18 .u-star-wall-write-btn{
  display:block !important;
  box-sizing:border-box !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  text-decoration:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
  overflow:visible !important;
  line-height:0 !important;
  font-size:0 !important;
}

/* 原留言圖完整保留，但讓 WebKit 以一般圖片層渲染 */
html body #block-18 #starWallWriteBtn img,
html body #block-18 .u-star-wall-write-btn img{
  display:block !important;
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
  object-fit:contain !important;
  vertical-align:top !important;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* 清掉舊版可能殘留在按鈕 pseudo-element 的白色／文字圖層 */
html body #block-18 #starWallWriteBtn::before,
html body #block-18 #starWallWriteBtn::after,
html body #block-18 .u-star-wall-write-btn::before,
html body #block-18 .u-star-wall-write-btn::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* 防止 focus/active 狀態在 LINE / Safari 產生額外白底 */
html body #block-18 #starWallWriteBtn:focus,
html body #block-18 #starWallWriteBtn:active,
html body #block-18 .u-star-wall-write-btn:focus,
html body #block-18 .u-star-wall-write-btn:active{
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* 桌機：原圖保留＋維持往右 300px */
@media(min-width:768px){
  html body #block-18 #starWallWriteBtn,
  html body #block-18 .u-star-wall-write-btn{
    left:calc(2.5% + 300px) !important;
    right:auto !important;
    bottom:2% !important;
    width:360px !important;
    max-width:28vw !important;
  }
}

/* 手機：原圖保留，容器尺寸只跟圖片走 */
@media(max-width:767px){
  html body #block-18 #starWallWriteBtn,
  html body #block-18 .u-star-wall-write-btn{
    left:14px !important;
    right:auto !important;
    bottom:14px !important;
    width:min(46vw,190px) !important;
    max-width:none !important;
    height:auto !important;
  }
}

/* =========================================================
   CLEAN V1.15｜AI 三影片改回環形 / 3D coverflow 播放
   ========================================================= */
#block-14 #videoRingWrap{
  position:relative;width:min(1180px,100%);margin:48px auto 0;
  display:grid;grid-template-columns:56px minmax(0,1fr) 56px;
  align-items:center;gap:12px;
}
#block-14 #videoRingScene{
  position:relative;width:100%;height:520px;overflow:hidden;
  perspective:1250px;touch-action:pan-y;
}
#block-14 #videoRing{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
}
#block-14 #videoRing .u-video-ring-item{
  display:block;position:absolute;left:22%;top:18px;width:56%;
  margin:0;opacity:.42;transition:transform .45s ease,opacity .45s ease,filter .45s ease;
  transform-origin:center center;filter:brightness(.72);pointer-events:none;
}
#block-14 #videoRing .u-video-ring-item-active{
  opacity:1;filter:none;pointer-events:auto;
}
#block-14 #videoRing .u-video-ring-frame{
  width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000;
  box-shadow:0 12px 34px rgba(0,0,0,.32);
}
#block-14 #videoRing .u-video-ring-frame iframe{display:block;width:100%;height:100%;border:0}
#block-14 #videoRing .u-video-ring-caption{
  margin:18px 0 0;color:#fff;font-size:20px;line-height:1.45;text-align:center;
}
#block-14 #videoRingPrev,#block-14 #videoRingNext{
  position:relative;z-index:30;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;font-size:36px;line-height:1;cursor:pointer;
}
@media(max-width:767px){
  #block-14 #videoRingWrap{margin-top:30px;grid-template-columns:38px minmax(0,1fr) 38px;gap:5px;padding:10px 0 56px}
  #block-14 #videoRingScene{height:280px;perspective:none;overflow:visible}
  #block-14 #videoRing .u-video-ring-item{left:0;top:50%;width:calc(100% - 28px);opacity:0;transform:translateY(-50%)!important;filter:none}
  #block-14 #videoRing .u-video-ring-item-active{display:block!important;left:0!important;opacity:1!important;transform:translateY(-50%)!important;z-index:10!important}
  #block-14 #videoRing .u-video-ring-item-next{display:block!important;left:calc(100% - 15px)!important;width:74%!important;opacity:.58!important;transform:translateY(-50%) scale(.84)!important;transform-origin:left center!important;z-index:4!important;filter:brightness(.82)!important}
  #block-14 #videoRing .u-video-ring-frame{border-radius:8px}
  #block-14 #videoRing .u-video-ring-caption{font-size:16px;margin-top:12px}
  #block-14 #videoRingPrev,#block-14 #videoRingNext{width:36px;height:36px;font-size:28px}
  #block-14 #videoRingWrap .u-video-mobile-progress{bottom:4px;max-width:calc(100vw - 96px);white-space:normal;width:100%;font-size:12px;line-height:1.5;text-align:center}
  #block-14 #videoRingWrap .u-video-progress-line1,#block-14 #videoRingWrap .u-video-progress-line2{display:block}
}


/* CLEAN V1.17｜移除 AI 環形播放下方切換說明（桌機＋手機） */
#block-14 .clean-ai-progress,
#block-14 .ai-progress,
#block-14 .video-ring-progress,
#block-14 .video-progress,
#block-14 [data-ai-progress],
#block-14 [data-video-progress]{
  display:none !important;
}


/* =========================================================
   CLEAN V1.18｜留言圖片回歸單純圖層
   目的：移除先前為 Safari / LINE 加入的 GPU/compositing 修補，
   保留原圖、原點擊功能與既定位置。
   ========================================================= */

html body #block-18 #starWallWriteBtn,
html body #block-18 .u-star-wall-write-btn{
  display:block !important;
  position:absolute !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:visible !important;
  line-height:0 !important;
  font-size:0 !important;
  text-indent:0 !important;
  opacity:1 !important;
  visibility:visible !important;

  /* 不強迫建立 GPU / compositing layer */
  -webkit-transform:none !important;
  transform:none !important;
  -webkit-backface-visibility:visible !important;
  backface-visibility:visible !important;
  will-change:auto !important;

  /* 仍保留可點擊，但不使用瀏覽器原生按鈕外觀 */
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* 不建立額外 pseudo-element */
html body #block-18 #starWallWriteBtn::before,
html body #block-18 #starWallWriteBtn::after,
html body #block-18 .u-star-wall-write-btn::before,
html body #block-18 .u-star-wall-write-btn::after{
  content:none !important;
  display:none !important;
}

/* 原始「我要留言」圖片：單純 img，不做 GPU transform */
html body #block-18 #starWallWriteBtn img,
html body #block-18 .u-star-wall-write-btn img{
  display:block !important;
  position:static !important;
  width:100% !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
  vertical-align:top !important;

  -webkit-transform:none !important;
  transform:none !important;
  -webkit-backface-visibility:visible !important;
  backface-visibility:visible !important;
  will-change:auto !important;
}

/* 點擊 / focus 不改變圖層外觀 */
html body #block-18 #starWallWriteBtn:hover,
html body #block-18 #starWallWriteBtn:focus,
html body #block-18 #starWallWriteBtn:active,
html body #block-18 .u-star-wall-write-btn:hover,
html body #block-18 .u-star-wall-write-btn:focus,
html body #block-18 .u-star-wall-write-btn:active{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  -webkit-transform:none !important;
  transform:none !important;
}

/* 桌機位置照舊：右移 300px */
@media(min-width:768px){
  html body #block-18 #starWallWriteBtn,
  html body #block-18 .u-star-wall-write-btn{
    left:calc(2.5% + 300px) !important;
    right:auto !important;
    bottom:2% !important;
    width:360px !important;
    max-width:28vw !important;
  }
}

/* 手機：保留原圖、左下角，尺寸只由圖片比例決定 */
@media(max-width:767px){
  html body #block-18 #starWallWriteBtn,
  html body #block-18 .u-star-wall-write-btn{
    left:14px !important;
    right:auto !important;
    bottom:14px !important;
    width:min(46vw,190px) !important;
    max-width:none !important;
    height:auto !important;
  }
}

/* CLEAN V1.19｜AI區→帶得走的能力：取消漸層與分隔線 */
html body #block-14,
html body #block-16,
html body #block-16.interview-section{
  background:#031a3d !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
html body #block-16,
html body #block-16.interview-section{
  margin-top:0 !important;
}
html body #block-14::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
@media(max-width:767px){
  html body #block-14,
  html body #block-16,
  html body #block-16.interview-section{
    background:#031a3d !important;
    border-top:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
  }
  html body #block-14::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }
}


/* =========================================================
   CLEAN V1.20｜從人生續寫後一路到星海的單一連續藍色漸層
   重點：漸層只畫在共同父層 .shared-bg，
   各 section 不再各自畫背景，因此捲動時不會露出 section 分隔線。
   ========================================================= */

html body .shared-bg{
  position:relative !important;
  isolation:isolate !important;
  background:
    linear-gradient(
      to bottom,
      #2864a2 0%,
      #2864a2 18%,
      #255f9d 34%,
      #205793 52%,
      #1a4b84 69%,
      #153b72 84%,
      #102b65 100%
    ) !important;
  background-attachment:scroll !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}

/* AI 與三個訪談區全部透明，讓同一張父層漸層連續穿過 */
html body #block-14,
html body #block-16,
html body #block-16.interview-section,
html body #block-17,
html body #block-17.interview-section,
html body #block-15,
html body #block-15.interview-section{
  position:relative !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* 清掉 AI 區過去版本留下的底部漸層／遮罩 */
html body #block-14::before,
html body #block-14::after,
html body #block-16::before,
html body #block-16::after,
html body #block-17::before,
html body #block-17::after,
html body #block-15::before,
html body #block-15::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 最後一個訪談區底部直接接到星海，不留 1px 縫隙 */
html body #block-15{
  padding-bottom:72px !important;
}
html body #block-18.star-section{
  margin-top:-1px !important;
  border-top:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/*
  星海頂端從 shared-bg 結尾的同一色 #102b65 開始，
  再透明淡入星海原背景；交界兩側第一個像素使用完全相同色值。
*/
html body #block-18.star-section::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:2 !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:220px !important;
  pointer-events:none !important;
  background:linear-gradient(
    to bottom,
    #102b65 0%,
    rgba(16,43,101,.96) 14%,
    rgba(16,43,101,.78) 38%,
    rgba(16,43,101,.42) 66%,
    rgba(16,43,101,0) 100%
  ) !important;
}

/* 手機同樣只使用一個父層漸層，不另外切色 */
@media(max-width:767px){
  html body .shared-bg{
    background:
      linear-gradient(
        to bottom,
        #2864a2 0%,
        #2864a2 16%,
        #255f9d 32%,
        #205793 50%,
        #1a4b84 68%,
        #153b72 84%,
        #102b65 100%
      ) !important;
    background-attachment:scroll !important;
    background-size:100% 100% !important;
  }

  html body #block-14,
  html body #block-16,
  html body #block-17,
  html body #block-15{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html body #block-15{
    padding-bottom:52px !important;
  }

  html body #block-18.star-section{
    margin-top:-1px !important;
  }

  html body #block-18.star-section::before{
    height:180px !important;
    background:linear-gradient(
      to bottom,
      #102b65 0%,
      rgba(16,43,101,.95) 18%,
      rgba(16,43,101,.72) 46%,
      rgba(16,43,101,.34) 72%,
      rgba(16,43,101,0) 100%
    ) !important;
  }
}


/* =========================================================
   CLEAN V1.21｜社會共命題區的漸層起點改為 #01286c
   ========================================================= */

/*
  #block-13「社會共命題」：
  緊接上方創作平台流變後，第一個像素即從 #01286c 開始，
  再自然過渡到後續藍色。
*/
html body #block-13{
  position:relative !important;
  background:
    linear-gradient(
      to bottom,
      #01286c 0%,
      #0b3f80 28%,
      #175493 58%,
      #2864a2 100%
    ) !important;
  background-color:#01286c !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  margin-top:-1px !important;
}

/* 清除可能造成交界線的 pseudo-element / 邊框 */
html body #block-13::before,
html body #block-13::after{
  border:0 !important;
  box-shadow:none !important;
}

/* 上一區底部不留 border/shadow，避免 #01286c 起點前出現細線 */
html body #block-20{
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* 手機同樣從 #01286c 起跑 */
@media(max-width:767px){
  html body #block-13{
    background:
      linear-gradient(
        to bottom,
        #01286c 0%,
        #0b3f80 28%,
        #175493 58%,
        #2864a2 100%
      ) !important;
    background-color:#01286c !important;
    margin-top:-1px !important;
    border:0 !important;
    box-shadow:none !important;
  }
}


/* =========================================================
   CLEAN V1.22｜社會共命題 → 星海互動牆：單一連續漸層
   起點 #01286c，終點 #205da7
   ========================================================= */

/*
  關鍵做法：
  不再讓 #block-13、#block-21、shared-bg 各自畫不同漸層。
  從「社會共命題」開始的共同連續內容改成透明，
  由一個固定於內容流的共同背景色階銜接。
*/

/* 社會共命題本身從指定色開始，底部自然交給後續色階 */
html body #block-13{
  background:linear-gradient(
    to bottom,
    #01286c 0%,
    #062f76 45%,
    #0b387f 100%
  ) !important;
  border:0 !important;
  box-shadow:none !important;
  margin-bottom:-1px !important;
}

/* 人生續寫：承接社會共命題，不做硬切色 */
html body #block-21{
  background:linear-gradient(
    to bottom,
    #0b387f 0%,
    #10448a 50%,
    #155096 100%
  ) !important;
  border:0 !important;
  box-shadow:none !important;
  margin-top:-1px !important;
  margin-bottom:-1px !important;
}

/*
  AI＋三個訪談區：用一張共同漸層。
  起始值精確承接 #block-21 的 #155096，
  最底精確到 #205da7。
*/
html body .shared-bg{
  background:linear-gradient(
    to bottom,
    #155096 0%,
    #18549b 20%,
    #1a579e 40%,
    #1c59a1 60%,
    #1e5ba4 80%,
    #205da7 100%
  ) !important;
  background-color:#205da7 !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-attachment:scroll !important;
  border:0 !important;
  box-shadow:none !important;
  margin-top:-1px !important;
  margin-bottom:-1px !important;
}

/* 共同背景內各 section 必須透明，避免再次切色 */
html body #block-14,
html body #block-16,
html body #block-17,
html body #block-15{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 清除所有可能形成水平線的 section 裝飾層 */
html body #block-13::before,
html body #block-13::after,
html body #block-21::before,
html body #block-21::after,
html body #block-14::before,
html body #block-14::after,
html body #block-16::before,
html body #block-16::after,
html body #block-17::before,
html body #block-17::after,
html body #block-15::before,
html body #block-15::after{
  border:0 !important;
  box-shadow:none !important;
}

/* 星海最上緣直接使用漸層終點 #205da7，再淡入原星海背景 */
html body #block-18.star-section{
  margin-top:-2px !important;
  border-top:0 !important;
  box-shadow:none !important;
}

html body #block-18.star-section::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:260px !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:linear-gradient(
    to bottom,
    #205da7 0%,
    rgba(32,93,167,.98) 12%,
    rgba(32,93,167,.88) 30%,
    rgba(32,93,167,.62) 52%,
    rgba(32,93,167,.30) 75%,
    rgba(32,93,167,0) 100%
  ) !important;
}

/* 手機完全使用相同色值與接點，避免桌機/手機兩套顏色產生斷層 */
@media(max-width:767px){
  html body #block-13{
    background:linear-gradient(to bottom,#01286c 0%,#062f76 45%,#0b387f 100%) !important;
  }
  html body #block-21{
    background:linear-gradient(to bottom,#0b387f 0%,#10448a 50%,#155096 100%) !important;
  }
  html body .shared-bg{
    background:linear-gradient(
      to bottom,
      #155096 0%,
      #18549b 20%,
      #1a579e 40%,
      #1c59a1 60%,
      #1e5ba4 80%,
      #205da7 100%
    ) !important;
  }
  html body #block-18.star-section{
    margin-top:-2px !important;
  }
  html body #block-18.star-section::before{
    height:220px !important;
    background:linear-gradient(
      to bottom,
      #205da7 0%,
      rgba(32,93,167,.98) 12%,
      rgba(32,93,167,.86) 32%,
      rgba(32,93,167,.56) 58%,
      rgba(32,93,167,.24) 78%,
      rgba(32,93,167,0) 100%
    ) !important;
  }
}


/* =========================================================
   CLEAN V1.23｜最後修正：進化的語文教育上方分隔帶
   ========================================================= */

/*
  截圖中的水平色帶是 #block-14 開始時，shared-bg 的起始色
  與上一區 #block-21 結尾色仍有可見差異。
  這版讓 #block-21 → shared-bg → #block-14 共用完全相同接點，
  並把漸層起始延後，避免一進 AI 區就突然變亮。
*/

/* 人生續寫尾端精確收在 #155096 */
html body #block-21{
  background:linear-gradient(
    to bottom,
    #0b387f 0%,
    #10448a 48%,
    #155096 100%
  ) !important;
  margin-bottom:-2px !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/*
  shared-bg 最前段先維持 #155096，
  再非常緩慢往 #205da7 變亮。
  這樣「進化的語文教育」開頭不會再形成一整條亮藍色帶。
*/
html body .shared-bg{
  margin-top:-2px !important;
  background:linear-gradient(
    to bottom,
    #155096 0%,
    #155096 10%,
    #165198 24%,
    #18549b 40%,
    #1a579e 56%,
    #1c59a1 72%,
    #1e5ba4 87%,
    #205da7 100%
  ) !important;
  background-color:#155096 !important;
  border-top:0 !important;
  box-shadow:none !important;
}

/* AI section 本身完全透明，不得再蓋一層藍色 */
html body #block-14{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  margin-top:0 !important;
}

/* 確保舊版 AI 漸層 pseudo layer 完全不存在 */
html body #block-14::before,
html body #block-14::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 防止第一個 AI 內容容器自己帶背景 */
html body #block-14 > *,
html body #block-14 .clean-ai-section,
html body #block-14 .clean-ai-carousel,
html body #block-14 .video-ring-wrap{
  border-top-color:transparent !important;
  box-shadow:none !important;
}

/* 手機同步使用完全相同接點 */
@media(max-width:767px){
  html body #block-21{
    margin-bottom:-2px !important;
    background:linear-gradient(
      to bottom,
      #0b387f 0%,
      #10448a 48%,
      #155096 100%
    ) !important;
  }

  html body .shared-bg{
    margin-top:-2px !important;
    background:linear-gradient(
      to bottom,
      #155096 0%,
      #155096 10%,
      #165198 24%,
      #18549b 40%,
      #1a579e 56%,
      #1c59a1 72%,
      #1e5ba4 87%,
      #205da7 100%
    ) !important;
  }

  html body #block-14{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
  }
}


/* =========================================================
   CLEAN V1.24｜創作平台流變：文字圖檔隨閱覽放大
   固定起點 50% → 最後閱覽尺寸 150%
   JS 只改 transform scale，不影響原本版面流與背景。
   ========================================================= */

#block-20 .platform-zoom-target{
  transform-origin:center center !important;
  transform:scale(.5);
  will-change:transform;
  transition:none !important;
  backface-visibility:hidden;
}

/* 手機也使用相同 50% → 150% 規則 */
@media(max-width:767px){
  #block-20 .platform-zoom-target{
    transform-origin:center center !important;
  }
}

/* 使用者要求減少動畫時，直接顯示正常閱讀尺寸 */
@media(prefers-reduced-motion:reduce){
  #block-20 .platform-zoom-target{
    transform:scale(1.5) !important;
    will-change:auto;
  }
}


/* =========================================================
   CLEAN V1.25｜文字圖檔彈出動畫＋右移 50px
   ========================================================= */

/* 覆蓋 V1.24 原本隨 scroll 即時縮放的設定 */
#block-20 .platform-zoom-target,
#block-20 .platform-pop-target{
  transform-origin:center center !important;
  transform:translateX(50px) scale(.5) !important;
  opacity:0 !important;
  will-change:transform,opacity;
  transition:none !important;
}

/* 一滑到影片區時只播放一次：50% → 165% → 145% → 150% */
#block-20 .platform-pop-target.is-popped{
  animation:platformTextPopV125 1.05s cubic-bezier(.2,.82,.28,1) both !important;
}

@keyframes platformTextPopV125{
  0%{
    transform:translateX(50px) scale(.5);
    opacity:0;
  }
  58%{
    transform:translateX(50px) scale(1.65);
    opacity:1;
  }
  78%{
    transform:translateX(50px) scale(1.45);
    opacity:1;
  }
  100%{
    transform:translateX(50px) scale(1.5);
    opacity:1;
  }
}

@media(max-width:767px){
  #block-20 .platform-zoom-target,
  #block-20 .platform-pop-target{
    transform-origin:center center !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #block-20 .platform-pop-target,
  #block-20 .platform-pop-target.is-popped{
    animation:none !important;
    transform:translateX(50px) scale(1.5) !important;
    opacity:1 !important;
    will-change:auto !important;
  }
}


/* =========================================================
   CLEAN V1.26｜實際 w2-text.png 的彈出動畫
   ========================================================= */

/* 真正的文字圖檔：images/w2-text.png / .platform-text-slide */
html body #block-20 .platform-text-slide.platform-pop-v126{
  transform-origin:center center !important;
  transform:translateX(50px) scale(.5) !important;
  opacity:0 !important;
  transition:none !important;
  animation:none !important;
  will-change:transform,opacity !important;
}

/*
  50% 起點 → 170% 彈出 → 143% 回彈 → 150% 閱覽尺寸
  右移 50px 從頭到尾固定不變。
*/
html body #block-20 .platform-text-slide.platform-pop-v126.is-popped-v126{
  animation:platformTextPopV126 1.15s cubic-bezier(.18,.82,.24,1) both !important;
}

@keyframes platformTextPopV126{
  0%{
    transform:translateX(50px) scale(.5);
    opacity:0;
  }
  18%{
    opacity:1;
  }
  62%{
    transform:translateX(50px) scale(1.70);
    opacity:1;
  }
  82%{
    transform:translateX(50px) scale(1.43);
    opacity:1;
  }
  100%{
    transform:translateX(50px) scale(1.50);
    opacity:1;
  }
}

/* 這個效果是使用者指定的視覺呈現；手機與桌機一致 */
@media(max-width:767px){
  html body #block-20 .platform-text-slide.platform-pop-v126{
    transform-origin:center center !important;
  }
}


/* =========================================================
   CLEAN V1.27｜依 Step53 邏輯重做創作平台文字圖
   Step53 核心：固定初始狀態 + 加入 class 後 transition 顯示
   ========================================================= */

/* 真正文字圖：永遠至少看得到 50%，避免 JS 失效時整張消失 */
html body #block-20 .platform-text-slide{
  opacity:1 !important;
  transform:translateX(50px) scale(.5) !important;
  transform-origin:center center !important;
  transition:transform 1.1s cubic-bezier(.22,.8,.32,1) !important;
  animation:none !important;
  will-change:transform !important;
  pointer-events:none !important;
}

/* 參考 Step53 的 .u-in-view：影片進入視窗後只加狀態 class */
html body #block-20 .platform-text-slide.u-in-view-v127{
  transform:translateX(50px) scale(1.5) !important;
  opacity:1 !important;
}

@media(max-width:767px){
  html body #block-20 .platform-text-slide,
  html body #block-20 .platform-text-slide.u-in-view-v127{
    transform-origin:center center !important;
  }
}


/* =========================================================
   CLEAN V1.28｜社會共命題 5 個按鈕放大 1.35 倍
   以 transform 放大，不改 layout box，避免推擠原排版
   ========================================================= */
#block-13 .topic-icon,
#block-13 .u-topic-icon {
  transform: scale(1.35) !important;
  transform-origin: center center !important;
}

/* 放大後保留原本按鈕列的排列邏輯；不改 section / carousel 尺寸 */


/* =========================================================
   CLEAN V1.29｜社會共命題五按鈕放大到與內文左右對齊
   ========================================================= */

/*
  不再只把每顆 icon 各自 scale 1.35。
  改由五顆按鈕的「整列容器」吃滿與內文相同寬度，
  五顆平均分配；圖片本身放大但保留安全間距。
*/
#block-13 .topic-icons,
#block-13 .topic-buttons,
#block-13 .social-topic-icons,
#block-13 .social-topic-buttons,
#block-13 .u-topic-icons{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  align-items:center !important;
  justify-items:center !important;
  column-gap:12px !important;
}

/* 覆蓋 V1.28 的單顆 1.35 transform，避免位置與尺寸重複放大 */
#block-13 .topic-icon,
#block-13 .u-topic-icon{
  transform:none !important;
}

/* 每顆按鈕盡量吃滿自己的 1/5 欄位，視覺左右邊界對齊內文 */
#block-13 .topic-icons img,
#block-13 .topic-buttons img,
#block-13 .social-topic-icons img,
#block-13 .social-topic-buttons img,
#block-13 .u-topic-icons img,
#block-13 .topic-icon img,
#block-13 .u-topic-icon img{
  width:min(100%, 170px) !important;
  max-width:170px !important;
  height:auto !important;
  object-fit:contain !important;
}

/* 手機仍維持既有 3+2 排列，只把按鈕尺寸放大，不強制五顆同列 */
@media(max-width:767px){
  #block-13 .topic-icons,
  #block-13 .topic-buttons,
  #block-13 .social-topic-icons,
  #block-13 .social-topic-buttons,
  #block-13 .u-topic-icons{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    column-gap:8px !important;
    row-gap:12px !important;
  }

  #block-13 .topic-icons img,
  #block-13 .topic-buttons img,
  #block-13 .social-topic-icons img,
  #block-13 .social-topic-buttons img,
  #block-13 .u-topic-icons img,
  #block-13 .topic-icon img,
  #block-13 .u-topic-icon img{
    width:min(100%, 132px) !important;
    max-width:132px !important;
  }
}


/* =========================================================
   CLEAN V1.30｜五個按鈕改為對齊「內文文字」左右邊界
   不是對齊整個 section，因此縮回 V1.29 過大的尺寸。
   ========================================================= */

/* 桌機：整列使用與文章文字相近的內容寬度並置中 */
@media(min-width:768px){
  #block-13 .topic-icons,
  #block-13 .topic-buttons,
  #block-13 .social-topic-icons,
  #block-13 .social-topic-buttons,
  #block-13 .u-topic-icons{
    width:calc(100% - 220px) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:center !important;
    justify-items:center !important;
    column-gap:20px !important;
  }

  /* 縮回合理大小；五顆的整體外緣對齊下方文章文字欄 */
  #block-13 .topic-icons img,
  #block-13 .topic-buttons img,
  #block-13 .social-topic-icons img,
  #block-13 .social-topic-buttons img,
  #block-13 .u-topic-icons img,
  #block-13 .topic-icon img,
  #block-13 .u-topic-icon img{
    width:min(100%,135px) !important;
    max-width:135px !important;
    height:auto !important;
    object-fit:contain !important;
  }
}

/* 手機仍維持原本 3+2，不套桌機的文章寬度 */
@media(max-width:767px){
  #block-13 .topic-icons,
  #block-13 .topic-buttons,
  #block-13 .social-topic-icons,
  #block-13 .social-topic-buttons,
  #block-13 .u-topic-icons{
    width:100% !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* CLEAN V1.31｜社會共命題：每分頁黃色發光子標題 +4px */
/* 桌機 topic-panel 原字級 18px → 子標題 22px */
#block-13 .topic-panel > p.u-text-2{
  font-size:22px !important;
  line-height:1.45 !important;
}

/* 手機 topic-panel 原字級 16px → 子標題 20px */
@media(max-width:767px){
  #block-13 .topic-panel > p.u-text-2{
    font-size:20px !important;
    line-height:1.45 !important;
  }
}

/* CLEAN V1.32｜社會共命題黃色發光子標題再 +4px */
#block-13 .topic-panel > p.u-text-2{
  font-size:26px !important;
  line-height:1.45 !important;
}
@media(max-width:767px){
  #block-13 .topic-panel > p.u-text-2{
    font-size:24px !important;
    line-height:1.45 !important;
  }
}


/* =========================================================
   CLEAN V1.33｜進化的語文教育字級調整
   ========================================================= */

/* 1. 上方 3 支影片輪播：學校／老師說明文字統一 30px */
#block-14 .clean-ai-caption,
#block-14 .clean-ai-caption *,
#block-14 .ai-caption,
#block-14 .ai-caption *,
#block-14 .video-ring-caption,
#block-14 .video-ring-caption *,
#block-14 .carousel-caption,
#block-14 .carousel-caption *{
  font-size:30px !important;
  line-height:1.35 !important;
}

/* 2. 輪播以下影片的學校／老師文字：各縮小 4px
   使用相對減 4px，避免改掉原本不同層級的字級比例。 */
#block-14 .interview-school,
#block-14 .interview-teacher,
#block-14 .speaker-school,
#block-14 .speaker-name,
#block-14 .video-school,
#block-14 .video-teacher,
#block-14 .quote-speaker,
#block-14 .teacher-info{
  font-size:calc(1em - 4px) !important;
}

/* 若下方訪談區實際位於後續 section，套用相同縮小規則 */
#block-16 .interview-school,
#block-16 .interview-teacher,
#block-16 .speaker-school,
#block-16 .speaker-name,
#block-16 .video-school,
#block-16 .video-teacher,
#block-16 .quote-speaker,
#block-16 .teacher-info,
#block-17 .interview-school,
#block-17 .interview-teacher,
#block-17 .speaker-school,
#block-17 .speaker-name,
#block-17 .video-school,
#block-17 .video-teacher,
#block-17 .quote-speaker,
#block-17 .teacher-info,
#block-15 .interview-school,
#block-15 .interview-teacher,
#block-15 .speaker-school,
#block-15 .speaker-name,
#block-15 .video-school,
#block-15 .video-teacher,
#block-15 .quote-speaker,
#block-15 .teacher-info{
  font-size:calc(1em - 4px) !important;
}


/* =========================================================
   CLEAN V1.34｜AI 區字級：修正實際 selector
   ========================================================= */

/*
  上方環形輪播真正的文字 class 是 .u-video-ring-caption。
  V1.33 沒有命中這個 selector，所以看不到變化。
*/
html body #block-14 #videoRing .u-video-ring-caption,
html body #block-14 .u-video-ring-item .u-video-ring-caption{
  font-size:30px !important;
  line-height:1.35 !important;
}

/*
  輪播以下各影片真正的學校＋老師文字 class 是 .interview-speaker。
  原桌機 30px → 26px。
*/
html body #block-16 .interview-speaker,
html body #block-17 .interview-speaker,
html body #block-15 .interview-speaker{
  font-size:26px !important;
  line-height:1.35 !important;
}

/* 手機原本主要為 16px，縮小 4px → 12px */
@media(max-width:767px){
  html body #block-14 #videoRing .u-video-ring-caption,
  html body #block-14 .u-video-ring-item .u-video-ring-caption{
    font-size:30px !important;
    line-height:1.35 !important;
  }

  html body #block-16 .interview-speaker,
  html body #block-17 .interview-speaker,
  html body #block-15 .interview-speaker{
    font-size:12px !important;
    line-height:1.45 !important;
  }
}


/* =========================================================
   CLEAN V1.36｜星海互動牆「我要留言」改為純區塊內 absolute
   目的：避免 iOS Safari / LINE WebView 在 fixed / 捲動定位切換時
   產生白色橫條或 compositing repaint 殘影。
   ========================================================= */

#block-18{
  position:relative !important;
}

/* 不論舊版 selector 名稱，留言按鈕只允許待在星海區塊內 */
#block-18 .write-button,
#block-18 .star-write-button,
#block-18 .message-button,
#block-18 .u-write-button,
#block-18 a[href*="comment"],
#block-18 a[href*="message"]{
  position:absolute !important;
  z-index:30 !important;
  top:auto !important;
  right:auto !important;
  margin:0 !important;
  transform:none !important;
  translate:none !important;
  will-change:auto !important;
  backface-visibility:visible !important;
}

/* 目前既有桌機位置：保留原本向右移 300px 的視覺位置 */
@media(min-width:768px){
  #block-18 .write-button,
  #block-18 .star-write-button,
  #block-18 .message-button,
  #block-18 .u-write-button,
  #block-18 a[href*="comment"],
  #block-18 a[href*="message"]{
    left:calc(2.5% + 300px) !important;
    bottom:2% !important;
  }
}

/* 手機維持左下角 */
@media(max-width:767px){
  #block-18 .write-button,
  #block-18 .star-write-button,
  #block-18 .message-button,
  #block-18 .u-write-button,
  #block-18 a[href*="comment"],
  #block-18 a[href*="message"]{
    left:14px !important;
    bottom:14px !important;
  }
}


/* =========================================================
   CLEAN V1.39｜手機版修正
   1. 社會共命題五按鈕：上 2、下 3 金字塔型
   2. AI 輪播：徹底隱藏 1/3、左右滑動切換、下一支說明
   ========================================================= */

@media(max-width:767px){

  /* 五個換頁按鈕改成上2下3。
     使用 6 欄格線：前兩顆各跨2欄並置中，下三顆各跨2欄。 */
  #block-13 .topic-icons,
  #block-13 .topic-buttons,
  #block-13 .social-topic-icons,
  #block-13 .social-topic-buttons,
  #block-13 .u-topic-icons{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    column-gap:0 !important;
    row-gap:22px !important;
    align-items:center !important;
    justify-items:center !important;
  }

  #block-13 .topic-icons > :nth-child(1),
  #block-13 .topic-buttons > :nth-child(1),
  #block-13 .social-topic-icons > :nth-child(1),
  #block-13 .social-topic-buttons > :nth-child(1),
  #block-13 .u-topic-icons > :nth-child(1){
    grid-column:2 / span 2 !important;
    grid-row:1 !important;
  }

  #block-13 .topic-icons > :nth-child(2),
  #block-13 .topic-buttons > :nth-child(2),
  #block-13 .social-topic-icons > :nth-child(2),
  #block-13 .social-topic-buttons > :nth-child(2),
  #block-13 .u-topic-icons > :nth-child(2){
    grid-column:4 / span 2 !important;
    grid-row:1 !important;
  }

  #block-13 .topic-icons > :nth-child(3),
  #block-13 .topic-buttons > :nth-child(3),
  #block-13 .social-topic-icons > :nth-child(3),
  #block-13 .social-topic-buttons > :nth-child(3),
  #block-13 .u-topic-icons > :nth-child(3){
    grid-column:1 / span 2 !important;
    grid-row:2 !important;
  }

  #block-13 .topic-icons > :nth-child(4),
  #block-13 .topic-buttons > :nth-child(4),
  #block-13 .social-topic-icons > :nth-child(4),
  #block-13 .social-topic-buttons > :nth-child(4),
  #block-13 .u-topic-icons > :nth-child(4){
    grid-column:3 / span 2 !important;
    grid-row:2 !important;
  }

  #block-13 .topic-icons > :nth-child(5),
  #block-13 .topic-buttons > :nth-child(5),
  #block-13 .social-topic-icons > :nth-child(5),
  #block-13 .social-topic-buttons > :nth-child(5),
  #block-13 .u-topic-icons > :nth-child(5){
    grid-column:5 / span 2 !important;
    grid-row:2 !important;
  }

  /* AI 環形輪播舊版進度／操作／下一支說明全部隱藏 */
  #block-14 .u-video-ring-progress,
  #block-14 .video-ring-progress,
  #block-14 .ring-progress,
  #block-14 .carousel-progress,
  #block-14 .u-video-ring-next,
  #block-14 .video-ring-next,
  #block-14 .ring-next,
  #block-14 .carousel-next,
  #block-14 [class*="progress"],
  #block-14 [class*="next-info"]{
    display:none !important;
    visibility:hidden !important;
  }
}


/* =========================================================
   CLEAN V1.40｜手機版細節
   ========================================================= */
@media(max-width:767px){
  /* 輪播以下影片的學校＋老師：V1.39 的 12px + 8px = 20px */
  html body #block-16 .interview-speaker,
  html body #block-17 .interview-speaker,
  html body #block-15 .interview-speaker{
    font-size:20px !important;
    line-height:1.45 !important;
  }
}

/* =========================================================
   CLEAN V1.41｜手機講者 16px＋星海前多一行空白
   ========================================================= */
@media(max-width:767px){
  html body #block-16 .interview-speaker,
  html body #block-17 .interview-speaker,
  html body #block-15 .interview-speaker{
    font-size:16px !important;
    line-height:1.45 !important;
  }

  /* 邱培超系主任所在最後影片區與星海互動牆之間多留一行 */
  #block-15{
    padding-bottom:1.45em !important;
  }
}


/* CLEAN V1.42｜手機：社會共命題黃色子標題的屆別資訊換行 */
#block-13 .topic-edition-break{display:inline;}
@media(max-width:767px){
  #block-13 .topic-edition-break{display:block !important;}
}