/* 桌機瀏覽版（Roy 2026-09-07 拍板）。
 *
 * 整個系統原本是手機單欄（各頁 max-width 640px），從桌機 Chrome 開
 * vpn.sunforestx.com 只會看到螢幕中間一條窄窄的手機畫面。這一檔只在
 * 寬螢幕（960px 以上）生效：手機與 LINE 內建瀏覽器載入它也不會有任何變化。
 *
 * Roy 的三條決定：①不做左側導覽（否決範例裡那條），靠頁首「上一頁」回首頁
 * 選功能；②字體放大 20%（「網頁版字體增大 20%」）；③按鈕不再整條橫跨。
 *
 * 放大用 zoom 而不是逐一改字級：全站字級幾乎都是 px 寫死（17px body、
 * 18px 卡片標題…），改 root font-size 動不到它們；zoom 讓字、間距、圖一起放大
 * 1.2 倍，看起來就是「整頁大 20%」。所以下面的寬度都除以 1.2：980px 在畫面上
 * 是 1176px。
 *
 * 每一頁 <head> 都要掛這一檔（tests/test_liff_desktop.py 守著）；
 * 逐頁的主從版與表格版另外寫在各頁 css 的 @media 區塊裡。
 */

@media (min-width: 960px) {
  body { zoom: 1.2; }

  /* 內容區加寬並置中。各頁的容器寫法不一（main#app／.home／.admin-wrap…），
     選擇器一次列齊，之後新頁只要用 <main> 就自動涵蓋。 */
  main,
  .home,
  .admin-wrap,
  .apply-wrap,
  .bank-wrap,
  .scale-wrap,
  .page-admincash main {
    max-width: 980px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* 頁首橫幅裡的標題與姓名跟內容區同寬對齊。 */
  .topbar { padding-left: 24px; padding-right: 24px; }

  /* ── 首頁：三組一次攤開、一列四格；分頁列由 home.js 收掉 ── */
  .home .menu { grid-template-columns: repeat(4, 1fr); }
  .home .menu .home-group {
    grid-column: 1 / -1;
    margin: 14px 0 -4px;
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
  }
  .home .menu .home-group:first-child { margin-top: 0; }

  /* ── 功能頁彈出視窗（Roy 2026-09-30，取代 09-07 的左右主從版）──
     七頁共用：VPN健保／銀行對帳／團體登記／行政金（desk-split）、修繕（repair-split）、
     交辦事務與我的交辦（tk-split）。頁面 JS 的 show() 照舊在寬螢幕開功能頁時替 main
     掛上那個 class 並保留清單；這裡把功能頁畫成置中的彈出視窗，清單維持原本寬度
     留在後面。原本的主從版會把清單擠成一半寬，而且整頁與右欄各有一個卷軸。
     鎖整頁捲動、關閉鈕、點灰底關閉由 deskmodal.js 處理。 */
  :root {
    /* 視窗寬度：zoom 1.2 下 vw 也放大，要除回來；左右各留 60px。 */
    --desk-modal-w: min(720px, calc(100vw / 1.2 - 120px));
    /* 頂欄留著不蓋（「← 上一頁」還能退一層），視窗從頂欄下方開始；中間那條放關閉鈕。 */
    --desk-modal-top: 124px;
  }
  /* 卷軸的位置永遠留著：視窗開關時整頁卷軸出現或消失，清單不會左右跳。 */
  html { scrollbar-gutter: stable; }
  html.desk-modal-open { overflow: hidden; }

  /* 灰底：疊在清單上、頂欄（z-index 5）之下。 */
  main.desk-split::before,
  main.repair-split::before,
  main.tk-split::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20, 28, 36, 0.45);
    z-index: 4;
  }
  /* 視窗本體。z-index 要低於各頁從功能頁裡再打開的面板（行政金憑證 9／10、
     修繕與社會局 40／41、異動紀錄 60），那些才疊得上來。
     置中用 left＋負 margin 而不用 transform：transform 會讓視窗裡 position: fixed 的
     子面板改以視窗為基準，位置會跑掉。 */
  main.desk-split > .view:not(#view-list),
  main.repair-split > .view:not(#view-list),
  main.tk-split > .view:not(#view-list) {
    position: fixed;
    z-index: 6;
    top: var(--desk-modal-top);
    left: 50%;
    width: var(--desk-modal-w);
    margin-left: calc(var(--desk-modal-w) / -2);
    box-sizing: border-box;
    /* body zoom 1.2 讓 vh 也放大 1.2 倍：100vh 畫出來是 120vh，先除回來（2026-09-15 行政金面板實證） */
    max-height: calc(100vh / 1.2 - var(--desk-modal-top) - 24px);
    overflow: auto;
    /* 視窗滾到底不要接著捲後面的頁面（2026-09-16 滾動鏈那一課） */
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px 24px;
    box-shadow: 0 12px 40px rgba(20, 28, 36, 0.28);
  }

  /* 關閉鈕：貼在視窗右上角外側，不蓋到視窗內容。底色、字色、框色三個一起寫，
     不讓 styles.css 的 button 預設值決定長相。 */
  html.desk-modal-open .desk-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 6;
    top: calc(var(--desk-modal-top) - 46px);
    left: calc(50% + var(--desk-modal-w) / 2 - 104px);
    width: 104px;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid #2b3440;
    border-radius: 19px;
    background: #fff;
    color: #2b3440;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
  }
  html.desk-modal-open .desk-modal-close:hover { background: #eef2f5; }
  /* 視窗裡打過字時點灰底不關，關閉鈕閃一下，提示要按它才會關。 */
  .desk-modal-close.nudge { animation: desk-modal-nudge .5s ease; }
  @keyframes desk-modal-nudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 60, 40, 0); }
    40% { box-shadow: 0 0 0 6px rgba(200, 60, 40, 0.55); }
  }
  @media (prefers-reduced-motion: reduce) {
    .desk-modal-close.nudge { animation: none; outline: 3px solid #c83c28; }
  }

  /* ── 按鈕不整條橫跨（手機上整條是為了好按，桌機有滑鼠） ── */
  .btn,
  .bigbtn {
    display: inline-block;
    width: auto;
    min-width: 200px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .btn + .btn,
  .bigbtn + .bigbtn { margin-left: 10px; }
  .actions { justify-content: flex-end; }
  .actions button { flex: 0 0 auto; min-width: 160px; }
}