@charset "utf-8";

/* ============================================================
   BIMTeki 教學文件：站台補充層
   ------------------------------------------------------------
   docs/tutorial.css 是 Sara 交付的原檔，改版時整檔覆蓋，
   一律不在該檔內修改。所有站台端的追加樣式寫在本檔：

     1. 側欄投影補充（頂層單篇項目、區段標題、版本切換器）
     2. 影片元件（版型規格未定義，依金澧 repo README 實作）
     3. legacy 相容層（現行後台 Froala HTML 的視覺映射）
     4. 雜項（外部連結項、空狀態、搜尋結果）
   ============================================================ */


/* ── 0. 頂欄 ─────────────────────────────────── */

/* logo 在站台端是連結（範例頁是純 img） */
.top .logo{display:flex;align-items:center;flex:none}

/* 站台 logo（bimteki.svg）比設計稿附的 logo 寬：24px 高時是 105px、設計稿是 94px。
   版型的 320px 頂欄空間是剛好塞滿的（漢堡 36＋logo 94＋官網鈕 140＋間距），
   多出來的 11px 會讓 320–360 出現水平捲動，因此小螢幕下把寬度收回設計稿的預算。 */
@media (max-width:400px){
  .top .logo img{width:94px;height:auto}
}


/* ── 1. 側欄投影補充 ──────────────────────────── */

/* 區段標題：現行資料的第一層分類底下只有子分類時（容積工具、BIMTeki
   Studio beta），第一層降級為區段標題、子分類升為群組，藉此把三層目錄
   投影成版型的兩層手風琴 */
.side-section{
  display:flex;align-items:center;gap:8px;
  padding:16px 12px 6px;
  font:600 12px/1.4 var(--font-cjk);color:var(--text3);
  letter-spacing:.08em;
}
.side-section:first-child{padding-top:4px}

/* 頂層單篇項目：hide-label 且只有 1 篇文章的分類，直接把文章升為頂層項目
   （沿用 .s-item 的字級與 hover，只補上與群組標題一致的左內距）
   註：修飾詞不可命名為 .top——版型的頂欄就是 .top{height:60px}，會撞名 */
/* 行高跟著 115.08.12 的 .s-item（1.75）走——長標題換行時兩行才不會黏在一起，
   頂層項目與群組底下的項目不該有兩種行距 */
.s-item.lone{
  min-height:34px;padding:6px 12px;
  font:500 14px/1.75 var(--font-cjk);color:#333333;
}
.s-item.lone.on{font-weight:600;color:var(--ink-strong);background:#EFEFEF}

/* 外部連結項目（dc_document.link）：右上小箭頭 */
.s-item .ext{flex:none;margin-left:auto;opacity:.5}

/* 版本切換器（.ver-switch／.ver-btn／.ver-menu／.ver-opt）的樣式自 115.08.12 起
   由設計師的 tutorial.css 負責，這裡只補設計稿沒有處理到的三種情形。 */

/* 1. 單一版本：設計稿只畫了有下拉的狀態，但 .side-top 被新版設定成 padding-left:0
      （那是為了讓下拉貼齊側欄），純文字版本名會因此少掉 12px 縮排、對不齊底下的目錄 */
.side-top:not(.has-ver){padding-left:12px}

/* 2. 版本名過長：設計稿只驗證過「目前版本＝BIMTeki Studio」這種短名稱，實際資料
      可以是任意長度（正式站目前就是「BIMTeki（現行版）」＋「目前」標籤，比切換器還寬）。
      按鈕本身用刪節號截斷；下拉不能截（要靠名稱才選得出來），改成撐滿側欄內容寬度：
      下拉是 .ver-switch 的絕對定位子元素，右邊補回被收合鈕佔掉的
      6（.side-top 右內距）＋28（.side-fold）＋8（gap）＝42px 就等於側欄內容右緣。
      不用 width:auto 讓它自己長——側欄是 overflow-y:auto，水平方向會被裁掉。 */
.ver-btn .nm{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bt-side .ver-menu{width:auto;left:0;right:-42px}

/* 3. 手機抽屜裡的第二份切換器（≤820 側欄整個隱藏，這是唯一的切換入口）：
      抽屜沒有收合鈕，切換器獨佔一列 */
.drawer-top{
  display:flex;align-items:center;min-height:38px;
  padding:0 12px;margin-bottom:6px;
  font:500 14px/1.4 var(--font-cjk);color:var(--bt-600);
}
.drawer-top .ver-switch{flex:1;min-width:0}


/* ── 2. 影片元件 ──────────────────────────────
   版型規格 19 個元件未定義影片，但金澧 repo README 已明訂寫法、
   舊版另有 10 篇已內嵌 iframe/video。16:9 響應式、不溢出。
   點擊才載入播放器（縮圖佔位由 .video-poster 承接）。 */

.video{display:flex;flex-direction:column;gap:8px;align-self:flex-start;max-width:100%;width:min(100%,720px)}
.video .frame{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;
  border:1px solid var(--bt-border);background:#111111;
}
.video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}
.video .video-poster{
  position:absolute;inset:0;width:100%;height:100%;
  border:none;padding:0;margin:0;cursor:pointer;
  background-color:#111111;background-position:center;background-size:cover;
  display:flex;align-items:center;justify-content:center;
}
.video .video-poster::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);
  transition:background 120ms;
}
.video .video-poster:hover::after{background:rgba(0,0,0,.06)}
.video .play{
  position:relative;z-index:1;
  width:58px;height:40px;border-radius:10px;
  background:rgba(17,17,17,.78);
  display:flex;align-items:center;justify-content:center;
  transition:background 120ms;
}
.video .video-poster:hover .play{background:#B14A38}
.video .play svg{margin-left:2px}
.video .cap{font:400 13px/1.7 var(--font-cjk);color:var(--text2)}


/* ── 2b. 行內圖示 ─────────────────────────────
   金澧在句子中間放介面按鈕的小截圖（「按下 ![按鈕](images/01-按鈕-開啟工具.png) 開啟工具」）。
   版型的 19 個元件只定義了獨立成行的截圖卡，這裡比照 legacy 相容層對 Froala 行內圖
   （.fr-dii）的處理：不加外框（一堆小方框反而更亂）、與文字垂直置中。
   供圖多是 16–52px 高的 1x 截圖，以原尺寸顯示；限高是保險，避免誤放大圖把行高撐開。
   Sara 日後若補了正式的行內圖示元件，改以她的版本為準。 */

.ico{
  display:inline-block;vertical-align:middle;margin:0 3px;
  width:auto;height:auto;max-height:28px;max-width:100%;
}


/* ── 3. legacy 相容層 ─────────────────────────
   現行後台 Froala HTML 一個字不動，靠這層映射成新版視覺。
   全部 scoped 在 .legacy 底下，不會影響 Markdown 產出的元件版型。 */

.legacy{display:flex;flex-direction:column;gap:14px}

/* 內文中若自帶 H1（beta 手抄批 56 篇全部都有）會與頁面 H1 重複，隱藏 */
.legacy > h1{display:none}

.legacy p{font:400 15px/2 var(--font-cjk);letter-spacing:.01em;color:var(--text)}
.legacy p:empty{display:none}
.legacy strong,.legacy b{font-weight:700;color:var(--ink-strong)}
.legacy em,.legacy i{font-style:italic}
.legacy a{color:var(--bt-500);text-decoration:underline;text-underline-offset:3px}
.legacy a:hover{color:var(--bt-600)}

/* 章節間距對齊版型：轉檔文章的章節是 #bt-article 的直接子元素，吃 gap:44px；
   legacy 是一整塊 .legacy（gap:14px），要靠 h2 的上邊距補到同樣的 44px（14+30）。
   原本是 16px＝視覺上只有 30px，Sara 回報的就是這個數字。
   整篇第一個 h2 不補——它上面是標題區塊，那一格已經有 44px 了。 */
.legacy h2{
  margin-top:30px;padding-bottom:12px;border-bottom:1px solid var(--bt-100);
  font:500 22px/1.4 var(--font-cjk);color:var(--ink);
}
.legacy > h2:first-child{margin-top:0}
.legacy h3{margin-top:10px;font:500 17px/1.5 var(--font-cjk);color:var(--ink)}
.legacy h4{margin-top:4px;font:500 15px/1.7 var(--font-cjk);color:var(--ink-strong)}
.legacy h5,.legacy h6{margin-top:4px;font:500 14px/1.7 var(--font-cjk);color:var(--ink-strong)}

/* 清單：對齊 .bullets / .nlist 的視覺（圓點 5px、編號 400 系） */
.legacy ul,.legacy ol{display:flex;flex-direction:column;gap:8px;padding-left:22px}
.legacy li{font:400 15px/1.9 var(--font-cjk);color:var(--text)}
.legacy ul>li{list-style:none;position:relative}
.legacy ul>li::before{
  content:"";position:absolute;left:-16px;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--bt-400);
}
.legacy ol{counter-reset:lg}
.legacy ol>li{list-style:none;position:relative;counter-increment:lg}
.legacy ol>li::before{
  content:counter(lg);position:absolute;left:-22px;top:2px;
  width:20px;height:20px;border-radius:50%;
  background:#F0F0F0;border:1px solid var(--bt-border);
  display:flex;align-items:center;justify-content:center;
  font:600 11px/1 var(--font-latin);color:#444444;
}
.legacy li>ul,.legacy li>ol{margin-top:8px}

/* 表格：比照 .tbl（僅表頭底線＋細橫線），並自行橫向捲動不撐破版面 */
.legacy table{
  display:block;width:100%;max-width:100%;overflow-x:auto;
  border-collapse:collapse;margin-top:4px;
}
.legacy table thead,.legacy table tbody{display:table;width:100%}
.legacy th{
  text-align:left;padding:10px 16px;
  font:500 13px/1.5 var(--font-cjk);color:var(--text2);
  border-bottom:1px solid var(--bt-300);
}
.legacy td{
  padding:13px 16px;font:400 14px/1.6 var(--font-cjk);color:var(--text);
  border-bottom:1px solid var(--bt-100);vertical-align:top;
}
.legacy table .fr-light{background-color:var(--bt-050)}

/* 引言 → 小提醒框（藍灰） */
.legacy blockquote{
  background:#EEF2F6;border:1px solid #D9E2EC;border-radius:12px;
  padding:14px 18px;
  font:400 14px/1.85 var(--font-cjk);color:#4A6B8A;
}
.legacy blockquote strong{color:#3D5C7A;font-weight:600}
.legacy blockquote p{font:inherit;color:inherit}

/* 分隔線：現行內容大量以 hr 當段落分隔（444 處），弱化成細線 */
.legacy hr{border:none;border-top:1px solid var(--bt-100);margin:6px 0}

/* 代碼 */
.legacy code{
  font-family:ui-monospace,Consolas,monospace;font-size:.92em;
  background:var(--bt-050);border:1px solid var(--bt-100);border-radius:5px;
  padding:1px 6px;color:var(--ink-strong);
}
.legacy pre{
  font:400 13.5px/1.9 ui-monospace,Consolas,'Courier New',monospace;
  background:var(--bt-050);border-radius:10px;padding:14px 18px;
  overflow-x:auto;color:var(--ink-strong);white-space:pre;
}
.legacy pre code{background:none;border:none;padding:0}

/* 圖片：比照 .shotcard img.shot——1px 輪廓線＋10px 圓角＋靠左；
   Froala 會寫死 inline width（例：925px），必須用 max-width 收住不溢出 */
.legacy img{
  max-width:100%;height:auto;display:block;
  border-radius:10px;border:1px solid var(--bt-border);
  margin:2px 0;
}
.legacy .fr-fil,.legacy .fr-fir,.legacy .fr-dib,.legacy .fr-dii{float:none}
.legacy p>img{margin-top:4px}

/* Froala 的 fr-dii＝行內插圖（現行內容裡都是 25–28px 高的介面小圖示、按鈕截圖），
   套外框線反而變成一堆小方框，因此只有區塊圖（fr-dib）保留輪廓 */
.legacy .fr-dii{
  display:inline-block;vertical-align:middle;margin:0 2px;
  border:none;border-radius:0;
}

/* Froala 螢光標記：沿用主站既有語意（紅字、無底色） */
.legacy .fr-class-highlighted{color:#E25041;background:none}

/* Froala 影片：<span class="fr-video"><iframe></span> → 16:9 */
.legacy .fr-video,.legacy video,.legacy iframe{max-width:100%}
.legacy .fr-video{
  display:block;position:relative;width:min(100%,720px);aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;border:1px solid var(--bt-border);background:#111;
}
.legacy .fr-video iframe,.legacy .fr-video video{
  position:absolute;inset:0;width:100%;height:100%;border:none;display:block;
}
.legacy > iframe,.legacy p > iframe{
  display:block;width:min(100%,720px);aspect-ratio:16/9;height:auto;
  border-radius:10px;border:1px solid var(--bt-border);background:#111;
}
.legacy video{
  display:block;width:min(100%,720px);height:auto;
  border-radius:10px;border:1px solid var(--bt-border);
}

/* 雙欄段落（主站既有元件，教學文件僅 1 處使用） */
.legacy .paragraph-column2{display:flex;justify-content:space-between;align-items:center;gap:24px;width:auto}
.legacy .paragraph-column2 .col{width:48%}
@media (max-width:820px){
  .legacy .paragraph-column2{display:block}
  .legacy .paragraph-column2 .col{width:100%}
  .legacy .paragraph-column2 .col:first-child{margin-bottom:20px}
}


/* 內文字重與行距跟著 115.08.12 的元件調整走（tutorial.css 末段）。
   設計師那批規則只點名 .p／.bullets／.tbl td 等元件 class，吃不到 legacy 的裸標籤，
   不補的話會變成：Studio 版字較粗、行距較緊，切回現行版又鬆回去，同一個站兩種觀感。
   數值一律對齊元件版：內文 430／1.8，表格儲存格 430 但維持 1.6。
   必須放在本節最後——上面的 .legacy p／li／td 都是 font 簡寫（自帶 400），排在後面才蓋得掉。 */
.legacy p,.legacy li,.legacy blockquote,.legacy blockquote p{font-weight:430;line-height:1.8}
.legacy td{font-weight:430}


/* ── 4. 雜項 ─────────────────────────────────── */

/* 麵包屑首頁 icon 是連結 */
.crumb a{display:flex;align-items:center;color:inherit}

/* 範例頁在標頭區塊用 inline style 拉開間距，這裡收成 class */
.sec.head{gap:18px}

/* 前言的第一段：交付稿寫成 <p class="p" style="margin-top:6px">，
   讓內文與 H1 之間比其他段落再多一點呼吸。inline style 一律收成 class。 */
.sec.head .p:first-of-type{margin-top:6px}

/* 「沒幫助」的大姆指是同一顆 icon 轉 180 度 */
.fb button svg.flip{transform:rotate(180deg)}

/* 文章章節不足 2 個時，TOC 與「本頁內容」鈕整個收起 */
.is-hidden{display:none !important}

/* 內文連結（Markdown 的連結、〈文章名〉自動內鏈）。設計稿的示範內容沒有內文連結，
   這裡補一個克制的樣式：淺色底線，hover 才轉深。卡片與上下篇本身就是連結，不套。 */
.p a,.bullets a,.steps .tx a,.nlist .tx a,
.note a,.tip a,.warn a,.msg a,
.qa .abody a,.faq-item .a a,.tbl a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--bt-300);
  transition:color 120ms,text-decoration-color 120ms;
}
.p a:hover,.bullets a:hover,.steps .tx a:hover,.nlist .tx a:hover,
.note a:hover,.tip a:hover,.warn a:hover,.msg a:hover,
.qa .abody a:hover,.faq-item .a a:hover,.tbl a:hover{
  color:var(--bt-600);
  text-decoration-color:var(--bt-500);
}

/* 空狀態（分類底下沒有可顯示的文章時） */
.docs-empty{
  border:1px dashed var(--bt-border);border-radius:12px;padding:40px 24px;
  text-align:center;font:400 14px/1.9 var(--font-cjk);color:var(--text3);
}

/* 搜尋結果（P4 之前先只提供純前端標題比對） */
#bt-modal{flex-direction:column;align-items:stretch;padding:10px 12px 10px 20px}
#bt-modal .row{display:flex;align-items:center;gap:12px}
#bt-modal .row svg{flex:none}
#bt-results{display:none;max-height:52vh;overflow-y:auto;margin:6px -6px 4px;padding:6px 0 0;border-top:1px solid var(--bt-100)}
#bt-modal.has-results #bt-results{display:block}
#bt-results a{display:block;padding:9px 14px;border-radius:8px;color:var(--text2);transition:background 120ms}
#bt-results a:hover,#bt-results a.on{background:var(--bt-050);color:var(--ink)}
#bt-results .t{font:500 14px/1.6 var(--font-cjk)}
#bt-results .g{font:400 12px/1.6 var(--font-cjk);color:var(--text3)}
#bt-results .s{
  margin-top:2px;font:400 12.5px/1.7 var(--font-cjk);color:var(--text2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#bt-results mark{background:#F0E6C8;color:var(--ink-strong);border-radius:3px;padding:0 1px}
#bt-results .none{padding:14px;font:400 13px/1.6 var(--font-cjk);color:var(--text3);text-align:center}

/* 上一篇／下一篇：只有一側有對象時，維持格線不塌 */
#bt-pager .ph{border:none}