/* =====================================================================
   官網調整層
   ---------------------------------------------------------------------
   原始版型（main.css / inside-page.css）是照「繁體中文、四字詞」設計的：
   多處使用固定寬高與百分比欄寬，換成英文／越南文等較長的語言就會撐破。
   這份檔案載入於原始樣式之後，只做覆寫，不去改動原始檔，
   日後要比對「哪些是我們改的」只要看這一份。

   一、語言切換選單
   二、多語版面修正（長字串撐破固定尺寸）
   三、可讀性（字級、字重、對比）
   四、文字對齊
   五、各語言字型
   ===================================================================== */


/* =====================================================================
   五、各語言字型
   原設計 body 只指定 'Noto Sans TC'，版型的 head 卻同時載入了
   Noto Sans JP 與 Noto Sans KR——那兩個家族沒有任何 CSS 規則引用，
   等於每頁白載，而日文的假名與韓文的諺文其實是落到系統字型在顯示。

   改法：head 依語言只請求需要的家族（見 _WebSideLayout.cshtml），
   這裡再依 html[lang] 把它接上去。放在檔案最前面，
   後續各節若有更具體的 font-family 仍蓋得過來。
   ===================================================================== */

html[lang="ja"] body,
html[lang="ja"] .font-sans { font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', Arial, sans-serif; }
html[lang="ja"] .font-serif { font-family: 'Noto Serif JP', 'Yu Mincho', serif; }

html[lang="ko"] body,
html[lang="ko"] .font-sans { font-family: 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif; }
html[lang="ko"] .font-serif { font-family: 'Noto Serif KR', 'Batang', serif; }


/* =====================================================================
   一、語言切換選單
   沿用主選單既有的 li > a + ul.sec_menu 結構，只需補圖示間距與目前語言標示。
   ===================================================================== */

#main_menu .lang-menu > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#main_menu .lang-menu .fa-globe { font-size: 15px; }

/* --- 1-2 下拉子選單寬度 -----------------------------------------------
   原設計：ul.sec_menu { width: 120px; left: -16%; overflow: hidden }
   120px 是照中文四字（智慧交通）抓的。英文的「Smart Transportation」需要約 170px，
   而 overflow 是 hidden，結果不是撐開也不是換行，而是**字母被裁掉**
   （見 2026-08-24 202257 截圖，Transportation 的頭尾被切）。
   改為依內容決定寬度，並改用置中定位——原本的 -16% 是相對 li 寬度的百分比，
   li 一寬（英文選單項較長）子選單就會偏掉，換成置中才與語言無關。
   ≤991px 是展開式的行動版選單（width:100%、position:relative），不套用。 */
@media (min-width: 992px) {
  #main_menu .sec_menu {
    width: max-content;
    min-width: 120px;
    /* 上限避免長詞把選單拉成一整條；超過才換行 */
    max-width: 260px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
  }

  /* 語言選單是主選單最右邊那一項，置中展開會凸出視窗右緣
     （原設計的 left:-16% 同樣會凸出，繁中亦然）。
     最右側的選單改為靠右對齊觸發項，往內展開才不會出界。 */
  #main_menu .lang-menu .sec_menu {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* 語言名稱以各自的語言書寫，長度差異大，給一個下限避免換行 */
#main_menu .lang-menu .sec_menu { min-width: 130px; }

#main_menu .lang-menu .sec_menu a.active {
  font-weight: 500;
  text-decoration: underline;
}

/* 行動版主選單是展開式清單，語言選項與其他項目補一條分隔線以示區別 */
@media (max-width: 991.98px) {
  #main_menu .lang-menu {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .25);
  }
  #main_menu .lang-menu .sec_menu { min-width: 0; }
}


/* =====================================================================
   二、多語版面修正
   ===================================================================== */

/* --- 2-1 頁尾欄位擠壓與換列 -------------------------------------------
   原設計：.footer-list.footer-nav { width: 35%; justify-content: space-between }
           .footer-list.connection { width: auto }
   兩個問題，都源自「照中文四字詞抓死寬度」：
   (1) 三個導覽欄之間沒有任何間距，英文的「Company Profile」會直接
       貼上隔壁欄的「Systems Integration」。
   (2) 35% 是照中文抓的，英文欄位變寬後總寬超過容器，
       聯絡資訊整塊被擠到第二列，右側留下一大片空白。
   做法：桌機寬度改為不換列的彈性列，四個區塊各自依內容佔寬、
   容器寬度不夠時由文字自行換行，而不是整塊掉下去。

   三欄的水平位置沿用原設計的 justify-content: space-between，只把固定的
   width: 35% 換成 min-width: 35%：中文欄位窄、撐不到 35%，位置等於原設計；
   英文與越南文的欄位標題較寬時才往外長，不會像原設計那樣一超過 35% 就
   把聯絡資訊整塊推到第二列。 */
footer .container { gap: 24px 32px; }

.footer-list.footer-nav {
  width: auto;
  min-width: 35%;
  flex: 0 1 auto;
  gap: 16px 40px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-list.footer-nav > li {
  flex: 0 1 auto;
  min-width: 112px;
}

/* 欄位標題（Industry Solutions）本來就會換行，行高收緊才不會鬆散 */
.footer-list.footer-nav > li > a { line-height: 1.5; }

.footer-list.connection { width: auto; }
.footer-list-sec.contact > li { line-height: 1.7; }

/* --- 2-1b 聯絡資訊換行後沒有懸掛縮排 -----------------------------------
   原結構：<li><span><圖示></span>文字</li>，圖示與文字都是行內內容。
   文字一旦換行，第二行會從 li 的內容邊界開始，也就是縮回圖示的正下方，
   跟第一行差了 40px，看起來像是文字掉出欄位。

   中文地址原本 18 字、不會換行，所以原設計看不出問題；補上郵遞區號
   （407481）與四種外文改用官方英文地址之後，五種語言在桌機、筆電、
   手機都會換行，15 種組合全中。

   改成 flex：圖示與文字各自成為一個項目，文字在自己的欄位內換行，
   第二行自然對齊第一行。不寫死 40px，日後換圖示尺寸也不必回來改。
   align-items 用 flex-start，圖示才會對齊第一行而不是垂直置中。

   另外要覆寫 justify-content：原設計在這個 li 上就寫了 justify-content: center，
   但 li 原本是 block，該屬性對 block 無效，等於沒作用。一旦改成 flex 它就會生效，
   短的列（電話、信箱）會被推到列中央，跟地址列對不齊——那不是原本的樣子。
   因此明確覆寫成 flex-start，維持四列共用同一個左邊界。 */
.footer-list-sec.contact > li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer-list-sec.contact > li > span { flex: 0 0 auto; }

/* 桌機：四個區塊維持同一列，英文往外擴而不是換列 */
@media (min-width: 1200px) {
  footer .container {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 28px;
  }

  /* logo 區不再獨佔寬度，讓出空間給導覽與聯絡資訊。
     logo 圖維持原設計的 150px——先前縮成 130px 是為了擠出空間，
     但這一塊的寬度其實是由 copyright 那行字決定的，縮圖沒有幫助，
     只是讓 logo 比 UI 稿小一號。 */
  .footer-logo-content { flex: 0 1 auto; min-width: 190px; }

  /* 三個導覽欄的水平位置要與原設計一致。
     原設計：.footer-list.footer-nav { width: 35%; justify-content: space-between }
     → 1440px 視窗下三欄標題落在 x = 455 / 617 / 779。
     先前改成 justify-content: flex-start + gap，欄位被擠成靠左（454/557/660），
     第三欄整整差了 119px，與 UI 稿明顯不同。

     改回 space-between，並用 min-width: 35% 取代固定 width: 35%：
     中文欄位窄，撐不到 35%，於是就等於原設計的 35%，位置完全對齊 UI 稿；
     英文／越南文的欄位標題較寬時才往外長，不會像原設計那樣擠爆容器、
     把聯絡資訊整塊推到第二列。 */
  .footer-list.footer-nav {
    flex: 0 1 auto;
    width: auto;
    min-width: 35%;
    flex-wrap: nowrap;
    gap: 32px;
    justify-content: space-between;
  }
  .footer-list.footer-nav > li { min-width: 0; }

  /* 地址是最長的一行，給它足夠寬度才不會斷在「23號9 / 樓之3」這種位置 */
  .footer-list.connection { flex: 0 1 auto; min-width: 250px; max-width: 30%; }
}

@media (max-width: 1199.98px) {
  .footer-list.footer-nav { gap: 12px 28px; }
  .footer-list.footer-nav > li { min-width: 104px; }
}

/* --- 2-2 智慧交通的標籤溢出膠囊 ---------------------------------------
   原設計：.label { width: 14%; height: 40px; line-height: 1rem }
   中文標籤最多八個字剛好一行；英文如「Crossing hatched markings」會換到
   三行，直接掉出圓角膠囊之外（見 2026-08-24_18h52_23 截圖）。
   改為高度隨內容成長、寬度給一個範圍。 */
section#transportation .photo-all .label {
  width: auto;
  min-width: 14%;
  max-width: 20%;
  height: auto;
  min-height: 40px;
  padding: 8px 16px;
  line-height: 1.35;
  /* 標籤是絕對定位的，換行後往下長會壓到圖；改為以自身垂直置中為基準 */
  transform: translateY(-50%);
}

/* 上面加了 translateY，原本以 bottom 定位的座標要補回一半高度才不會整體上移 */
section#transportation .photo-all .label[class*="label-"] { margin-bottom: -20px; }

@media (max-width: 767.98px) {
  section#transportation .photo-all .label {
    max-width: 30%;
    font-size: .8rem;
    padding: 6px 12px;
  }
}

/* --- 2-2b 系統開發流程：上排文字穿過時間軸 -----------------------------
   原設計：li:nth-child(even) { transform: translateY(-250px) }
   上排（STEP 2、4）以寫死的 250px 往上移。中文兩行剛好停在線上方，
   英文三行以上就繼續往下長，直接穿過中央那條分隔線（見 2026-08-24_19h27_37 截圖）。

   改用「以自身高度為基準」的位移：translateY 的百分比是相對元素自己的高度，
   -100% 會把整塊移到原位置的正上方，之後再加的固定值就等於
   「元素底部離原本位置頂端的距離」，與文字多長無關。
   文字越長只會往上長，底部永遠停在同一條水平線上。

   原設計：li:nth-child(even) { transform: translateY(-250px) }
           .item .line { margin: 20% 0 5% }
   上排（STEP 2、4）用寫死的 250px 往上移，上方的空間則由線的 20% 上邊距預留。
   兩個數字都是照中文的兩行字抓的：
     · 英文三、四行 → 區塊往下長，直接穿過中央那條分隔線
     · 把位移量加大讓它不壓線 → 又往上頂到區塊標題
   只要文字長度會變，就沒有一組固定數字能同時滿足五種語言。

   因此改掉「靠位移擺位」這件事本身，換成兩列的格線：
     第一列＝上排、第二列＝分隔線、第三列＝下排
   上排多高，第一列就自動多高，線永遠跟在它下面，也不會頂到標題。
   分隔線改用 ul::before 繪製（原本的 .line 元素在此版型下隱藏），
   如此線就是格線的一員，位置由排版決定而不是由數字決定。

   ≤767px 原設計是另一套直式時間軸（線轉為垂直、位移歸零），
   那個版型沒有這個問題，所以整段只在 ≥768px 生效。 */
@media (min-width: 768px) {
  section#system-integration .item ul {
    display: grid;
    /* 原設計為五個 20% 寬的欄位緊鄰排列，欄距由 .item-text 的左右內距構成 */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
  }

  /* 原本的分隔線元素讓位給格線中的那一列 */
  section#system-integration .item .line { display: none; }

  section#system-integration .item ul::before {
    content: "";
    grid-row: 2;
    grid-column: 1 / -1;
    height: 5px;
    background-color: #D0D8E1;
    margin: 28px 0;          /* 線與上下兩排各留 28px */
  }

  /* 欄位寬度改由格線決定 */
  section#system-integration .item ul li { width: auto; }

  section#system-integration .item ul li:nth-child(1) { grid-column: 1; }
  section#system-integration .item ul li:nth-child(2) { grid-column: 2; }
  section#system-integration .item ul li:nth-child(3) { grid-column: 3; }
  section#system-integration .item ul li:nth-child(4) { grid-column: 4; }
  section#system-integration .item ul li:nth-child(5) { grid-column: 5; }

  /* 上排貼齊該列底部，下排貼齊頂部，兩排的文字都從靠近線的一側開始。
     transform 必須寫在這裡：原設計的 -250px 也掛在 :nth-child 上，
     權重比單純的 li 選擇器高，寫在別處蓋不掉。 */
  section#system-integration .item ul li:nth-child(even) {
    grid-row: 1;
    align-self: end;
    transform: none;
  }
  section#system-integration .item ul li:nth-child(odd) {
    grid-row: 3;
    align-self: start;
    transform: none;
  }

  /* 圓點原本用百分比掛在 li 上，塊高一變就偏離線；改成以線為基準。
     ::before 帶有 translate(-50%,-50%)，圓心 = li 頂端 + top 值。 */
  section#system-integration .item ul li:nth-child(even)::before {
    top: calc(100% + 30px);   /* li 底部往下 28（間距）+ 2.5（線的一半） */
    bottom: auto;
  }
  section#system-integration .item ul li:nth-child(odd)::before {
    top: -30px;               /* li 頂端往上同樣的距離 */
  }
}

/* 五欄並排時單欄很窄（768px 下扣掉內距只剩 100px），
   英文的 Implementation、越南文的複合詞整個字塞不進去會往外突出。
   允許長字換行，並在平板寬度收窄左右內距換取字寬。
   只留 overflow-wrap：它僅在整個字真的放不下時才強制斷開，平時不影響外觀。
   不開 hyphens：在這種窄欄會連「struc-ture」「er-ror」都斷，讀起來更吃力。 */
section#system-integration .item ul li .item-text p {
  overflow-wrap: break-word;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  section#system-integration .item ul li .item-text { padding: 0 6px; }
  section#system-integration .item ul li .item-text p { font-size: .9rem; }
  section#system-integration .item ul li .label { font-size: .9rem; }
}

/* --- 2-2c 工廠自動化（#plc）的紫色標籤 --------------------------------
   原設計：.label { width: 200px; height: 40px; line-height: 40px }
   與智慧交通那組是同樣的問題，但選擇器不同，先前那次沒有一併蓋到。
   「Manufacturing Management System」在 200px 寬會排成三行，
   而框高固定 40px，文字整個掉出紫色膠囊之外（量測為突出 71px）。 */
section#plc .item-all .item .label {
  height: auto;
  min-height: 40px;
  line-height: 1.4;
  /* 原本靠 line-height:40px 做垂直置中，改為多行後要用內距補回 */
  padding: 9px 25px;
}

@media (min-width: 768px) {
  section#plc .item-all .item .label {
    width: auto;
    min-width: 200px;
    max-width: 100%;
  }
}

/* --- 2-2d 整頁橫向捲軸 -------------------------------------------------
   每個區塊都有一張刻意伸出右緣的裝飾底圖，例如
     section#index-page-plan::after { right: -5%; width: 500px }
   它讓文件捲動寬固定比視窗多出 5%（1920 下 96px、1440 下 72px），
   整站每一頁都會出現一條沒有內容的橫向捲軸。繁中也一樣，屬原設計既有問題。
   裝飾本身要保留，因此不是移除它，而是把超出的部分裁掉。
   用 clip 而非 hidden：hidden 會連帶把另一軸變成 auto，
   clip 只裁不捲，也不會影響垂直方向。 */
html,
body {
  overflow-x: clip;
}

/* --- 2-3 「讓既有設備具備決策能力」的六個標籤 --------------------------
   col-md-2 只有 16.6% 寬，中文四字剛好，英文的
   「Systems Integration」「Nhận dạng hình ảnh AI」會撐破。 */
#capability .plan-item-bg { display: flex; }
#capability .plan-item {
  width: 100%;
  height: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
}
#capability .plan-item h5 {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  word-break: break-word;
}

/* 原始版型只準備了四張底圖（plan-photo-01～04），但新版文案有六項能力，
   「系統整合」與「資料分析」兩格因此是空的白底，白字幾乎看不見。
   補上第五、六張，尺寸與既有四張一致（700x800），
   各斷點的 background-size 也沿用原設計的數值，視覺才會整齊。
   圖片來源見 docs\ASSETS.md（Pexels 授權，可商用、免標示）。 */
.plan-item-bg:nth-child(5) .plan-item {
  background: url(../img/plan-photo-05.jpg) center;
  background-size: 280px 380px;
  transition: all .3s linear;
}
.plan-item-bg:nth-child(5) .plan-item:hover { background-size: 300px 400px; }

.plan-item-bg:nth-child(6) .plan-item {
  background: url(../img/plan-photo-06.jpg) center;
  background-size: 280px 380px;
  transition: all .3s linear;
}
.plan-item-bg:nth-child(6) .plan-item:hover { background-size: 300px 400px; }

@media (max-width: 767px) {
  .plan-item-bg:nth-child(5) .plan-item,
  .plan-item-bg:nth-child(6) .plan-item { background-size: 380px 480px; }
  .plan-item-bg:nth-child(5) .plan-item:hover,
  .plan-item-bg:nth-child(6) .plan-item:hover { background-size: 400px 500px; }
}

@media (max-width: 576px) {
  .plan-item-bg:nth-child(5) .plan-item,
  .plan-item-bg:nth-child(6) .plan-item { background-size: 280px 380px; }
  .plan-item-bg:nth-child(5) .plan-item:hover,
  .plan-item-bg:nth-child(6) .plan-item:hover { background-size: 300px 400px; }
}

/* --- 2-4 服務項目 / 產業方案卡片 --------------------------------------
   四張卡片並排，標題與說明在長語言下會溢出固定高度。 */
.service-item, .plan-item { height: auto; }
.service-item .service-text h5, .plan-item h5 { line-height: 1.4; }
.service-item .service-text p { line-height: 1.7; }

/* --- 2-4b 專案實績卡片的 hover 標題被裁切 ------------------------------
   原設計：section#project .item .photo .text-g { height:100%; overflow:hidden }
   浮層高度就是照片高度，標題長到超過照片就直接被切掉，而且是切在字中間，
   看起來像是資料壞了而不是「還有更多字」。

   繁中的實績標題多在 12～16 字，照片高度綽綽有餘，所以原版看不出問題；
   換成英文／越南文後標題可達 90 字元以上，平板寬度（照片變窄、字數不變）
   最嚴重被切掉 68px（英文「Guaranteed Responsibility for Taipei City
   Fourth Warehouse Utilization Cooperative」，768×1024）。
   實測 5 語系×5 尺寸×6 張卡共 150 次 hover，15 筆被裁，全落在 768～1024px；
   繁中 0 筆，確認是語言造成而非原設計缺陷。

   對策不是把浮層放大（會蓋掉整張照片），而是讓標題有上限並明確地收尾：
   限制行數 + 省略號，讀者看得出「標題還沒完」，點進去 Modal 有完整內容。
   行數以 768px 時照片可容納的高度回推：平板 3 行、手機 4 行（手機照片較高）。 */
   注意：-webkit-box + overflow:hidden 只在需要截斷的寬度才套用。
   全域套用的話，桌機的最後一行會被 -webkit-box 的行高捨入誤差削掉約 2px，
   中文看不出來，英文的 g／y／p 尾巴會被剃平。桌機的照片夠高、標題放得下，
   本來就不必截斷，那就不要動它。 */
section#project .item .photo .text-g .text h5 { overflow-wrap: break-word; }

@media (max-width: 1024px) {
  /* 這個寬度下照片只剩約 107px 高，可用的垂直空間非常有限：
     內距 15px×2 已經吃掉 30px。標題放 3 行（70px）加上換成兩行的類型標籤，
     就會上下各溢出 7px（實測：en/ja/vi 的高雄港與 POS 那幾張）。
     因此標題收到 2 行、標籤固定 1 行、內距縮到 10px。 */
  section#project .item .photo .text-g { padding: 10px; }

  section#project .item .photo .text-g .text h5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.45;
  }

  /* 類型標籤只是輔助資訊，寧可截斷也不該把標題擠出容器 */
  section#project .item .photo .text-g .text p {
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 767.98px) {
  section#project .item .photo .text-g .text h5 { -webkit-line-clamp: 4; }
}

/* --- 2-6 邊緣運算的動畫改用影片 ---------------------------------------
   原設計是 .photo-edge img { width:100% }，換成 <video> 之後要接上同一條規則，
   否則影片會以原生尺寸撐破那個 10px 邊框的螢幕外框。
   display:block 是為了消掉 inline 元素底部的基線空隙。 */
section#edge-computing .photo-all .photo-edge video {
  width: 100%;
  display: block;
}

/* --- 2-5 通用保險 -----------------------------------------------------
   任何長單字（越南文與英文的長複合詞）都不該把版面往右撐出捲軸。 */
#index-page-service .service-text,
#index-page-advantage .advantage-text,
.title, .text, footer { overflow-wrap: break-word; }


/* =====================================================================
   三、可讀性
   原設計 body 為 font-weight:300 + color:#515155 + letter-spacing:.1rem，
   在 16px 之下整體偏淡偏小。以下把字級、字重與對比一起提高。
   ===================================================================== */

html { font-size: 17px; }

body {
  font-weight: 400;          /* 300 太細，中文尤其糊 */
  color: #2f3338;            /* 原 #515155，加深以提高對比 */
  letter-spacing: .04rem;    /* 原 .1rem 過寬，反而降低辨識度 */
}

p { line-height: 1.9; }      /* 原為固定 1.8rem，改用無單位才會隨字級縮放 */

.text p, .text li { font-size: 1rem; }
.text h5 { font-size: 1.25rem; line-height: 1.7; }
.text h6 { font-size: 1.05rem; font-weight: 500; color: #2f3338; }

.title h2 { font-size: 2rem; }
.title > p { font-size: 1.02rem; line-height: 1.9; color: #3d4249; }

/* 標題底下那條裝飾線，原設計是 position:absolute + top:3.2rem（main.css:51、54），
   等於寫死「標題只有一行、字級固定」。兩種情況會壞：
     一、標題折行時線落在第二行上（越南文的「An toàn lao động thông minh」被壓到）；
     二、上面幾條規則在斷點縮小了 h2 字級，線的位置卻不跟著走。
   改以 h2 底邊為基準。單行時位置與原設計相同（誤差 0.4px），折行與縮字都會自己對。 */
.title h2::after { top: auto; bottom: -19px; }
.title.center h2::after { top: auto; bottom: -16px; transform: translateX(-50%); }

.service-item .service-text p,
.advantage-text p { font-size: .98rem; }

/* 頁尾在深紫底上原為 #8e8eb2，對比偏低（見 2026-08-24_18h50_02 截圖）。 */
footer p, footer li { font-size: .95rem; font-weight: 400; color: #c9c9e4; }
.footer-list-sec > li a { color: #c9c9e4; }
.footer-list-sec > li a:hover { color: #ffffff; }
.footer-list > li, .footer-list > li a { font-size: 1rem; }

@media (max-width: 991.98px) {
  html { font-size: 16px; }
  .title h2 { font-size: 1.7rem; }
}

@media (max-width: 576px) {
  /* 原設計此處降到 14px，過小；提到 15.5px 並收緊標題 */
  html { font-size: 15.5px; }
  .title h2 { font-size: 1.5rem; }
}


/* =====================================================================
   四、文字對齊
   段落文字維持置中（區塊標題下方的導言）；其餘內文一律左右對齊。
   中日韓文以 inter-ideograph 斷行，兩端才會真正切齊。
   ===================================================================== */

.text p,
.text li,
.item-text p,
.modal-con p {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* 置中的導言段落不受影響 */
.title.center > p,
.title > p,
.text.center,
.text.center p {
  text-align: center;
  text-justify: auto;
}

/* 越南文與英文在窄螢幕下 justify 會出現過大字距，改回靠左 */
@media (max-width: 576px) {
  .text p, .text li, .item-text p, .modal-con p { text-align: left; }
}

/* --- 拉丁語系的窄欄不做左右對齊 ----------------------------------------
   中日韓文以字為單位斷行，justify 之後字距均勻、兩端切齊很好看（見繁中版）。
   但英文與越南文是以「詞」為單位，欄寬一窄就只能靠拉大字距來對齊，
   會出現「Designing␣␣␣␣␣␣page」這種誇張間隔，反而更難讀。
   因此以 :lang() 針對拉丁語系，把窄欄改回靠左；
   寬幅的內文段落仍維持左右對齊，並開啟連字符減少字距拉扯。

   注意要蓋在 .item-text 這一層而不是只蓋 p：
   原設計的 justify 寫在 .item-text 上，裡面的 h5 是繼承來的，
   只改 p 的話標題仍會被拉開成「System␣␣␣Analysis」。 */
html:lang(en) .item-text,
html:lang(vi) .item-text,
html:lang(en) .item-text p,
html:lang(vi) .item-text p,
html:lang(en) .item-text h5,
html:lang(vi) .item-text h5,
html:lang(en) .service-item .service-text p,
html:lang(vi) .service-item .service-text p,
html:lang(en) .modal-con p,
html:lang(vi) .modal-con p {
  text-align: left;
}

html:lang(en) .text p,
html:lang(vi) .text p {
  hyphens: auto;
}