/* ==========================================================================
   精銳建設 · 精銳 WORLD EDM
   2026-08-25
   內容：文件頁樣式（隱私權政策 privacy.html、錯誤頁 401.html / 404.html）

   這幾頁刻意「不」載入 css/layout_240118.css ——
   那支是落地頁專用，會把 body 的黑底與各區塊的背景圖一起拖進來。
   文件頁只需要一張白紙，因此這支檔案自帶 reset 與 body 樣式。

   視覺語彙沿用落地頁表單區（#section7，白底）與 css/form-2026-08-24.css
   的訊息卡：Noto Serif TC 粗體標題、Noto Sans TC 內文、方角黑框、
   重點色 #9D7D61（.color-brown）。訪客從表單點進來不會覺得換了個網站。
   ========================================================================== */

/*-----------------------------------------------------
  基礎
-----------------------------------------------------*/
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
}

/*-----------------------------------------------------
  版面容器
  最大寬度 880px：15px 內文配行高 1.9 時，一行約 40 個中文字，
  再寬下去長篇條文會很難換行對位。
-----------------------------------------------------*/
.doc-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 80px 30px 100px;
    min-height: 100vh;
}

/* 錯誤頁內容只有兩行，靠上會留下一大片空白，改為垂直置中。
   內容短，不會有 flex 置中溢出被切頭的問題。 */
.doc-page-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 錯誤頁只有一句話，左右對齊（justify）沒有意義，改為置中 */
.doc-page-center .doc-content {
    text-align: center;
}

/*-----------------------------------------------------
  標題
-----------------------------------------------------*/
.doc-title {
    margin: 0 0 44px;
    font-family: 'Noto Serif TC', serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.16em;
    /* letter-spacing 會在最後一個字右邊也加上間距，置中時整體會偏左，
       補一個同寬的 text-indent 把它推回來 */
    text-indent: 0.16em;
    line-height: 1.5;
    color: #000;
    text-align: center;
}

/* 標題下方的咖啡色短線，呼應落地頁的 .color-brown 重點色 */
.doc-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 22px auto 0;
    background-color: #9D7D61;
}

/*-----------------------------------------------------
  內文
-----------------------------------------------------*/
.doc-content {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    text-align: justify;
}

/* 條文小標。左側加一條咖啡色短標線，讓長篇條文掃讀時抓得到分段。
   privacy.html 內是 <span>，這裡改成區塊元素獨立成行。 */
.doc-content .doc-subtitle {
    display: block;
    margin: 34px 0 8px;
    padding-left: 12px;
    border-left: 3px solid #9D7D61;
    font-family: 'Noto Serif TC', serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: #000;
    text-align: left;
}

.doc-content strong {
    font-weight: 700;
    color: #000;
}

/*-----------------------------------------------------
  返回鍵
  形狀沿用落地頁送出鍵：方角、1px 黑框、hover 降透明度。
  尺寸縮小 —— 送出鍵是頁面的主行動點，返回鍵不是。
-----------------------------------------------------*/
.doc-back {
    margin-top: 56px;
    text-align: center;
}

.doc-back a {
    display: inline-block;
    min-width: 260px;
    padding: 16px 44px;
    border: 1px solid #000;
    border-radius: 0;
    background-color: #fff;
    font-family: 'Noto Serif TC', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    color: #000;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.doc-back a:hover,
.doc-back a:focus {
    opacity: 0.6;
    color: #000;
    text-decoration: none;
}

/*-----------------------------------------------------
  RWD
  落地頁是 desktop-first 的 max-width 遞減式（1920/1680/1440/1366/1280/1024），
  但文件頁沒有版面爆掉的風險，只需要一個手機斷點把字級與留白縮下來。
-----------------------------------------------------*/
@media (max-width: 767px) {
    .doc-page {
        padding: 50px 22px 70px;
    }

    .doc-title {
        margin-bottom: 32px;
        font-size: 22px;
    }

    .doc-title::after {
        margin-top: 18px;
    }

    .doc-content {
        font-size: 14px;
        line-height: 1.95;
    }

    .doc-content .doc-subtitle {
        margin: 28px 0 6px;
        font-size: 16px;
    }

    .doc-back {
        margin-top: 42px;
    }

    .doc-back a {
        min-width: 0;
        width: 100%;
        padding: 15px 20px;
    }
}