/* 首屏「3D 旋轉舞台」。
   預設(沒有 .s3d-live)是靜態版面:沒有 WebGL、開了「減少動態效果」、畫面太矮、或 3D 載不到時就長這樣,內容一樣都看得到。
   頁面一開始(index.html 裡 #top 後面那一小段程式)判斷可以用 3D,就加上 .s3d-live:舞台固定在畫面上,往下滑轉場。
   規矩:原版的字一個都不能藏(不用 display:none、不截斷);放不下就縮字、縮間距,或讓那種螢幕用靜態版面。 */

.s3d { position: relative; padding: 132px 0 76px; background: radial-gradient(circle at 82% 17%, rgba(217,239,115,.5), transparent 22%), radial-gradient(circle at 16% 88%, rgba(146,205,226,.35), transparent 30%), var(--paper); }
.s3d-canvas, .s3d-poster, .s3d-dots, .s3d-hint { display: none; }
.s3d-panels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.s3d-steps { display: contents; }
.s3d-panel { min-width: 0; }
.s3d-panel:focus { outline: none; }
.s3d-hero, .s3d-intro { grid-column: 1 / -1; }
.s3d-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(220px, .6fr); align-items: center; gap: 40px; margin-bottom: 40px; }
.s3d-hero h1 { margin-bottom: 20px; }
.s3d-hero .hero-actions { margin: 28px 0; }
.s3d-art { width: 100%; height: auto; }
/* 靜態版面的首屏右邊:主角的圖 + 原版的驗收卡與奇奇那句話(3D 版把這些演在舞台上,所以 3D 版不顯示這一塊) */
.s3d-hero-visual { position: relative; justify-self: center; width: 100%; max-width: 400px; padding-top: 34px; }
.s3d-hero .s3d-art { display: block; max-width: 300px; margin: 0 auto; }
.s3d-hero-visual .accept-card { position: relative; right: auto; bottom: auto; width: 250px; margin: -30px 4px 30px auto; }
.s3d-hero-visual .bot-badge { top: -4px; right: 0; }
.s3d:not(.s3d-live) .s3d-sr { display: none; }      /* 這段是給報讀軟體描述 3D 動畫用的;靜態版面沒有動畫,上面的字都直接看得到 */
.s3d-intro { max-width: 760px; margin: 10px 0 14px; }
.s3d-intro h2 { margin-bottom: 14px; }
.s3d-intro p:last-child { margin: 0; color: var(--ink-soft); }
.s3d-step { padding: 20px 20px 22px; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); box-shadow: 5px 5px 0 var(--ink); }
.s3d-step .s3d-art { display: block; width: auto; max-width: 100%; height: 132px; margin: 0 auto 14px; object-fit: contain; }
.s3d-step-no { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.s3d-step-no .step { padding: 6px 11px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: .78rem; }
.s3d-emoji { font-size: 1.25rem; line-height: 1; }
.s3d-step h3 { margin-bottom: 8px; font-size: 1.35rem; }
.s3d-step p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 1100px) { .s3d-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .s3d { padding-top: 118px; }
  .s3d-panels { grid-template-columns: 1fr; }
  .s3d-hero { grid-template-columns: 1fr; gap: 18px; }
  .s3d-hero .s3d-art { max-width: 220px; }
  .s3d-hero-visual { max-width: 340px; }
}

/* ---------- 3D 版 ---------- */
.s3d-live { --s3d-step: 84vh; padding: 0; background: var(--paper); }
.s3d-live .s3d-track { height: calc(100vh + 6.6 * var(--s3d-step)); }
.s3d-live .s3d-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: radial-gradient(circle at 78% 20%, rgba(217,239,115,.55), transparent 30%), radial-gradient(circle at 60% 96%, rgba(146,205,226,.4), transparent 36%), linear-gradient(#fbf8ef, var(--paper)); }
@supports (height: 100lvh) {
  .s3d-live { --s3d-step: 84lvh; }
  .s3d-live .s3d-track { height: calc(100lvh + 6.6 * var(--s3d-step)); }
  .s3d-live .s3d-stage { height: 100lvh; }
}
/* 3D 還在載的時候,先放一張主角的圖頂著 */
.s3d-live .s3d-poster { display: block; position: absolute; top: 57%; left: 67.5%; width: auto; height: min(50vh, 40vw); transform: translate(-50%, -50%); transition: opacity .35s ease .1s; }
.s3d-ready .s3d-poster, .s3d-live[data-chapter]:not([data-chapter="0"]) .s3d-poster { opacity: 0; }
/* 左邊留一片紙色,字才不會壓在舞台上看不清楚 */
.s3d-live .s3d-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(247,243,233,.94) 0%, rgba(247,243,233,.93) 30%, rgba(247,243,233,0) 54%); transition: opacity .5s ease; }
/* 五個站的字都在不透明的白卡裡,不需要遮罩;留著的話島的左半邊會被洗成一條灰白的殘影(data-chapter 是 story-ui.js 寫在 [data-s3d] 上的) */
@media (min-width: 861px) { .s3d-live[data-chapter]:not([data-chapter='0']):not([data-chapter='1']) .s3d-stage::after { opacity: 0; } }
.s3d-live .s3d-art, .s3d-live .s3d-hero-visual { display: none; }

/* 說明會橫幅:寬螢幕疊在舞台最上面,往下滑就跟著頁面捲走 */
.s3d-live .s3d-top { position: absolute; top: 94px; right: 0; left: 0; z-index: 3; }
.s3d-live .s3d-top .briefing-banner { margin-bottom: 0; }

.s3d-live .s3d-panels { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
.s3d-live .s3d-panel { position: absolute; top: 54%; left: 0; width: min(44%, 500px); margin: 0; opacity: 0; pointer-events: none; transform: translateY(calc(-50% + 22px)); transition: opacity .18s ease-in, transform .18s ease-in; }
/* 換章節:舊卡先快退,新卡晚 0.16 秒才進來(兩張有墨邊的卡同時淡入淡出的話,中間有一瞬間字會疊在一起) */
.s3d-live .s3d-panel.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; transition: opacity .42s cubic-bezier(.22,1,.36,1) .16s, transform .55s cubic-bezier(.22,1,.36,1) .16s; }
.s3d-live .s3d-hero { display: block; top: auto; bottom: clamp(26px, 6vh, 84px); width: min(54%, 660px); transform: translateY(22px); }
.s3d-live .s3d-hero.is-active { transform: none; }
/* 首屏淡出之後,裡面的按鈕不能再被 Tab 到(字還是留給報讀軟體) */
.s3d-live .s3d-hero:not(.is-active) .hero-actions { visibility: hidden; }
.s3d-live .s3d-hero h1 { margin-bottom: 16px; font-size: clamp(2.3rem, min(5.2vw, 9.4vh), 4.6rem); }
.s3d-live .s3d-hero .hero-lead { font-size: clamp(1rem, min(1.5vw, 2.5vh), 1.18rem); }
.s3d-live .s3d-hero .hero-actions { margin: clamp(14px, 3.2vh, 30px) 0 clamp(10px, 2.4vh, 24px); }
.s3d-live .s3d-intro { max-width: none; }
.s3d-live .s3d-intro h2 { font-size: clamp(1.9rem, min(3.6vw, 6.4vh), 3.2rem); }
.s3d-live .s3d-intro p:last-child { font-size: 1.08rem; }
.s3d-live .s3d-step { padding: 26px 28px 30px; box-shadow: 7px 7px 0 var(--ink); }
.s3d-live .s3d-step-no { margin-bottom: 14px; }
.s3d-live .s3d-step-no .step { padding: 8px 14px; font-size: .9rem; }
/* 步驟的表情符號襯一塊墨邊小方塊(和課程卡的圖示同一種做法);顏色照 story.js 的 padColors,文字卡和主角腳下的地墊對得起來 */
.s3d-live .s3d-emoji { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 14px 14px 14px 5px; background: var(--lime); font-size: 1.25rem; transform: rotate(-4deg); }
.s3d-live .s3d-steps > :nth-child(1) .s3d-emoji { background: var(--yellow); }
.s3d-live .s3d-steps > :nth-child(2) .s3d-emoji { background: var(--blue); }
.s3d-live .s3d-steps > :nth-child(3) .s3d-emoji { background: var(--orange); }
.s3d-live .s3d-steps > :nth-child(4) .s3d-emoji { background: var(--lime); }
.s3d-live .s3d-steps > :nth-child(5) .s3d-emoji { background: var(--mint); }
.s3d-live .s3d-step h3 { margin-bottom: 10px; font-size: clamp(1.7rem, min(3vw, 5.4vh), 2.5rem); }
.s3d-live .s3d-step p { font-size: 1.06rem; }
@media (max-height: 700px) and (min-width: 861px) {
  .s3d-live .s3d-top { top: 84px; }
  .s3d-live .s3d-hero .eyebrow { margin-bottom: 10px; }
  .s3d-live .s3d-hero h1 { margin-bottom: 10px; }
}

.s3d-live .s3d-dots { position: absolute; bottom: 22px; left: 50%; z-index: 3; display: flex; gap: 8px; margin: 0; padding: 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); box-shadow: 4px 4px 0 var(--ink); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .35s ease, transform .35s ease, visibility 0s .35s; }
.s3d-live .s3d-dots.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .35s ease, transform .35s ease, visibility 0s; }
.s3d-dots button { min-width: 40px; height: 40px; padding: 0 10px; white-space: nowrap; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 850 .8rem/1 ui-monospace, monospace; letter-spacing: .06em; cursor: pointer; transition: background .2s, color .2s, transform .12s; }
.s3d-dots button:hover { background: var(--paper-deep); }
.s3d-dots button.is-active { background: var(--green); color: #fff; }
/* 站名用寬度滑開(原本是 display 切換,膠囊的寬度會瞬間跳一下);最長的站名 4 個字,6em 不會截到 */
.s3d-dots button .s3d-dot-name { display: inline-block; max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; vertical-align: bottom; font-family: var(--font); font-size: .82rem; letter-spacing: 0; transition: max-width .35s cubic-bezier(.22,1,.36,1), margin-left .35s cubic-bezier(.22,1,.36,1), opacity .2s; }
.s3d-dots button.is-active .s3d-dot-name { max-width: 6em; margin-left: 6px; opacity: 1; }

.s3d-live .s3d-hint { position: absolute; bottom: 22px; left: 50%; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--ink); color: var(--ink-soft); font-size: .82rem; font-weight: 800; letter-spacing: .08em; transform: translateX(-50%); transition: opacity .3s ease; pointer-events: none; }
.s3d-live .s3d-hint span { display: inline-block; animation: s3d-nudge 1.5s ease-in-out infinite; }
.s3d-live .s3d-hint.is-off { opacity: 0; }
/* 提示收起來之後動畫也停:不停的話,捲動中每一格都要重算一次樣式(看不見還在動) */
.s3d-live .s3d-hint.is-off span { animation-play-state: paused; }
@keyframes s3d-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* 手機:說明會橫幅照原版完整放在舞台上面;舞台裡文字做成下面的一張卡 */
@media (max-width: 860px) {
  .s3d-live { --s3d-step: 76vh; }
  @supports (height: 100lvh) { .s3d-live { --s3d-step: 76lvh; } }
  .s3d-live .s3d-top { position: static; padding: 104px 0 4px; }
  .s3d-live .s3d-top .briefing-banner { margin-bottom: 18px; }
  .s3d-live .s3d-stage::after { background: linear-gradient(180deg, rgba(247,243,233,.5) 0%, rgba(247,243,233,0) 22%); }
  .s3d-live .s3d-poster { top: 30%; left: 44%; height: min(30vh, 62vw); }

  .s3d-live .s3d-panel, .s3d-live .s3d-hero { top: auto; right: 0; bottom: 16px; left: 0; width: auto; padding: 16px 18px 18px; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); box-shadow: 5px 5px 0 var(--ink); transform: translateY(20px); }
  @supports (height: 100lvh) { .s3d-live .s3d-panel, .s3d-live .s3d-hero { bottom: calc(100lvh - 100svh + 16px); } }
  .s3d-live .s3d-panel.is-active, .s3d-live .s3d-hero.is-active { transform: none; }
  .s3d-live .s3d-hero .eyebrow { margin-bottom: 8px; font-size: .7rem; }
  .s3d-live .s3d-hero h1 { margin-bottom: 8px; font-size: clamp(1.8rem, 8.4vw, 2.5rem); }
  .s3d-live .s3d-hero .hero-lead { margin-bottom: 0; font-size: .9rem; line-height: 1.6; }
  .s3d-live .s3d-hero .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 10px; }
  .s3d-live .s3d-hero .hero-actions .button { width: auto; min-height: 44px; padding: .55rem 1.05rem; }
  /* 「先看家長版說法」可以點的高度原本只有 27px:把感應範圍上下各加 8px(不佔版面,窄手機上它折到按鈕下面時卡片也不會變高) */
  .s3d-live .s3d-hero .text-link { position: relative; }
  .s3d-live .s3d-hero .text-link::after { content: ""; position: absolute; inset: -8px 0; }
  .s3d-live .s3d-hero .trust-list { gap: 4px 14px; font-size: .76rem; }
  .s3d-live .s3d-intro .eyebrow { margin-bottom: 8px; }
  .s3d-live .s3d-intro h2 { margin-bottom: 8px; font-size: clamp(1.45rem, 6.6vw, 2rem); }
  .s3d-live .s3d-intro p:last-child { font-size: .95rem; }
  .s3d-live .s3d-step-no { margin-bottom: 8px; }
  .s3d-live .s3d-emoji { width: 38px; height: 38px; font-size: 1.1rem; }
  .s3d-live .s3d-step h3 { margin-bottom: 6px; font-size: 1.5rem; }
  .s3d-live .s3d-step p { font-size: .96rem; }
  .s3d-live .s3d-dots { top: 90px; bottom: auto; gap: 4px; padding: 4px; }
  .s3d-dots button { min-width: 38px; height: 38px; padding: 0 8px; }
  .s3d-live .s3d-hint { display: none; }
}
/* 比較矮的手機:字和間距縮一點,把空位留給舞台(不藏字) */
@media (max-width: 860px) and (max-height: 700px) {
  .s3d-live .s3d-panel, .s3d-live .s3d-hero { padding: 12px 16px 14px; }
  .s3d-live .s3d-hero .eyebrow { margin-bottom: 4px; }
  .s3d-live .s3d-hero h1 { margin-bottom: 6px; font-size: clamp(1.55rem, 7.2vw, 2.1rem); }
  .s3d-live .s3d-hero .hero-lead { font-size: clamp(.82rem, 3.6vw, .875rem); line-height: 1.5; }      /* 390 寬以上 14px;360 寬維持 13px,不然會多折一行、把舞台再擠掉一截 */
  @media (max-height: 640px) { .s3d-live .s3d-hero .hero-lead { padding-right: 18px; } }   /* 右邊浮動的社群按鈕會壓到行尾,讓一點位置 */
  .s3d-live .s3d-hero .hero-actions { margin: 8px 0 6px; }
  .s3d-live .s3d-hero .hero-actions .button { min-height: 42px; padding: .5rem .9rem; }
  .s3d-live .s3d-step h3 { font-size: 1.35rem; }
  .s3d-live .s3d-step p, .s3d-live .s3d-intro p:last-child { font-size: .9rem; }
}

/* 3D 版把原本的五步驟卡搬進舞台了,下面只留三張情境照 */
.method-photos { padding-top: 56px; }
.method-photos .photo-row { margin-top: 0; }
.parent-photo { max-width: 760px; margin: 44px auto 0; }
.s3d-in-story .back-to-top { opacity: 0; pointer-events: none; }
/* 3D 模型的授權標示(CC BY 4.0 規定要標) */
.footer-bottom { flex-wrap: wrap; }
.footer-bottom .s3d-credit { flex: 1 0 100%; }
@media (max-width: 860px) { .footer-bottom .s3d-credit { padding-right: 60px; } }   /* 右下角有「回到頁首」的圓鈕,別讓它蓋到字 */
/* 三門課的課程卡:「孩子帶走」那一塊原本是絕對定位貼在卡片底部,說明多折一行就會和它疊字;改成跟著內容往下排、沒字的時候才貼底 */
.course-card { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 27px; }
.course-card > p { margin-bottom: 22px; }
.course-out { position: relative; right: auto; bottom: auto; left: auto; align-self: stretch; margin-top: auto; }

/* ---------- 整頁雙層 ----------
   底層:一張固定在畫面上的 3D 畫布(整頁共用,故事演完之後世界還在);
   上層:原本的 HTML 內容。下面每個區塊的底色拿掉,內容收進一張「浮在世界上的卡」(卡的顏色就是那個區塊原本的底色,字的對比不變);
   區塊和區塊之間留一段空窗(--s3d-win),空窗裡看得到後面的世界在演。
   頁面一開始那一小段程式判斷可以用 3D,才會在 <html> 加上 .s3d-world;退回靜態版面時會拿掉,一切變回原樣。 */
.s3d-canvas { display: none; }
html.s3d-world .s3d-canvas { display: block; position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100vh; pointer-events: none; }
@supports (height: 100lvh) { html.s3d-world .s3d-canvas { height: 100lvh; } }
/* 世界的天空畫在畫布自己的底色上(畫布是固定的,所以天空也不會跟著捲;iOS 對 background-attachment: fixed 支援不好,不用它) */
html.s3d-world .s3d-canvas { background: radial-gradient(circle at 78% 20%, rgba(217,239,115,.55), transparent 30%), radial-gradient(circle at 60% 96%, rgba(146,205,226,.4), transparent 36%), linear-gradient(#fbf8ef, var(--paper)); }
html.s3d-world main, html.s3d-world .site-footer { position: relative; z-index: 1; }
html.s3d-world .s3d-live, html.s3d-world .s3d-live .s3d-stage { background: transparent; }

html.s3d-world { --s3d-win: 56vh; }
html.s3d-world main > section:not(.s3d) { padding: var(--s3d-win) 0 0; overflow: visible; background: transparent; scroll-margin-top: calc(12px - var(--s3d-win)); }   /* 從導覽列跳過來時,停在內容卡上,不是停在卡前面的空窗 */
html.s3d-world main > section:not(.s3d):last-of-type { padding-bottom: 92px; }
html.s3d-world .video-section { --s3d-win: 30vh; }
html.s3d-world .story-section::after { display: none; }            /* 原本區塊角落的裝飾圓環,底色拿掉後不需要 */
html.s3d-world main > section:not(.s3d) > .container { padding: clamp(24px, 4.4vw, 58px); border: 2px solid var(--ink); border-radius: 32px; box-shadow: 9px 9px 0 var(--ink); }
html.s3d-world main > section:not(.s3d) > .container + .container { margin-top: 40px; }      /* 上一張卡的實心影佔 9px,留少了兩張會像黏在一起 */
@media (min-width: 861px) {
  html.s3d-world main > section:not(.s3d) h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }      /* 卡片比原本的區塊窄一點,大標跟著收一點,才不會斷得很怪 */
  html.s3d-world main > section:not(.s3d) .section-head { gap: 36px; }
  /* 大標放在窄欄裡的三個區塊(品牌故事、適合對象、常見問題):照上面的大小,一句話會折成兩三截、最後一行只剩一兩個字;收到每一句排得下一行 */
  html.s3d-world main > section:not(.s3d) .story-heading h2, html.s3d-world main > section:not(.s3d) .fit-copy h2, html.s3d-world main > section:not(.s3d) .faq-intro h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
  html.s3d-world main > section:not(.s3d) > .story-proof-grid.container { padding: clamp(18px, 2.4vw, 30px); }   /* 只裝三張小卡的盒子,內距和課程、成果那兩個盒子一樣(原本四邊各 58px,將近一半是空的) */
}
html.s3d-world .video-section > .container, html.s3d-world .faq-section > .container { background: var(--paper); }
html.s3d-world .parent-section > .container, html.s3d-world .evidence-section > .container { background: var(--white); }
html.s3d-world .story-section > .container { background: #dff1e8; }
html.s3d-world .courses-section > .container, html.s3d-world .method-section > .container { background: var(--paper-deep); }
html.s3d-world .difference-section > .container { background: var(--green-dark); }
html.s3d-world .fit-section > .container { background: var(--yellow); }
html.s3d-world .contact-section > .container { background: var(--green); }
html.s3d-world .method-photos { padding-top: var(--s3d-win); }
@media (max-width: 860px) {
  html.s3d-world { --s3d-win: 46vh; }
  html.s3d-world .video-section { --s3d-win: 26vh; }
  /* 手機:卡片幾乎貼齊螢幕兩邊,裡面內容的寬度剛好和原版一樣(螢幕寬 - 36px),字才不會比原版多折一行 */
  html.s3d-world main > section:not(.s3d) > .container { width: calc(100% - 12px); padding: 22px 10px 26px; border-radius: 22px; box-shadow: 4px 5px 0 var(--ink); }
  /* 再進一步做成「整張紙頁」:左右的墨邊推到螢幕外(上下的墨邊、圓角、實心影照留)。上面那種卡離螢幕兩邊各 6px,
     露出一條世界的彩色細縫,滑動時會閃;外卡的內距(10px)又比裡面小卡的還小。內容寬度一樣是「螢幕寬 - 36px」。
     一定要用 overflow-x: clip(不會變成捲動容器,釘住的舞台照常);不認得 clip 的舊瀏覽器(iOS 15 以下)維持上面那一條。
     不能改用 overflow-x: hidden —— 舞台的 sticky 會失效。 */
  @supports (overflow: clip) {
    html.s3d-world main { overflow-x: clip; }
    html.s3d-world main > section:not(.s3d) > .container { width: calc(100% + 4px); max-width: none; margin-inline: -2px; padding: 26px 18px 30px; border-radius: 28px; box-shadow: 0 6px 0 var(--ink); }
  }
  html.s3d-world main > section:not(.s3d) > .container + .container { margin-top: 28px; }
  /* 區塊大標原本 32px,和首屏的 h1(32.8px)等於沒有主從,354px 寬又只放得下 11 個字(「…看起來會了」。最後一行只剩兩個字);收一級 */
  html.s3d-world main > section:not(.s3d) h2 { font-size: clamp(1.5rem, 7vw, 1.72rem); }
  html.s3d-world .course-card h3 { font-size: 1.35rem; }
}
@media (min-width: 521px) and (max-width: 860px) {
  html.s3d-world main > section:not(.s3d) h2 { font-size: clamp(1.72rem, 4.4vw, 2.3rem); }      /* 直放的平板:畫面寬,大標不用收到手機那麼小 */
}
@media (min-width: 721px) and (max-width: 860px) {
  /* 這個寬度下品牌故事、適合對象、常見問題已經分成左右兩欄,大標在窄的那一欄(理由同下面寬螢幕那一條) */
  html.s3d-world main > section:not(.s3d) .story-heading h2, html.s3d-world main > section:not(.s3d) .fit-copy h2, html.s3d-world main > section:not(.s3d) .faq-intro h2 { font-size: clamp(1.5rem, 3.4vw, 1.8rem); }
}
/* 有「大標 + 說明」的三個區塊(三門課、差異、成果),寬螢幕上照參考範例的排法:大標做成一個文字盒放在一邊,世界在另一邊;
   下面的內容各自成一張卡。手機維持上面那種「整個區塊一張卡」。 */
@media (min-width: 861px) {
  html.s3d-world :is(.courses-section, .difference-section, .evidence-section) { --s3d-win: 26vh; }
  html.s3d-world main > section:is(.courses-section, .difference-section, .evidence-section) > .container { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  html.s3d-world :is(.courses-section, .difference-section, .evidence-section) .section-head { display: block; width: min(47%, 540px); margin: 0 0 36vh; padding: 30px 34px 32px; border: 2px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); }
  html.s3d-world :is(.courses-section, .difference-section, .evidence-section) .section-head > p { max-width: none; margin: 14px 0 0; }
  html.s3d-world main > section:is(.courses-section, .difference-section, .evidence-section) .section-head h2 { margin-bottom: 0; font-size: clamp(1.6rem, 2.9vw, 2.4rem); }
  html.s3d-world .courses-section .section-head { background: var(--paper-deep); }
  html.s3d-world .difference-section .section-head { margin-left: auto; background: var(--green-dark); }
  html.s3d-world .evidence-section .section-head { background: var(--white); }
  html.s3d-world :is(.course-grid, .evidence-grid, .evidence-section .photo-row) { padding: clamp(18px, 2.4vw, 30px); border: 2px solid var(--ink); border-radius: 30px; box-shadow: 9px 9px 0 var(--ink); }
  html.s3d-world .course-grid { background: var(--paper-deep); }
  html.s3d-world .course-note { display: table; margin-top: 36px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper-deep); box-shadow: 4px 4px 0 var(--ink); }
  html.s3d-world .comparison { border: 2px solid var(--ink); background: var(--green-dark); box-shadow: 9px 9px 0 var(--ink); }
  html.s3d-world .evidence-grid, html.s3d-world .evidence-section .photo-row { background: var(--white); }
  html.s3d-world .evidence-section .photo-row { margin-top: 40px; }
}
/* ---------- 大卡裡面的小卡、相框、影片框 ----------
   外層是墨邊 + 實心影;裡面這一層照原版橫幅裡的日期牌(.briefing-date)的寫法:墨色 2px 邊、不帶模糊影。
   原版在這一層混著 1px 淡邊、正下方的灰色厚邊、模糊影三種,放進墨邊的大卡裡像新舊兩版拼在一起。
   (手機也會吃到,所以用逗號列出,不用 :is() —— 舊一點的手機瀏覽器不認得) */
html.s3d-world .course-card, html.s3d-world .evidence-card, html.s3d-world .story-proof, html.s3d-world .contact-box { border: 2px solid var(--ink); box-shadow: none; }
html.s3d-world .story-proof { background: var(--white); }
html.s3d-world .contact-box { background: var(--green-dark); }
html.s3d-world .evidence-card .evidence-preview { border-color: var(--ink); border-right-width: 2px; border-bottom-width: 2px; }   /* 寫到三層才蓋得過原版 :last-child 那兩條;右邊那條只有平板的橫排才會畫出來 */
html.s3d-world .parent-note { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--mint); }
html.s3d-world .photo-figure img, html.s3d-world .video-frame { border: 2px solid var(--ink); box-shadow: none; }
html.s3d-world .evidence-content li { padding: 4px 11px; border: 1.5px solid var(--ink); border-radius: 999px; }
/* 手機:小卡的圓角原本(26 / 24 / 30)比外卡還大、內距也比外卡寬鬆,層級反了;收成比外卡小一級 */
@media (max-width: 860px) {
  html.s3d-world .course-card { min-height: 0; padding: 22px 20px; border-radius: 16px; }      /* 「孩子帶走」已經改成跟著內容排,不需要靠最小高度撐位置 */
  html.s3d-world .course-number { top: 22px; right: 20px; }
  html.s3d-world .story-proof { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px 16px; border-radius: 16px; }
  html.s3d-world .story-proof > span { width: 48px; height: 48px; }
  html.s3d-world .parent-note { padding: 22px 20px; border-radius: 16px; }
  html.s3d-world .comparison, html.s3d-world .evidence-card, html.s3d-world .contact-box { border-radius: 16px; }
  html.s3d-world .comparison-column { padding: 24px 20px 26px; }
  html.s3d-world .contact-box { padding: 22px 18px; }
  html.s3d-world .video-frame, html.s3d-world .photo-figure img { border-radius: 14px; }
}

/* ---------- 小字 ----------
   小標籤(作品證據、AI 素養、孩子帶走、容易發生的情況…)原本 10.5–11.5px 又用最粗的字重,筆畫多的字會黏成一團;放大到 12.8px、字重降一級。
   字一個都不改。照片上的「情境示意圖・AI 生成」不動。 */
html.s3d-world .chip, html.s3d-world .note-label, html.s3d-world .course-out small, html.s3d-world .comparison-kicker, html.s3d-world .contact-box-label, html.s3d-world .evidence-content li { font-size: .8rem; font-weight: 800; letter-spacing: .06em; }
html.s3d-world .contact-box dt, html.s3d-world .placeholder-note { font-size: .8rem; }
html.s3d-world .footer-bottom p { color: rgba(255,255,255,.62); font-size: .78rem; }
/* 支援的瀏覽器會少掉「者。」這種最後一行只剩一兩個字的情況;不支援的直接忽略 */
html.s3d-world main p, html.s3d-world main li { text-wrap: pretty; }
html.s3d-world .story-heading h2 em { text-wrap: balance; }      /* 第二句自己是一個盒子:真的放不下一行時,兩行折得平均一點 */

/* ---------- 按鈕 ----------
   報名、諮詢這幾顆主要按鈕原版是綠色柔光暈,放在墨邊實心影的橫幅和文字卡裡,同一個框有兩種影子;換成墨邊 + 實心影。
   原版沒有 :active,手機點下去沒有回饋:按下去會陷進去。(.button 本來就有 2px 透明邊,尺寸不變) */
html.s3d-world .button-primary, html.s3d-world .button-light { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s, background .2s; }
html.s3d-world .button-small.button-primary { box-shadow: 3px 3px 0 var(--ink); }
html.s3d-world .button-dark { box-shadow: 3px 3px 0 var(--lime); }      /* 墨色按鈕配墨色影子會糊成一塊 */
html.s3d-world .button-outline-light { border-color: #fff; }
/* 觸控裝置的 :hover 會黏住(點過之後一直浮著),上浮只給有滑鼠的裝置 */
@media (hover: none) { html.s3d-world .button:hover { transform: none; } }
@media (hover: hover) { html.s3d-world .button-primary:hover, html.s3d-world .button-light:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } }
html.s3d-world .button-primary:active, html.s3d-world .button-light:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.s3d-dots button:active, html.s3d-world .social-btn:active, html.s3d-world .button-dark:active, html.s3d-world .button-outline-light:active { transform: translateY(1px) scale(.97); transition-duration: .06s; }

/* ---------- 頁首、頁尾、浮動社群鈕、回頁首鈕 ----------
   和內容卡同一套:墨色實線、實心影。原版的髮絲線 + 模糊影 + 即時模糊(疊在一直重畫的 3D 上,每一格都要重算)只留給靜態版面。 */
html.s3d-world .site-header { border-bottom-width: 2px; }
html.s3d-world .site-header.scrolled { background: var(--paper); border-color: var(--ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.s3d-world .social-float { box-shadow: 0 5px 0 var(--ink); }
/* 回頁首:深色頁尾上原本只剩一個箭頭看得到,換成世界上和頁尾上都看得到的顏色 */
html.s3d-world .back-to-top { border: 2px solid var(--ink); background: var(--lime); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
/* 頁尾原本是一塊平直的深色板,把世界一刀切斷;上緣改成圓角,兩側還看得到世界 */
html.s3d-world .site-footer { border-radius: 36px 36px 0 0; box-shadow: 0 -8px 0 var(--green); }
@media (max-width: 720px) {
  html.s3d-world .site-footer { border-radius: 28px 28px 0 0; }
  /* 手機的浮動鈕原本是壓在畫面右側中央的一塊白底墨框板子(50×211),蓋住內容卡的行尾,也擠到舞台上的主角。
     四顆都留,只拿掉板子、按鈕縮小;報名那顆有兩行字,36px 才放得下(32px 會頂到邊框)。
     位置移到右上角:橫幅右邊原本就為它留了空位(photos.css 的 margin-right),舞台中段整個讓給主角;148px = 圓點膠囊(含影子)的下緣再往下一點 */
  html.s3d-world .social-float { top: 148px; gap: 6px; justify-items: center; padding: 0 4px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
  html.s3d-world .social-float .social-btn { width: 32px; height: 32px; box-shadow: 0 2px 0 var(--ink); }
  html.s3d-world .social-float .social-btn svg { width: 17px; height: 17px; }
  html.s3d-world .social-float .social-accupass { width: 36px; height: auto; }
  html.s3d-world .social-float .social-try { width: 36px; height: auto; }   /* 免費體驗學習島:和票券一樣寫字 */
}
/* 窄一點的筆電(1280 寬):內容卡的右緣連影子會伸到右側浮動鈕底下約 28px,卡片收窄一點讓開 */
@media (min-width: 861px) and (max-width: 1340px) {
  html.s3d-world main > section:not(.s3d) > .container { width: min(calc(100% - 172px), var(--container)); }
}
@media (min-width: 861px) and (max-width: 960px) {
  /* 卡片收窄之後,大標的文字盒(原本佔 47%)放不下「帶走的不只是一個作品,」這一行,加寬一點 */
  html.s3d-world :is(.courses-section, .difference-section, .evidence-section) .section-head { width: 54%; }
}

/* 本機檢查用(網址加 ?islet=名字):只看下半部的某一座浮島,其他東西都收起來 */
html.s3d-solo body > :not(.s3d-canvas) { visibility: hidden !important; }
@media print { .s3d-canvas { display: none !important; } }