@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:0.875em;
    color:#4a4a4a;
}
#Cont li > strong{
    display:block;
    color:#0b3b4a;
    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 範圍 */
    .ImgArea:not(.ImgArea-2x) img{
        height:460px;
        width:100%;
        object-fit:contain;
        display:block;
    }
    /* Hero 圖片為裝飾性，可允許裁切以維持版面一致 */
    .ImgArea.Hero img{
        height:460px;
        width:100%;
        object-fit:cover;
        display:block;
        box-shadow:0 6px 18px rgba(15,30,40,0.08);
    }
    .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;
}



/* --- 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.9375em) */
@media only screen and (max-width:47.9375em) {
    .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;
    }
}

/* Accessibility / small helpers */
.ImgArea img{ max-width:100%; height:auto; }
a{ color:var(--accent); }