@charset "utf-8";
/* CSS Document 
里程碑、大事記、專欄等內文頁面共用樣式
*/

:root {
    --content-max-width: 1100px;
    --gutter: 20px;
    --accent: #0b6d91;
    --muted: #666;
    --bg: #ffffff;
    --radius: 6px;
}

/* Page container */
#Content .wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 32px var(--gutter);
    box-sizing: border-box;
    color: var(--muted);
    background: transparent;
}

/* Story intro */
.StoryHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.Story .Eyebrow {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid rgba(11, 109, 145, 0.18);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(11, 109, 145, 0.03), transparent 60%);
    color: var(--accent);
    box-shadow: 0 2px 6px rgba(11, 109, 145, 0.03);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* 文章日期與 meta */
.Meta {
    margin-top: 8px;
    margin-bottom: 10px;
}

.Date {
    color: var(--muted);
    font-size: 0.95rem;
    display: inline-block;
    margin-right: 6px;
}

.Story .Tittle {
    color: #111;
    font-size: 2.2rem;
    margin: 1.5em 0 0.875em;
    line-height: 1.2em;
    text-align: center;
}

.Story .TittleDesc {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 18px;
}

/* 文章類型，專用內文排版 */
#Cont {
    font-size: 1.125rem;
    /* 桌面基準 */
    color: #222;
    line-height: 1.9;
    letter-spacing: 0.03em;
    max-width: 700px;
    margin: auto;
}

#Cont p {
    margin: 0 0 1.4em 0;
    font-size: inherit;
}

#Cont h3 {
    color: #0b3b4a;
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 3em;
    margin-bottom: 1em;
    line-height: 1.25;
}

#Cont h3 strong {
    font-weight: 900;
}

.Foreword p {
    background: #f7fbfd;
    border-left: 4px solid var(--accent);
    padding: 12px 14px;
    margin: 8px 0 16px;
    color: #0b4252;
    font-style: normal;
}

/* 列表：把起始的 strong 顯著化並換行，避免破壞原文字 */
#Cont ul {
    margin: 12px 0 18px 1.2rem;
    padding: 0;
}

#Cont li {
    margin-bottom: 1em;
    color: #4a4a4a;
    line-height: 1.9;
    /* 與段落一致，避免被外部樣式壓縮行距 */
}

#Cont li>strong {
    display: block;
    color: #0b3b4a;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.375em;
}

/* 文章整體區塊 */
.wrapper #MainCont {
    display: block;
    box-sizing: border-box;
}

/* Hero image */
.ImgArea-2x img {
    height: 260px;
    /* 桌面等高基準 */
    width: 100%;
    object-fit: cover;
    display: block;
}

.ImgArea-2x.multi img {
    height: 260px;
    object-fit: cover;
}

/* 單張 ImgArea（含 Hero）桌面高度控制： 450~480px 範圍
       width:auto 讓 contain 圖片貼齊實際內容，圓角才不會被留白吃掉 */
.ImgArea:not(.ImgArea-2x) img {
    height: 460px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
    display: block;
}

/* Hero 圖片為裝飾性，可允許裁切以維持版面一致 */
.ImgArea.Hero img {
    height: 460px;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Hero 緩慢縮放循環（Ken Burns）：.ImgFrame 為裁切框，圖說在框外不被縮放的圖片壓到；陰影放框上才不會被裁掉 */
.ImgArea.Hero .ImgFrame {
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(15, 30, 40, 0.08);
}

.ImgArea.Hero .ImgFrame img {
    animation: HeroSlowZoom 18s ease-in-out infinite alternate;
}

@keyframes HeroSlowZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ImgArea.Hero .ImgFrame img {
        animation: none;
    }
}

.ImgArea.Hero .ImgDesc {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: left;
}

.ImgArea {
    margin: 18px 0;
}

.ImgArea img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* 2x 版面：支援兩種用法
   - 建議：將兩張 <figure> 用同一個父容器包住並使用 grid
   - 兼容：若 class 直接加在單一 <figure>，桌面版會以兩欄排列（ inline-block） */
.ImgArea-2x {
    box-sizing: border-box;
    margin: 18px 0;
}

.ImgArea-2x img {
    width: 100%;
    height: auto;
    display: block;
}

.ImgArea .ImgDesc {
    margin-top: 8px;
    font-size: 1rem;
    color: var(--muted);
    text-align: center;
}

/* 相關的大型斷點樣式已集中於檔案底部，避免重複定義。 */

/* 如果開發者把兩張圖放在同一個 .ImgArea-2x 容器內，保留 grid 版本 */
.ImgArea-2x.multi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter);
    align-items: start;
}

/* Gallery: 把成對的圖片拉成頁面寬度的兩欄展示（放在主內容外觀上更寬） */
.Gallery {
    /* 預設（窄版或手機）：不破版，使用常規寬度與內邊距 */
    width: 100%;
    box-sizing: border-box;
    padding: 24px 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter);
    align-items: start;
    margin: 24px auto;
    background: transparent;
}

.Gallery .ImgArea {
    margin: 0;
}

/* 當視窗寬度大於內容最大寬度時，啟用 full-bleed 並以 var(--content-max-width) 對齊 */
@media only screen and (min-width:1100px) {
    .Gallery {
        position: relative;
        left: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        width: 100vw;
        padding: 24px calc((100vw - var(--content-max-width)) / 2);
    }
}

.Gallery .ImgArea {
    margin: 0;
}

/* --- Timeline Style (Added 2026.03.16) --- */
.Timeline {
    list-style: none;
    padding: 0;
    margin: 32px 0 32px 24px !important;
    position: relative;
    /* 顏色變數：依照主題設定 */
    --timeline-accent: var(--accent, #0b6d91);
    --timeline-track: #eee;
}

.Timeline::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    background: var(--timeline-accent);
    border-radius: 4px;
    z-index: 1;
}

.Timeline li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 36px;
    font-size: 1rem;
    color: #4a4a4a;
    line-height: 1.7;
}

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

/* 偽元素圓點 */
.Timeline li::before {
    content: '';
    position: absolute;
    left: -13px;
    /* 修正位置以對準垂直線 */
    top: 8px;
    width: 16px;
    height: 16px;
    background: var(--timeline-accent);
    border: 3px solid var(--bg, #fff);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 2px var(--timeline-accent);
}

.Timeline li>strong {
    display: block;
    color: #0b3b4a;
    font-size: 1.25rem;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1.4;
}



/* Section: Inline Emphasis ==================== */
/* 內文關鍵數據強調（波浪底線） */
#Cont .DataEm {
    font-size: 1.125em;
    font-style: normal;
    font-weight: 700;
    color: #0b4252;
    background-image: linear-gradient(90deg, rgba(11, 109, 145, 0.35), rgba(64, 164, 190, 0.35));
    background-repeat: no-repeat;
    background-size: 100% 0.45em;
    background-position: 0 88%;
    padding: 0 2px;
}

/* 標題導言內的重點詞（流程字樣、關鍵短語） */
.Story .AccentWords {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Section: Video Style ==================== */
/* 與 .ImgArea 同層級；修飾語 .narrow 可收窄置中聚焦內容 */
.VideoArea {
    margin: 24px 0;
}

.VideoArea video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(15, 30, 40, 0.1);
    background: #000;
}

.VideoArea .ImgDesc {
    margin-top: 10px;
    font-size: 1rem;
    color: var(--muted);
    text-align: center;
}

#Cont .VideoArea.narrow {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Section: Stat Cards ==================== */
/* 數據亮點卡：<dl class="StatGrid"><div class="Stat"><dt>指標名</dt><dd>數值</dd></div></dl>
   六欄 Grid 讓五張卡固定呈現三加二置中；column-reverse 讓數值(dd)在上、名稱(dt)在下 */
#Cont dl.StatGrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    max-width: 60rem;
    margin: 28px auto;
    padding: 0;
}

#Cont .StatGrid .Stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    grid-column: span 2;
    min-width: 0;
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    background: linear-gradient(180deg, rgba(11, 109, 145, 0.05), rgba(11, 109, 145, 0.01));
    border: 1px solid rgba(11, 109, 145, 0.15);
    border-radius: var(--radius);
}

#Cont .StatGrid .Stat:nth-child(4) {
    grid-column: 2 / span 2;
}

#Cont .StatGrid .Stat:nth-child(5) {
    grid-column: 4 / span 2;
}

#Cont .Stat dd {
    margin: 0;
    color: var(--accent);
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

#Cont .Stat .StatUnit {
    margin-left: 0.25em;
    font-size: 0.55em;
    font-weight: 700;
    white-space: nowrap;
}

#Cont .Stat dt {
    margin-top: 6px;
    color: #4a4a4a;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Section: Steps Flow ==================== */
/* 流程步驟卡：大數字浮水印 + 標題彩色圖示；--step-accent 依序變色（深海→海藍→青碧→海岸綠） */
#Cont ol.Steps {
    list-style: none;
    counter-reset: steps;
    margin: 24px 0 !important;
    padding: 0;
}

#Cont .Steps li {
    --step-accent: var(--accent);
    --step-soft: rgba(11, 109, 145, 0.1);
    counter-increment: steps;
    position: relative;
    z-index: 0;
    /* 建立堆疊環境，讓數字浮水印墊於文字下、背景上 */
    margin: 0 0 14px;
    padding: 1rem 7rem 1rem 1.5rem;
    background: #f7fbfd;
    border: 1px solid rgba(11, 109, 145, 0.12);
    border-radius: var(--radius);
    overflow: hidden;
}

#Cont .Steps li:nth-of-type(4n+1) {
    --step-accent: #0b3b4a;
    --step-soft: rgba(11, 59, 74, 0.1);
}

#Cont .Steps li:nth-of-type(4n+2) {
    --step-accent: #0b6d91;
    --step-soft: rgba(11, 109, 145, 0.1);
}

#Cont .Steps li:nth-of-type(4n+3) {
    --step-accent: #0f8f83;
    --step-soft: rgba(15, 143, 131, 0.1);
}

#Cont .Steps li:nth-of-type(4n+4) {
    --step-accent: #3a9e63;
    --step-soft: rgba(58, 158, 99, 0.12);
}

/* 右上角大數字浮水印 */
#Cont .Steps li::before {
    content: counter(steps, decimal-leading-zero);
    position: absolute;
    right: 0.875rem;
    top: 0.5rem;
    z-index: -1;
    font-size: 4.25rem;
    font-weight: 900;
    line-height: 1;
    color: var(--step-soft);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

#Cont .Steps h4 {
    margin: 0 0 0.25em;
    color: var(--step-accent);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.4;
}

/* 標題左側圖示 */
#Cont .Steps h4 .fas {
    margin-right: 10px;
    font-size: 1.05em;
}

#Cont .Steps li p {
    margin: 0;
}

/* --- Consolidated responsive breakpoints (em-based, Desktop-first) --- */
/* lg: 標準桌面 (1220px ~ 1379px / 76.25em ~ 86.1875em) - 擴展桌面 */
@media only screen and (min-width:76.25em) {

    .ImgArea-2x img,
    .ImgArea-2x.multi img {
        height: 320px;
    }

    .ImgArea:not(.ImgArea-2x) img {
        height: 480px;
        object-fit: contain;
    }

    .ImgArea.Hero img {
        height: 480px;
        object-fit: cover;
    }
}

/* md: 小型桌面 (977px ~ 1219px / 61.0625em ~ 76.1875em) */
@media only screen and (min-width:61.0625em) and (max-width:76.1875em) {
    .Gallery .ImgArea-2x img {
        height: 260px;
        object-fit: cover;
    }

    .ImgArea-2x.multi img {
        height: 260px;
        object-fit: cover;
    }

    .ImgArea:not(.ImgArea-2x) img {
        height: 460px;
        object-fit: contain;
    }

    .ImgArea.Hero img {
        height: 460px;
        object-fit: cover;
    }

    /* 在 Gallery 內呈現兩欄；單一套用 .ImgArea-2x 保持單欄 */
}

/* sm: 平板直向 (768px ~ 976px / 48em ~ 61em) */
@media only screen and (min-width:48em) and (max-width:61em) {
    :root {
        --content-max-width: 900px;
    }

    .Story .Tittle {
        font-size: 1.6rem
    }

    .ImgArea.Hero img {
        height: auto;
        object-fit: cover;
    }
}

/* xs: 所有行動設備 (≤ 767px / ≤ 47.999375em) */
@media only screen and (max-width:47.999375em) {
    .ImgArea-2x {
        grid-template-columns: 1fr;
    }

    #Content .wrapper {
        padding: 20px 14px;
    }

    .Story .Tittle {
        font-size: 1.4rem
    }

    .StoryHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* 手機字級調整 */
    #Cont {
        font-size: 1rem
    }

    .ImgDesc {
        font-size: 0.9rem
    }

    #Cont h3 {
        font-size: 1.15rem
    }

    /* 手機回復自動高度，避免裁切重要內容； Hero 可維持 cover（若 height:auto 則無裁切） */
    .ImgArea-2x img,
    .ImgArea-2x.multi img {
        height: auto;
        object-fit: contain;
    }

    .ImgArea:not(.ImgArea-2x) img {
        height: auto;
        object-fit: contain;
    }

    .ImgArea.Hero img {
        height: auto;
        object-fit: cover;
    }

    /* Gallery 在手機改為單欄並收斂內邊距，避免破版 */
    .Gallery {
        width: 100%;
        margin: 0 auto 16px;
        padding: 0 16px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .Gallery .ImgArea {
        margin-bottom: 12px;
    }

    .Timeline {
        margin-left: 18px !important;
    }

    .Timeline li {
        padding-left: 24px;
        font-size: 0.95rem;
    }

    .Timeline li>strong {
        font-size: 1.15rem;
    }

    .Timeline li::before {
        width: 14px;
        height: 14px;
        left: -10px;
    }

    /* 手機：維持三加二置中的數據卡節奏，步驟卡收斂內距 */
    #Cont dl.StatGrid {
        gap: 10px;
    }

    #Cont .StatGrid .Stat {
        padding: 14px 8px;
    }

    #Cont .Stat dd {
        font-size: 1.6rem;
    }

    #Cont .Steps li {
        padding: 0.875rem 5rem 0.875rem 1rem;
    }

    #Cont .Steps li::before {
        font-size: 3.25rem;
        right: 8px;
        top: 0px;
    }

    #Cont .Steps h4 {
        font-size: 1.05rem;
    }
}

@media only screen and (max-width:29.9375em) {
    #Cont dl.StatGrid {
        grid-template-columns: 1fr;
    }

    #Cont .StatGrid .Stat,
    #Cont .StatGrid .Stat:nth-child(4),
    #Cont .StatGrid .Stat:nth-child(5) {
        grid-column: auto;
        padding: 16px 12px;
    }
}

/* Section: Content-fit modifier ==================== */
/* 內容型圖片（系統截圖、新聞畫面等文字不可裁切者）：<figure class="ImgArea ImgArea-2x fit">
   改用 contain 完整顯示，底色補滿等高卡片、圓角維持一致；照片類維持預設 cover。
   置於斷點區塊之後，確保覆蓋各斷點的 cover 設定 */
.ImgArea-2x.fit img,
.Gallery .ImgArea-2x.fit img {
    object-fit: contain;
    background: #eef4f7;
    border-radius: var(--radius);
}

/* Accessibility / small helpers */
.ImgArea img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--accent);
}