/* ==================================================================
   clean-demo · DEMO 控制台樣式
   ------------------------------------------------------------------
   刻意做成與 App 完全不同的深色風格，讓客戶一眼看出
   這一塊是示意用的操作面板，不屬於畫面設計。
   ================================================================== */

.demo-panel,
.demo-panel * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

.demo-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.demo-panel__fab {
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    background: #1f2430;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    cursor: pointer;
}

.demo-panel__fab:active { transform: translateY(1px); }

.demo-panel__body {
    width: min(19rem, calc(100vw - 24px));
    max-height: min(84vh, 44rem);
    overflow-y: auto;
    padding: 12px;
    border-radius: 12px;
    color: #e8eaf0;
    background: #1f2430;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .34);
}

.demo-panel__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px;
    font-weight: 700;
}

.demo-panel__head span {
    font-size: 11px;
    font-weight: 400;
    color: #99a1b3;
}

.demo-panel__sec { margin-bottom: 12px; }

.demo-panel__sec > b {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #99a1b3;
}

.demo-panel__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.demo-chip {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
    color: #e8eaf0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.demo-chip:hover { border-color: rgba(255, 255, 255, .38); }
.demo-chip.is-on { color: #12151c; background: #9ad7ff; border-color: #9ad7ff; }
.demo-chip.is-here { color: #12151c; background: #ffe08a; border-color: #ffe08a; }

.demo-panel__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.demo-panel__btn {
    flex: 1 1 0;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
    color: #e8eaf0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.demo-panel__btn:hover { border-color: rgba(255, 255, 255, .45); }

/* 手機寬度下不放「回流程導覽」：面板本來就窄，兩顆並排會擠壞。
   要回導覽頁改用「直接跳頁」或瀏覽器上一頁。 */
@media (max-width: 480px) {
    .demo-panel__btn--hub { display: none; }
}

/* ==================================================================
   API 回應對照面板（後端用）
   ------------------------------------------------------------------
   同樣刻意做成深色，跟 App 畫面明顯區隔。
   預設不顯示，由 DEMO 控制台或導覽頁開啟。
   ================================================================== */

.api-panel {
    margin: 20px 0 28px;
    border-radius: 12px;
    overflow: hidden;
    background: #1f2430;
    color: #e8eaf0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
    text-align: left;
}

.api-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.api-panel__head b {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.api-panel__head span {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: #99a1b3;
}

.api-panel__copy {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    font-size: 11px;
    color: #e8eaf0;
    background: transparent;
    cursor: pointer;
}

.api-panel__copy:hover { border-color: rgba(255, 255, 255, .5); }

/* 兩欄：程式碼 / 註解。用 grid 對齊而不是補空白，
   因為等寬字型下 CJK 的字寬不是 Latin 的整數倍，補空白一定會歪。 */
.api-panel__body {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 20px;
    align-content: start;
    margin: 0;
    padding: 12px;
    max-height: 21rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    line-height: 1.7;
    color: #cfe8ff;
    -webkit-text-size-adjust: 100%;
}

.jsonc__code,
.jsonc__note { white-space: pre; }
.jsonc__code--full { grid-column: 1 / -1; }
.jsonc__note { color: #8b93a6; }

.api-panel__foot {
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 10px;
    line-height: 1.6;
    color: #99a1b3;
}

.api-panel__note {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 11px;
    line-height: 1.6;
    color: #ffe08a;
}

.api-panel__label {
    padding: 8px 12px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .06em;
    color: #99a1b3;
}

.api-panel__foot code {
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .1);
}

/* ==================================================================
   「此狀態無對應切版」提示
   ------------------------------------------------------------------
   切版未涵蓋的狀態（例如訪客進到會員限定區塊）以這一塊 DEMO 提示代替。
   ================================================================== */

.demo-note {
    margin: 24px 0;
    padding: 16px;
    border-radius: 12px;
    background: #1f2430;
    color: #e8eaf0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
    font-size: 13px;
    line-height: 1.75;
    text-align: left;
}

.demo-note b {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.demo-note p {
    margin: 0 0 12px;
    color: #b9c0cf;
    font-size: 12px;
}

.demo-note code {
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .1);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.demo-note__btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    font-size: 12px;
    color: #e8eaf0;
    text-decoration: none;
}

.demo-note__btn:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }

/* ==================================================================
   clean-demo · 圖台（Leaflet）
   ------------------------------------------------------------------
   切版用 Google Maps iframe 當佔位圖，這裡換成 Leaflet + OSM 圖磚，
   位置與尺寸沿用切版 .map-container iframe 的絕對定位填滿寫法。
   切版的 .btnmaptop-container-3 / .btnmapbottom-container-3 是
   z-index:401，本來就蓋得過 Leaflet 的 400 圖層，不需另外調。
   ================================================================== */

.demo-map {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #eef0f4;
}

/* 來源標示淡化但要讀得到（OSM 要求清楚可辨）：拿掉白底，#757575 對白底符合 WCAG AA，加白色光暈壓得住底圖 */
.demo-map .leaflet-control-attribution {
    margin: 8px 0 0 8px;
    padding: 0;
    background: none;
    color: #757575;
    font-size: 10px;
    line-height: 1.4;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}

.demo-map .leaflet-control-attribution a { color: #757575; }

/* 詳細路線頁左上是切版的關閉鈕與路線名稱，標示往下讓 */
html[data-demo-page="routemap"] .demo-map .leaflet-top.leaflet-left { top: 56px; }

/* divIcon 的外框不要有底色與邊框，圖形全由內層 SVG 畫 */
.pin-div,
.veh-div,
.stop-div,
.me-div { background: none; border: 0; }

.pin-div svg,
.veh-div svg,
.stop-div svg,
.me-div svg { overflow: visible; }

.pin-time { font: 700 11px "Roboto Mono", ui-monospace, monospace; }

/* 選擇位置模式的中心圖釘：固定在地圖中央，不吃點擊 */
.demo-pin-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 401;
    margin: -44px 0 0 -16px;
    pointer-events: none;
}

/* ==================================================================
   clean-demo · 切版沒有畫、但流程上需要的輔助
   ================================================================== */

/* 進到全螢幕圖台時把捲軸收掉，避免 100vh 的版面被撐出捲動；
   但底下接了 API 對照面板時要放行，否則面板捲不到 */
html.demo-fullmap:not(.demo-has-api),
html.demo-fullmap:not(.demo-has-api) body { height: 100%; overflow: hidden; }

/* 手機框內開啟時，DEMO 控制台與 API 面板都不出現 */
html.in-frame .demo-panel { display: none; }

/* 到站提醒／搜尋條件兩個 Bottom Sheet 預設收著，由 demo.js 切 display */
.c-modal[data-demo-modal] { display: none; }
.c-modal-backdrop[data-demo-modal] { display: none; }

/* API 對照面板接在畫面下方時，與 App 內容隔開 */
[data-demo-apihost]:not(:empty) { padding: 0 16px 28px; background: #f4f5f8; }

/* 我的收藏輪播：Swiper 的 overflow:hidden 會切掉卡片陰影，
   用與切版 .ui-cardlist 相同的手法，slide 補 padding、容器補負 margin。 */
.demo-favswiper { margin: 0 -0.375rem; }
.demo-favswiper .swiper-slide { padding: 0 0.375rem; }

/* 切版的 .list-circle 只畫了紫色一種，六種 status 需要區分，
   以下為 DEMO 端補的色票（沿用切版既有的灰／紅），待美術確認。 */
.collect-container .list-circle.gray { border-color: #BDBDBD; color: #757575; }
.collect-container .list-circle.red { border-color: #E53F34; color: #E53F34; }


/* Bottom Sheet 打開時整個蓋住左緣，DEMO 控制台先收起來 */
html.demo-sheet-open .demo-panel { display: none; }

/* 全螢幕圖台的右上角被切版的圖層開關佔住，DEMO 控制台移到左緣中段 */
html.demo-fullmap .demo-panel {
    top: 42%;
    left: 12px;
    right: auto;
    align-items: flex-start;
}

/* 中央頭針：滑動地圖時抬起，放開落下（同 PM 原型） */
.demo-pin-center { transition: transform .16s ease-out; }
.demo-pin-center.lift { transform: translateY(-8px); }

/* 切版 .map-title 用 line-clamp 加 padding，第二行會從下緣 padding 露出來；改單行省略 */
.flex-container-2 .map-title {
    display: block;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 代替原生 ExtCall.AppToast 的提示，示意用 */
.demo-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 100000;
    max-width: calc(100vw - 48px);
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(31, 36, 48, .92);
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .18s, transform .18s;
}

.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==================================================================
   找地點模組樣式
   沒有美術切版，顏色與圓角沿用 pelin/css/layout.css 的新竹通 token
   ================================================================== */
.fp-wrapper { max-width: 480px; margin: 0 auto; background: #fff; min-height: 100vh; }
/* 地圖頁沒有可捲動的內容，整頁用 flex 讓地圖吃滿剩下的高度，底下才不會留白 */
.fp-wrapper--map { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
.fp-wrapper--map .fp-maparea { flex: 1; height: auto; min-height: 240px; }

/* 分類兩列：單選、可橫向滑動，滑軌不顯示 */
.fp-catbar { padding: 0 0 6px; }
.fp-row {
  display: flex; gap: 8px; padding: 6px 16px 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fp-row::-webkit-scrollbar { display: none; }
.fp-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; padding: 7px 14px;
  border-radius: 40px; font-size: 13px; line-height: 1.3; white-space: nowrap;
  background: #fff; border: 1px solid #E0E0E0; color: #323232; text-decoration: none;
}
.fp-chip.is-on { background: #6764F0; border-color: #6764F0; color: #fff; font-weight: 500; }
.fp-chip.is-soon { background: #F5F5F5; border: 1px dashed #E0E0E0; color: #BDBDBD; }
.fp-subchip {
  flex-shrink: 0; display: inline-flex; align-items: center; padding: 6px 13px;
  border-radius: 40px; font-size: 12px; white-space: nowrap;
  background: #fff; border: 1px dashed #E0E0E0; color: #757575; text-decoration: none;
}
.fp-subchip.is-on { background: #E3E7FF; border: 1px solid #6764F0; color: #4C44EA; font-weight: 500; }

/* 搜尋列與「篩選」入口 */
.fp-searchbar { display: flex; align-items: center; gap: 8px; margin: 10px 16px 2px; }
.fp-search {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  background: #F8FAFF; border: 1px solid #EEEEEE; border-radius: 40px; padding: 10px 16px;
}
.fp-search input {
  border: 0; background: transparent; outline: none; font: inherit; font-size: 13.5px;
  flex: 1; min-width: 0; color: #1F2A52;
}
.fp-search input::placeholder { color: #BDBDBD; }
.fp-filterbtn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px;
  border-radius: 40px; background: #E3E7FF; color: #4C44EA; font-size: 13px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}

/* 地圖 */
.fp-maparea { position: relative; height: 56vh; min-height: 320px; }
#fp-map { position: absolute; inset: 0; }
.fp-me {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: #4285F4; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(66, 133, 244, .25);
}
.pin-div, .me-div { background: none; border: 0; }
.pin-div svg { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25)); }

/* 右側直欄按鈕：定位固定在這裡（新竹通既有的 btn-position 樣式） */
.fp-fabs { position: absolute; right: 14px; bottom: 16px; z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.fp-fab {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2); display: flex; align-items: center; justify-content: center;
  color: #1F2A52; cursor: pointer; padding: 0;
}
.fp-fab:active { transform: translateY(1px); }
.fp-mapmeta {
  position: absolute; left: 14px; bottom: 18px; z-index: 500;
  background: rgba(255, 255, 255, .92); border-radius: 40px; padding: 5px 12px;
  font-size: 11.5px; color: #757575; box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.fp-modebtn {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 500;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 40px;
  background: #6764F0; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none;
  box-shadow: 0 4px 14px rgba(76, 68, 234, .35);
}

/* 點選大頭針後的說明卡 */
/* 清單模式的切換鈕：位置與地圖模式那顆對齊，資料再多也不用捲到底才按得到 */
.fp-modebtn--fixed { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); }

.fp-mapcard {
  position: absolute; left: 14px; right: 14px; bottom: 124px; z-index: 600; display: none;
  background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); padding: 14px 16px;
}
.fp-mapcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fp-mapcard__t { font-size: 14.5px; font-weight: 700; color: #1F2A52; line-height: 1.4; }
.fp-mapcard__x { color: #BDBDBD; text-decoration: none; font-size: 13px; flex-shrink: 0; }
.fp-mapcard__a { font-size: 11.5px; color: #323232; margin-top: 6px; line-height: 1.6; }
.fp-mapcard__d { font-size: 11.5px; color: #4C44EA; font-weight: 700; margin-top: 4px; }
.fp-mapcard__link { display: block; text-align: right; margin-top: 8px; font-size: 12.5px; color: #4C44EA; font-weight: 500; text-decoration: none; }

/* 清單 */
.fp-sortrow { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 6px; font-size: 12px; color: #757575; }
.fp-sortrow b { color: #1F2A52; font-weight: 500; }
.fp-list { padding: 2px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
/* 下方留白要讓得出浮動切換鈕的高度，不然最後一張卡會被壓到；空狀態沒有卡片就不必留 */
.fp-list:not(:empty) { padding-bottom: 86px; }
.fp-card { display: flex; gap: 10px; background: #fff; border: 1px solid #EEEEEE; border-radius: 16px; padding: 12px; text-decoration: none; }
.fp-card__ic { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.fp-card__body { flex: 1; min-width: 0; display: block; }
.fp-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.fp-card__n { font-size: 13.5px; font-weight: 500; color: #1F2A52; line-height: 1.4; }
.fp-card__d { font-size: 11px; color: #4C44EA; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.fp-card__a { display: block; font-size: 11.5px; color: #757575; margin-top: 3px; line-height: 1.5; }
.fp-card__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.fp-tag { display: inline-flex; align-items: center; font-size: 10.5px; padding: 2px 9px; border-radius: 40px; }

/* 分類 Bottom Sheet：橫列會被切掉，這裡攤開成可換行 */
/* 要壓過 Leaflet 的 .leaflet-top/.leaflet-bottom（z-index 1000），
   不然來源標示那條白底會浮在遮罩上面 */
.fp-sheet { position: fixed; inset: 0; z-index: 1200; display: none; }
.fp-sheet__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.fp-sheet__panel {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px;
  max-height: 86%; overflow: auto; background: #fff; border-radius: 20px 20px 0 0; padding: 10px 18px 20px;
}
.fp-sheet__handle { width: 44px; height: 4px; background: #E0E0E0; border-radius: 2px; margin: 0 auto 14px; }
.fp-sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fp-sheet__head h2 { font-size: 17px; color: #1F2A52; font-weight: 500; margin: 0; }
.fp-sheet__x { color: #757575; text-decoration: none; font-size: 16px; }
.fp-sheet-sec { font-size: 13px; font-weight: 700; color: #1F2A52; margin: 16px 0 10px; }
.fp-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-sublist { display: block; }
.fp-subrow { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #EEEEEE; text-decoration: none; }
.fp-subrow:last-child { border-bottom: 0; }
.fp-subrow__ic { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-subrow__n { flex: 1; font-size: 13.5px; color: #323232; }
.fp-subrow.is-on .fp-subrow__n { color: #1F2A52; font-weight: 700; }
.fp-subrow__c { font-size: 11.5px; color: #BDBDBD; }
.fp-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #E0E0E0; flex-shrink: 0; position: relative; }
.fp-subrow.is-on .fp-radio { border-color: #6764F0; }
.fp-subrow.is-on .fp-radio:after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #6764F0; }
.fp-sheet__foot { margin-top: 20px; }
.fp-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 20px;
  border: 0; border-radius: 40px; background: #6764F0; color: #fff; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
}

/* 搜尋頁 */
.fp-sg { display: flex; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid #EEEEEE; text-decoration: none; }
.fp-sg__ic { flex-shrink: 0; display: flex; }
.fp-sg__t { font-size: 13.5px; color: #323232; }
.fp-sg__t b { color: #1F2A52; }
.fp-sg--filter { background: #F8FAFF; border-radius: 10px; padding: 12px; border-bottom: 0; margin-bottom: 6px; }
.fp-sg--filter .fp-sg__t { color: #4C44EA; }
.fp-sg--filter .fp-sg__t b { color: #4C44EA; font-weight: 700; }
.fp-sg__none { padding: 24px 2px; font-size: 13px; color: #BDBDBD; text-align: center; }

/* 詳情頁 */
.fp-hero { height: 160px; display: flex; align-items: center; justify-content: center; position: relative; }
.fp-hero__ic { width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; }
.fp-hero__fallback { position: absolute; left: 14px; bottom: 12px; background: rgba(255, 255, 255, .9); border: 1px solid #EEEEEE; color: #757575; font-size: 10px; padding: 4px 10px; border-radius: 40px; }
.fp-hero--photo { background: linear-gradient(135deg, #AEBBE6, #7C90D6); align-items: flex-end; justify-content: flex-start; }
.fp-hero__wm { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); opacity: .3; }
.fp-hero__badge { position: relative; z-index: 1; margin: 0 14px 12px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 40px; }
.fp-detailbody { padding: 16px; }
.fp-detailbody h2 { font-size: 18px; font-weight: 700; color: #1F2A52; line-height: 1.4; margin: 0; }
.fp-detailtags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.fp-info { display: flex; padding: 11px 0; border-bottom: 1px solid #EEEEEE; align-items: flex-start; font-size: 13px; }
.fp-info:last-child { border-bottom: 0; }
.fp-info__ic { width: 20px; margin-right: 10px; flex-shrink: 0; margin-top: 1px; }
.fp-info__v { flex: 1; color: #323232; line-height: 1.6; }
.fp-seclabel { display: flex; align-items: center; gap: 6px; margin: 18px 0 2px; font-size: 11.5px; color: #3697B4; font-weight: 700; }
.fp-source { margin-top: 16px; background: #F8FAFF; border-radius: 16px; padding: 12px 14px; font-size: 11.5px; color: #757575; line-height: 1.7; }
.fp-source b { color: #1F2A52; }
.fp-reportrow { text-align: center; margin-top: 18px; }
.fp-reportrow a { font-size: 12.5px; color: #6764F0; text-decoration: none; }

/* 空狀態 */
.fp-empty { padding: 60px 28px 28px; text-align: center; }
.fp-empty__ic { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #FEF9E5; display: flex; align-items: center; justify-content: center; }
.fp-empty__t { color: #1F2A52; font-size: 17px; font-weight: 700; }
.fp-empty__d { color: #757575; font-size: 13px; margin-top: 10px; line-height: 1.7; }
.fp-empty__cta { margin-top: 24px; }

/* 頁首 */
.fp-topbar { display: flex; align-items: center; gap: 6px; padding: 10px 10px; border-bottom: 1px solid #EEEEEE; position: sticky; top: 0; background: #fff; z-index: 700; }
.fp-topbar h1 { flex: 1; font-size: 16px; font-weight: 500; color: #1F2A52; text-align: center; margin: 0; }
.fp-iconbtn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #1F2A52; text-decoration: none; flex-shrink: 0; }

/* ==================================================================
   DEMO 面板：標記樣式編輯
   ================================================================== */
.demo-mark__preview { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; font-size: 11.5px; color: #c7cede; }
.demo-mark__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.demo-mark__row > i { font-style: normal; font-size: 11px; color: #8b93a6; width: 56px; flex-shrink: 0; }
.demo-mark__row--col { align-items: flex-start; }
.demo-sel {
  flex: 1; min-width: 0; background: #1b1f29; color: #dfe6f5; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 11.5px;
}
.demo-sws, .demo-ics { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.demo-sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; padding: 0; }
.demo-sw.is-on { border-color: #ffe08a; box-shadow: 0 0 0 2px rgba(255, 224, 138, .35); }
.demo-sw--pick { background: none; padding: 0; }
.demo-ic__wrap { position: relative; display: inline-flex; }
.demo-ic {
  width: 30px; height: 30px; border-radius: 8px; background: #1b1f29; border: 1px solid rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.demo-ic.is-on { border-color: #9ad7ff; box-shadow: 0 0 0 2px rgba(154, 215, 255, .3); }
.demo-ic__x {
  position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%;
  background: #E53F34; color: #fff; border: 0; font-size: 10px; line-height: 1; cursor: pointer; padding: 0;
}
.demo-up { cursor: pointer; }
.demo-mark__msg { font-size: 11px; color: #ffe08a; min-height: 14px; }

/* 沒有引入 pelin 的 layout.css，所以這裡要自己補 box-sizing；
   少了它 width:100% 再加 padding 會撐出容器，Bottom Sheet 會比手機框寬 */
.fp-body *,
.fp-body *::before,
.fp-body *::after { box-sizing: border-box; }

/* 字體：找地點沒有切版，字體沿用 App 其他頁面的設定 */
body.fp-body {
  margin: 0; background: #F0F2F8;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, sans-serif;
  color: #323232; -webkit-text-size-adjust: 100%;
}

.fp-info__link { color: #4C44EA; text-decoration: none; word-break: break-all; }
.fp-info__link:hover { text-decoration: underline; }

/* 橫列可拖曳：桌機看的時候游標要看得出來，拖到一半不要選到文字 */
.fp-row { cursor: grab; scroll-behavior: smooth; }
.fp-row.is-grabbing { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.fp-row.is-grabbing .fp-chip,
.fp-row.is-grabbing .fp-subchip { pointer-events: none; }

/* 標記大小拉桿 */
.demo-range { flex: 1; min-width: 90px; accent-color: #9ad7ff; }
.demo-range__v { font-size: 11px; font-variant-numeric: tabular-nums; width: 38px; text-align: right; }
.demo-mark__preview { min-height: 66px; }
.markcard .demo-range { accent-color: #6764F0; }

/* 未點選的據點：小圓點。據點多的時候整張圖才不會被大頭針塞滿（PM 裁定） */
.fp-dot {
  display: block; border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3); cursor: pointer;
}