/* ========================================
   CSS Reset & Base Styles
   ======================================== */

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

:root {
    /* Colors - Primary Palette */
    --color-primary: #000000;
    --color-secondary: #E00D12;
    --color-accent: #FFFFFF;
    --color-gray-light: #F5F5F5;
    --color-gray-dark: #666666;
    --color-ink: #333333;
    
    /* Text Colors */
    --text-primary: #000000;
    --text-secondary: #666666;
    --text-inverse: #FFFFFF;
    --text-accent: #E00D12;
    
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --bg-dark: #000000;
    --bg-accent: #E00D12;
    
    /* Border Colors */
    --border-color: #E0E0E0;
    --border-accent: #E00D12;
    
    /* Spacing - MUST use px, not rem */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
    --spacing-xl: 80px;
    --spacing-2xl: 120px;
    
    /* Typography */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 20px;
    /* ponytail: 標題級距用 clamp 自適應，內文級（xs~lg）固定即可 */
    --font-size-xl: clamp(20px, 3vw, 28px);
    --font-size-2xl: clamp(28px, 4.5vw, 40px);
    --font-size-3xl: clamp(32px, 6vw, 56px);
    --font-family-base: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
    
    /* 桌機 hero 標題淡完的捲動量：須與 js initHeroPin 的
       HEADER_SHRINK_Y + (FADE_DELAY + TITLE_FADE_DISTANCE) × 一屏 一致。
       副標區塊以此定位，讓副標文字接在標題淡完的那一刻從視窗底出現 */
    --hero-title-fade-end: calc(120px + 30vh);

    /* 桌機 hero 釘選距離的緩衝（見 .hero--daily / .hero--eval） */
    --hero-pin-extra: 20vh;

    /* Shadows */
    --hero-text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========================================
   Base Styles
   ======================================== */

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

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

ul,
ol {
    list-style: none;
}

/* ========================================
   Layout - Container
   ======================================== */

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .container {
        width: min(1180px, 100%);
        padding: 0 var(--spacing-xl);
    }
}

/* ========================================
   Header & Navigation
   ======================================== */

.header {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    z-index: 1002;
    box-shadow: var(--shadow-sm);
}

.header .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.logo {
    display: flex;
    align-items: center;
    max-width: 160px;
}

.logo img {
    width: 100%;
    max-width: 160px;
    height: auto;
}

/* 桌機版（≥1024px）：依 1920 設計稿等比呈現（1px = 100/1920 vw） */
@media (min-width: 1024px) {
    .header {
        /* 總高鎖 100（1920 下）；內部元素皆由 152 等比縮 k=100/152≈0.6579 */
        height: min(5.2083vw, 100px);
        transition: height 0.3s ease; /* 捲動收縮動態 */
        box-shadow: none;
    }

    /* 下滑後 header 收縮至應徵鈕高度（70）；logo/nav 因 top:50% 自動上移對齊 entry */
    .header.is-scrolled {
        height: min(3.6458vw, 70px);
    }

    .header .container {
        position: relative;
        min-height: 0;
        padding: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .logo {
        position: absolute;
        left: min(4.3750vw, 84px);
        /* 置中於 container；container 收縮時中心隨之上移對齊 entry */
        top: 50%;
        transform: translateY(-50%);
        max-width: 158px; /* 固定尺寸（240 等比縮），不隨視窗寬縮放 */
    }

    .logo img {
        width: 100%;
        max-width: 158px;
        height: auto;
    }
}

/* 漢堡選單按鈕 */
.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    cursor: pointer;
    background: transparent;
    border: none;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-primary);
    transition: var(--transition-base);
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

@media (min-width: 1024px) {
    .menu-toggle {
        display: none;
    }
}

/* 導航選單 */
.nav-menu {
    display: none;
    position: fixed;
    top: 70px;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: calc(100vh - 70px);
    background: #ffffff;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-md);
    transition: right var(--transition-base);
    overflow-y: auto;
    z-index: 1001;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
}

/* 遮罩層 */
.menu-overlay {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: opacity var(--transition-base);
}

.menu-overlay.active {
    display: block;
}

.nav-menu.active {
    display: flex;
    right: 0;
}

.nav-link {
    position: relative;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #000000;
    transition: color var(--transition-fast);
    padding: var(--spacing-xs) 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: width var(--transition-base);
}

.nav-link:hover {
    color: var(--color-secondary);
}

.nav-link:hover::after {
    width: 100%;
}

@media (min-width: 1024px) {
    .nav-menu {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: row;
        align-items: center;
        gap: min(1.6146vw, 31px);
        width: auto;
        max-width: none;
        height: auto;
        padding: 0;
        background: transparent;
        transition: none;
        /* 最後一項右緣距應徵鈕左緣（541 等比縮 → 356） */
        right: min(18.5417vw, 356px);
        overflow: visible; /* 桌機水平列不需捲動，覆寫 base 的 overflow-y:auto，避免行高溢出冒出捲軸 */
        box-shadow: none;
    }

    .nav-link {
        font-size: min(1.1458vw, 22px);
        font-weight: 500;
        white-space: nowrap;
        letter-spacing: 0;
        line-height: 1.2;
        color: #000;
        padding: 0;
    }

    .nav-menu__entry {
        display: none;
    }
}

/* 應徵 Entry 按鈕（header 右上，僅桌機顯示） */
.entry-btn {
    display: none;
}

@media (min-width: 1024px) {
    .entry-btn {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(15.625vw, 300px);
        height: 100%; /* 與 container 等高；is-scrolled 時隨 header 收縮自動同步 */
        background: var(--color-ink);
        color: var(--text-inverse);
        transition: background var(--transition-base);
    }

    .entry-btn:hover {
        background: #1a1a1a;
    }

    .entry-btn__ch {
        font-family: "Noto Sans TC", sans-serif;
        font-size: min(1.875vw, 36px);
        font-style: italic;
        line-height: 1;
    }

    .entry-btn__divider {
        width: 2px;
        height: min(1.3542vw, 26px);
        margin-left: min(1.5625vw, 30px);
        margin-right: min(0.8854vw, 17px);
        background: var(--text-inverse);
        opacity: 1;
        transform: skewX(-8deg);
    }

    .entry-btn__en {
        font-family: "Noto Sans TC", sans-serif;
        font-size: min(1.875vw, 36px);
        font-style: italic;
        line-height: 1;
    }
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: var(--font-size-base);
    font-weight: 500;
    text-align: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
}

.btn-primary {
    background: #333333;
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline {
    background: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

.btn-outline:hover {
    background: var(--color-secondary);
    color: var(--text-inverse);
}

/* ========================================
   行動版：footer 上方 TOP 連結 + 右下常駐 104 應徵鈕
   （僅 <=1023px；數值為 手機版w700 設計稿 px，body zoom 等比縮放）
   桌機的 TOP：頁面內有 .back-to-top 的沿用之，沒有的改用這顆（見文末桌機規則）
   ======================================== */
.page-top-link,
.entry-fab {
    display: none;
}

/* .page-top-link 以 footer 為定位基準 */
.footer {
    position: relative;
}

@media (max-width: 1023px) {

    /* TOP：浮貼在 footer 頂線上方 58、置中、灰 #999；不佔版面高度，
       直接落在前一區塊既有的下留白裡（設計稿即為此配置） */
    .page-top-link {
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
        margin-bottom: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 13px;
        color: #999999;
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0.05em;
    }

    .page-top-link__arrow {
        width: 12px;
        height: 12px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(-45deg);
    }

    /* 104 應徵：右下常駐紅色圓鈕 130，距右 10、距底 20 */
    .entry-fab {
        position: fixed;
        right: 10px;
        bottom: 20px;
        z-index: 990;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: var(--color-secondary);
        color: var(--text-inverse);
        line-height: 1;
    }

    .entry-fab__ch {
        padding-bottom: 6px;
        border-bottom: 2px solid currentColor;
        font-size: 22px;
        font-weight: 700;
    }

    .entry-fab__en {
        margin-top: 8px;
        font-size: 20px;
        font-style: italic;
    }
}

/* 桌機：頁面內沒有 .back-to-top 的頁（職缺介紹／社員故事／各社員故事／招募），
   改用 footer 頂線上方這顆；視覺沿用 .back-to-top（灰 #999、上箭頭＋TOP） */
@media (min-width: 1024px) {
    body:not(:has(main .back-to-top)) .page-top-link {
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
        margin-bottom: min(2.9688vw, 57px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: min(0.4167vw, 8px);
        color: #999999;
        font-size: min(0.9375vw, 18px);
        line-height: 1;
        letter-spacing: 0.05em;
        transition: color var(--transition-base);
    }

    body:not(:has(main .back-to-top)) .page-top-link:hover {
        color: var(--color-secondary);
    }

    body:not(:has(main .back-to-top)) .page-top-link__arrow {
        width: min(0.9375vw, 18px);
        height: min(0.9375vw, 18px);
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(-45deg);
    }
}

/* ========================================
   Footer
   ======================================== */
.footer {
    background: var(--bg-primary);
    color: var(--color-ink);
    padding: 120px 0 64px;
    margin-top: 0;
    border-top: 1px solid #000;
}

.footer-content {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* 桌機：footer 內容區固定寬度 */
@media (min-width: 1024px) {
    .footer .container {
        width: min(1180px, 100%);
    }
}

/* ponytail: RWD 僅初步處理——設計稿只有 1920 桌機版，<1200 直接堆疊，之後有行動版設計稿再重做 */
@media (min-width: 1200px) {
    .footer-content {
        /* 左 logo 區彈性、右連結欄群靠右（設計稿欄群位於 x≈958–1650，gap 由彈性欄吸收） */
        grid-template-columns: 1fr auto;
        gap: var(--spacing-xl);
        align-items: start;
    }
}

.footer-section h3,
.footer-section h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--text-inverse);
}

.footer-section p {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.social-links {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border-radius: 50%;
    transition: var(--transition-base);
}

.social-links a:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
}

.footer-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-bottom p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ========================================
   Scroll Fade In Animation
   ======================================== */
/* 文字：由上往下滑入 */
.fade-in-down {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-down.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 圖片：由下往上放大滑入 */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 卡片：由上至下展開 */
/* ponytail: 用 mask-size 而非 clip-path —— Chrome 的 IntersectionObserver 會把 clip-path
   算進交集矩形，inset(0 0 100% 0) 使交集為 0 而永遠不觸發 is-visible（Firefox 不會）。 */
.expand-down {
    -webkit-mask-image: linear-gradient(#000, #000);
    mask-image: linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 0%;
    mask-size: 100% 0%;
    transition: -webkit-mask-size 0.5s ease-out, mask-size 0.5s ease-out;
}

.expand-down.is-visible {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* 標題：文字自遮罩下方浮升（地平線效果，需父層 overflow: hidden） */
/* 觀察外層（內層被 overflow 裁掉時 IntersectionObserver 不會觸發） */
.title-rise {
    overflow: hidden;
}

.title-rise > span {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease-out;
}

.title-rise.is-visible > span {
    transform: translateY(0);
    opacity: 1;
}

/* 通用淡入（從原位置） */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
}

/* ========================================
   Text Animation - Character by Character
   ======================================== */

.char-animation {
    overflow: hidden;
}

.char-animation span {
    display: inline-block;
    transform: translateY(80px);
    opacity: 0;
    transition: 1.3s cubic-bezier(.39, .575, .565, 1);
}

.char-animation.is-visible span {
    transform: translateY(0);
    opacity: 1;
}

/* Stagger delay for each character */
.char-animation.is-visible span:nth-child(1) { transition-delay: 0.05s; }
.char-animation.is-visible span:nth-child(2) { transition-delay: 0.1s; }
.char-animation.is-visible span:nth-child(3) { transition-delay: 0.15s; }
.char-animation.is-visible span:nth-child(4) { transition-delay: 0.2s; }
.char-animation.is-visible span:nth-child(5) { transition-delay: 0.25s; }
.char-animation.is-visible span:nth-child(6) { transition-delay: 0.3s; }
.char-animation.is-visible span:nth-child(7) { transition-delay: 0.35s; }
.char-animation.is-visible span:nth-child(8) { transition-delay: 0.4s; }
.char-animation.is-visible span:nth-child(9) { transition-delay: 0.45s; }
.char-animation.is-visible span:nth-child(10) { transition-delay: 0.5s; }
.char-animation.is-visible span:nth-child(11) { transition-delay: 0.55s; }
.char-animation.is-visible span:nth-child(12) { transition-delay: 0.6s; }
.char-animation.is-visible span:nth-child(13) { transition-delay: 0.65s; }
.char-animation.is-visible span:nth-child(14) { transition-delay: 0.7s; }
.char-animation.is-visible span:nth-child(15) { transition-delay: 0.75s; }
.char-animation.is-visible span:nth-child(16) { transition-delay: 0.8s; }
.char-animation.is-visible span:nth-child(17) { transition-delay: 0.85s; }
.char-animation.is-visible span:nth-child(18) { transition-delay: 0.9s; }
.char-animation.is-visible span:nth-child(19) { transition-delay: 0.95s; }
.char-animation.is-visible span:nth-child(20) { transition-delay: 1s; }
.char-animation.is-visible span:nth-child(21) { transition-delay: 1.05s; }
.char-animation.is-visible span:nth-child(22) { transition-delay: 1.1s; }
.char-animation.is-visible span:nth-child(23) { transition-delay: 1.15s; }
.char-animation.is-visible span:nth-child(24) { transition-delay: 1.2s; }
.char-animation.is-visible span:nth-child(25) { transition-delay: 1.25s; }
.char-animation.is-visible span:nth-child(26) { transition-delay: 1.3s; }
.char-animation.is-visible span:nth-child(27) { transition-delay: 1.35s; }
.char-animation.is-visible span:nth-child(28) { transition-delay: 1.4s; }
.char-animation.is-visible span:nth-child(29) { transition-delay: 1.45s; }
.char-animation.is-visible span:nth-child(30) { transition-delay: 1.5s; }
.char-animation.is-visible span:nth-child(n+31) { transition-delay: 1.55s; }

/* Image animation: slide down with scale */
.fade-in-down-scale {
    opacity: 0;
    transform: translateY(-10.835px) scale(1.2);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-down-scale.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ========================================
   About Section 動畫（參考 milkstar.jp BRAND CONCEPT）
   ======================================== */
/* 文字：上浮 60px + 淡入，緩起緩收、延遲 0.4s */
.ms-fade {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s cubic-bezier(.39, .575, .565, 1) .4s,
                transform 1.2s cubic-bezier(.39, .575, .565, 1) .4s;
}

.ms-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 圖片：容器由下往上放大淡入，內圖放大後持續視差位移 */
.ms-img {
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: opacity 1s ease-out,
                transform 1s cubic-bezier(.39, .575, .565, 1);
}

.ms-img.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 標題遮罩上浮，沿用 milkstar 的 1.3s 曲線；padding 避免底線被裁切 */
.about-collage__title.title-rise {
    padding-bottom: 0.5em;
    /* 只需垂直裁切做浮升遮罩；水平放行，避免 nowrap 標題被切掉尾字 */
    overflow: visible clip;
}

.about-collage__title.title-rise > span {
    transition: transform 1.3s cubic-bezier(.39, .575, .565, 1),
                opacity 1.3s cubic-bezier(.39, .575, .565, 1);
}


/* ========================================
   Hero Section
   ======================================== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 0;
}

@media (min-width: 1024px) {
    .hero {
        padding-top: 0;
    }
}

.hero-image {
    width: 100%;
    /* Mobile-first crop; overridden below to match the Figma Desktop_TOP 2 frame (1920 canvas, hero 1926x1085) */
    /* aspect-ratio: 4 / 5; */
}

@media (min-width: 1024px) {
    .hero-image {
        aspect-ratio: 1926 / 1085;
    }
}

.hero-image img {
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
}

/* 首頁／日常業務／人事評價 hero 對齊頂端，避免裁到人物頭部（社員故事 story-hero 不套用） */
.hero:not(.story-hero) .hero-image img {
    object-position: top;
}

/* Hero Slider */
.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-slides {
    position: relative;
    width: 100%;
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-slide.active {
    opacity: 1;
}

/* Hero Arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none; /* 隱藏左右切換按鈕 */
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hero-arrow:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-arrow--prev {
    left: 16px;
}

.hero-arrow--next {
    right: 16px;
}

@media (min-width: 768px) {
    .hero-arrow {
        width: 56px;
        height: 56px;
    }

    .hero-arrow--prev {
        left: 24px;
    }

    .hero-arrow--next {
        right: 24px;
    }
}

@media (min-width: 1024px) {
    .hero-arrow {
        width: 64px;
        height: 64px;
    }

    .hero-arrow--prev {
        left: 40px;
    }

    .hero-arrow--next {
        right: 40px;
    }
}

/* Hero Dots */
.hero-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.hero-dot.active {
    background: #ffffff;
    width: 32px;
    border-radius: 6px;
}

@media (min-width: 1024px) {
    .hero-dots {
        bottom: 40px;
    }

    .hero-dot {
        width: 14px;
        height: 14px;
    }

    .hero-dot.active {
        width: 40px;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--text-inverse);
    padding: var(--spacing-xl) var(--spacing-md);
}

.hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: var(--font-size-3xl);
    }
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    font-weight: 400;
    opacity: 0.9;
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: var(--font-size-xl);
    }
}

/* ========================================
   Section Common Styles
   ======================================== */
section {
    padding: var(--spacing-xl) 0;
}

@media (min-width: 1024px) {
    section {
        padding: var(--spacing-2xl) 0;
    }
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

@media (min-width: 768px) {
    .section-title {
        font-size: var(--font-size-2xl);
    }
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
}

/* ========================================
   Recruitment Highlight Section
   ======================================== */
/* 僅行動版顯示；桌機版已依 0729 設計稿移除（見 redesign 區塊 display:none） */
.recruitment-highlight {
    text-align: center;
}

.highlight-content {
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .highlight-content {
        max-width: 1289px;
    }
}

.highlight-content p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.btn-lg {
    padding: 16px 48px;
    font-size: var(--font-size-lg);
}

/* ========================================
   About Section
   ======================================== */
.about-content {
    display: grid;
    gap: var(--spacing-lg);
    align-items: center;
}

@media (min-width: 768px) {
    .about-content {
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-xl);
    }
}

.about-text p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

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

.about-logo img {
    max-width: 200px;
    margin: 0 auto;
}

/* ========================================
   Photo Grid Section
   ======================================== */

.daily-photo-grid-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-light);
}

.daily-photo-grid-section .section-header {
    margin-bottom: var(--spacing-xl);
}

.daily-photo-grid-section h2 {
    font-size: clamp(28px, 4.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.daily-photo-grid-section .section-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 400;
}

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin: 0;
}

@media (min-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .photo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (min-width: 1440px) {
    .photo-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-lg);
    }
}

/* Photo Item */
.photo-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
}

.photo-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.photo-item:hover {
    transform: scale(1.05);
}

/* ========================================
   Cards
   ======================================== */
.card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* hover 只放大圖片、卡片本體不位移：位移會讓命中框從指標下移開，
   在卡片邊緣造成 hover/unhover 來回震盪（圖片忽大忽小） */

.card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-secondary);
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: var(--spacing-md);
}

.card-title {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
}

.card-role {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
    .card-title {
        font-size: 22px;
    }

    .card-role {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .card-title {
        font-size: var(--font-size-lg);
    }

    .card-role {
        font-size: var(--font-size-sm);
    }
}

.card-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ========================================
   Staff Cards Grid
   ======================================== */
.staff-cards {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .staff-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
}

.staff-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.staff-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.staff-card .card-text {
    flex: 1;
}

/* ========================================
   Page Title Section
   ======================================== */
.page-title {
    padding: var(--spacing-xl) 0;
    background: var(--bg-secondary);
    text-align: center;
}

.page-title h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.page-title p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

/* ========================================
   Job Positions Section
   ======================================== */
.job-positions-section {
    padding: var(--spacing-xl) 0;
}

/* ========================================
   Process Section
   ======================================== */
.process-section {
    padding: var(--spacing-xl) 0;
}

/* ========================================
   Job List
   ======================================== */
.job-list {
    display: grid;
    gap: var(--spacing-xl);
}

.job-item {
    padding: var(--spacing-lg);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.job-item:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}

.job-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.job-tags {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.job-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.job-requirements {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
}

.job-requirements li {
    position: relative;
    padding-left: 20px;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
}

.job-requirements li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--text-accent);
    font-weight: 700;
}

/* ========================================
   Benefits Grid
   ======================================== */
.benefits-section {
    background: var(--bg-secondary);
}

.benefits-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
}

@media (min-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.benefit-item {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.benefit-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.benefit-icon {
    font-size: clamp(32px, 5vw, 48px);
    margin-bottom: var(--spacing-md);
}

.benefit-item h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.benefit-item p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ========================================
   Application Process
   ======================================== */
.process-steps {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

@media (min-width: 768px) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
}

@media (min-width: 1024px) {
    .process-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.step {
    text-align: center;
}

.step-number {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-inverse);
    background: var(--bg-accent);
    border-radius: 50%;
}

.step-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.step-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
}

.cta-section {
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.cta-section h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

/* ========================================
   Homepage Specific Styles
   ======================================== */

/* Hero Indicator (橫排 SCROLL + 垂直線) */
.hero-indicator {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
    background: transparent;
}

@media (min-width: 1024px) {
    /* Figma: 指標橫跨 hero 圖下緣 ~95px 並向下延伸 ~140px
       (group 93x235 @ y=1142，hero 圖底 y=1237) */
    .hero-indicator {
        margin-top: min(1.1vw, 21.12px);
        padding: 0;
        gap: 16px;
    }
}

.scroll-text {
    font-size: 18px; /* 設計字寬 92、字高 18 */
    font-weight: 400;
    letter-spacing: 5px;
    color: var(--color-secondary);
}

.scroll-line {
    position: relative;
    width: 1px;
    height: 60px;
    background-color: #b3b3b3; /* 底線灰 */
    overflow: hidden;
}

/* 紅色填充層：上→下填滿、再上→下退去，露出底灰，形成流動感 */
.scroll-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-secondary);
    animation: scrollFlow 2s infinite;
}

@media (min-width: 1024px) {
    .scroll-line {
        height: 77px;
    }
}

@keyframes scrollFlow {
    0%    { clip-path: inset(0 0 100% 0); }  /* 紅：無 */
    25%   { clip-path: inset(0 0 0 0); }      /* 紅由上至下填滿（0.5s） */
    50%   { clip-path: inset(100% 0 0 0); }   /* 灰由上至下填充、紅退去（0.5s） */
    100%  { clip-path: inset(100% 0 0 0); }   /* 等待 1s 後重複 */
}

/* 首頁 Hero 疊字（標題／副標）與社員故事 TOP 連結：
   行動版不顯示（維持既有版面），桌機版於 redesign 區塊開啟 */
.daily-vision--index,
.back-to-top {
    display: none;
}

/* Recruitment Highlight Box (白底紅框，紅字置中) */
.highlight-box {
    display: inline-block;
    padding: 12px 32px;
    border: 2px solid var(--color-secondary);
    background: var(--bg-primary);
    margin-bottom: var(--spacing-md);
}

.highlight-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0;
}

@media (min-width: 768px) {
    .highlight-title {
        font-size: var(--font-size-xl);
    }
}

.highlight-heading {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
    text-align: center;
}

@media (min-width: 768px) {
    .highlight-heading {
        font-size: var(--font-size-xl);
    }
}

.highlight-line {
    width: 1px;
    height: 100px;
    background-color: var(--color-secondary);
    margin: var(--spacing-xl) auto;
}

/* Divider below the whole vision tagline group (Figma node 2442:9446) */
.highlight-divider {
    width: 1px;
    height: 100px;
    margin: var(--spacing-xl) auto 0;
    background-color: var(--color-secondary);
}

/* ========================================
   About Section (Brand Philosophy Collage)
   ======================================== */

.about-section {
    padding: var(--spacing-xl) 0;
    background: var(--bg-primary);
}

@media (min-width: 1024px) {
    /* 上：垂直線→拼貼區約 108px；下：拼貼區→深入了解垂直線由該線自身 margin 提供，去除重複內距 */
    .about-section {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Collage container: scales proportionally to the 1920px design frame */
.about-collage {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Images */
.about-collage__image {
    margin: 0;
    width: 100%;
    overflow: hidden;
    /* 視差：圖片高度放大係數，捲動時由 JS 於框內上下位移（initCollageParallax） */
    --plx-scale: 1.08;
}

/* index3 合照人頭距圖片上緣僅 ~28px，縮小位移量避免裁到頭 */
.about-collage__image--group {
    --plx-scale: 1.05;
}

/* cover 的內部裁切集中到底部（衣物區），頂部人頭不被裁 */
.about-collage__image--group img {
    object-position: top;
}

.about-collage__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.about-collage__image--shoes {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Heading: red title, underline only under 夥伴 */
.about-collage__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-secondary);
    text-align: center;
}

.about-collage__title-underline {
    display: inline-block;
    border-bottom: 4px solid var(--color-secondary);
    padding-bottom: 4px;
}

/* Philosophy text: centered; first line of each group red+larger, rest gray */
.about-collage__text {
    text-align: center;
}

.about-collage__group {
    margin-bottom: var(--spacing-xl);
}

.about-collage__group:last-child {
    margin-bottom: 0;
}

.about-collage__paragraph {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.9;
    color: #4D4D4D;
}

.about-collage__paragraph--lead {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #4D4D4D;
    margin-bottom: var(--spacing-xs);
}

/* Desktop: absolute collage matching the 1920 x 1725 design frame */
@media (min-width: 1024px) {
    .about-collage {
        position: relative;
        display: block;
        padding: 0;
        gap: 0;
        /* 內容框：index1 頂 (y=2596.9) → index3 底 (y=4241.9)，高 1645，寬 1920 */
        aspect-ratio: 1920 / 1645;
        container-type: inline-size;
        /* 合照右緣出血超出 1920 畫布，比照 Figma frame 裁切 */
        overflow: hidden;
    }

    .about-collage__image,
    .about-collage__heading,
    .about-collage__text {
        position: absolute;
    }

    .about-collage__image img {
        height: 100%;
    }

    /* 直式球鞋圖，貼左邊緣 (index2 @x=0, y=2879, 567.5x948.8) */
    .about-collage__image--shoes {
        position: sticky;
        left: 0;
        top: 120px;
        width: 29.557%;
        height: 57.678%;
        max-width: none;
        margin: 0;
        overflow: hidden;
    }

    /* 店招圖，右上 (index1 @x=1138.6, y=2596.9, 787.6x427.8) */
    .about-collage__image--sign {
        left: 59.302%;
        top: 0;
        width: 41.021%;
        height: 26.006%;
    }

    /* 合照，右下，右緣出血 (index3 @x=1236.3, y=3806.8, 801x435.1) */
    .about-collage__image--group {
        left: 64.391%;
        top: 73.550%;
        width: 41.719%;
        height: 26.450%;
    }

    /* 標題 (@x=635.5, y=3064.7, 648.7x67.7) */
    .about-collage__heading {
        left: 33.099%;
        top: 28.438%;
        width: 33.786%;
    }

    .about-collage__title {
        font-size: 2.9cqw;
        line-height: 1.3;
        white-space: nowrap; /* 設計稿為單行，防止尾端「」」折行 */
    }

    .about-collage__title-underline {
        border-bottom-width: 0.18cqw; /* ~3.5px */
        padding-bottom: 0.63cqw;      /* ~12px */
    }

    /* 理念文字群組 (@x=651.9, y=3207.5, 615.9x576.5) */
    .about-collage__text {
        left: 33.953%;
        top: 37.119%;
        width: 32.078%;
    }

    .about-collage__group {
        margin-bottom: 2.5cqw;
    }

    .about-collage__paragraph {
        font-size: 1.15cqw;
        line-height: 2;
    }

    .about-collage__paragraph--lead {
        font-size: 1.25cqw;
        margin-bottom: 0.6cqw;
    }
}

/* Explore Section (Single Image) */
.explore-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-primary);
}

.explore-single {
    max-width: 600px;
    margin: 0 auto;
}

.explore-single img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* Deep Dive Title Section */
.deep-dive-title {
    padding: 0 0 var(--spacing-lg);
    text-align: center;
}

@media (min-width: 1024px) {
    .deep-dive-title {
        width: min(1180px, 100%);
        margin: 0 auto;
    }
}

.deep-dive-title .highlight-line {
    height: 180px;
}

.deep-dive-title .section-title {
    font-size: clamp(32px, 6vw, 58px);
    font-weight: 700;
    margin: 0 0 var(--spacing-xs);
}

.deep-dive-title .section-subtitle {
    font-size: clamp(18px, 3vw, 29px);
    margin: 0;
}

/* Deep Dive Images Section */
.deep-dive-images {
    padding: 96px 0 21px;
}

@media (min-width: 1024px) {
    .deep-dive-images {
        width: min(1180px, 100%);
        margin: 0 auto;
    }
}

/* First Row: Single Large Image (full-bleed hero photo, 1920x639 design ratio) */
.image-single {
    width: 100%;
    position: relative;
    aspect-ratio: 1920 / 639;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

/* <picture> 需為 block 撐滿容器，否則內層 img 的 height:100% 會 fallback 成自然高度 */
.image-single picture,
.image-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

.image-single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.image-single:hover img {
    transform: scale(1.05);
}

.image-single:hover .image-view-more {
    background-color: #FFFFFF;
    color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

/* Second Row: Two Images Side by Side (full-bleed, 954x640 design ratio each) */
.images-grid-two {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

@media (min-width: 768px) {
    .images-grid-two {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 20px;
    }
}

.image-item {
    position: relative;
    aspect-ratio: 954 / 640;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.image-item:hover img {
    transform: scale(1.05);
}

.image-item:hover .image-view-more {
    background-color: #FFFFFF;
    color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

/* White label tag: overlaid top-right of each photo (Figma) */
.image-label {
    position: absolute;
    top: 8%;
    right: 4.5%;
    left: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    background-color: #FFFFFF;
    border: 2px solid var(--color-secondary);
    z-index: 1;
    line-height: 1.3;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 大圖標籤右緣更貼近畫布邊 (距畫布右 44px ≈ 2.3%) */
.image-single .image-label {
    right: 2.4%;
}

.image-label__zh {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-secondary);
}

.image-label__en {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-secondary);
}

/* Slide in animation for label when parent is visible */
.image-single.is-visible .image-label,
.image-item.is-visible .image-label {
    clip-path: inset(0 0 0 0);
    transition-delay: 0.3s;
}

/* 平板版 */
@media (min-width: 768px) {
    .image-label {
        padding: 10px 20px;
        gap: 10px;
    }

    .image-label__zh {
        font-size: 18px;
    }

    .image-label__en {
        font-size: 14px;
    }

    .image-view-more {
        padding: 10px 30px;
        font-size: 16px;
    }
}

/* 桌機版 */
@media (min-width: 1024px) {
    .image-label {
        padding: 12px 30px;
        gap: 14px;
    }

    .image-label__zh {
        font-size: 24px;
    }

    .image-label__en {
        font-size: 18px;
    }

    .image-view-more {
        padding: 12px 40px;
        font-size: 20px;
    }
}

/* Red pill "view more" button: overlaid bottom-left of each photo (Figma) */
.image-view-more {
    position: absolute;
    bottom: 8%;
    left: 4.1667%;
    right: auto;
    padding: 8px 20px;
    background-color: var(--color-secondary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    display: inline-block;
    z-index: 1;
}

.image-view-more:hover {
    background-color: #FFFFFF;
    color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

/* Store Gallery (Full Width) */
.store-gallery {
    width: 100%;
    margin: var(--spacing-lg) 0;
}

.gallery-full {
    width: 100%;
    overflow: hidden;
}

.gallery-full img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 600px;
}

@media (min-width: 768px) {
    .gallery-full img {
        max-height: 400px;
    }
}

/* Recruiting Grid */
.recruiting-grid-section {
    padding: var(--spacing-xl) 0;
}

.recruiting-grid {
    display: grid;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .recruiting-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

.recruiting-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.recruiting-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.recruiting-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 8px 24px;
    background-color: var(--bg-accent);
    color: var(--text-inverse);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 2px;
    z-index: 10;
}

/* Staff Stories Section */
.staff-stories-section {
    padding: 289px 0 300px;
    background-color: #F2F2F2;
    text-align: center;
}

.staff-stories-section .highlight-line {
    height: 180px;
}

.staff-stories-section .section-title {
    font-size: clamp(32px, 6.2vw, 60px);
    font-weight: 700;
    margin: 0;
}

.staff-stories-section .section-subtitle {
    font-size: clamp(18px, 3.2vw, 31px);
}

.staff-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    grid-template-columns: 1fr;
}

/* ≥1024px：對齊設計稿卡片群組（兩欄同高，整組 1201.7 寬置中，欄距 47px） */
@media (min-width: 1024px) {
    .staff-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1201px;
        margin: 158px auto var(--spacing-lg);
        padding: 0;
        column-gap: 47px;
        align-items: start;
    }
}

.staff-grid .staff-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    color: inherit;
    text-decoration: none;
}

/* 無限輪播接縫平移時暫關卡片過渡，瞬時同步 is-visible（見 initStaffCarousel） */
.staff-grid.is-jumping .staff-card {
    transition: none;
}

/* 卡片圖：直式 577.3 x 649.2（≈1:1.125） */
.staff-grid .card-image {
    aspect-ratio: 577 / 649;
}

/* 卡片文字：圖下 ~52px，兩行置中 */
.staff-grid .card-content {
    padding: var(--spacing-md) 0 0;
    text-align: center;
}

.staff-grid .card-title {
    font-size: 20px;
    font-weight: 300;
    color: #4D4D4D;
    margin-bottom: var(--spacing-xs);
}

.staff-grid .card-role {
    font-size: 20px;
    font-weight: 300;
    color: #4D4D4D;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .staff-grid .card-title {
        font-size: 26px;
    }

    .staff-grid .card-role {
        font-size: 26px;
    }
}

@media (min-width: 1024px) {
    .staff-grid .card-title {
        font-size: 32px;
    }

    .staff-grid .card-role {
        font-size: 32px;
    }
}

.section-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* Secondary Button */
.btn-secondary {
    display: inline-block;
    padding: 14px 48px;
    background-color: var(--bg-accent);
    color: var(--text-inverse);
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-base);
}

@media (min-width: 1024px) {
    .btn-secondary {
        padding: 28px 90px;
    }

    /* 社員故事區 view more：目標外觀 298x76、字級 34/weight 400 */
    .staff-stories-section .btn-secondary {
        padding: 21px 72px;
        font-size: 34px;
        font-weight: 400;
        line-height: 1;
    }
}

.btn-secondary:hover {
    background-color: #FFFFFF;
    color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

/* Footer Enhanced Structure */
.footer-brand {
}

.footer-logo {
    max-width: 270px;
    margin-bottom: var(--spacing-md);
}

.footer-social {
    display: flex;
    gap: 28px;
    margin-top: var(--spacing-lg);
    margin-left: var(--spacing-lg)
}

.footer-social a {
    display: inline-block;
    line-height: 0;
    transition: var(--transition-base);
}

.footer-social a img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .footer-brand,
    .footer-bottom {
        text-align: center;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo {
        margin-bottom: var(--spacing-sm);
    }

    .footer-social {
        margin-top: var(--spacing-md);
        margin-left: 0;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

.footer-social a:hover {
    transform: translateY(-2px);
}

.footer-grid {
    display: grid;
    gap: var(--spacing-lg);
}

@media (min-width: 768px) {
    .footer-grid {
        /* max-content：auto 欄會把 flex 拉伸的剩餘空間分掉，欄距會失真 */
        grid-template-columns: repeat(3, max-content);
        gap: 100px; /* 欄位節距 ≈172px，貼近設計稿 ~180px */
        align-items: start;
    }
}

/* 平板（768–1199）：左 brand 置中、右側上為買/賣、下為關於我們 */
@media (min-width: 768px) and (max-width: 1199px) {
    .footer-content {
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .footer-social {
        margin-left: 0;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .footer-column--about {
        grid-column: 1 / -1;
    }

}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-column h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    min-height: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #BFBFBF;
}

/* 關於我們：單欄內的連結 grid，前 4 項第一行清單、其餘換到第二行清單；
   h4 寬度隨欄撐滿，底線自然延伸橫跨整個 grid */
@media (min-width: 768px) {
    .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        grid-auto-flow: column;
        column-gap: 100px;
    }

    .footer-links-grid li:nth-child(-n+4) {
        grid-column: 1;
    }

    .footer-links-grid li:nth-child(n+5) {
        grid-column: 2;
    }

    .footer-links-grid li:nth-child(5) {
        grid-row: 1;
    }
}

/* 平板（768–1199）：關於我們的第二列軌道對齊上排的「我想買」 */
@media (min-width: 768px) and (max-width: 1199px) {
    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--spacing-lg);
    }
}

.footer-column ul {
    list-style: none;
    flex: 1;
}

.footer-column li {
    margin-bottom: 8px;
}

.footer-column a {
    font-size: 16px;
    color: var(--text-primary);
}

.footer-column a:hover {
    color: var(--text-accent);
}

.geo-logo {
    width: 84px;
    height: auto;
}

/* Navigation Enhancements for Homepage */
.nav-link .divider {
    margin: 0 8px;
    color: var(--text-primary);
    opacity: 0.5;
}

.nav-link .en {
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* ======== Daily Work Page ======== */

/* 沿用既有 class：.hero / .hero-image / .hero-indicator / .scroll-text / .scroll-line
   本頁新樣式一律以 daily- 前綴命名 */

/* ----------------------------------------
   Vision Section（願景標語）
   ---------------------------------------- */
.daily-vision {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md) 0;
}

.daily-vision__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0;
}

/* ----------------------------------------
   Lead Section（願景副標，獨立於標題區塊）
   ---------------------------------------- */
.daily-lead {
    text-align: center;
    padding: var(--spacing-md) var(--spacing-md) 0;
}

.daily-lead__text {
    margin: 0 auto;
    max-width: 900px;
    font-size: var(--font-size-base);
    line-height: 2;
    color: #4D4D4D;
}

/* 願景與第一個分類之間的紅色垂直分隔線 */
.daily-lead__divider {
    width: 1px;
    height: 100px;
    margin: var(--spacing-xl) auto 0;
    background-color: var(--color-secondary);
}

/* ----------------------------------------
   Category Section（關於販售 / 收購 / 賣場）
   ---------------------------------------- */
.daily-category {
    padding: 0;
    margin-top: var(--spacing-2xl);
}

.daily-category:last-of-type {
    padding-bottom: var(--spacing-xl);
}

.daily-category--first {
    margin-top: var(--spacing-lg);
}

.daily-category__header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.daily-category__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 var(--spacing-xs);
}

.daily-category__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
    margin: 0;
}

/* ----------------------------------------
   Job Block（圖左文右）
   ---------------------------------------- */
.daily-jobs {
    max-width: 1920px;
    margin: 0 auto;
}

.daily-job {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.daily-job + .daily-job {
    margin-top: var(--spacing-xl);
}

.daily-job__figure {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 95 / 56;
    overflow: hidden;
}

.daily-job__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 圖片左下角的職務標籤 */
.daily-job__label {
    position: absolute;
    left: 5.3%;
    bottom: 8%;
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    padding: 6px 14px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--color-secondary);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reveal animation when parent is visible */
.daily-job.is-visible .daily-job__label {
    clip-path: inset(0 0 0 0);
    transition-delay: 0.3s;
}

.daily-job__label-jp {
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-secondary);
}

.daily-job__label-en {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-secondary);
}

.daily-job__body {
    margin-top: var(--spacing-md);
    text-align: center;
}

/* 桌機版職務標題（紅字＋紅底線，行動版隱藏；行動版沿用圖上 .daily-job__label） */
.daily-job__title {
    display: none;
}

.daily-job__heading {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #4D4D4D;
    margin: 0 0 var(--spacing-md);
}

.daily-job__desc {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: #4D4D4D;
    margin: 0;
}

/* 桌機版（≥1024px）樣式統一收於檔案後段
   「Desktop >=1024px redesign: 日常業務 daily-work」區塊 */

/* ======== Evaluation Page ======== */

/* --- Intro (尋找與我們相同頻率的你) --- */
.eval-intro {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-md) 0;
}

.eval-intro__heading {
    font-size: clamp(28px, min(3.4vw, 65.28px), 64px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg);
}

/* --- Lead (內文，獨立於標題區塊) --- */
.eval-lead {
    text-align: center;
    padding: 0 var(--spacing-md) var(--spacing-lg);
}

.eval-lead__text {
    max-width: 1400px;
    margin: 0 auto;
}

.eval-lead__text p {
    font-size: clamp(15px, min(1.5vw, 28.8px), 28px);
    line-height: 2;
    color: var(--color-ink);
    margin: 0;
}

/* --- Section header (紅色垂直線 + 中文標題 + 英文副標) --- */
.eval-section-header {
    text-align: center;
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.eval-section-header__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
}

.eval-section-header__subtitle {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    margin: var(--spacing-sm) 0 0;
}

@media (min-width: 768px) {
    .eval-section-header__title {
        font-size: 42px;
    }

    .eval-section-header__subtitle {
        font-size: 22px;
    }
}

/* --- Career track diagram (階梯示意圖 + 標籤) ---
   三張階梯素材皆為無標籤裁切圖（2x），級別/職稱/年資/引線文字內建；
   紅色標籤（正職人員／兼職人員）一律以 CSS 疊在左上角，行動版與桌機共用同一組素材。
   容器上緣＝標籤上緣，padding-top 讓出標籤與圖之間的留白 */
.eval-track {
    position: relative;
}

.eval-track__img {
    display: block;
    height: auto;
}

.eval-track__label {
    position: absolute;
    top: 0;
    display: inline-block;
    background: var(--color-secondary);
    color: var(--text-inverse);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* --- Caption (single line under a track) --- */
.eval-caption {
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
    margin: 0;
    font-size: clamp(18px, min(2vw, 38.4px), 40px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
}

/* --- Closing lines (灰字，居中) --- */
.eval-closing {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-2xl);
}

.eval-closing p {
    margin: 0 0 var(--spacing-md);
    font-size: clamp(18px, min(2vw, 38.4px), 40px);
    line-height: 1.5;
    color: var(--color-gray-dark);
}

.eval-closing p:last-child {
    margin-bottom: 0;
}

/* --- <1024px: 保持圖表完整、縮小內距（無行動版設計稿，粗略處理）--- */
@media (max-width: 1023px) {
    .eval-intro {
        padding-top: var(--spacing-xl);
    }
}


/* ======== Job Intro Page ======== */

/* ----------------------------------------
   全員工享有福利 (共用區塊)
   ---------------------------------------- */
.job-benefits {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.job-benefits__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.job-benefit {
    max-width: 320px;
}

.job-benefit__icon {
    width: 160px;
    height: 160px;
    margin: 0 auto var(--spacing-md);
}

.job-benefit__title {
    position: relative;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1;
    padding-bottom: 26px;
    margin-bottom: 33px;
}

.job-benefit__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 181px;
    height: 5px;
    background-color: var(--color-secondary);
}

.job-benefit__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (min-width: 1024px) {
    .job-benefits {
        padding: 443px 0 0;
    }

    .job-benefits .section-title {
        font-size: 56px;
        margin-bottom: 0;
    }

    .job-benefits__grid {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 132px;
        margin-top: 118px;
    }

    .job-benefit {
        width: 320px;
    }

    .job-benefit__icon {
        width: 227px;
        height: 227px;
        margin-bottom: 48px;
    }

    .job-benefit__title {
        font-size: 40px;
    }

    .job-benefit__desc {
        font-size: 24px;
    }
}

/* ----------------------------------------
   職缺明細 + 切換頁籤
   ---------------------------------------- */
.job-detail {
    padding: var(--spacing-xl) 0;
}

.job-detail__card {
    max-width: 1666px;
    margin: 0 auto;
}

/* 頁籤 (資料夾式)：頁籤列往下疊進卡片頂框（紅疊紅），
   未選中鈕較矮、下緣藏在框後，選中鈕較高在前 */
.job-tabs {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 0 8px;
    margin-bottom: -14px; /* = 卡片框厚，讓頁籤底端沒入頂框 */
}

.job-tabs__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 50%;
    padding: 16px 16px 30px; /* 底部含 14px 疊入頂框 */
    font-family: inherit;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1;
    color: var(--text-inverse);
    background-color: var(--color-secondary);
    border: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    cursor: pointer;
    transition: var(--transition-base);
}

.job-tabs__tab[aria-selected="true"] {
    padding-top: 40px;
}

/* 內容外框 (紅色圓角邊框) */
.job-panels {
    position: relative;
    background-color: var(--bg-primary);
    border: 14px solid var(--color-secondary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-md);
}

.job-panel[hidden] {
    display: none;
}

/* 明細表格 */
.job-table {
    display: flex;
    flex-direction: column;
}

.job-table__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 2px solid #CCCCCC;
}

.job-table__row:first-child {
    border-top: 2px solid #CCCCCC;
}

.job-table__term {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-ink);
    background-color: #E6E6E6;
}

.job-table__desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-md);
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #4D4D4D;
}

.job-table__desc p {
    margin: 0;
}

/* ○ 提供標記 */
.job-table__mark {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-secondary);
    border-radius: var(--radius-full);
}

@media (min-width: 1024px) {
    .job-detail {
        padding: 150px 0 290px;
    }

    .job-tabs {
        gap: 24px;
        padding: 0 14px;
        margin-bottom: -45px; /* = 卡片框厚 45px */
    }

    .job-tabs__tab {
        height: 131px;           /* 未選中：頂 1773 → 沒入頂框 */
        padding: 0 24px 40px;    /* 文字置中於可見區（框上緣以上） */
        font-size: 48px;
        border-radius: 40px 40px 0 0;
    }

    .job-tabs__tab[aria-selected="true"] {
        height: 174px;           /* 選中：頂 1730，高出 43px */
        padding-top: 0;
    }

    .job-panels {
        border-width: 45px;
        border-radius: 48px;
    }

    .job-table__row {
        flex-direction: row;
    }

    .job-table__term {
        flex: 0 0 394px;
        padding: 84px 24px;
        font-size: 34px;
    }

    .job-table__desc {
        flex: 1 1 auto;
        padding: 84px 40px;
        font-size: 24px;
        line-height: 1.78;
    }

    .job-table__mark {
        width: 44px;
        height: 44px;
        border-width: 4px;
    }
}

/* ======== Members (Stories) Page ======== */

/* 視覺隱藏（保留給螢幕閱讀器 / SEO 的頁面主標題） */
.members-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Section 外框（行動版預設） */
.members-stories {
    padding: 64px 24px 96px;
}

.members-inner {
    max-width: 1920px;
    margin: 0 auto;
}

/* 社員清單 */
.members-list {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* 單一社員卡片 */
.members-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.members-card__photo-link {
    display: block;
    overflow: hidden;
}

.members-card__photo {
    width: 100%;
    aspect-ratio: 860 / 489;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

.members-card__photo-link:hover .members-card__photo {
    transform: scale(1.05);
}

.members-card__body {
    flex: 1;
}

.members-card__role {
    color: var(--color-secondary);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 12px;
}

.members-card__name {
    color: #4D4D4D;
    font-weight: 300;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 24px;
}

.members-card__badge {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--text-inverse);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    padding: 9px 16px;
    margin-bottom: 16px;
}

.members-card__career {
    display: flex;
    flex-direction: column;
}

.members-career__item {
    display: flex;
    color: #4D4D4D;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.6;
}

.members-career__date {
    flex: none;
    width: 96px;
    margin-right: 16px;
}

/* 讓含空格的英文詞組整體換行（如 Aaren「Super star店長」不從空格斷開） */
.members-career__nowrap {
    white-space: nowrap;
}

/* ≥1024px：依 1920 設計稿等比呈現（1px = 100/1920 vw；1920 下即設計值：照片 860x489、內容左緣 x235） */
@media (min-width: 1024px) {
    .members-stories {
        padding: min(29.5313vw, 567px) 0 min(15.7292vw, 302px); /* 567 / 302 */
    }

    .members-list {
        gap: min(8.75vw, 168px); /* 168 */
    }

    .members-card {
        flex-direction: row;
        align-items: flex-start;
        gap: min(6.0938vw, 117px);          /* 117 */
        padding-left: min(12.2396vw, 235px); /* 235 */
    }

    .members-card__photo {
        width: min(44.7917vw, 860px); /* 860 */
        height: auto;
        aspect-ratio: 860 / 489;
        flex: none;
    }

    .members-card__role {
        font-size: min(1.5625vw, 30px);      /* 30 */
        margin-bottom: min(1.0417vw, 20px);  /* 20 */
    }

    .members-card__name {
        font-size: min(2.2917vw, 44px);      /* 44 */
        margin-bottom: min(2.4479vw, 47px);  /* 47 */
    }

    .members-card__badge {
        font-size: min(1.0417vw, 20px);            /* 20 */
        padding: min(0.5729vw, 11px) min(0.9375vw, 18px);     /* 11 18 */
    }

    .members-career__item {
        font-size: min(1.6667vw, 32px);   /* 32 */
        line-height: min(2.5vw, 48px);    /* 48 */
    }

    .members-career__date {
        width: min(7.2396vw, 139px);         /* 139 */
        margin-right: min(1.3542vw, 26px);  /* 26 */
    }
}

/* ======== Story Page (社員故事詳細頁，四頁共用) ======== */

/* 沿用既有 class：.hero / .hero-image / .hero-indicator / .scroll-text / .scroll-line
   本頁新增 class 一律以 story- 前綴，通用命名（勿寫死 Betty 專屬內容於 CSS）。
   桌機（≥1024px）依 1920 設計稿還原：文字欄 max-width 1460、圖片 max-width 1575，皆置中。 */

/* ---- Hero 覆蓋卡片（姓名 / 職稱 / career 履歷） ---- */

/* Story hero 使用完整橫幅比例（覆寫 .hero-image 預設 4/5 裁切） */
.story-hero .hero-image {
    aspect-ratio: 1920 / 1092;
}

/* 行動版：卡片以一般文件流堆疊於圖片下方 */
.story-hero__card {
    max-width: 480px;
    margin: 24px auto 0;
    padding: 0 24px;
}

.story-hero__namebox {
    background-color: var(--color-secondary);
    color: var(--text-inverse);
    padding: 20px 24px 18px;
}

.story-hero__name {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.story-hero__role {
    font-size: var(--font-size-lg);
    font-weight: 400;
    line-height: 1.2;
    margin: 8px 0 0;
}

.story-hero__careerbox {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 24px;
    margin-top: 16px;
}

.story-hero__badge {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--text-inverse);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
    padding: 8px 14px;
    margin: 0 0 16px;
}

.story-hero__career {
    list-style: none;
    margin: 0;
    padding: 0;
}

.story-hero__career-item {
    display: flex;
    color: #4D4D4D;
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.7;
}

.story-hero__career-date {
    flex: none;
    width: 88px;
    margin-right: 12px;
}

/* 桌機：卡片絕對定位覆蓋於 hero 圖片左側（以底部對齊，卡片高度隨履歷筆數自適應） */
@media (min-width: 1024px) {
    .story-hero__card {
        position: absolute;
        left: min(8.85vw, 169.9px);
        bottom: 99px; /* 23px @1920：career 卡底 1218 vs hero 底 1241 */
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .story-hero__namebox {
        padding: min(1.9vw, 36.48px) min(2.6vw, 49.92px) min(1.7vw, 32.64px);
    }

    .story-hero__name {
        font-size: min(2.5vw, 48px);
    }

    .story-hero__role {
        font-size: min(1.56vw, 29.95px);
        margin-top: min(0.4vw, 7.68px);
    }

    .story-hero__careerbox {
        border: none;
        padding: min(1.7vw, 32.64px) min(1.9vw, 36.48px);
        margin-top: min(2.85vw, 54.72px);
    }

    .story-hero__badge {
        font-size: min(0.94vw, 18.05px);
        padding: min(0.5vw, 9.6px) min(0.9vw, 17.28px);
        margin-bottom: min(1vw, 19.2px);
    }

    .story-hero__career-item {
        font-size: min(1.04vw, 19.97px);
        line-height: 1.75;
    }

    .story-hero__career-date {
        width: min(6.7vw, 128.6px);
        margin-right: min(0.8vw, 15.36px);
    }
}

/* ---- 訪談內容（Q&A 交錯圖片） ---- */

.story-interview {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
}

/* 區塊之間的統一垂直間距 */
.story-interview > * + * {
    margin-top: 48px;
}

/* 單一問答塊 */
.story-qa {
    width: 100%;
    max-width: 1180px;
}

.story-qa__label {
    color: var(--color-secondary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 16px;
}

.story-qa__title {
    color: var(--color-secondary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 32px;
}

.story-qa__title > span::before {
    content: "Q.";
}

.story-qa__answer {
    color: #4D4D4D;
    font-size: 14px;
    line-height: 1.9;
}

.story-qa__answer p {
    margin: 0;
}

@media (min-width: 768px) {
    .story-qa__label {
        font-size: 20px;
    }

    .story-qa__title {
        font-size: 24px;
    }

    .story-qa__answer {
        font-size: 16px;
    }
}

/* 圖片（1575x890） */
.story-figure {
    width: 100%;
    max-width: 1180px;
    margin: 0;
    /* <1024px：與上方問答內容拉開距離 */
    padding-top: var(--spacing-lg);
}

@media (min-width: 1024px) {
    .story-figure {
        padding-top: 0;
    }
}

.story-figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* 桌機（≥1024px）：依 1920 設計稿還原 */
@media (min-width: 1024px) {
    .story-interview {
        /* 水平留白沿用基礎 24px 安全內距；在 ≥1920 時由子項 max-width 置中形成
           設計稿的 230px（文字）/172px（圖片）留白 */
        padding-top: 240px;
    }

    .story-interview > * + * {
        margin-top: 108px;
    }

    .story-qa__label {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .story-qa__title {
        font-size: 32px;
        line-height: 1.35;
        margin-bottom: 96px;
    }

    .story-qa__answer {
        font-size: 18px;
        line-height: 2;
    }
}

/* ============================================================
   Mobile (<=1023px) — 700px 設計稿實作；body zoom = 寬/700 等比縮放
   ============================================================ */
/* ======== Mobile <=1023px: 共用元件（header／行動版選單／footer） ========
   量測基準：手機版 w700 設計稿（3x 匯出 ÷3）；zoom 架構下版面恆為 700 CSS px 寬 */
@media (max-width: 1023px) {

    /* ---------- Header（設計稿：白帶高 105、logo 375×54 置中、漢堡 45×36 右緣距 39） ---------- */
    .header {
        box-shadow: none;
    }

    .header .container {
        max-width: none;
        height: 105px;
        padding: 0;
    }

    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 375px;
    }

    .logo img {
        width: 375px;
        max-width: 375px;
    }

    .menu-toggle {
        position: absolute;
        right: 39px;
        top: 50%;
        transform: translateY(-50%);
        gap: 9px;
        padding: 0;
    }

    .menu-toggle span {
        width: 45px;
        height: 6px;
        background: var(--color-gray-dark);
    }

    /* 漢堡 → X：線距 15px（6 高 + 9 gap），位移 15/√2 ≈ 10.5px */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(10.5px, 10.5px);
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(10.5px, -10.5px);
    }

    /* 選單面板是 .header 的子元素：logo 與漢堡鈕要壓在面板之上（flex item 可直接吃 z-index） */
    .logo,
    .menu-toggle {
        z-index: 1010;
    }

    /* ---------- 行動版選單（全螢幕白面板，滑入；高度由 inset 決定，禁 vh） ---------- */
    .nav-menu {
        display: flex;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -100%;
        width: 100%;
        max-width: none;
        height: auto;
        gap: 0;
        /* 首項文字 ink 頂 = 設計 203（含 header 105）→ 203 − 30(item pad) − 4(行高留白) */
        padding: 169px 65px 55px;
        box-shadow: none;
    }

    .nav-link {
        font-size: 28px;
        font-weight: 500;
        line-height: 1.2;
        color: #1a1a1a;
        padding: 30px 0 32px 23px;
    }

    /* 前三項之後有分隔線（社員故事後無） */
    .nav-menu .nav-link:nth-child(-n+3) {
        border-bottom: 2px solid #b3b3b3;
    }

    /* 應徵｜Entry：深灰大鈕（570×108）。markup 為純文字，改以偽元素分段呈現字級 */
    .nav-menu__entry {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 108px;
        margin-top: 6px;
        padding: 0;
        background: var(--color-ink);
        color: var(--text-inverse);
        font-size: 0; /* 隱藏原始文字（仍供螢幕閱讀器朗讀） */
        border-bottom: none;
    }

    .nav-menu__entry::before {
        content: '應徵';
        font-family: "Noto Sans TC", sans-serif;
        font-size: 56px;
        font-style: italic;
        line-height: 1;
        color: var(--text-inverse);
    }

    /* 蓋掉 .nav-link::after 的 hover 底線樣式，改作「| Entry」段 */
    .nav-menu__entry::after {
        /* \00a0 後接空白作為 escape 終止符（E 是十六進位字元，直接相連會被吃進 escape） */
        content: '|\00a0\00a0 Entry';
        font-family: "Noto Sans TC", sans-serif;
        position: relative;
        top: 0;
        bottom: auto;
        left: auto;
        width: auto;
        height: auto;
        background: none;
        margin-left: 42px;
        font-size: 56px;
        font-style: italic;
        line-height: 1;
        color: var(--text-inverse);
    }

    .nav-menu__entry:hover::after {
        width: auto;
    }

    /* 選單底部社群圖示（markup 無此元素，以裝飾性背景呈現；可點擊版本在 footer） */
    .nav-menu__social {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        margin-top: 59px;
        border-bottom: none;
    }

    .nav-menu__social a {
        display: flex;
        align-items: center;
    }

    .nav-menu__social img {
        height: 55px;
        width: auto;
    }

    /* 面板全螢幕不透明，遮罩不需要（其 vh 定位在 zoom 下會錯位） */
    .menu-overlay,
    .menu-overlay.active {
        display: none;
    }

    /* ---------- Footer（設計稿：上緣黑線、logo/社群置中、賣買雙欄、關於我們整寬） ---------- */
    .footer {
        padding: 84px 0 119px;
    }

    .footer .container {
        max-width: none;
        padding: 0;
    }

    .footer-content {
        display: block;
        margin-bottom: 0;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        text-align: center;
    }

    .footer-logo {
        width: 241px;
        max-width: 241px;
        margin-bottom: 0;
    }

    .footer-social {
        gap: 30px;
        margin: 46px 0 0;
    }

    .footer-social a img {
        width: auto;
        height: 42px;
    }

    /* 我想賣／我想買：兩欄各 134 寬、欄距 95、整組置中；關於我們跨整寬（363） */
    .footer-grid {
        display: grid;
        grid-template-columns: 134px 134px;
        gap: 74px 95px;
        justify-content: center;
        align-items: start;
        margin-top: 112px;
    }

    .footer-column--about {
        grid-column: 1 / -1;
    }

    .footer-column h4 {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
        min-height: 0;
        margin-bottom: 16px;
        padding-bottom: 6px;
        border-bottom: 1px solid #000;
    }

    .footer-column ul {
        padding-left: 17px;
    }

    .footer-column li {
        margin-bottom: 20px;
    }

    .footer-column a {
        font-size: 26px;
        font-weight: 300;
        line-height: 1.5;
    }

    /* 關於我們連結：左欄 4 項、右欄 6 項（右欄軌道起點 = 左緣 + 203）
       右欄用 max-content 讓「隱私權保護政策」等 7 字項目單行不折 */
    .footer-links-grid {
        display: grid;
        grid-template-columns: 203px max-content;
        grid-auto-flow: column;
        column-gap: 0;
        padding-left: 7px;
    }

    .footer-links-grid li:nth-child(-n+4) {
        grid-column: 1;
    }

    .footer-links-grid li:nth-child(n+5) {
        grid-column: 2;
    }

    .footer-links-grid li:nth-child(5) {
        grid-row: 1;
    }

    .footer-bottom {
        flex-direction: row;
        gap: 12px;
        margin-top: 148px;
    }

    .geo-logo {
        width: 91px;
    }

    .footer-bottom p {
        font-size: 12px;
        color: var(--text-primary);
    }
}

/* ======== Mobile <=1023px: hero 疊字回到常流（daily-work／evaluation 共用） ======== */
@media (max-width: 1023px) {
    /* 標題（.hero-copy）與副標於 DOM 位在 hero 與 SCROLL 之間（桌機一個疊在圖上、
       一個接在圖下方）；行動版改以 flex order 排回 SCROLL 下方，維持既有版面 */
    main:has(> .hero--daily),
    main:has(> .hero--eval) {
        display: flex;
        flex-direction: column;
    }

    .hero-copy,
    .daily-lead,
    .eval-lead {
        order: 1;
    }

    .daily-category,
    .eval-store,
    .eval-headquarter {
        order: 2;
    }
}

/* ======== Mobile <=1023px: 日常業務 daily-work ======== */
@media (max-width: 1023px) {
    /* ---- Hero（滿版 700x433）---- */
    .hero-image {
        aspect-ratio: 700 / 433;
    }

    /* ---- Scroll Indicator（0803 設計稿：上線 463-521 壓在照片下緣上 → SCROLL → 下線 582-640）----
       以 .hero--daily ~ 提高權重，避免被其他頁行動版的 .hero-indicator 規則覆蓋 */
    .hero--daily ~ .hero-indicator {
        margin: -66px auto 0;
        padding: 0;
        gap: 0;
    }

    .hero--daily ~ .hero-indicator::before {
        height: 58px;
        margin-bottom: 28px;
    }

    .hero--daily ~ .hero-indicator .scroll-text {
        font-size: 18px;
        letter-spacing: 1px;
        line-height: 1;
        margin-bottom: 16px;
    }

    .hero--daily ~ .hero-indicator .scroll-line {
        width: 2px;
        height: 58px;
        margin-top: 0;
    }

    /* ---- Vision（願景標語）---- */
    .daily-vision {
        padding: 105px 25px 0;
    }

    .daily-vision__title {
        font-size: 43px;
        font-weight: 700;
        line-height: 1.56;
    }

    /* ---- Lead（願景副標）---- */
    .daily-lead {
        padding: 46px 25px 0;
    }

    .daily-lead__text {
        max-width: none;
        font-size: 24px;
        font-weight: 400;
        line-height: 2;
    }

    .daily-lead__divider {
        width: 2px;
        height: 130px;
        margin-top: 173px;
    }

    /* ---- Category（0803 設計稿：取消大類標題，五列職務等距 88）---- */
    .daily-category {
        margin-top: 88px;
    }

    /* 紅色分隔線底 → 首列灰底文字卡 35 */
    .daily-category--first {
        margin-top: 35px;
    }

    /* 末段照片底 → footer 頂線 159 */
    .daily-category:last-of-type {
        padding-bottom: 159px;
    }

    .daily-category__header {
        display: none;
    }

    /* ---- Job Block（設計稿 2：灰底文字區在上、滿版橫幅照片在下）----
       DOM 順序是 figure → body，改以 column-reverse 讓文字區排到照片上方 */
    .daily-job {
        max-width: none;
        padding: 0;
        flex-direction: column-reverse;
    }

    .daily-job + .daily-job {
        margin-top: 88px;
    }

    /* 照片：滿版 700×325 */
    .daily-job__figure {
        aspect-ratio: 700 / 325;
    }

    /* 圖上紅框標籤停用，改用文字區內的 .daily-job__title（同桌機） */
    .daily-job__label {
        display: none;
    }

    /* 文字區：灰底、靠左（左留白 120），高 312 */
    .daily-job__body {
        margin-top: 0;
        padding: 50px 60px 30px 120px;
        background-color: #F2F2F2;
        text-align: left;
    }

    /* 職務標題：紅字中文 39 + 英文 25，下方紅底線 */
    .daily-job__title {
        display: flex;
        align-items: baseline;
        gap: 13px;
        width: fit-content;
        margin: 0 0 16px;
        padding-bottom: 10px;
        border-bottom: 4px solid var(--color-secondary);
    }

    .daily-job__title-jp {
        font-size: 39px;
        font-weight: 700;
        line-height: 1;
        color: var(--color-secondary);
    }

    .daily-job__title-en {
        font-size: 25px;
        font-weight: 700;
        line-height: 1;
        color: var(--color-secondary);
    }

    .daily-job__heading {
        font-size: 31px;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 36px;
    }

    .daily-job__desc {
        font-size: 24px;
        font-weight: 400;
        line-height: 2;
    }
}

/* 行動版專用換行點（桌機隱藏） */
@media (min-width: 1024px) {
    .m-br {
        display: none;
    }
}

/* ======== Mobile <=1023px: 人事評價制度 evaluation.html ======== */
/* 設計稿：手機版w700-o_人事評價制度 1.png（3x，700 設計 px 寬），
   body zoom 縮放架構下直接寫設計稿絕對 px 值 */
@media (max-width: 1023px) {
    /* --- Hero（僅作用於本頁：hero--eval 修飾類） --- */
    .hero--eval {
        padding: 0;
    }

    .hero--eval .hero-image {
        height: 426px; /* 設計稿 hero 700x426，object-fit cover 裁切 */
    }

    /* --- Scroll indicator（hero 正下方；設計稿 上線 463-521 / SCROLL / 下線 582-640） --- */
    .hero--eval ~ .hero-indicator {
        margin-top: -82px;
        gap: 14px;
        padding: 14px 0 0;
    }

    .hero--eval ~ .hero-indicator::before {
        margin-bottom: 13px;
    }

    .hero--eval ~ .hero-indicator .scroll-text {
        font-size: 18px;
        letter-spacing: 4px;
    }

    .hero--eval ~ .hero-indicator .scroll-line {
        width: 2px;
        height: 58px;
        margin-top: 2px;
    }

    /* --- Intro（尋找與我們相同頻率的你） --- */
    .eval-intro {
        padding: 115px 24px 0;
    }

    .eval-intro__heading {
        font-size: 44px;
        line-height: 1.3;
        margin: 0 0 48px;
    }

    /* --- Lead（內文） --- */
    .eval-lead {
        padding: 0 24px;
    }

    .eval-lead__text p {
        font-size: 24px;
        line-height: 2;
        margin: 0;
    }

    /* --- 店鋪 section --- */
    .eval-store {
        padding: 0;
    }

    .eval-store .eval-section-header {
        margin-top: 161px;
    }

    /* --- Section header（中文標題 + 紅色英文副標） --- */
    .eval-section-header {
        padding: 0 24px;
        margin-bottom: 64px;
    }

    /* 本部：標題群到紅標籤留白較大（設計稿 191） */
    .eval-headquarter .eval-section-header {
        margin-bottom: 191px;
    }

    .eval-section-header__title {
        font-size: 44px;
    }

    .eval-section-header__subtitle {
        font-size: 20px;
        margin-top: 10px;
    }

    /* --- Track 共通：紅標籤疊左上角，階梯圖靠設計稿座標定位 --- */
    .eval-track__label {
        left: 35px;
        padding: 7px 14px;
        font-size: 24px;
    }

    .eval-track--store {
        padding-top: 22px;
    }

    .eval-track--store .eval-track__img {
        width: 623px;
        margin-left: 45px;
    }

    .eval-track--part {
        margin-top: 50px;
        padding-top: 99px;
    }

    .eval-track--part .eval-track__img {
        width: 619px;
        margin-left: 47px;
    }

    .eval-track--hq {
        padding-top: 21px;
    }

    .eval-track--hq .eval-track__img {
        width: 624px;
        margin-left: 37px;
    }

    /* --- 圖下說明（兼職考核說明） --- */
    .eval-caption {
        padding: 73px 24px 0;
        margin: 0;
        font-size: 20px;
        line-height: 2.05;
    }

    /* --- 本部 section --- */
    .eval-headquarter {
        padding: 174px 0 0;
    }

    /* --- 結語（灰字三行）：下留白讓末行距 footer 頂線 151 --- */
    .eval-closing {
        padding: 60px 24px 151px;
    }

    .eval-closing p {
        margin: 0;
        font-size: 20px;
        line-height: 2.05;
    }
}

/* 行動版專用換行（<br class="m-br">）：桌機隱藏 */
@media (min-width: 1024px) {
    .m-br {
        display: none;
    }
}

/* ======== Mobile <=1023px: 各社員（stories.html） ======== */
@media (max-width: 1023px) {

    /* Section：照片滿版出血，底部留白至 footer */
    .members-stories {
        padding: 0 0 156px;
    }

    .members-list {
        gap: 64px;
    }

    .members-card {
        position: relative;
        gap: 0;
    }

    /* 照片：滿版 700 寬、5:3（設計稿 700x420） */
    .members-card__photo {
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 3;
    }

    /* 箭頭膠囊＝卡片連結（照片連結行動版停用）：位於照片右下方 17px 處 */
    .members-card__photo-link {
        pointer-events: none;
    }

    .members-card__arrow {
        display: block;
        position: absolute;
        top: 437px; /* 照片高 420 + 17 */
        right: 52px;
        width: 124px;
        height: 46px;
        background-color: var(--color-secondary);
        /* 燕尾式箭頭：細長桿＋實心箭頭（下緣倒勾延伸到桿下方） */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 22'%3E%3Cpath d='M0 10h62v2H0z' fill='%23fff'/%3E%3Cpath d='M52 0 80 11 54 22 61 11Z' fill='%23fff'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 80px 22px;
        border-radius: 23px;
    }

    /* 紅色標題盒：疊在照片左下（上緣壓照片 57px、下緣凸出 71px） */
    .members-card__title {
        position: relative;
        z-index: 1;
        width: fit-content;
        max-width: calc(100% - 68px);
        margin: -57px 34px 0;
        background-color: var(--color-secondary);
        padding: 25px 36px;
    }

    .members-card__role {
        color: var(--text-inverse);
        font-size: 26px;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 12px;
    }

    .members-card__name {
        color: var(--text-inverse);
        font-size: 42px;
        font-weight: 500;
        line-height: 1.05;
        margin-bottom: 0;
    }

    /* career 徽章 */
    .members-card__badge {
        font-size: 28px;
        font-weight: 500;
        padding: 10px 21px;
        margin: 53px 0 24px 52px;
    }

    /* 經歷：兩欄直向排列（左欄排滿再換右欄）
       gap 36：讓「晉升為資深專員」（date 112＋7字168=280）單行不折 */
    .members-card__career {
        display: block;
        columns: 2;
        column-gap: 36px;
        margin: 0 52px;
    }

    /* 覆寫 base flex 為常流：event 換行時回到項目左緣（對齊日期），如設計稿 */
    .members-career__item {
        display: block;
        font-size: 24px;
        font-weight: 400;
        line-height: 40px;
        break-inside: avoid;
    }

    .members-career__date {
        display: inline-block;
        vertical-align: top;
        width: 100px;
        margin-right: 12px;
    }
}

/* ======== Mobile <=1023px: 職缺介紹 job-intro ======== */
@media (max-width: 1023px) {
    /* 版面：設計稿 700px 寬，左右留白 50px */
    .job-benefits .container,
    .job-detail .container {
        padding: 0 50px;
    }

    /* ----------------------------------------
       全員工享有福利
       ---------------------------------------- */
    .job-benefits {
        padding: 120px 0 0;
    }

    .job-benefits .section-title {
        font-size: 30px;
        line-height: 1.4;
        margin-bottom: 0;
    }

    .job-benefits__grid {
        gap: 97px;
        margin-top: 62px;
    }

    /* 新版：icon 靠左、標題＋說明置中於右側，整組水平置中（無底線）。
       固定寬 428（於 600 內容區置中＝icon 左緣 136，對齊設計稿三列 icon） */
    .job-benefit {
        display: grid;
        grid-template-columns: 150px 1fr;
        column-gap: 44px;
        align-items: center;
        width: 428px;
        max-width: 100%;
        text-align: center;
    }

    .job-benefit__icon {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 150px;
        height: 150px;
        margin: 0;
    }

    .job-benefit__title {
        grid-column: 2;
        grid-row: 1;
        font-size: 30px;
        font-weight: 700;
        padding-bottom: 27px;
        margin-bottom: 9px;
    }

    /* 標題與說明間紅色橫線：寬度同 desc 欄（滿欄），置中於 title、desc 之間 */
    .job-benefit__title::after {
        width: 100%;
        height: 4px;
    }

    .job-benefit__desc {
        grid-column: 2;
        grid-row: 2;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--color-ink);
    }

    /* ----------------------------------------
       職缺明細卡片 + 頁籤
       ---------------------------------------- */
    /* 下留白依設計稿：卡片紅框底距 footer 頂線 160 */
    .job-detail {
        padding: 146px 0 158px;
    }

    .job-detail__card {
        max-width: none;
    }

    /* 頁籤：選中較高、未選中較矮，底端貼齊卡片白色內容區頂緣 */
    .job-tabs {
        align-items: flex-end;
        gap: 0;
        padding: 0;
        margin-bottom: 0;
    }

    .job-tabs__tab {
        flex: 1 1 50%;
        height: 55px;
        padding: 0 8px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        border-radius: 20px 20px 0 0;
    }

    .job-tabs__tab[aria-selected="true"] {
        height: 72px;
        padding-top: 0;
    }

    /* 白色內容區：紅框僅左右下（頂部由頁籤補滿紅色） */
    .job-panels {
        border-width: 0 16px 16px;
        border-radius: 0 0 20px 20px;
        padding: 60px 36px 50px;
    }

    /* 明細列：行動版無分隔線，僅灰色標題條 + 置中文字 */
    .job-table__row {
        border-bottom: none;
    }

    .job-table__row:first-child {
        border-top: none;
    }

    .job-table__term {
        min-height: 97px;
        padding: 10px 16px;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.3;
    }

    .job-table__desc {
        align-items: center;
        padding: 42px 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
        text-align: center;
        color: var(--color-ink);
    }

    /* ○ 提供標記 */
    .job-table__mark {
        width: 34px;
        height: 34px;
        border-width: 3px;
        margin: 10px 0;
    }
}

/* ======== Mobile <=1023px: 社員故事（betty/sam/eating/aaren 四頁共用 story- 模板） ======== */
/* 依 手機版w700_社員故事 設計稿（700 設計 px，body zoom 縮放）量測還原 */
@media (max-width: 1023px) {

    /* ---- Hero 照片：全幅、比原圖(1920x1092)略高的裁切 700x427 ---- */
    .story-hero .hero-image {
        aspect-ratio: 700 / 427;
    }

    /* ---- 覆蓋卡片：貼齊照片左下（左 52、距照片底 38） ----
       單欄 grid：欄寬取兩個框的最大內容寬，姓名框與 career 框因此等寬 */
    .story-hero__card {
        position: absolute;
        left: 52px;
        bottom: 38px;
        z-index: 2;
        display: grid;
        width: fit-content;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* 紅色姓名框（與 career 框同寬，由 grid 欄寬決定） */
    .story-hero__namebox {
        width: auto;
        padding: 12px 20px;
    }

    .story-hero__name {
        font-size: 24px;
        font-weight: 500;
        line-height: 1.2;
    }

    .story-hero__role {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        margin-top: 4px;
    }

    /* 白色 career 框（緊貼姓名框下緣、與姓名框同寬） */
    .story-hero__careerbox {
        width: auto;
        border: none;
        margin-top: 0;
        padding: 10px 14px 13px 12px;
    }

    .story-hero__badge {
        font-size: 12px;
        font-weight: 500;
        padding: 4px 8px;
        margin-bottom: 3px;
    }

    .story-hero__career-item {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.35;
    }

    .story-hero__career-date {
        width: 54px;
        margin-right: 12px;
    }

    /* ---- SCROLL 指示：線 / SCROLL / 線，上段紅線壓在照片下緣上（高 58，突出 67） ---- */
    .hero-indicator {
        margin: -67px auto 0;
        padding: 0;
        gap: 0;
    }

    .hero-indicator::before {
        content: "";
        width: 2px;
        height: 58px;
        background-color: var(--color-secondary);
        margin-bottom: 28px;
    }

    .scroll-text {
        font-size: 16px;
        letter-spacing: 3px;
        line-height: 1;
    }

    .scroll-line {
        width: 2px;
        height: 58px;
        margin-top: 17px;
    }

    /* ---- 訪談 Q&A ---- */
    .story-interview {
        /* 圖片左右留白 52；文字再內縮 42（合計 94）
           下留白讓 TOP 落在設計稿位置（末行距 footer 線 212） */
        padding: 84px 52px 204px;
    }

    /* 間距改由相鄰規則個別控制 */
    .story-interview > * + * {
        margin-top: 0;
    }

    .story-qa + .story-figure {
        margin-top: 100px;
    }

    .story-figure + .story-qa {
        margin-top: 24px;
    }

    .story-qa {
        max-width: none;
        padding: 0 42px;
    }

    .story-qa__label {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .story-qa__title {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 32px;
    }

    .story-qa__answer {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.6;
    }

    /* ---- 圖片：596x351 裁切（素材 1575x890 較寬，object-fit 置中裁切） ---- */
    .story-figure {
        max-width: none;
        padding-top: 0;
    }

    .story-figure img {
        aspect-ratio: 596 / 351;
        object-fit: cover;
    }
}

/* ======== Mobile <=1023px: 首頁 index.html ======== */
/* 行動版換行點（<br class="m-br">）：桌機隱藏 */
@media (min-width: 1024px) {
    .m-br {
        display: none;
    }
}

@media (max-width: 1023px) {
    /* ----------------------------------------
       Hero（設計稿：700x424，無箭頭/指示點）
       ---------------------------------------- */
    .hero {
        padding: 0;
    }

    .hero-image {
        aspect-ratio: 700 / 424;
    }

    .hero-arrow,
    .hero-dots {
        display: none;
    }

    /* ----------------------------------------
       Scroll Indicator（SCROLL 18px + 線高 53）
       ---------------------------------------- */
    .hero-indicator {
        padding: 14px 0 0;
        gap: 20px;
    }

    .scroll-text {
        font-size: 18px;
        letter-spacing: 5px;
    }

    .scroll-line {
        width: 2px;
        height: 53px;
    }

    /* ----------------------------------------
       Recruitment Highlight（2030年 百店規模）
       ---------------------------------------- */
    .recruitment-highlight {
        padding: 84px 0 0;
        margin: 0;
    }

    .highlight-box {
        width: 515px;
        max-width: calc(100% - 48px);
        padding: 17px 0;
        border-width: 3px;
        margin-bottom: 0;
    }

    .highlight-title {
        font-size: 43px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 2px;
    }

    .highlight-content {
        max-width: none;
    }

    .highlight-heading {
        font-size: 43px;
        font-weight: 700;
        line-height: 66px;
        margin: 60px 0 0;
    }

    .highlight-divider {
        width: 2px;
        height: 135px;
        margin: 68px auto 0;
    }

    /* ----------------------------------------
       About Section（絕對定位拼貼，設計高 1620）
       sign: x197 y1344 438x262
       shoes: x34 y1376 310x522
       group: x279 y1860 352x196
       ---------------------------------------- */
    .about-section {
        padding: 0;
    }

    .about-collage {
        position: relative;
        display: block;
        padding: 0;
        margin: 83px auto 0;
        max-width: none;
        height: 1620px;
        overflow: hidden;
    }

    .about-collage__image {
        position: absolute;
        margin: 0;
        overflow: hidden;
    }

    .about-collage__image img {
        width: 100%;
        height: calc(100% * var(--plx-scale, 1));
        object-fit: cover;
        will-change: transform;
    }

    .about-collage__image--shoes {
        left: 34px;
        top: 32px;
        width: 310px;
        height: 522px;
        max-width: none;
        margin: 0;
    }

    .about-collage__image--sign {
        left: 276px;
        top: 0;
        width: 390px;
        height: 220px;
    }

    .about-collage__image--group {
        left: 316px;
        top: 516px;
        width: 350px;
        height: 190px;
    }

    .about-collage__heading {
        position: absolute;
        left: 0;
        right: 0;
        top: 776px;
        text-align: center;
    }

    .about-collage__title {
        font-size: 44px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .about-collage__title-underline {
        border-bottom-width: 4px;
        padding-bottom: 6px;
    }

    .about-collage__text {
        position: absolute;
        left: 0;
        right: 0;
        top: 903px;
    }

    .about-collage__group {
        margin-bottom: 45px;
    }

    .about-collage__group:last-child {
        margin-bottom: 0;
    }

    .about-collage__paragraph {
        font-size: 23px;
        font-weight: 400;
        line-height: 48px;
        color: #4D4D4D;
    }

    .about-collage__paragraph--lead {
        font-size: 23px;
        font-weight: 400;
        margin-bottom: 0;
    }

    /* ----------------------------------------
       深入了解（標題區）
       ---------------------------------------- */
    .deep-dive-title {
        padding: 0 0 60px;
    }

    .deep-dive-title .highlight-line {
        width: 2px;
        height: 125px;
        margin: 95px auto 0;
    }

    .deep-dive-title .section-title {
        font-size: 44px;
        line-height: 1.4;
        margin: 26px 0 0;
        color: var(--text-primary);
    }

    .deep-dive-title .section-subtitle {
        font-size: 20px;
        font-weight: 700;
        margin: 8px 0 0;
    }

    /* ----------------------------------------
       深入了解（三張直落大圖，全出血）
       img1: 700x806、img2/3: 700x660，間距 22-26
       ---------------------------------------- */
    .deep-dive-images {
        padding: 0;
    }

    .image-single {
        aspect-ratio: 700 / 829;
    }

    .images-grid-two {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 0;
    }

    /* 兩張手機直式圖：人事評價 684、職缺 688 */
    .image-item:nth-child(1) {
        aspect-ratio: 700 / 684;
    }

    .image-item:nth-child(2) {
        aspect-ratio: 700 / 688;
    }

    /* 白底紅框標籤：貼右 30、距頂 40、框線 3 */
    .image-label,
    .image-single .image-label {
        top: 40px;
        right: 30px;
        left: auto;
        padding: 12px 28px;
        gap: 12px;
        border-width: 3px;
        line-height: 1.2;
    }

    .image-label__zh {
        font-size: 32px;
        font-weight: 700;
    }

    .image-label__en {
        font-size: 22px;
        font-weight: 700;
    }

    /* 紅色 view more 膠囊：左 28、距底 40、195x50 */
    .image-view-more {
        left: 28px;
        right: auto;
        bottom: 40px;
        width: 195px;
        height: 50px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    /* ----------------------------------------
       社員故事（灰底、單卡橫向滑動）
       卡圖 508x570、文字 28、鈕 300x78
       ---------------------------------------- */
    .staff-stories-section {
        padding: 158px 0 160px;
        margin-top: 0;
    }

    .staff-stories-section .highlight-line {
        width: 2px;
        height: 122px;
        margin: 0 auto;
    }

    .staff-stories-section .section-title {
        font-size: 44px;
        line-height: 1.4;
        margin: 30px 0 0;
    }

    .staff-stories-section .section-subtitle {
        font-size: 20px;
        font-weight: 700;
        margin: 8px 0 0;
    }

    /* 卡片群改為水平滑動輪播（scroll-snap）；gap 100 讓鄰卡移出視窗、單卡無 peek（設計稿） */
    .staff-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden; /* 只允許水平捲動，避免觸控板上下捲 */
        scroll-snap-type: x mandatory;
        gap: 100px;
        margin: 55px -24px 0;
        padding: 0 96px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .staff-grid::-webkit-scrollbar {
        display: none;
    }

    .staff-grid .staff-card {
        flex: 0 0 508px;
        width: 508px;
        scroll-snap-align: center;
    }

    .staff-grid .card-image {
        aspect-ratio: 508 / 570;
    }

    .staff-grid .card-content {
        padding: 26px 0 0;
        text-align: center;
    }

    .staff-grid .card-title {
        font-size: 28px;
        font-weight: 400;
        line-height: 1.6;
        color: #4D4D4D;
        margin-bottom: 0;
    }

    .staff-grid .card-role {
        font-size: 28px;
        font-weight: 400;
        line-height: 1.6;
        color: #4D4D4D;
    }

    .section-cta {
        margin-top: 60px;
    }

    .staff-stories-section .btn-secondary {
        width: 195px;
        height: 50px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: 500;
        line-height: 1;
        border-radius: 39px;
    }
}


/* ======== 首頁社員故事輪播箭頭（僅行動版顯示） ======== */
.staff-nav {
    display: none;
}

@media (max-width: 1023px) {
    .staff-carousel {
        position: relative;
    }

    /* 紅色圓形箭頭鈕 46px：設計稿距視窗左右 26（container 內縮 24 → 偏移 2） */
    .staff-nav {
        position: absolute;
        top: 317px; /* grid margin-top 55 + 照片 570/2 - 鈕半徑 23 */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--color-secondary);
        color: #fff;
        cursor: pointer;
        z-index: 2;
    }

    .staff-nav--prev {
        left: 2px;
    }

    .staff-nav--next {
        right: 2px;
    }

    .staff-nav svg {
        width: 100%;
        height: 100%;
    }
}

/* ======== 行動選單社群連結／stories 箭頭連結（桌機隱藏） ======== */
@media (min-width: 1024px) {
    .members-card__arrow,
    .nav-menu__social {
        display: none;
    }
}

/* ========================================
   >1920px：內容鎖 1920 置中，僅 header 延伸
   ======================================== */
@media (min-width: 1921px) {
    main,
    .footer {
        max-width: 1920px;
        margin-inline: auto;
    }
}

/* ======== Desktop >=1024px：全站桌機縮放單位 --u ========
   設計稿一律以 1920 為基準；桌機尺寸寫成「設計值 x var(--u)」，
   各斷點只調整 --u，避免 1024–1919 間純等比放大導致元件過大。
   （hero 滿版釘選／出血拼貼等綁定視窗的幾何仍沿用 vw） */
@media (min-width: 1024px) { :root { --u: 0.55px; } }
@media (min-width: 1280px) { :root { --u: 0.65px; } }
@media (min-width: 1536px) { :root { --u: 0.75px; } }
@media (min-width: 1920px) { :root { --u: 1px; } }

/* ======== Desktop >=1024px redesign: 共用 Footer ======== */
@media (min-width: 1024px) {
    /* ---- Footer 外框：上緣 1px 黑線、白底、上下內距 ---- */
    .footer {
        background: var(--bg-primary);
        border-top: 1px solid var(--color-primary);
        padding: min(5.7292vw, 110px) 0 min(2.4479vw, 47px);
    }

    /* 內容容器：左 294 / 右 271（設計稿 1920 基準） */
    .footer .container {
        width: 100%;
        max-width: none;
        padding-left: min(15.3125vw, 294px);
        padding-right: min(14.1146vw, 271px);
    }

    /* 左 brand、右三欄連結：兩端對齊 */
    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: min(2.6042vw, 50px);
        margin-bottom: 0;
    }

    /* ---- 左側：logo + 社群圖示 ---- */
    .footer-brand {
        display: block;
        flex: 0 0 auto;
    }

    .footer-logo {
        display: block;
        width: min(17.6042vw, 338px);
        max-width: min(17.6042vw, 338px);
        height: auto;
        margin: 0;
    }

    .footer-social {
        display: flex;
        align-items: center;
        gap: min(2.2396vw, 43px);
        margin: min(4.4792vw, 86px) 0 0 min(2.2396vw, 43px);
    }

    .footer-social a {
        display: inline-block;
        line-height: 0;
        transition: var(--transition-base);
    }

    .footer-social a:hover {
        transform: translateY(-2px);
    }

    .footer-social a img {
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* 圖示依設計稿實際墨寬：IG 58 / FB 32 / LINE 60 */
    .footer-social a:nth-child(1) img {
        width: min(3.0208vw, 58px);
    }

    .footer-social a:nth-child(2) img {
        width: min(1.6667vw, 32px);
    }

    .footer-social a:nth-child(3) img {
        width: min(3.125vw, 60px);
    }

    /* ---- 右側三欄（我想賣／我想買／關於我們） ---- */
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        column-gap: min(4.4792vw, 86px);
        gap: min(4.4792vw, 86px);
        align-items: start;
        margin-top: min(0.7813vw, 15px);
    }

    .footer-column {
        display: flex;
        flex-direction: column;
        min-width: min(4.5313vw, 87px);
    }

    .footer-column--about {
        min-width: min(17.9167vw, 344px);
    }

    /* 欄標題：24px 粗體 + 下方灰色分隔線 */
    .footer-column h4 {
        font-size: min(1.4583vw, 28px);
        font-weight: 700;
        line-height: 1;
        color: var(--text-primary);
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: min(0.8854vw, 17px);
        border-bottom: 1px solid #999999;
    }

    .footer-column ul {
        margin-top: min(1.25vw, 24px);
        flex: none;
    }

    /* 連結 18px、行距節距 35px（18 + 17） */
    .footer-column li {
        margin-bottom: min(0.8854vw, 17px);
    }

    .footer-column li:last-child {
        margin-bottom: 0;
    }

    .footer-column a {
        font-size: min(1.0417vw, 20px);
        font-weight: 300;
        line-height: 1;
        color: var(--text-primary);
        transition: var(--transition-base);
    }

    .footer-column a:hover {
        color: var(--text-accent);
    }

    /* 關於我們：前 4 項第一行清單、後 6 項第二行清單 */
    .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        grid-auto-flow: column;
        column-gap: min(3.2292vw, 62px);
    }

    .footer-links-grid li:nth-child(-n+4) {
        grid-column: 1;
    }

    .footer-links-grid li:nth-child(n+5) {
        grid-column: 2;
    }

    .footer-links-grid li:nth-child(5) {
        grid-row: 1;
    }

    /* 第一行清單第 4 項、第二行清單第 6 項為各軌道最後一項 */
    .footer-links-grid li:nth-child(4),
    .footer-links-grid li:nth-child(10) {
        margin-bottom: 0;
    }

    /* ---- 最底部：GEO HOLDINGS 置中列 ---- */
    .footer-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: min(0.9375vw, 18px);
        margin-top: min(7.2396vw, 139px);
    }

    .geo-logo {
        width: min(6.6146vw, 127px);
        height: auto;
    }

    .footer-bottom p {
        font-size: min(0.7813vw, 15px);
        line-height: 1;
        color: var(--text-primary);
    }
}

/* ======== Desktop >=1024px redesign: index.html（首頁） ======== */
/* 依據設計稿 Desktop-o_TOP 1.png（1920 設計 px，量測值 ÷3）重製
   Hero／SCROLL 指示／紅框標語／關於我們拼貼／深入了解卡片／社員故事輪播 */
@media (min-width: 1024px) {

    /* ---------- Hero ---------- */
    /* 設計稿：hero 圖 y142-1237.7，全幅 1920x1095 */
    .hero-image {
        aspect-ratio: 1920 / 1095;
    }

    /* ---------- Hero 滿版釘選＋捲動淡出（js initHeroPin，仿 fastretailing/careers） ---------- */
    /* 區塊高度 = 滿版一屏 + 100vh 釘選捲動距離；slider sticky 原地固定，
       捲動後段由 JS 淡出。sticky 在 overflow:hidden 祖先內不作用，需改 visible */
    .hero:has(.hero-slider) {
        overflow: visible;
        height: calc(200vh - min(5.2083vw, 100px));
    }

    .hero-slider {
        position: sticky;
        top: min(5.2083vw, 100px);
        height: calc(100vh - min(5.2083vw, 100px));
        transition: top 0.3s ease, height 0.3s ease; /* 跟隨 header 收縮 */
    }

    /* header 收縮時同步貼齊，避免 header 下緣露出空隙 */
    .header.is-scrolled ~ main .hero-slider {
        top: min(3.6458vw, 70px);
        height: calc(100vh - min(3.6458vw, 70px));
    }

    .hero-slides,
    .hero-slide {
        height: 100%;
    }

    /* 滿版高度由視窗決定，圖片 cover 置中 */
    .hero-slide .hero-image {
        height: 100%;
        aspect-ratio: auto;
    }

    /* 設計稿無左右箭頭與指示點 */
    .hero-arrow,
    .hero-dots {
        display: none;
    }

    /* ---------- SCROLL 指示 ---------- */
    /* 設計稿：紅線(103) 疊在 hero 下緣 y1134-1237 → SCROLL 字 y1258-1276 → 紅線(76) y1300-1376 */
    .hero-indicator {
        /* hero 淡出約 50% 時 SCROLL 字樣進入視窗底。
           SCROLL 字頂 = 收縮後header高 + hero高(2vh−header高) + margin + 紅線與間距，
           令其進場捲動量 = fadeStart(0.5vh) + 0.5×fade區間(0.45vh)
           → margin = −0.275vh − (header收縮差 + 紅線 + 間距) ≈ −27.5vh − 4.64vw（1920 內精準） */
        margin-top: calc(-36.5vh - 4.64vw);
        padding: 0;
        gap: 0;
        /* 疊在淡出中的 hero 之上，紅色指標清晰可見 */
        position: relative;
        z-index: 1;
    }

    .hero-indicator::before {
        content: '';
        display: block;
        width: 2px;
        height: min(5.3646vw, 103px);
        background-color: var(--color-secondary);
    }

    .scroll-text {
        margin-top: min(0.8333vw, 16px);
        font-size: min(0.9375vw, 18px);
        font-weight: 400;
        letter-spacing: 0.05em;
        line-height: 1;
        color: var(--color-secondary);
    }

    .scroll-line {
        margin-top: min(1.0938vw, 21px);
        width: 2px;
        height: min(3.9583vw, 76px);
    }

    /* ---------- 紅框標語區 ---------- */
    /* 0729 設計稿已移除本區（標語移入 hero 疊層），桌機隱藏、行動版維持原樣 */
    .recruitment-highlight {
        display: none;
    }

    /* ---------- 關於我們理想中的夥伴（拼貼） ---------- */
    /* 原設計稿留白 1220 是靜態版面的值；hero 改滿版釘選淡出後，
       縮短留白讓 about 區在 hero 淡出後隨即進場。
       背景改透明：進場時只有內容上移（仿參考站），淡出後的白色頁面即為背景；
       z-index 疊在淡出中的 hero 之上，內容不被半透明圖片洗淡 */
    .about-section {
        padding: min(4.1667vw, 80px) 0 0;
        background: transparent;
        position: relative;
        z-index: 1;
    }

    .about-collage {
        position: relative;
        display: block;
        padding: 0;
        height: min(85.6771vw, 1645px);
        aspect-ratio: auto;
        overflow: hidden;
    }

    .about-collage__image,
    .about-collage__heading,
    .about-collage__text {
        position: absolute;
        margin: 0;
    }

    .about-collage__image img {
        width: 100%;
        height: calc(100% * var(--plx-scale, 1));
        object-fit: cover;
        will-change: transform;
    }

    /* 店招圖：右上（x1138.6, w787.6, h427.8，右緣出血由 overflow 裁切） */
    .about-collage__image--sign {
        left: min(59.3021vw, 1138.6px);
        top: 0;
        width: min(41.0208vw, 787.6px);
        height: min(22.2813vw, 427.8px);
    }

    /* 直式球鞋圖：貼左（y2879 → 相對 282，567x948） */
    .about-collage__image--shoes {
        position: absolute;
        left: 0;
        top: min(14.6875vw, 282px);
        width: min(29.5313vw, 567px);
        height: min(49.375vw, 948px);
        max-width: none;
    }

    /* 合照：右下（y3807 → 相對 1210，684x435，貼右緣） */
    .about-collage__image--group {
        left: auto;
        right: 0;
        top: min(63.0208vw, 1210px);
        width: min(35.625vw, 684px);
        height: min(22.6563vw, 435px);
    }

    /* 標題：置中（ink y3065-3116，字高 ~52） */
    .about-collage__heading {
        left: 50%;
        top: min(23.9583vw, 460px);
        width: max-content;
        transform: translateX(-50%);
    }

    .about-collage__title {
        font-size: min(2.8646vw, 55px);
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    .about-collage__title-underline {
        border-bottom-width: min(0.2083vw, 4px);
        padding-bottom: min(0.4167vw, 8px);
    }

    /* 理念文字：置中（首行 ink y3209 → 相對 612；行距 48；群組間距 +46） */
    /* 置中改用 left:0/right:0 + auto margin，不佔用 transform：
       否則 .ms-fade.is-visible 的 translateY(0) 會蓋掉 translateX(-50%) 使整塊右移 */
    .about-collage__text {
        left: 0;
        right: 0;
        top: min(31.1979vw, 599px);
        width: max-content;
        margin-inline: auto;
        text-align: center;
    }

    .about-collage__group {
        margin-bottom: 0;
    }

    .about-collage__group + .about-collage__group {
        margin-top: min(2.3958vw, 46px);
    }

    .about-collage__paragraph {
        font-size: min(1.1979vw, 23px);
        font-weight: 400;
        line-height: min(2.5vw, 48px);
    }

    .about-collage__paragraph--lead {
        font-size: min(1.25vw, 24px);
        font-weight: 500;
        line-height: min(2.5vw, 48px);
        margin-bottom: 0;
    }

    /* ---------- 深入了解（標題區） ---------- */
    /* 設計稿：直線 180 @y4312；「深入了解」ink y4536-4591；about 2nd STREET y4618-4640；圖 y4789 */
    .deep-dive-title {
        width: 100%;
        margin: 0 auto;
        padding: calc(70 * var(--u)) 0 calc(143 * var(--u));
    }

    .deep-dive-title .highlight-line {
        width: 2px;
        height: calc(180 * var(--u));
        margin: 0 auto;
    }

    .deep-dive-title .section-title {
        font-size: calc(60 * var(--u));
        line-height: 1.2;
        color: var(--color-ink);
        margin: calc(36 * var(--u)) 0 0;
    }

    .deep-dive-title .section-subtitle {
        font-size: calc(27 * var(--u));
        font-weight: 700;
        color: var(--color-secondary);
        line-height: 1.2;
        margin: calc(13 * var(--u)) 0 0;
    }

    /* ---------- 深入了解（三張 view more 卡片） ---------- */
    /* 設計稿：大圖 1920x639；下排兩張 952x640、欄距 16、列距 20；下方留白 21 接灰底 */
    .deep-dive-images {
        width: 100%;
        margin: 0 auto;
        padding: 0 0 calc(21 * var(--u));
    }

    .image-single {
        aspect-ratio: 1920 / 639;
    }

    .images-grid-two {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(16 * var(--u));
        margin-top: calc(20 * var(--u));
    }

    .image-item {
        aspect-ratio: 952 / 640;
    }

    /* 紅框白底標籤：距圖頂 50、距右 41，高 92 */
    .image-label {
        top: calc(50 * var(--u));
        right: calc(41 * var(--u));
        left: auto;
        height: calc(92 * var(--u));
        padding: 0 calc(32 * var(--u));
        gap: calc(20 * var(--u));
        align-items: baseline;
        border-width: calc(4 * var(--u));
    }

    .image-single .image-label {
        right: calc(41 * var(--u));
    }

    .image-label__zh {
        font-size: calc(46 * var(--u));
        font-weight: 700;
        line-height: calc(84 * var(--u));
    }

    .image-label__en {
        font-size: calc(31 * var(--u));
        font-weight: 700;
        line-height: 1;
    }

    /* 第二排（兩張並列）標籤整體較小：字級、高度、內距、間距等比縮；
       對齊沿用共用 baseline（與第一排日常業務一致），行高等比縮 84×76/92≈69 */
    .image-item .image-label {
        height: calc(76 * var(--u));
        padding: 0 calc(26 * var(--u));
        gap: calc(16 * var(--u));
    }

    .image-item .image-label__zh {
        font-size: calc(38 * var(--u));
        line-height: calc(69 * var(--u));
    }

    .image-item .image-label__en {
        font-size: calc(26 * var(--u));
    }

    /* 紅色 view more 膠囊鈕：距圖左 41、距圖底 41，225x58 */
    .image-view-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        left: calc(41 * var(--u));
        bottom: calc(41 * var(--u));
        width: calc(225 * var(--u));
        height: calc(58 * var(--u));
        padding: 0;
        font-size: calc(34 * var(--u));
        font-weight: 500;
        border-radius: calc(38.5 * var(--u));
    }

    /* ---------- 社員故事 ---------- */
    /* 設計稿：灰底 #F2F2F2 y6109-8200；直線 180 @y6477；標題 ink y6709-6765；
       卡片 y6972 起、寬 503 高 561、欄距 42、群組 1590 置中；圓形箭頭 60 於卡片圖垂直置中 */
    .staff-stories-section {
        padding: calc(368 * var(--u)) 0 calc(41.5 * var(--u));
        background-color: #F2F2F2;
    }

    .staff-stories-section .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .staff-stories-section .highlight-line {
        width: 2px;
        height: calc(180 * var(--u));
        margin: 0 auto;
    }

    .staff-stories-section .section-title {
        font-size: calc(60 * var(--u));
        line-height: 1.2;
        color: var(--color-ink);
        margin: calc(44 * var(--u)) 0 0;
    }

    .staff-stories-section .section-subtitle {
        font-size: calc(27 * var(--u));
        font-weight: 700;
        color: var(--color-secondary);
        line-height: 1.2;
        margin: calc(14 * var(--u)) 0 0;
    }

    .staff-carousel {
        position: relative;
        width: calc(1590 * var(--u));
        margin: calc(150 * var(--u)) auto 0;
    }

    /* 4 張卡片顯示 3 張：水平捲動 + snap，箭頭以 JS scrollBy 切換 */
    .staff-grid {
        display: flex;
        gap: calc(42 * var(--u));
        max-width: none;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden; /* 只允許水平捲動，避免觸控板上下捲 */
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .staff-grid::-webkit-scrollbar {
        display: none;
    }

    .staff-grid .staff-card {
        flex: 0 0 calc((100% - 2 * calc(42 * var(--u))) / 3);
        scroll-snap-align: center;
    }

    .staff-grid .card-image {
        aspect-ratio: 503 / 561;
    }

    .staff-grid .card-content {
        padding: calc(41 * var(--u)) 0 0;
    }

    .staff-grid .card-title {
        font-size: calc(30 * var(--u));
        font-weight: 400;
        line-height: calc(45 * var(--u));
        color: var(--color-ink);
        margin: 0;
    }

    .staff-grid .card-role {
        font-size: calc(30 * var(--u));
        font-weight: 400;
        line-height: calc(45 * var(--u));
        color: var(--color-ink);
        margin: 0;
    }

    /* 紅色圓形左右箭頭鈕（設計稿 60px，位於卡片群組外側 41px、卡片圖垂直置中） */
    .staff-nav {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: calc(calc(561 * var(--u)) / 2);
        transform: translateY(-50%);
        width: calc(60 * var(--u));
        height: calc(60 * var(--u));
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--color-secondary);
        color: #FFFFFF;
        cursor: pointer;
        z-index: 2;
        transition: opacity 0.3s ease;
    }

    .staff-nav:hover {
        opacity: 0.8;
    }

    .staff-nav--prev {
        left: calc(-1 * (101 * var(--u)));
    }

    .staff-nav--next {
        right: calc(-1 * (101 * var(--u)));
    }

    .staff-nav svg {
        width: 100%;
        height: 100%;
    }

    /* view more 鈕：225x58 置中（與 image-view-more 一致） */
    .staff-stories-section .section-cta {
        margin-top: calc(150 * var(--u));
    }

    .staff-stories-section .btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(225 * var(--u));
        height: calc(58 * var(--u));
        padding: 0;
        font-size: calc(34 * var(--u));
        font-weight: 500;
        line-height: 1;
        border-radius: calc(39 * var(--u));
    }

    /* TOP 回頂連結：view more 下 ~230、灰 #999、上箭頭＋TOP 字置中 */
    .back-to-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(8 * var(--u));
        width: fit-content;
        margin: calc(230.5 * var(--u)) auto 0;
        color: #999999;
        font-size: calc(18 * var(--u));
        line-height: 1;
        letter-spacing: 0.05em;
        transition: color var(--transition-base);
    }

    .back-to-top:hover {
        color: var(--color-secondary);
    }

    .back-to-top__arrow {
        width: calc(18 * var(--u));
        height: calc(18 * var(--u));
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(-45deg);
    }
}

/* ======== Desktop >=1024px redesign: 日常業務 daily-work ======== */
/* 設計稿：Desktop_日常業務 1.png（3840 寬 2x，÷2 = 1920 設計 px）；
   尺寸採 min(vw, 設計px) 流式縮放（1px = 100/1920 vw），1440 檢視即為設計值 × 0.75 */
@media (min-width: 1024px) {

    /* ----------------------------------------
       Hero 捲動指示（設計：紅線 75px 疊在照片上 + SCROLL + 紅線 76px）
       群組上緣在 hero 圖底上方 97px（與 evaluation 同款）
       ---------------------------------------- */
    .hero--daily ~ .hero-indicator {
        margin-top: calc(-1 * min(5.05vw, 97px));
        padding: 0;
        gap: 0;
    }

    .hero--daily ~ .hero-indicator::before {
        content: '';
        width: 2px;
        height: min(3.9vw, 75px);
        background-color: var(--color-secondary);
        margin-bottom: min(1.66vw, 32px);
    }

    .hero--daily ~ .hero-indicator .scroll-line {
        width: 2px;
        height: min(3.96vw, 76px);
        margin-top: min(0.79vw, 15px);
    }

    /* ----------------------------------------
       Vision（「Reuse也很讚呢!從服務達人到經營專家」）／Lead（副標）：
       白字疊於 hero 圖左下（定位由 .hero-copy 負責），標題 fs72 粗體一行、
       副標 fs40 兩行＋左側紅色豎線
       ---------------------------------------- */
    .daily-vision {
        text-align: left;
        padding: min(36.875vw, 708px) 0 0;
    }

    .daily-vision .container,
    .daily-lead .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .daily-vision__title {
        font-size: min(3.75vw, 72px);
        font-weight: 700;
        line-height: 1.3;
        color: var(--text-inverse);
        margin: 0 0 min(1.875vw, 36px);
        /* 首字「開括號的字面在字身右半，抵銷半個字寬對齊左緣 */
        text-indent: -0.5em;
    }

    /* 副標移出 hero 圖片，改為圖下方常流內容：深色字、左緣對齊標題 */
    .daily-lead {
        position: relative;
        z-index: 1;
        /* 常流起點在 hero 區塊底（200vh），上拉到「標題淡完時，垂直置中的副標文字
           剛好從視窗底出現」。min(3.3854vw, 65px) = 半個收縮後 header + header 收縮差；
           末項 = 半個文字高（2 行 × 40 × 1.85 = 148），行數變動時需一併調整 */
        margin-top: calc(var(--hero-title-fade-end) - 150vh + min(3.3854vw, 65px) + min(3.8542vw, 74px) - var(--hero-pin-extra));
        /* 撐滿一屏、文字垂直置中：區塊在淡出起點進場，文字則等升到畫面中段才現身，
           此時 hero 已淡完，文字落在白底上（同參考站 fastretailing/careers 作法） */
        /* 扣掉收縮後的 sticky header，置中以「header 以下的可視區」為準 */
        min-height: calc(100vh - min(3.6458vw, 70px));
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 min(2.5vw, 48px) 0 min(10vw, 192px);
        text-align: left;
    }

    .daily-lead__text {
        position: relative;
        max-width: none;
        margin: 0;
        padding-left: min(1.875vw, 36px);
        font-size: min(2.0833vw, 40px);
        font-weight: 500;
        line-height: 1.85;
        color: #4D4D4D;
    }

    /* 副標左側紅色豎線 */
    .daily-lead__text::before {
        content: '';
        position: absolute;
        left: 0;
        top: min(0.52vw, 10px);
        bottom: min(0.52vw, 10px);
        width: min(0.47vw, 9px);
        background-color: var(--color-secondary);
    }

    /* 常流中的紅色分隔線改由 .daily-category--first::before 呈現 */
    .daily-lead__divider {
        display: none;
    }

    /* ----------------------------------------
       Category（0803 設計稿：桌機取消「關於販售／收購／賣場」大類標題，
       五列職務改為等距（102）的單一清單；標題僅行動版保留）
       首區塊：SCROLL 群組底 → 紅色垂直分隔線 195，線高 181、線底 → 首列圖 44
       ---------------------------------------- */
    .daily-category {
        margin-top: calc(102 * var(--u));
    }

    /* 末列圖底 → footer 頂線 336（190 + TOP 44 + 102） */
    .daily-category:last-of-type {
        padding-bottom: calc(102 * var(--u));
    }

    .daily-category:last-of-type .back-to-top {
        margin-top: calc(190 * var(--u));
    }

    .daily-category__header {
        display: none;
    }

    /* ----------------------------------------
       Job 圖文列（照片 916x515 靠左 + 灰底文字卡 831，左右邊距 87）
       ---------------------------------------- */
    .daily-job {
        flex-direction: row;
        align-items: stretch;
        /* 設計稿列寬 1746（1920 - 左右 87），整列等比縮放後置中 */
        max-width: calc(1746 * var(--u));
        margin: 0 auto;
        padding: 0;
        background-color: #F2F2F2;
    }

    .daily-job + .daily-job {
        margin-top: calc(102 * var(--u));
    }

    .daily-job__figure {
        flex: 0 0 calc(916 * var(--u));
        width: auto;
        margin: 0;
        aspect-ratio: 916 / 515;
    }

    /* 圖上紅框標籤改為文字卡內 .daily-job__title，桌機隱藏 */
    .daily-job__label {
        display: none;
    }

    .daily-job__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: 0 calc(50 * var(--u)) 0 calc(140 * var(--u));
        text-align: left;
    }

    /* 職務標題：紅字中文 43 + 英文 24，下方紅底線 */
    .daily-job__title {
        display: flex;
        align-items: baseline;
        gap: calc(21 * var(--u));
        width: fit-content;
        margin: 0 0 calc(24 * var(--u));
        padding-bottom: calc(13 * var(--u));
        border-bottom: 3px solid var(--color-secondary);
    }

    .daily-job__title-jp {
        font-size: calc(43 * var(--u));
        font-weight: 700;
        line-height: 1;
        color: var(--color-secondary);
    }

    .daily-job__title-en {
        font-size: calc(28 * var(--u));
        font-weight: 700;
        line-height: 1;
        color: var(--color-secondary);
    }

    .daily-job__heading {
        font-size: calc(32 * var(--u));
        font-weight: 700;
        color: #333333;
        margin: 0 0 calc(40 * var(--u));
    }

    .daily-job__desc {
        font-size: max(15px, calc(24 * var(--u)));
        font-weight: 400;
        line-height: 1.9;
        color: #4D4D4D;
        margin: 0;
    }
}

/* ======== Desktop >=1024px redesign: 人事評價制度 evaluation.html ======== */
/* 設計稿：Desktop-o_人事評價制度 1.png（3840x17990，2x，÷2 = 1920 設計 px）；
   尺寸採 min(vw, 設計px) 流式縮放（1px = 100/1920 vw），1440 檢視即為設計值 × 0.75 */
@media (min-width: 1024px) {

    /* ----------------------------------------
       Hero 捲動指示（設計：紅線 75px 疊在照片上 + SCROLL + 紅線 76px）
       群組上緣在 hero 圖底上方 97px（1920 設計）
       ---------------------------------------- */
    .hero--eval ~ .hero-indicator {
        margin-top: calc(-1 * min(5.05vw, 97px));
        padding: 0;
        gap: 0;
    }

    .hero--eval ~ .hero-indicator::before {
        content: '';
        width: 2px;
        height: min(3.9vw, 75px);
        background-color: var(--color-secondary);
        margin-bottom: min(1.66vw, 32px);
    }

    .hero--eval ~ .hero-indicator .scroll-line {
        width: 2px;
        height: min(3.96vw, 76px);
        margin-top: min(0.79vw, 15px);
    }

    /* ----------------------------------------
       Intro（尋找與我們相同頻率的你）／Lead（內文）：白字疊於 hero 圖左下
       （定位由 .hero-copy 負責）
       heading fs72（ink y855@1440x4/3）、內文 3 段 fs42/行距60、左側紅豎線
       ---------------------------------------- */
    .eval-intro {
        text-align: left;
        padding: min(32.6vw, 626px) 0 0;
    }

    .eval-intro__heading {
        font-size: min(3.75vw, 72px);
        font-weight: 700;
        line-height: 1.3;
        color: var(--text-inverse);
        margin: 0 0 min(1.8vw, 35px);
    }

    /* 內文移出 hero 圖片，改為圖下方常流內容：深色字、左緣對齊標題 */
    .eval-lead {
        position: relative;
        z-index: 1;
        /* 常流起點在 hero 區塊底（200vh），上拉到「標題淡完時，垂直置中的副標文字
           剛好從視窗底出現」。min(3.3854vw, 65px) = 半個收縮後 header + header 收縮差；
           末項 = 半個文字高（4 行 × 42 × 1.85 = 310.8），行數變動時需一併調整 */
        margin-top: calc(var(--hero-title-fade-end) - 150vh + min(3.3854vw, 65px) + min(8.0938vw, 155.4px) - var(--hero-pin-extra));
        /* 撐滿一屏、文字垂直置中：區塊在淡出起點進場，文字則等升到畫面中段才現身，
           此時 hero 已淡完，文字落在白底上（同參考站 fastretailing/careers 作法） */
        /* 扣掉收縮後的 sticky header，置中以「header 以下的可視區」為準 */
        min-height: calc(100vh - min(3.6458vw, 70px));
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 min(2.5vw, 48px) 0 min(10vw, 192px);
        text-align: left;
    }

    .eval-lead__text {
        position: relative;
        max-width: none;
        margin: 0;
        padding-left: min(1.875vw, 36px);
    }

    /* 段落左側紅色豎線 */
    .eval-lead__text::before {
        content: '';
        position: absolute;
        left: 0;
        top: min(0.52vw, 10px);
        bottom: min(0.52vw, 10px);
        width: min(0.47vw, 9px);
        background-color: var(--color-secondary);
    }

    .eval-lead__text p {
        font-size: min(2.1875vw, 42px);
        font-weight: 500;
        line-height: 1.85;
        color: var(--color-ink);
        margin: 0;
    }

    /* 桌機版換行點（.m-br 於桌機隱藏，帶 .d-br 者恢復換行） */
    .m-br.d-br {
        display: inline;
    }

    .eval-store,
    .eval-headquarter {
        padding: 0;
    }

    /* ----------------------------------------
       區塊標題（店鋪／本部 fs56 + 紅色英文副標 fs28）
       ---------------------------------------- */
    .eval-section-header__title {
        font-size: calc(56 * var(--u));
        font-weight: 700;
        line-height: 1.2;
        color: #1A1A1A;
    }

    .eval-section-header__subtitle {
        font-size: calc(28 * var(--u));
        font-weight: 700;
        color: var(--color-secondary);
        margin-top: calc(10 * var(--u));
    }

    .eval-store .eval-section-header {
        margin-bottom: calc(102 * var(--u));
    }

    .eval-headquarter .eval-section-header {
        margin-bottom: calc(97 * var(--u));
    }

    /* ----------------------------------------
       階梯圖軌道：紅色標籤（正職人員／兼職人員）fs38、盒 238x70，左緣 365
       整組以「1920 設計畫布」等比縮放後置中，內部座標仍為設計值 x --u
       ---------------------------------------- */
    .eval-track {
        width: min(100%, calc(1920 * var(--u)));
        margin-inline: auto;
    }

    .eval-track__label {
        left: calc(365 * var(--u));
        padding: calc(16 * var(--u)) calc(43 * var(--u));
        font-size: calc(38 * var(--u));
    }

    .eval-track--store {
        padding-top: calc(182 * var(--u));
    }

    .eval-track--store .eval-track__img {
        width: calc(1150 * var(--u));
        margin-left: calc(406.5 * var(--u));
    }

    .eval-track--part {
        margin-top: calc(355.5 * var(--u));
        padding-top: calc(178 * var(--u));
    }

    .eval-track--part .eval-track__img {
        width: calc(1190 * var(--u));
        margin-left: calc(365 * var(--u));
    }

    .eval-track--hq {
        padding-top: calc(193.5 * var(--u));
    }

    .eval-track--hq .eval-track__img {
        width: calc(1154 * var(--u));
        margin-left: calc(403 * var(--u));
    }

    /* ----------------------------------------
       兼職圖下說明（2 行 fs32/行距49）
       ---------------------------------------- */
    .eval-caption {
        margin: calc(142 * var(--u)) 0 0;
        padding: 0 var(--spacing-md);
        font-size: calc(32 * var(--u));
        line-height: 1.55;
    }

    /* ----------------------------------------
       本部區塊：說明文字 → 標題間距 405
       ---------------------------------------- */
    .eval-headquarter {
        padding-top: calc(405 * var(--u));
        padding-bottom: calc(103 * var(--u));
    }

    /* ----------------------------------------
       底部說明 3 行（fs32/行距48 灰字）＋ TOP 回頂連結
       （末行底 → footer 頂線 327 = 180 + TOP 44 + 103）
       ---------------------------------------- */
    .eval-closing {
        padding: calc(409 * var(--u)) var(--spacing-md) 0;
    }

    .eval-closing p {
        margin: 0;
        font-size: calc(32 * var(--u));
        line-height: 1.5;
        color: #4D4D4D;
    }

    /* TOP 樣式沿用首頁 .back-to-top，覆寫上邊距 */
    .eval-headquarter .back-to-top {
        margin-top: calc(180 * var(--u));
    }
}

/* ======== Desktop >=1024px redesign: stories（社員故事列表） ======== */
/* 依 Desktop-o_各社員 1.png（1920 設計）：照片 860x489、圖文距 162、卡片間距 170、
   文字欄／箭頭膠囊 175x65（距照片右緣 47、下緣 26）。
   尺寸一律寫成「設計值 x --u」：--u 為每個斷點的縮放單位（1920 時 1px＝設計原尺寸），
   卡片區塊以 --pad 水平置中（不足時退回設計左緣 235）。 */
@media (min-width: 1024px) {
    .members-stories {
        --u: 0.477px;                       /* 照片 410 */
        padding: 240px 0 calc(307 * var(--u));
    }

    .members-list {
        gap: calc(170 * var(--u));
    }

    .members-card {
        --pad: max(calc(235 * var(--u)), calc((100% - 1410 * var(--u)) / 2));
        position: relative;
        flex-direction: row;
        align-items: flex-start;
        gap: calc(162 * var(--u));
        padding-left: var(--pad);
    }

    /* view more 膠囊：疊在照片右下角（右緣距照片右 51、下緣距照片底 36） */
    .members-card__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(400 * var(--u));
        left: calc(var(--pad) + 610 * var(--u));
        width: calc(199 * var(--u));
        height: calc(53 * var(--u));
        background-color: var(--color-secondary);
        color: #FFFFFF;
        font-size: calc(30 * var(--u));
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.02em;
        text-decoration: none;
        border-radius: calc(26.5 * var(--u));
        transition: all var(--transition-base);
    }

    .members-card__arrow::before {
        content: 'view more';
    }

    /* 游標移到箭頭上時，照片維持放大（箭頭是照片的兄弟節點，需由卡片層判斷） */
    .members-card:has(.members-card__arrow:hover) .members-card__photo {
        transform: scale(1.05);
    }

    /* hover：白底紅字（同首頁 view more）；滑到照片上也一起亮起 */
    .members-card__arrow:hover,
    .members-card__photo-link:hover ~ .members-card__arrow {
        background-color: #FFFFFF;
        color: var(--color-secondary);
        box-shadow: var(--shadow-md);
    }

    .members-card__photo-link {
        flex: none;
    }

    .members-card__photo {
        width: calc(860 * var(--u));
        height: auto;
        aspect-ratio: 860 / 489;
    }

    .members-card__role {
        font-size: calc(32 * var(--u));
        font-weight: 500;
        line-height: 1;
        margin-bottom: calc(15 * var(--u));
    }

    .members-card__name {
        font-size: calc(48 * var(--u));
        font-weight: 500;
        line-height: 1;
        margin-bottom: calc(52 * var(--u));
    }

    .members-card__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(136 * var(--u));
        height: calc(52 * var(--u));
        padding: 0;
        font-size: calc(34 * var(--u));
        font-weight: 500;
        letter-spacing: 0.04em;
        margin-bottom: calc(10 * var(--u));
    }

    .members-career__item {
        font-size: calc(36 * var(--u));
        font-weight: 400;
        line-height: calc(48 * var(--u));
    }

    .members-career__date {
        width: calc(142 * var(--u));
        margin-right: calc(24 * var(--u));
    }
}

/* 各桌機斷點只調縮放單位與首卡上方留白 */
@media (min-width: 1280px) {
    .members-stories {
        --u: 0.595px;                       /* 照片 512 */
        padding-top: 280px;
    }
}

@media (min-width: 1536px) {
    .members-stories {
        --u: 0.714px;                       /* 照片 614 */
        padding-top: 340px;
    }
}

@media (min-width: 1920px) {
    .members-stories {
        --u: 1px;                           /* 照片 860（設計原尺寸） */
        padding-top: 578px;
    }

    /* 1920 以上回到設計稿左緣 235（右側留白 275） */
    .members-card {
        --pad: calc(235 * var(--u));
    }
}

/* ======== Desktop >=1024px redesign: job-intro（職缺介紹） ======== */
/* 尺寸一律寫成「1920 設計值 x --u」，各斷點只調 --u 與首屏上方留白（同 stories 作法）。
   紅色卡片維持 86.8vw 流動寬度（版面容器），僅內容隨 --u 縮放。 */
@media (min-width: 1024px) {
    /* ---- 版面容器：本頁兩區塊需要 1920 全幅，解除 .container 限寬 ---- */
    .job-benefits .container,
    .job-detail .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    /* ----------------------------------------
       全員工享有福利
       ---------------------------------------- */
    .job-benefits {
        padding: 200px 0 0;
    }

    .job-benefits .section-title {
        font-size: calc(60 * var(--u));
        line-height: 1.2;
        font-weight: 700;
        color: var(--color-ink);
        margin-bottom: 0;
    }

    .job-benefits__grid {
        justify-content: center;
        align-items: flex-start;
        gap: calc(112 * var(--u));
        margin-top: calc(109 * var(--u));
    }

    .job-benefit {
        width: calc(400 * var(--u));
        max-width: none;
    }

    .job-benefit__icon {
        width: calc(240 * var(--u));
        height: calc(240 * var(--u));
        margin: 0 auto calc(70 * var(--u));
    }

    .job-benefit__title {
        font-size: calc(40 * var(--u));
        font-weight: 700;
        line-height: 1;
        padding-bottom: calc(24 * var(--u));
        margin-bottom: calc(28 * var(--u));
    }

    .job-benefit__title::after {
        width: calc(206 * var(--u));
        height: calc(5 * var(--u));
    }

    .job-benefit__desc {
        font-size: calc(30 * var(--u));
        font-weight: 400;
        line-height: 1.6;
        color: var(--color-ink);
    }

    /* ----------------------------------------
       職缺明細（紅色圓角卡片＋檔案夾式頁籤）
       設計稿：卡片 1667 寬、頁籤高出卡片頂 126（選中）／83（未選中）
       ---------------------------------------- */
    .job-detail {
        padding: calc(324 * var(--u)) 0 calc(226 * var(--u));
    }

    .job-detail__card {
        position: relative;
        width: min(86.8229vw, 1667px);
        max-width: none;
        margin: 0 auto;
        background-color: var(--color-secondary);
        border-radius: calc(44 * var(--u));
        padding: 0 calc(45 * var(--u)) calc(54 * var(--u));
        display: flow-root; /* 阻止頁籤負邊距與卡片 margin collapse，讓頁籤凸出卡頂 */
    }

    /* 頁籤列：以負邊距凸出卡片頂 126px，兩籤各半、中縫 14px 露出底色 */
    .job-tabs {
        display: flex;
        align-items: flex-end;
        gap: calc(14 * var(--u));
        height: calc(186 * var(--u));
        padding: 0;
        margin: calc(-1 * (126 * var(--u))) calc(-1 * (45 * var(--u))) 0;
    }

    .job-tabs__tab {
        flex: 1 1 50%;
        height: calc(143 * var(--u));
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: calc(30 * var(--u)) calc(24 * var(--u)) 0;
        font-size: calc(48 * var(--u));
        font-weight: 700;
        line-height: 1.2;
        color: var(--text-inverse);
        background-color: var(--color-secondary);
        border-radius: calc(44 * var(--u)) calc(44 * var(--u)) 0 0;
        transition: filter 0.3s ease, height 0.3s ease;
    }

    .job-tabs__tab[aria-selected="true"] {
        height: calc(186 * var(--u));
        padding-top: calc(30 * var(--u));
    }

    .job-tabs__tab:not([aria-selected="true"]):hover {
        filter: brightness(0.9);
    }

    /* 白色內容面板 */
    .job-panels {
        background-color: var(--bg-primary);
        border: none;
        border-radius: calc(30 * var(--u));
        padding: calc(202 * var(--u)) calc(146 * var(--u)) calc(190 * var(--u));
    }

    /* 明細表格：左灰標籤 394 寬，行間 5px #CCC 分隔線（含首尾） */
    .job-table__row {
        flex-direction: row;
        border-bottom: calc(5 * var(--u)) solid #CCCCCC;
    }

    .job-table__row:first-child {
        border-top: calc(5 * var(--u)) solid #CCCCCC;
    }

    .job-table__term {
        flex: 0 0 calc(394 * var(--u));
        padding: calc(24 * var(--u));
        font-size: calc(36 * var(--u));
        font-weight: 700;
    }

    .job-table__desc {
        flex: 1 1 auto;
        padding: calc(82 * var(--u)) calc(30 * var(--u)) calc(82 * var(--u)) calc(69 * var(--u));
        font-size: max(15px, calc(24 * var(--u)));   /* 小螢幕不低於 15px */
        font-weight: 500;
        line-height: max(28px, calc(48 * var(--u)));
    }

    /* ○ 提供標記 */
    .job-table__mark {
        width: calc(38 * var(--u));
        height: calc(38 * var(--u));
        border-width: calc(4 * var(--u));
    }
}


/* 各桌機斷點只調首屏上方留白（--u 由 :root 提供） */
@media (min-width: 1280px) {
    .job-benefits {
        padding-top: 240px;
    }
}

@media (min-width: 1536px) {
    .job-benefits {
        padding-top: 300px;
    }
}

@media (min-width: 1920px) {
    .job-benefits {
        padding-top: 421px;                 /* 設計原值 */
    }
}

/* ======== Desktop >=1024px redesign: 社員故事（betty/sam/eating/aaren 四頁共用 story- 模板） ======== */
/* 量測基準：Desktop_社員故事-o_沈 1.png（5760x25197，3x → 1920 設計 px），
   其餘三頁（方/鄭/黃）已抽查：hero 卡片座標、字級、間距完全一致，僅內容（段落數/履歷筆數/圖片張數比例）不同。 */
@media (min-width: 1024px) {

    /* ---- Hero 覆蓋卡片：改為「頂端定位」（四頁 namebox 均位於 y=671.7、badge y=932，與履歷筆數無關） ---- */
    .story-hero__card {
        position: absolute;
        left: min(8.8542vw, 170px);            /* 170 */
        top: min(27.2083vw, 522.4px);          /* namebox 頂 671.7 - hero 頂 149.3 */
        bottom: auto;                          /* 覆寫舊版 bottom 定位 */
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* 紅色姓名盒（461x184，寬度隨內容） */
    .story-hero__namebox {
        width: fit-content;
        padding: min(1.4063vw, 27px) min(2.6042vw, 50px) min(1.25vw, 24px);
    }

    .story-hero__name {
        font-size: min(3.125vw, 60px);
        font-weight: 500;
        line-height: 1.2;
    }

    .story-hero__role {
        font-size: min(1.9792vw, 38px);
        font-weight: 500;
        line-height: 1.2;
        margin-top: min(0.625vw, 12px);
    }

    /* 白色 career 盒（貼齊 namebox 左緣，寬度隨內容） */
    .story-hero__careerbox {
        width: fit-content;
        border: none;
        padding: min(1.1458vw, 22px) min(2.6042vw, 50px);
        margin-top: min(2.8646vw, 55px);       /* 910.3 - 855.3 */
    }

    .story-hero__badge {
        font-size: min(1.3021vw, 25px);
        font-weight: 500;
        line-height: 1;
        padding: min(0.3125vw, 6px) min(0.6771vw, 13px);
        margin-bottom: min(0.3646vw, 7px);
    }

    .story-hero__career-item {
        color: #4D4D4D;
        font-size: min(1.3021vw, 25px);
        font-weight: 400;
        line-height: 1.4;                      /* 行距 36.4 */
    }

    .story-hero__career-date {
        width: min(5.2083vw, 100px);
        margin-right: min(0.5208vw, 10px);     /* 職稱起點 x330.5（相對盒左 160.5） */
    }

    /* SCROLL：故事頁桌機（設計稿：上紅線(76) 頂 = hero 底 -98 → SCROLL 字 24px → 下紅線(76)）
       覆寫首頁 hero 淡出用的大負 margin，改為僅上紅線疊入 hero 下緣 */
    .story-hero + .hero-indicator {
        margin-top: max(-5.1042vw, -98px);
    }

    .story-hero + .hero-indicator::before {
        height: min(3.9583vw, 76px);
    }

    .story-hero + .hero-indicator .scroll-text {
        margin-top: min(1.875vw, 36px);
        font-size: min(1.25vw, 24px);
        font-weight: 400;
    }

    /* ---- 訪談區（Staff Interview） ---- */
    .story-interview {
        padding-top: calc(231 * var(--u));    /* scroll 線底 1376.3 → label 盒頂 ~1607.5 */
        padding-bottom: calc(296 * var(--u)); /* 末行 ink 底 7474.7 → footer 頂 7781（四頁一致 306-310） */
    }

    .story-interview > * + * {
        margin-top: calc(104 * var(--u));      /* 圖片/問答塊間距（ink 差 115-117 換算盒距） */
    }

    /* 文字欄置中。設計稿字體排印實測：半形標點（halt）＋ 0.05em 字距，
       欄寬 1498 使標題與滿行段落的斷行點對齊設計稿（實測可行區間 1494-1502）。
       Noto 優先：Inter 拉丁字較寬，會讓含英文的行提早換行。
       注意：letter-spacing 需宣告在各文字元素上（em 以宣告處字級計算後才繼承） */
    .story-qa {
        max-width: calc(1498 * var(--u));
        font-family: 'Noto Sans TC', 'Inter', -apple-system, 'system-ui', 'Segoe UI', 'Noto Sans JP', sans-serif;
        font-feature-settings: 'halt' 1;
    }

    .story-qa__label {
        color: var(--color-secondary);
        font-size: calc(30 * var(--u));
        font-weight: 500;
        letter-spacing: 0.05em;
        line-height: 1.2;
        margin-bottom: calc(13 * var(--u));    /* label ink 底 1638.7 → 標題 ink 頂 1671.3 */
    }

    .story-qa__title {
        color: var(--color-secondary);
        font-size: calc(55 * var(--u));
        font-weight: 700;
        letter-spacing: 0.05em;
        line-height: calc(78 * var(--u));      /* 行距 77.7 */
        margin-bottom: calc(86 * var(--u));    /* 標題 ink 底 1798 → 內文 ink 頂 1913.3 */
    }

    .story-qa__answer {
        color: #4D4D4D;
        font-size: max(15px, calc(24 * var(--u)));
        font-weight: 500;
        letter-spacing: 0.05em;
        line-height: max(30px, calc(48 * var(--u)));         /* 行距 ≈ 48 */
    }

    /* 內文黃底螢光筆重點（黃底 #CCCC00 + 粗體，緊貼字身）
       背景改漸層，size 由 0% 動畫到 100%，捲入視窗時如螢光筆由左至右畫過 */
    .story-qa__answer mark {
        background-color: transparent; /* 蓋掉 UA 預設黃底，只留漸層那層 */
        background-image: linear-gradient(#CCCC00, #CCCC00);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 0% 100%;
        color: inherit;
        font-weight: 700;
        /* 僅上下留 2px：水平 padding 會加寬行寬，使滿行段落多折一行 */
        padding: calc(2 * var(--u)) 0;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        transition: background-size 0.6s ease-out;
    }

    .story-qa__answer mark.is-visible {
        background-size: 100% 100%;
    }

    /* 橫式照片 1575 寬置中（x172.7-1747.7；高度依素材比例自適應） */
    .story-figure {
        max-width: calc(1575 * var(--u));
    }
}

/* 行動版：新加入的 <mark> 螢光筆重點沿用同一視覺＋由左至右畫過動畫 */
@media (max-width: 1023px) {
    .story-qa__answer mark {
        background-color: transparent; /* 蓋掉 UA 預設黃底，只留漸層那層 */
        background-image: linear-gradient(#CCCC00, #CCCC00);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 0% 100%;
        color: inherit;
        font-weight: 700;
        padding: 0 2px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        transition: background-size 0.6s ease-out;
    }

    .story-qa__answer mark.is-visible {
        background-size: 100% 100%;
    }
}

/* ======== Desktop >=1024px: daily-work／evaluation hero 釘選淡出（與首頁同款，js initHeroPin） ======== */
@media (min-width: 1024px) {
    /* 區塊高度 = 滿版一屏 + 100vh 釘選捲動距離；sticky 在 overflow:hidden 內不作用 */
    /* 區塊高度 = 滿版一屏 + 100vh 釘選捲動距離 + 緩衝。
       緩衝是為了讓 sticky 撐到圖片淡完（終點見 js fadeEnd，會隨副標行數／視窗而變）
       才解除釘選，否則圖片會在還有殘留不透明度時就跟著上移、下方露出白底。
       副標的 margin-top 會扣掉同一個緩衝，後續常流內容位置不受影響 */
    .hero--daily,
    .hero--eval {
        overflow: visible;
        height: calc(200vh - min(5.2083vw, 100px) + var(--hero-pin-extra));
    }

    .hero--daily > .hero-image,
    .hero--eval > .hero-image {
        position: sticky;
        top: min(5.2083vw, 100px);
        height: calc(100vh - min(5.2083vw, 100px));
        aspect-ratio: auto;
        transition: top 0.3s ease, height 0.3s ease; /* 跟隨 header 收縮 */
    }

    .header.is-scrolled ~ main .hero--daily > .hero-image,
    .header.is-scrolled ~ main .hero--eval > .hero-image {
        top: min(3.6458vw, 70px);
        height: calc(100vh - min(3.6458vw, 70px));
    }

    /* 疊字容器（標題＋副標兩區塊）：白字疊於 hero 圖左下，絕對定位錨定 main 頂端
       （＝hero 上緣），不佔常流空間；上方留白由內部標題區塊的 padding-top 決定 */
    main:has(> .hero-copy) {
        position: relative;
    }

    .hero-copy {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        padding: 0 min(2.5vw, 48px) 0 min(10vw, 192px);
        text-shadow: var(--hero-text-shadow);
    }

    /* 由 JS 移入釘選容器後：貼齊滿版圖左下，與圖片一起固定、淡出
       bottom = 原設計的圖底留白 137.7 + 已移出的副標高度 114.4（2 行 × 40）；
       副標搬出圖片後兩頁共用同一高度，標題視覺位置才會一致 */
    .hero--daily .hero-copy,
    .hero--eval .hero-copy {
        top: auto;
        bottom: min(13.1302vw, 252.1px);
    }

    .hero-image .hero-copy > * {
        padding-top: 0;
    }

    /* 副標的出現時機改由捲動位置決定（見各頁 lead 的 margin-top），
       桌機不再套用 IntersectionObserver 的進場淡入，否則會多壓一段位移與延遲 */
    .daily-lead .fade-in-up,
    .eval-lead.fade-in-up {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* index 版疊字：桌機開啟（行動版由基底規則隱藏，訊息由紅框標語區呈現）。
       本頁維持改版前的做法：標題＋副標同一絕對定位區塊，整塊疊在 hero 圖左下，
       由 JS 移入 .hero-slider 後與圖片一起釘選、分兩段淡出 */
    .daily-vision--index {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        padding: min(36.875vw, 708px) min(2.5vw, 48px) 0 min(10vw, 192px);
        text-shadow: var(--hero-text-shadow);
    }

    /* 標題非「開頭，不需要 daily 的負縮排 */
    .daily-vision--index .daily-vision__title {
        text-indent: 0;
    }

    .daily-vision--index .daily-vision__subtitle {
        position: relative;
        max-width: none;
        margin: 0;
        padding-left: min(1.875vw, 36px);
        font-size: min(2.0833vw, 40px);
        font-weight: 500;
        line-height: 1.43;
        color: var(--text-inverse);
    }

    /* 副標左側紅色豎線 */
    .daily-vision--index .daily-vision__subtitle::before {
        content: '';
        position: absolute;
        left: 0;
        top: min(0.52vw, 10px);
        bottom: min(0.52vw, 10px);
        width: min(0.47vw, 9px);
        background-color: var(--color-secondary);
    }

    /* 疊字移入釘選容器後貼齊圖左下 */
    .hero-slider .daily-vision--index {
        top: auto;
        bottom: min(7.1719vw, 137.7px);
        padding-top: 0;
    }

    /* SCROLL 指標：以負 margin 拉進副標區塊的一屏高度內，與副標共用同一屏，
       兩者之間留 160 的間距。負值 = 間距 −（區塊底 → 文字底的距離），
       其中「區塊底 → 文字底」= (100vh − header − 文字高) ÷ 2；
       min(10.1563vw, 195px) = 間距 160 + 半個收縮後 header 35，末項為半個文字高。
       副標文字本身仍是區塊內的置中元素，淡出終點（js 以文字中心量測）不受影響 */
    .hero--daily ~ .hero-indicator {
        margin-top: calc(min(10.1563vw, 195px) + min(3.8542vw, 74px) - 50vh);
        position: relative;
        z-index: 1;
    }

    .hero--eval ~ .hero-indicator {
        margin-top: calc(min(10.1563vw, 195px) + min(8.0938vw, 155.4px) - 50vh);
        position: relative;
        z-index: 1;
    }

    /* 首個內容區塊：縮短靜態設計留白，內容緊接淡出後出現
       （0803 設計稿：SCROLL 群組底 → 紅線頂，日常業務 195、人事評價 257） */
    .daily-category--first {
        margin-top: min(10.1563vw, 195px);
    }

    .eval-store .eval-section-header {
        margin-top: min(13.3854vw, 257px);
    }

    /* 進場動畫（js 掛 .hero-reveal、進視窗加 .is-revealed；三頁共用） */
    .hero-reveal {
        opacity: 0;
        transform: translateY(80px);
        transition: opacity 0.9s ease-out, transform 0.9s ease-out;
        position: relative;
        z-index: 1;
    }

    .hero-reveal.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}