@import url('/tokens.css');

/* unfold 專屬色（tokens.css 沒有錯誤色，這裡只定義一次給頁面內兩處錯誤提示共用，
   不是每處各自寫死 hex——tokens.css 開頭的規則本來就是「頁面專用色留在各自檔案」） */
:root {
  --color-danger:      #e74c3c;
  --color-danger-dark: #c0392b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 自訂 checkbox 外觀：比例／圓角／邊框參考 roam 專案的 .todo-check（17×17、5px 圓角、
   1.5px 邊框），但那邊的勾勾是靠一整套 SVG 圖示字典畫出來的，這裡改用純 CSS 畫勾勾／
   indeterminate 橫槓，不用額外載入 unfold 用不到的圖示系統，維持頁面夠輕。
   勾選色用 --color-primary（unfold 自己按鈕本來就吃這個色），不是 roam 專屬的 --color-tool */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 5px;
  border: 1.5px solid var(--color-border-hover);
  background: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background .15s, border-color .15s;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
/* 用「定位在 50%/50% 再用 translate 位移回置中」，不管框改多大都自動置中，
   不用像上一版那樣手動猜固定像素偏移（猜錯就會整個歪掉） */
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
}
html { font-smoothing: antialiased; -webkit-font-smoothing: antialiased; }
body {
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1.6;
  transition: background-color 0.2s, color 0.2s;
}

.unfold-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.unfold-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 2026-09-13：改成 <button>，點下去回落地頁（見 index.html 的 goBack()），
   這裡只是重置瀏覽器內建的按鈕外框，視覺上維持跟原本純文字 logo 一樣 */
.header-logo {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--color-text-primary);
}
.header-logo:hover {
  opacity: 0.7;
}
.header-title {
  font-size: 14px;
  color: var(--color-text-secondary);
}
/* 轉換完進到工作區才會有內容（見 script.js renderWorkspace()），
   沒有行程標題時整段（含分隔符號）自動不出現 */
.header-trip-title {
  color: var(--color-text-primary);
  font-weight: 500;
}
.header-trip-title:not(:empty)::before {
  content: '｜';
  margin: 0 4px;
  color: var(--color-border-hover);
  font-weight: 400;
}

/* 通用小型文字按鈕/連結：換行程、返回主站、欄位全選/全不選都共用同一顆樣式，
   不用每個地方各自宣告一份幾乎一樣的 CSS */
.text-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  padding: 0;
}
.text-btn:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}
.header-back-link {
  margin-left: auto;
}

/* 通用實心按鈕：落地頁「開始轉換」、錯誤頁「重新嘗試」、複製/下載都共用這裡，
   顏色（primary／accent）跟尺寸（大/小）各自疊加 modifier class，不用每顆按鈕
   重複宣告一次 border/border-radius/cursor/transition 這些幾乎一樣的規則 */
.btn {
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  transition: all 0.15s;
  background: var(--color-primary);
  color: #fff;
}
.btn:hover {
  background: var(--color-primary-hover);
}
.btn:active {
  opacity: 0.9;
}
.btn-lg {
  padding: 12px 32px;
  font-size: 16px;
}
.btn-sm {
  padding: 10px 16px;
  font-size: 14px;
}
.btn-accent {
  background: var(--color-accent-light);
  color: var(--color-accent);
}
.btn-accent:hover {
  background: var(--color-accent);
  color: #fff;
}

.unfold-main {
  flex: 1;
  padding: 40px 24px;
  max-width: 1040px; /* 工作區要放兩欄，比落地頁單卡片需要的寬度多一些 */
  margin: 0 auto;
  width: 100%;
}

.step { display: none; }
.step.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Landing Page ── */
/* 2026-09-13：padding 統一改成跟下面兩張 .promo-card 同一個值（24px），
   三張白卡的內距看起來才是同一組視覺系統，不是主卡特別鬆、小卡特別緊 */
.landing-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  /* 跟下面 .promo-row 的 gap（16px）對齊，主卡跟小卡之間的距離才會跟
     兩張小卡彼此之間的距離一樣 */
  margin: 0 auto 16px;
  max-width: 640px; /* .unfold-main 為了工作區加寬了，落地頁自己收窄避免看起來太空 */
}
.landing-emoji {
  font-size: 48px;
  margin-bottom: 20px;
}
.landing-title {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-display);
  margin-bottom: 12px;
  line-height: 1.3;
}
.landing-desc {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}
.landing-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.landing-input {
  flex: 1;
  min-width: 280px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color 0.15s;
}
.landing-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-bg);
}
.landing-error {
  color: var(--color-danger);
  font-size: 14px;
  margin-top: 4px;
  min-height: 4px;
}

/* 2026-09-13：搬進 .landing-card 最下方，字級縮小、置中，跟卡片裡其他說明文字
   的層級拉開（本來是獨立在卡片外的一塊，字級沒特別縮小）。
   同日再改：原本三行各自獨立，改成同一排用「・」分隔，字級小、不佔太多高度 */
.landing-note {
  margin-top: 24px;
  text-align: center;
}
.landing-note ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}
.landing-note li {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.landing-note li:not(:first-child):not(:last-child)::before {
  content: '・';
  margin: 0 6px;
}
/* 最後一句字數比較長，固定佔滿一整行、自己換到下一行，換行後前面
   本來就有視覺區隔，不用再加「・」 */
.landing-note li:last-child {
  flex-basis: 100%;
}

/* 最近轉換：標籤用共用的 .chip（tokens.css），這裡只排版容器本身。
   2026-09-13：搬進 .landing-card 裡、緊接在輸入框後面，這裡要蓋掉卡片本身
   的 text-align:center，不然標籤文字跟色塊列都會被置中，跟輸入框那排（本身
   靠 .landing-form 的 justify-content 自己置中，不是文字置中）長得不一致。
   同日再改：跟輸入框的間距縮小（原本靠 error 區的固定高度＋這裡的 margin-top
   疊出一大截空白）；標籤「最近」跟後面的 tag 併成同一排，不再上下分層 */
.recent-trips,
.demo-trips {
  text-align: left;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.recent-trips {
  margin: 2px 0 0;
}
/* 跟上面「最近」那排拉開一點距離，不然兩排黏在一起分不清是同一組 */
.demo-trips {
  margin: 12px 0 0;
}
.recent-trips-label,
.demo-trips-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.recent-trips-list,
.demo-trips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recent-trips-list .chip {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block; /* chip 預設 inline-flex 對長文字省略號不太聽話，這裡覆寫成 inline-block */
}
/* 「空白範本示範」要醒目，借用範本導引卡（.promo-card-template）同一組
   --color-template 藍色系，兩處視覺上是同一件事（都是導去示範範本） */
.chip-template {
  background: var(--color-template-light);
  color: var(--color-template);
  font-weight: 500;
}
.chip-template:hover {
  background: var(--color-template);
  color: #fff;
}

/* 引導提示卡：範本／roam 互推。原本兩張各自佔滿一整行、直排，
   2026-09-13 改兩欄並排，外層 .promo-row 負責置中＋兩欄網格，寬度／置中
   都搬到這裡，.promo-card 本身不再自帶 max-width/margin */
.promo-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 640px; margin: 0 auto 16px;
}
/* 跟 roam 落地頁的 .promo-card 是同一份設計起手（roam/style.css），色票換成
   unfold 自己在用的 --color-primary，--color-tool 是 roam 專屬的五色可切換
   主題變數，unfold 沒有。2026-09-13：底色改回白底（跟 .landing-card 一致），
   小灰字說明拿掉後只留大標，不再需要單獨的標題／副標兩層文字。
   padding 統一改成跟 .landing-card 同一個值（24px），三張白卡內距同一組 */
.promo-card {
  display: flex; align-items: center; gap: 10px;
  padding: 24px; border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
}
.promo-card-icon { flex-shrink: 0; font-size: 20px; }
.promo-card-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.promo-card-btn {
  flex-shrink: 0; font-size: 13px; font-weight: 500; padding: 9px 15px;
  border: none; cursor: pointer; border-radius: var(--radius-pill); background: var(--color-primary-light);
  color: var(--color-primary); white-space: nowrap; text-decoration: none;
}
/* 範本卡用 tokens.css 裡「通用模板」這個內容分類本來就有的專屬色
   （--color-template，aimigo 全站模板類內容都吃這組色），不是隨便挑一個
   特殊色湊數 */
.promo-card-template {
  background: var(--color-template-light);
}
.promo-card-template .promo-card-btn {
  background: var(--color-template);
  color: #fff;
}

/* ── Workspace Page（選日期/格式/欄位/浮水印 + 即時預覽合併在同一畫面）── */
/* 2026-09-13：原本這裡上面還有一列 .workspace-header（行程標題＋「換一個行程
   連結」），行程標題搬去 nav 顯示、換連結改成點 nav 的 unfold logo 之後拿掉了，
   三欄直接從版面最上面開始 */
/* 2026-09-14：左欄縮窄（拿掉 emoji 後不需要那麼寬），省下來的寬度
   都給中間控制面板，右邊預覽欄維持彈性寬度 */
.workspace-layout {
  display: grid;
  grid-template-columns: 180px 340px 1fr;
  gap: 20px;
  align-items: start;
}

/* 左：選要轉換的行程（完整懶人包／單一天），全高的一欄，用直向清單比方格卡片
   更適合塞進窄欄，天數再多也只是往下加一行，不會把版面撐爆 */
.workspace-days {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* day-options-wrap 只是拿來動態塞入按鈕的容器，不該自己佔版面：display:contents
   讓它在版面上「消失」，裡面的 .day-list-item 按鈕直接變成 .workspace-days 的成員 */
#day-options-wrap {
  display: contents;
}
.day-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}
.day-list-item:hover {
  background: var(--color-border);
}
.day-list-item.active {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
}
.day-list-item .item-text {
  min-width: 0;
}
.day-list-item .item-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.day-list-item .item-desc {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 中：格式／欄位／浮水印／動作 */
.workspace-settings {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.settings-row {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.settings-row:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.settings-row h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
/* 「顯示欄位」標題那排要多塞全選 checkbox／恢復預設按鈕，標題本身的下邊距交給
   外層這排處理，避免 h3 自己的 margin-bottom 疊加出雙倍間距 */
.settings-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.settings-row-header h3 {
  margin-bottom: 0;
}
/* 全選 checkbox 直接放標題前面：checkbox + h3 這個位置本身就有「全選」的慣用意思，
   不用額外文字說明 */
.settings-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.format-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 14px;
}
.format-option:hover {
  background: var(--color-border);
}
.format-option input[type="radio"] {
  cursor: pointer;
}
.format-option input[type="radio"]:checked + .format-name {
  font-weight: 600;
  color: var(--color-primary);
}
.format-option[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.field-checkbox input[type="checkbox"] {
  cursor: pointer;
}
/* checkbox disable 時（例如「欄位前顯示 ⮑」在標題關掉時），整排文字跟游標
   一起變灰／變禁用態，不是只有 checkbox 本身看得出來 */
.field-checkbox:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
.field-checkbox input:disabled {
  cursor: not-allowed;
}
/* 排版區塊裡有好幾個 .field-checkbox 疊在一起（景點空行、⮑ 層級標示），
   每個 .field-checkbox 本身是 flex 容器（外層等同 block），會自然往下疊，
   這裡只補列與列之間的間距 */
.settings-row .field-checkbox + .field-checkbox {
  margin-top: 10px;
}

/* 顯示欄位＋欄位符號合併後的每一列：checkbox + label + emoji 輸入框，
   三個是各自獨立的元素（不是全部包在同一個 <label> 裡），checkbox 用 id/for
   跟 label 對應，避免點 emoji 輸入框時不小心連動觸發 checkbox */
.field-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-row-label {
  flex: 1;
  font-size: 14px;
  cursor: pointer;
  color: var(--color-text-secondary);
}
/* 顯示類型：改用向左流動排列（一排放得下幾個就放幾個），不要每個類型
   各自佔一整列——類型的checkbox+文字通常很短，整列鋪滿是浪費空間
   （Aimi 2026-09-14 要求）。蓋掉 .field-rows 預設的直向堆疊 */
#categoryFieldsWrap {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 20px;
}
#categoryFieldsWrap .field-row {
  gap: 6px;
}
#categoryFieldsWrap .field-row-label {
  flex: initial;
}
/* 用複合選擇器（兩個 class）確保權重贏過 .watermark-input 的 width:100%，
   不然兩條規則權重相同時，看誰在檔案裡排後面就贏，會被撐滿整行擠壓到標籤 */
.field-row .emoji-input {
  width: 64px;
  text-align: center;
  flex-shrink: 0;
}
/* 「標題」列的「類型符號」開關，取代原本的自訂符號輸入框，
   佔的寬度不用像 emoji-input 那麼固定，跟著文字長度走即可 */
.field-symbol-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.field-symbol-toggle input {
  cursor: pointer;
}
/* 聊天版底下，時間/地點的符號跟「類型符號」開關都不會生效（聊天版的排版
   規則是固定的，見 script.js chatCardLines()），disable 起來避免使用者
   以為改了這裡聊天版輸出會跟著變 */
.emoji-input:disabled,
.field-symbol-toggle:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}
/* 2026-09-14：欄位checkbox沒勾選時，這一列後面（文字/符號欄/類型符號開關）
   都淡化，比單純把輸出濾掉更清楚「這個欄位現在不會出現」。用 :has() 直接
   讀 checkbox 狀態，不用另外寫 JS 切 class 維護一份重複的狀態 */
.field-row:has(.field-check:not(:checked)) .field-row-label,
.field-row:has(.field-check:not(:checked)) .emoji-input,
.field-row:has(.field-check:not(:checked)) .field-symbol-toggle {
  opacity: 0.4;
}
/* 剛用上/下移按鈕移動過的那一列閃一下醒目色再淡出，讓使用者看得出剛剛
   按的是哪一顆（Aimi 2026-09-14 要求），class 由 script.js flashFieldRow() 控制 */
@keyframes fieldRowFlash {
  0% { background: var(--color-accent-light); }
  100% { background: transparent; }
}
.field-row-flash {
  animation: fieldRowFlash 1s ease-out;
  border-radius: var(--radius-sm);
}
/* 上/下移排序按鈕：改成左右並排（原本上下疊放，觸控裝置上兩顆貼太近
   容易按錯），另外包一層 .field-move（不寫死在 .field-row 上） */
.field-move {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.field-move-btn {
  width: 26px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--color-primary-light);
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-move-btn:hover:not(:disabled) {
  background: var(--color-border);
  color: var(--color-text-primary);
}
.field-move-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.watermark-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
}
.watermark-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
}
.watermark-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* 2026-09-13：從中間設定欄搬到右邊預覽欄的標題排，按鈕本身縮小上下 padding
   （10px→6px），盡量不要因為擠進標題那排而增加整體高度 */
.editor-actions {
  display: flex;
  gap: 8px;
}
.editor-actions .btn-sm {
  padding: 6px 14px;
}

/* 右：即時預覽。跟左邊選單、中間設定並排成第三欄，不用往下捲就看得到（見下面
   桌機版 sticky+max-height 規則），欄位本身用 flex 讓標題固定、內文區塊自己捲動 */
.workspace-preview {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.workspace-preview h3 {
  font-size: 16px;
  font-weight: 600;
}
.preview-content {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 16px;
  flex: 1;
  min-height: 200px;
  overflow-y: auto;
}

/* ── Loading ── */
.loading-card {
  text-align: center;
  padding: 60px 20px;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-card p {
  color: var(--color-text-secondary);
}

/* ── Error ── */
.error-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 60px 40px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.error-emoji {
  font-size: 48px;
  margin-bottom: 20px;
}
.error-card h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
}
.error-card p {
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}
/* ── Toast ── */
.unfold-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
}
.unfold-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.unfold-toast.error {
  background: var(--color-danger-dark);
}

/* ── 桌機版：三欄各自 sticky + 限制高度，畫面一次放下選單/設定/預覽，
   不用捲動頁面就看得到預覽（Aimi 2026-08-30 要求）。手機版維持自然堆疊＋整頁捲動，
   之後要優化手機版再回來調 ── */
@media (min-width: 769px) {
  .workspace-days,
  .workspace-settings,
  .workspace-preview {
    /* 2026-09-13：拿掉 .workspace-header 那一列後空間變多，扣除值從 180px
       跟著調小，三欄可以再拉高一些 */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    position: sticky;
    top: 20px;
  }
}

/* ── Responsive（手機版先求堪用，細節之後再處理）── */
@media (max-width: 768px) {
  .unfold-main {
    padding: 24px 16px;
  }
  .landing-card {
    padding: 24px;
  }
  .workspace-layout {
    grid-template-columns: 1fr;
  }
  .landing-form {
    flex-direction: column;
  }
  .landing-input {
    min-width: unset;
  }
}