/* 全域環境架構系統 */

/*#region - §1 全域重置 - */
/* ─────────────────────────────────────────────
    目的：移除瀏覽器預設干擾，讓尺寸計算可預期
   ───────────────────────────────────────────── */
:root {
  /* 基礎畫面比例，提供 scene、背景區塊與 PC frame 尺寸計算使用 */
  --base-ratio: 390/659;
  /* 控制 frame 外延伸；
     目前為了後續 .app 內運作正常使用 clip 關閉延伸，若需開啟可改成 visible */
  --frame-overflow: clip;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-anchor: none;
  /* 避免 scroll anchoring 造成跳動 */
  -webkit-font-smoothing: antialiased;
}
/*#endregion */

/*#region - §2 視窗層 - */
/* ─────────────────────────────────────────────
    對應瀏覽器 viewport 的最外層顯示區
    目的：尺寸至少等於 viewport(視窗)，所有 UI 在此之內
   ───────────────────────────────────────────── */

.scene {
  width: 100%;
  min-height: max(100svh, calc(100vw / (var(--base-ratio))));
  height: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}
/*#endregion */

/*#region - §3 Container Query 邊界 - */
/* ─────────────────────────────────────────────
    UI 最外層根容器，同時作為 container query 參考邊界
    目的：
      1. 填滿 scene，建立 absolute 參考座標 
      2. 讓子元素使用 cqw / cqh / @container
   ───────────────────────────────────────────── */

.content-frame {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  container-type: inline-size;
  align-items: center;
  min-height: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: var(--frame-overflow);
}
/*#endregion */

/*#region - §4 背景層 - */
/* ─────────────────────────────────────────────
    主要顯示已被限制寬度後的固定背景
    目的：不參與 layout，不攔截事件，固定在容器內
   ───────────────────────────────────────────── */

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  /* 設定層級順序，確保此層為最底層 */
  background: no-repeat center top / cover;
  /* 設定底層背景，參數依序為 圖片路徑 重複方式 貼齊位置 /圖片尺寸 */
}
/*#endregion */

/*#region - §5 三段式背景容器 - */
/* ─────────────────────────────────────────────    
    目的：
      1. 讓三段式背景隨內容滾動，但不佔 layout flow
      2. 高度跟著 content-frame 撐高
   ───────────────────────────────────────────── */

.bg-scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100cqh;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  display: flex;
  flex-direction: column;
}
/*#endregion */

/*#region - §6 背景拼接系統 - */
/* ─────────────────────────────────────────────    
    三段式背景（上半圖 / 延伸圖 / 下半圖）
    目的：適應不同內容高度
   ───────────────────────────────────────────── */

/* 共用設定 */
.bg-top,
.bg-fill,
.bg-bottom {
  width: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  margin-top: -1px;
  /* 消除拼接縫隙 */
}

/* 上半圖 & 下半圖：固定比例 */
.bg-top,
.bg-bottom {
  aspect-ratio: var(--base-ratio);
}

/* 延伸區：縱向 repeat，flex 填滿剩餘空間 */
.bg-fill {
  background-repeat: repeat-y;
  flex: 1;
}
/*#endregion */

/*#region - §7 PC 模式 - */
/* ─────────────────────────────────────────────    
    目的：桌機時固定 viewport，居中顯示 UI，內容內部 scroll
   ───────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .scene {
    height: 100vh;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .bg-layer,
  .content-frame {
    width: auto;
    aspect-ratio: var(--base-ratio);
    min-height: 100vh;
    overflow: var(--frame-overflow);
  }
  .content-frame {
    /* 外圍添加陰影，以加強和底層區別 */
    box-shadow: 0 0 7.69cqw rgba(0, 0, 0, 0.5);
  }
}
/*#endregion */

/*#region - §8 DOM 架構備註（供開發者參考） - 
─────────────────────────────────────────────
    body
        └ .scene                    §2 視窗層            
          └ .content-frame            §3 container query 邊界
                ├ .bg-layer                 §4 固定滿版背景（absolute，不隨 scroll 移動）
                ├ .bg-scroll                §5 三段式背景容器（absolute，隨 content-frame 撐高）
                │   ├ .bg-top                   §6 上半圖
                │   ├ .bg-fill                  §6 延伸區
                │   └ .bg-bottom                §6 下半圖
                └ UI Content            z-index 高於 bg-scroll
   ───────────────────────────────────────────── 
#endregion */