/* ==========================================================================
   Base Styles & Variables (v2: Full-Screen Presentation Style)
   ========================================================================== */
:root {
    --primary-color: #d11e1e;
    /* 品牌紅 */
    --dark-bg: #1a1a1a;
    --text-primary: #111111;
    --text-light: #ffffff;
    --text-muted: #666666;

    --font-sans: 'Noto Sans TC', sans-serif;
    --font-serif: 'Noto Serif TC', serif;

    --transition-speed: 0.8s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 強制全局禁止選取與拖曳 (已關閉以供測試)
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    -webkit-touch-callout: none !important; */
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    line-height: 1.8;
    color: var(--text-primary);
    background-color: #f7f7f7;
    overflow-x: hidden;
    /* 防君子：禁止反白、選取 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 防君子：禁止圖片拖曳與出現下載選單 */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.4;
    font-weight: 500;
}

/* 實用字體類別 */
.serif {
    font-family: var(--font-serif);
}

.font-bold {
    font-weight: 700;
}

.red-text {
    color: var(--primary-color) !important;
}

.white-text {
    color: var(--text-light) !important;
}

.black-text {
    color: var(--text-primary) !important;
}

.en-text {
    font-family: 'Arial', sans-serif;
    letter-spacing: 1px;
}

/* 間距類別 */
.mt-2 {
    margin-top: 0.74vw;
    /* 8px */
}

.mt-3 {
    margin-top: 1.48vw;
    /* 16px */
}

.mt-4 {
    margin-top: 2.22vw;
    /* 24px */
}

.mt-5 {
    margin-top: 2.96vw;
    /* 32px */
}

.mt-6 {
    margin-top: 4.44vw;
    /* 48px */
}

.mb-higher {
    margin-bottom: 2.96vw;
    /* 32px */
}

/* 讓底部文字再高一點 */
.pr-4 {
    padding-right: 2.22vw;
    /* 24px */
}

.text-indent {
    padding-left: 2.96vw;
    /* 32px */
}

/* ==========================================================================
   Fullpage Container & Slide Basics
   ========================================================================== */
#fullpage-container {
    width: 100%;
}

/* ==========================================================================
   終極物理防護盾 (Physical Protection Layer)
   ========================================================================== */
.protection-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: transparent;
    cursor: default;
    /* 吸收所有滑鼠點擊，包含右鍵與雙擊反白 */
}

.slide {
    position: relative;
    width: 100vw;
    aspect-ratio: 1080 / 1920;
    /* Force height to match exactly to a 1080x1920 portrait scale, expanding endlessly downward on a wide screen */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 針對 P8 開始的 Story 區域，恢復成標準的風景比例 (或根據寬度 RWD 適配)，解決圖片被延伸過長導致手肘以下也露出的問題 */
.slide-story {
    aspect-ratio: 1080 / 1920;
    /* Landscape equivalent for desktop views */
    min-height: 100vh;
    /* Fallback */
}

/* 確保背景能完美撐滿，但內容限制在手機/平版適當寬度 */
.bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Page 8 雙層背景專用設定 (解決邊緣延伸問題) */
.p8-dual-bg {
    background-image: url('../assets/images/005.jpg'), url('../assets/images/005_bg.jpg') !important;
    background-size: 80vw auto, cover !important;
    background-position: right top, center center !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* 針對特定背景裁切需求增加修飾詞 (Fixing user reported cropping) */
.bg-left-center {
    background-position: left center !important;
}

.bg-center-top {
    background-position: center top !important;
}

.bg-left-top {
    background-position: left top !important;
}

/* 當背景本身比較亮時，需要確保對比度, 或使用 bg-light 特例 */
.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* 移除原本的白色 overlay 避免改變底圖真實色彩 */
    z-index: 0;
    pointer-events: none;
}

/* ==========================================================================
   字串翻轉與絕對定位宣告
   針對如 Kui Development、TEAM 等字串，透過數學旋轉確保首尾對齊無誤差
   ========================================================================== */
.rotate-90 {
    display: inline-block;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    /* 確保所有英文字母 (包含大寫) 強制順時針轉 90 度，且不會破壞 Flex Layout 結構 */
}

/* ==========================================================================
   核心排版區塊 (Absolute Positioning)
   針對所有內容區塊，我們採用相對於螢幕中心的絕對定位策略
   ========================================================================== */
.content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 10;
}

/* ----- Page 1 定位 ----- */
.top-logo-area {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 10;
}

.top-logo-area .reveal-el {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.main-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 2.78vw;
    /* Reduced from 3.7vw */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.04vw;
    /* Reduced from 1.38vw */
    margin: 0;
    color: #000;
}

.top-logo-area .en-text-column {
    position: absolute;
    left: 0.2vw;
    /* Shifted significantly right to close the gap with the Chinese text */
    top: 0.1vw;
    width: 14.08vw;
    /* Real optical alignment dimension */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: rotate(90deg);
    transform-origin: left top;
    font-size: 1.2vw;
    /* Maximized visual font body to match PDF heavy weighting */
    font-weight: 500;
    margin: 0;
    padding: 0;
}

.center-logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 23.14vw;
    /* 250px / 1080px */
    z-index: 10;
}

.logo-clipper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
}

.logo-clipper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top;
    display: block;
    transform-origin: top center;
    transform: scale(1.25) translateY(2%);
}

.bottom-title-area {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 10;
}

.sub-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    writing-mode: horizontal-tb;
    font-size: 2.0vw;
    letter-spacing: 0;
    color: var(--text-light);
    margin: 0;
}

.sub-title span:not(.line-space) {
    display: block;
    line-height: 1.1;
    /* 取消個別字元的 vertical-rl 直書模式，改為純橫排換行，確保絕對置中無誤差 */
}

.sub-title .line-space {
    width: 0.18vw;
    /* 2px */
    height: 3.24vw;
    /* 35px */
    background-color: #ffffff;
    opacity: 1;
    margin: 1.38vw auto;
    /* 15px */
}

/* ----- 直書相關共用組件 ----- */
.vertical-title {
    writing-mode: vertical-rl;
    font-size: 3.88vw;
    letter-spacing: 3vw;
    /* 👉 (電腦版) 控制 T E A M 四個字母的間距，數字變大字距變大 */
    font-family: var(--font-sans);
    /* 保持無襯線體 */
    font-weight: 500;
    /* 電腦版改回標準預設粗細 (不要那麼粗) */
}

.vertical-title-md {
    writing-mode: vertical-rl;
    font-size: 2.78vw;
    letter-spacing: 1.04vw;
    font-family: var(--font-serif);
}

/* 👉 控制電腦版第 8 頁 STORIES 的字體與粗細 (與 TEAM 同步) */
#page-8 .vertical-title-md.rotate-90 {
    font-family: var(--font-sans);
    /* 👉 同步 TEAM 的無襯線黑體 */
    font-weight: 500;
    /* 👉 同步 TEAM 的適中粗細 */
    /* 👉 如果想連大小跟字距都跟 TEAM 一模一樣大，可以解開下方的註解： */
    /* font-size: 3.88vw; */
    /* letter-spacing: 3vw; */
}

.vertical-title-sm {
    writing-mode: vertical-rl;
    font-size: 2.0vw;
    letter-spacing: 0.69vw;
    font-family: var(--font-sans);
}

/* T E A M 頁定位 */
.left-top {
    position: absolute;
    top: 10%;
    /* Moved further down */
    left: 18%;
    /* Moved further right */
}

.label {
    position: absolute;
    color: var(--text-light);
    font-size: 1.35vw;
    /* Scaled up heavily for emphasis */
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1vw;
}

.pos-1 {
    top: 32%;
    /* Final micro-adjustment dropping into the left center */
    left: 32%;
}

.pos-2 {
    top: 39%;
    /* Lifted slightly to hit the right center bounding box */
    right: 27%;
}

.pos-3 {
    top: 48%;
    /* Moved up */
    right: 20%;
}

/* ----- 通用位置組件 ----- */
/* 上方靠右：紅線+英文+中文直書 (Page 3,4,5) */
.top-right-group {
    position: absolute;
    top: 0;
    right: 15%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.38vw;
    /* 15px */
    color: var(--text-light);
    height: 100%;
}

.cn-line-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Absolutely centers the text horizontally under the line */
    height: 100%;
}

.cn-title-offset {
    margin-top: 0;
    /* Overridden by flex-column flow, removing old hack */
}

.top-drop-line {
    width: 0.18vw;
    height: 25.9vw;
    /* Drops about 25% of the 1080x1920 screen down */
    background-color: var(--primary-color);
    margin-bottom: 2.22vw;
}

.top-left-group {
    position: absolute;
    top: 10%;
    left: 15%;
    display: flex;
    align-items: flex-start;
    gap: 1.38vw;
    /* 15px */
    height: 100%;
}

.top-left-group.has-red-line {
    gap: 2.77vw;
    /* 30px */
}

.red-line {
    width: 0.18vw;
    /* 2px */
    background-color: var(--primary-color);
}

.red-line.thin {
    height: 10vh;
}

.red-line.med-line {
    height: 40vh;
}

.red-line.long-line {
    height: 70vh;
}

.en-title-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: right;
    margin-top: 17vw;
    /* Push english text down using margin so Intersection Observer triggers accurately */
    padding-bottom: 3px;
    height: 21vw;
    /* Adjusted height to reflect removed padding */
    gap: 0.5vw;
}

.en-title-block p,
.en-title-block span {
    display: block;
    font-size: 1.7vw;
    /* Scaled up to match PDF weight */
    line-height: 1.6;
    letter-spacing: 0.45vw;
    margin: 0;
}

.text-right {
    text-align: right;
}

.center-image-block {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 29.62vw;
    /* 320px / 1080px */
}

.circle-blend-img {
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

/* Page 6 Logo Overlay */
.p6-center-logo {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160vw;
    margin-left: -59vw;
    /* Massive white logo */
    opacity: 0.95;
    z-index: 5;
}

/* Page 7 Larger Circle & Logo Overlay */
.p7-circle-block {
    position: absolute;
    bottom: 30%;
    /* Dropped lower */
    right: -4%;
    /* Pulled to the right to clip the edge */
    width: 75vw;
    /* Significantly enlarged */
    z-index: 5;
}

.p7-circle-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    /* White logo overlaid on the circle */
}

/* 上半部置中文字 (Page 7, 8-12) */
.top-text {
    position: absolute;
    top: 12%;
    left: 50%;
    width: 85%;
    margin-left: -42.5%;
    font-size: 1.5vw;
    line-height: 2.0;
}

.top-center-text {
    position: absolute;
    top: 7%;
    left: 32%;
    width: 45%;
    font-size: 1.5vw;
    /* Substantially increased */
    line-height: 2.2;
    /* Substantially opened */
}

/* 底部置中文字區 */
.bottom-text {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    margin-left: 0;
    font-size: 1.6vw;
    /* Massive upscale to match the PDF text block */
    line-height: 2.2;
    /* Substantially opened line-height */
    text-shadow: 0px 0.18vw 0.46vw rgba(0, 0, 0, 0.3);
}

.bottom-text.white-text {
    text-shadow: 0px 0.18vw 0.92vw rgba(0, 0, 0, 0.8);
    /* 0px 2px 10px */
}

.bottom-text.black-text {
    text-shadow: none;
    color: #333;
}

.center-align {
    text-align: center;
}

.full-width {
    width: 90%;
}

.text-xl {
    font-size: 1.5rem;
}

.text-lg {
    font-size: 1.2rem;
}

.text-md {
    font-size: 1.05rem;
}

.bottom-company {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    transform: none;
    text-align: center;
}

/* ------------------------------
   電腦版 每一頁最底下的 Kui Development 大小遙控器
   ------------------------------ */
.company-tag {
    font-size: 1.5vw;
    /* 👉 調整電腦版最底下英文落款的大小 */
    letter-spacing: 0.14vw;
    /* 👉 調整字母間距 */
    font-family: 'Arial', sans-serif;
    text-shadow: none !important;
    margin-top: 5vw;
    /* 👉 調整落款與上方文字的距離 */
}

/* ==========================================================================
   動畫效果 (Scroll Reveal)
   ========================================================================== */
.reveal-el {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-el.active {
    opacity: 1;
    transform: translateY(0);
}

/* 特殊動畫：線條由上往下生長 (取代預設漸隱) */
.reveal-el.grow-down {
    opacity: 1 !important;
    transform: translateY(0) !important;
    /* Neutralize the default translation */
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    /* Hidden top sliver */
    transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.reveal-el.grow-down.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    /* Revealed full box */
}

/* 針對直式的不同入場方向 (由左向右滑入等) */
.vertical-title.reveal-el,
.vertical-title-md.reveal-el,
.vertical-title-sm.reveal-el {
    transform: translateY(-30px);
    /* 直書文字習慣從上往下或從旁邊 */
}

.vertical-title.reveal-el.active,
.vertical-title-md.reveal-el.active,
.vertical-title-sm.reveal-el.active {
    transform: translateY(0);
}

/* 延遲時間設定 */
.delay-1 {
    transition-delay: 0.15s;
}

.delay-2 {
    transition-delay: 0.3s;
}

.delay-3 {
    transition-delay: 0.45s;
}

.delay-4 {
    transition-delay: 0.6s;
}

/* Scroll 提示動態 */
.scroll-prompt {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary-color);
    font-size: 1.18vw;
    /* 12.8px */
    letter-spacing: 0.27vw;
    /* 3px */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
}

.scroll-bounce {
    animation: bounce 2s infinite;
}

.arrow-down {
    display: inline-block;
    width: 0.09vw;
    /* 1px */
    height: 3.7vw;
    /* 40px */
    background-color: var(--primary-color);
    margin-top: 0.74vw;
    /* 8px */
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-15px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* ==========================================================================
   側邊小圓點導覽
   ========================================================================== */
.side-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.side-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.side-nav a {
    display: block;
    width: 1.11vw;
    /* 12px */
    height: 1.11vw;
    /* 12px */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s ease;
}

.side-nav a.active {
    background-color: var(--primary-color);
    transform: scale(1.3);
}

.side-nav a span {
    position: absolute;
    right: 1.85vw;
    /* 20px */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.18vw 0.74vw;
    /* 2px 8px */
    border-radius: 0.37vw;
    /* 4px */
    font-size: 1.03vw;
    /* 11.2px */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.side-nav a:hover span {
    opacity: 1;
}

/* ==========================================================================
   手機版專用版面微調 (Mobile RWD Overrides)
   當螢幕寬度小於 768 像素 (也就是絕大多數手機直拿的狀態) 時觸發
   ========================================================================== */
@media (max-width: 1024px) {

    /* ------------------------------
       全站手機版容器高度強制滿平
       ------------------------------ */
    .slide,
    .slide-story {
        min-height: 100vh !important;
        /* 👉 強制所有幻燈片至少塞滿整個手機螢幕的高度，徹底消滅底下露出的裁切空白 */
    }

    /* 修正故事頁面文字容器，維持原位 32% 但放寬右側空間防止斷行 */
    .top-center-text {
        left: 32% !important;
        width: 65% !important;
        top: 10% !important;
    }

    /* ------------------------------
       Page 1 (首頁主視覺) 手機版放大
       ------------------------------ */

    /* 1. 中文主標：「馗豐開發」 */
    .main-title {
        font-size: 5.2vw;
        /* 將字體稍微縮小 */
        letter-spacing: 2.0vw;
        /* 字距等比例縮小 */
    }

    /* 1.5 控制這兩組中英文字的整體位置 */
    .top-logo-area {
        left: 51.5%;
        /* 原本是 50% (正中央)，數字越大會越往右移，數字越小越往左移 */
    }

    /* 2. 左側英文標籤旋轉體：「Kui Development」 */
    .top-logo-area .en-text-column {
        font-size: 2.5vw !important;
        /* 放大英文字體 (越大字越粗) */
        width: auto !important;
        /* 取消固定寬度限制，讓字體可以自由長大 */
        justify-content: flex-start !important;
        /* 從強制分散對齊改為靠左對齊 */
        gap: 0.5vw !important;
        /* 使用 gap 控制字母間距，取代原本的 space-between 擠壓效應 */
        left: -0.8vw;
        /* 微調距離 */
        top: 0.4vw;
        /* (這個不要動！這就是 K 的釘子) */
        white-space: nowrap !important;
        /* 強制不換行，避免旋轉前被螢幕寬度截斷擠壓 */
        flex-wrap: nowrap !important;
    }

    /* 4. 底下標語：「友善都更」的位置 (控制上下高低) */
    .bottom-title-area {
        bottom: 5% !important;
        /* 👉 統一全站頁尾距離底部 5% */
        /* 可以把數字變小讓它更靠近螢幕底部 (原本電腦版是 15%) */
    }

    /* 5. 底下標語：「友善都更」的大小 */
    .sub-title {
        font-size: 4vw;
        /* 放大這四個大字 */
    }

    /* 5. 標語中間的四個白色紅線 (縫隙) */
    .sub-title .line-space {
        width: 1.5px;
        /* 手機上太細會看不見，固定給 1.5 像素寬 */
        height: 6vw;
        /* 線條拉長 */
        margin: 3vw auto;
        /* 加大紅線與上下文字的間距 */
    }

    /* ------------------------------
       Page 2 (TEAM 總覽) 手機版微調
       ------------------------------ */

    /* 1. 左上角暗紅色大字：「TEAM」 */
    #page-2 .vertical-title.rotate-90 {
        font-family: var(--font-sans) !important;
        /* 👉 改為無襯線黑體 */
        font-weight: 900 !important;
        /* 👉 讓字體極度粗黑 */
        font-size: 5vw !important;
        /* 👉 放大縮小這個 TEAM 字體 */
        letter-spacing: 2vw !important;
        /* 👉 控制 T E A M 四個字母的間距 */
        top: 8% !important;
        /* 👉 控制它距離天花板的高度 (數字變大會往下掉) */
        left: 12% !important;
        /* 👉 控制它距離螢幕邊緣的左右位置 */
    }

    /* 2. 三個英文附註標籤的大小控制區 */
    #page-2 .label.pos-1 {
        font-size: 2vw !important;
        /* 👉 第一組 (Professional Construction Team) 放大字體 */
        top: 33% !important;
        /* 👉 第一組的上下位置 (原電腦版 32%) */
        left: 30% !important;
        /* 👉 第一組的左右位置 (原電腦版 32%，數字變小往左移) */
    }

    #page-2 .label.pos-2 {
        font-size: 2vw !important;
        /* 👉 第二組 (Yun San Corp.) 放大字體 */
        top: 39% !important;
        /* 👉 第二組的上下位置 (原電腦版 39%) */
        right: 24% !important;
        /* 👉 第二組的左右位置 (原電腦版 27%，數字變小往右靠) */
    }

    #page-2 .label.pos-3 {
        font-size: 2vw !important;
        /* 👉 第三組 (Aurora International Group) 放大字體 */
        top: 48% !important;
        /* 👉 第三組的上下位置 (原電腦版 48%) */
        right: 15% !important;
        /* 👉 第三組的左右位置 (原電腦版 20%，數字變小往右靠) */
    }

    /* 3. 全站通用：底部中文段落與英文標籤的大小控制區 (以此統一所有頁面) */
    .bottom-text {
        left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        text-align: center !important;
        bottom: 5% !important;
        /* 👉 統一全站頁尾距離底部 5% */
    }

    .bottom-text p {
        font-size: 3.2vw !important;
        /* 👉 控制「所有頁面」底部中文字體的大小 */
        line-height: 1.8 !important;
        /* 👉 控制上下行的間距 (數字變大行距越寬) */
    }

    /* 針對沒有 bottom-text 的頁面 (P7-P12)，修正底端公司的容器位置 */
    .bottom-company {
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        text-align: center !important;
        bottom: 5% !important;
    }

    /* (移除冗餘的 .bottom-text專用設定，改由下方的 .company-tag 全域遙控器統一控制) */

    /* ------------------------------
       全站紅線【上下方標題】文字大小微調
       ------------------------------ */

    /* A-1. 紅線「左邊」的英文組 (Page 3, 4, 5) - 字體大小與字距 */
    .en-title-block p,
    .en-title-block span {
        font-size: 3vw !important;
        /* 👉 控制紅線「上方」英文字體的大小 */
        letter-spacing: 0.8vw !important;
        /* 👉 控制英文字母之間的距離 */
    }

    /* A-2. 紅線「左邊」的英文組 (Page 3, 4, 5) - 上下左右位置控制 */
    .en-title-block {
        margin-top: 12vw !important;
        /* 👉 控制英文字往下掉的高度 (數字變大往下掉，原電腦版是 17vw) */
        margin-right: 0vw !important;
        /* 👉 控制英文字與紅線之間的距離 (數字變大離紅線越遠) */
    }

    /* B. 紅線「上方」的 STORIES 字眼 (Page 8) */
    #page-8 .vertical-title-md.rotate-90 {
        font-family: var(--font-sans) !important;
        /* 👉 改為跟 TEAM 一樣的無襯線黑體 */
        font-weight: 900 !important;
        /* 👉 讓它變得跟 TEAM 一樣極度粗黑 */
        font-size: 5vw !important;
        /* 👉 放大到跟 TEAM 差不多的量級 */
        letter-spacing: 2vw !important;
        /* 👉 控制字母的間距 */
    }

    /* C. 紅線「下方」的中文直書標題 (Page 3, 4, 5) */
    .vertical-title-sm {
        font-size: 3vw !important;
        /* 👉 控制紅線「下方」中文標題的大小 */
        letter-spacing: 1.5vw !important;
        /* 👉 控制中文標題字元之間的距離 */
    }

    /* ------------------------------
       Page 6 特例版面微調
       ------------------------------ */

    /* 1. 左上方白底紅字：「友善都更」 */
    #page-6 .vertical-title-md {
        font-size: 5.5vw !important;
        /* 👉 控制這四個字的大小 */
        letter-spacing: 2vw !important;
        /* 👉 控制字母間距 */
    }

    /* 2. 第七頁專屬的上方中文字段落控制區 */
    #page-7 .top-text {
        top: 10% !important;
        /* 👉 控制上方文字距離頂部的高度 (數字變大往下掉，原電腦版是 12%) */
    }

    #page-7 .top-text p {
        font-size: 3.5vw !important;
        /* 👉 控制第七頁「台北從來不缺房子」這段文字的大小 */
        line-height: 1.8 !important;
        /* 👉 控制上下行的間距 */
    }

    /* 3. 第七頁中央大圓圖的位置控制區 */
    #page-7 .p7-circle-block {
        bottom: 13% !important;
        /* 👉 控制大圓圖距離底部的距離 (數字越小，圓圖越往下掉) */
        width: 85vw !important;
        /* 👉 可選：控制大圓圖本身的大小 (預設 85vw) */
    }

    /* ------------------------------
       Page 8 容器與背景圖微調
       ------------------------------ */
    /* 控制第八頁背景圖放大與錨點 */
    #page-8.bg-light {
        background-position: 30% top !important;
        /* 👉 把「右上角」當作釘子釘住 (不准動) */
        background-size: 200% auto !important;
        /* 👉 控制整張圖放大倍率 (數字越大，圖往「左下方」長得越大) */
    }

    /* 控制第八頁右上方的文字大小 */
    #page-8 .top-center-text p {
        font-size: 2.6vw !important;
        /* 👉 與第 7 頁「台北從來不缺房子」完全同一個字級大小 */
        line-height: 1.8 !important;
        /* 👉 與第 7 頁的行距統一 */
        letter-spacing: 0.5vw !important;
        /* 👉 稍微拉開字距增加儀式感 */
    }

    #page-8 .top-drop-line {
        height: 120vw !important;
        /* 👉 把紅線改短，數字越小線越短 (電腦版原設定高達 127vw) */
    }

    /* ------------------------------
       Page 9~12 共用背景保護 與 P9 紅線微調
       ------------------------------ */
    .slide-story.bg-light {
        background-size: cover !important;
        /* 👉 強制 10, 11 頁的橫式風景照自然鋪滿手機直畫面，杜絕破圖流白 */
        background-position: center bottom !important;
    }

    #page-9 .top-drop-line {
        height: 65vw !important;
        /* 👉 把紅線改短，確保它能在不拉長畫面的情況下塞進螢幕 (電腦版原設定 45vw) */
    }

    /* ------------------------------
       Page 10 紅線長度遙控器
       ------------------------------ */
    #page-10 .top-drop-line {
        height: 70vw !important;
        /* 👉 調整手機版第十頁紅線長度，目前同步設為 65vw */
    }

    /* ------------------------------
       Page 11 紅線長度遙控器
       ------------------------------ */
    #page-11 .top-drop-line {
        height: 75vw !important;
        /* 👉 調整手機版第十一頁紅線長度 */
    }

    /* ------------------------------
       Page 12 紅線長度遙控器
       ------------------------------ */
    #page-12 .top-drop-line {
        height: 65vw !important;
        /* 👉 調整手機版第十二頁紅線長度 */
    }

    /* ------------------------------
       Page 1 白色間隔線長度遙控器
       ------------------------------ */
    #page-1 .line-space {
        height: 12vw !important;
        /* 👉 調整手機版第一頁中間白色短線的長度 */
    }

    /* ------------------------------
       每一頁最底下的 Kui Development 大小遙控器
       ------------------------------ */
    .company-tag {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 3.2vw !important;
        /* 👉 調整手機版最底下英文落款的大小 */
        letter-spacing: 0.5vw !important;
        /* 👉 調整字母間距 */
        padding-left: 0.5vw !important;
        /* 👉 補償 letter-spacing 造成的視覺左偏 */
        margin-top: 12vw !important;
        /* 👉 分隔間距：加大落款與上方文字的距離 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 控制第九頁背景圖放大與錨點 */
    #page-9.bg-light {
        background-image: url('../assets/images/006_mobile.jpg') !important;
        /* 👉 遇到手機螢幕，強制換成這張新照片 */
        background-position: center top !important;
        /* 👉 依然建議釘在上方，以免頭部被切掉 */
        background-size: cover !important;
        /* 👉 讓新照片自然鋪滿整個長條螢幕 */
    }

    /* ------------------------------
       Page 9 手機版專屬文字大小遙控器
       ------------------------------ */
    /* 控制第九頁中文段落大小 (蔡阿姨等字) */
    #page-9 .top-center-text p:not(.en-text) {
        font-size: 3.2vw !important;
        /* 👉 控制中文字的大小，建議與第 7、8 頁統一用 3.5vw */
        line-height: 1.8 !important;
        /* 👉 控制中文字的行距 */
        letter-spacing: 0.2vw !important;
    }

    /* 控制第九頁下方那句英文小紅字 */
    #page-9 .top-center-text p.en-text {
        font-size: 2.5vw !important;
        /* 👉 控制英文字的大小 */
        letter-spacing: 0.5vw !important;
        /* 👉 控制英文字母的間距 */
        margin-top: 5vw !important;
        /* 👉 控制英文字距離上面中文字的遠近 */
    }

    /* ------------------------------
       Page 10 手機版專屬文字大小遙控器
       ------------------------------ */
    /* 控制第十頁中文段落大小 (黃小姐等字) */
    #page-10 .top-center-text p:not(.en-text) {
        font-size: 3.2vw !important;
        /* 👉 依要求與第 9 頁統一為 3.2vw */
        line-height: 1.8 !important;
        /* 👉 控制中文字的行距 */
        letter-spacing: 0.2vw !important;
    }

    /* 控制第十頁下方那句英文小紅字 */
    #page-10 .top-center-text p.en-text {
        font-size: 2.5vw !important;
        /* 👉 依要求與第 9 頁統一為 2.5vw */
        letter-spacing: 0.5vw !important;
        /* 👉 控制英文字母的間距 */
        margin-top: 5vw !important;
        /* 👉 控制英文字距離上面中文字的遠近 */
    }

    /* ------------------------------
       Page 11 & 12 手機版專屬文字大小遙控器
       ------------------------------ */
    /* 控制第十一、十二頁中文段落大小 */
    #page-11 .top-center-text p:not(.en-text),
    #page-12 .top-center-text p:not(.en-text) {
        font-size: 3.2vw !important;
        /* 👉 統一為 3.2vw */
        line-height: 1.8 !important;
        letter-spacing: 0.2vw !important;
    }

    /* 控制第十一、十二頁下方英文小紅字 */
    #page-11 .top-center-text p.en-text,
    #page-12 .top-center-text p.en-text {
        font-size: 2.5vw !important;
        /* 👉 統一為 2.5vw */
        letter-spacing: 0.5vw !important;
        margin-top: 5vw !important;
    }


    /* ------------------------------
       Page 9 特殊紅線動畫修復
       ------------------------------ */
    #page-9 .top-drop-line.reveal-el.grow-down {
        /* 手機瀏覽器對 clip-path 大面積變形的支援度不佳，改用 scaleY 確保往下長 */
        opacity: 1 !important;
        transform: scaleY(0) !important;
        transform-origin: top center !important;
        /* 👉 釘死在最上面，往下延展 */
        transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    #page-9 .top-drop-line.reveal-el.grow-down.active {
        transform: scaleY(1) !important;
    }

    /* 6. (選配) 手機版隱藏右側的實心點點導覽列，以免干擾視線 */
    .side-nav {
        display: none;
    }
}