@charset "UTF-8";

/* ==========================================================
   1. 共用設定 (Banner & Breadcrumb & Layout)
   ========================================================== */

/* Page Banner */
.page-banner {
  width: 100%;
  position: relative;
  margin-top: var(--nav-height-mobile, 45px);
  display: block;
}
@media (min-width: 768px) {
  .page-banner {
    margin-top: var(--nav-height-tablet, 55px);
  }
}
@media (min-width: 1024px) {
  .page-banner {
    margin-top: var(--nav-height-desktop, 79px);
  }
}

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

/* Container: 嚴格對應 variables.css 的寬度定義 */
.x720-container {
  width: var(--container-fluid-width, 90%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Section Spacing */
.section-sitemap {
  padding-top: 1rem;
  padding-bottom: 5rem;
}

.line-decor {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: #ccc;
  z-index: 1;
}

/* Breadcrumb */
.x720-breadcrumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  height: 28px;
  margin-bottom: 2rem;
}
.breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--color-header);
  font-size: var(--fs-body-base);
  font-weight: var(--fw-semilight);
  padding-bottom: 1px;
  transition: all 0.3s ease;
}
.breadcrumb-link span {
  border-bottom: 1px solid #666;
}
.breadcrumb-link:hover {
  color: #000;
}
.breadcrumb-link img {
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
}
.breadcrumb-sep {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}
.breadcrumb-current {
  color: var(--primary-color, #4fa8d8);
  font-size: var(--fs-body-base, 1rem);
  letter-spacing: 0.5px;
}

/* ==========================================================
   2. 修正標題對齊 (Fix Alignment)
   ========================================================== */
.section-sitemap .subtitle-badge {
  margin-left: 0 !important;
}

/* ==========================================================
   3. 頁面內容樣式
   ========================================================== */
.content-text {
  color: var(--color-black);
  font-size: var(--fs-body-focus);
  font-weight: var(--fw-regular);
  line-height: 1.8;
  margin: 0;
}

.key-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.key-badge {
  background-color: #333;
  color: #fff;
  padding: 4px 16px;
  border-radius: 50px;
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: bold;
  min-width: 80px;
  text-align: center;
  letter-spacing: 1px;
}

/* ==========================================================
   4. 網站地圖連結卡片 (已修正文字截斷與寬度)
   ========================================================== */
.sitemap-links-section {
  padding: 0;
}

.sitemap-card {
  box-sizing: border-box;
  display: block; /* 改為 block 確保截斷正常運作 */
  width: 100%;
  max-width: 320px; /* 原本 284px，拉寬以容納更多字 */
  height: 45px;
  line-height: 43px; /* 垂直置中 (45px - 2px 上下邊框) */
  margin: 0 auto;
  padding: 0 20px; /* 縮小左右 padding 讓字有更多空間 (原本40px) */

  background: var(--color-white);
  border: 1px solid var(--secondary-color-1);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;

  /* 文字截斷核心設定 */
  white-space: nowrap; /* 強制不換行 */
  overflow: hidden; /* 超出範圍隱藏 */
  text-overflow: ellipsis; /* 顯示刪節號 ... */
  text-align: center; /* 文字置中 */

  text-decoration: none;
  color: var(--secondary-color-1);
  font-size: var(--fs-body-focus);
  font-weight: var(--fw-regular);
  transition: all 0.2s ease;
}

.sitemap-card:hover {
  background-color: var(--secondary-color-1);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
  .content-text {
    font-size: var(--fs-body-base);
    font-weight: var(--fw-semilight);
  }
}

@media (max-width: 768px) {
  .sitemap-card {
    font-size: var(--fs-body-base);
    font-weight: var(--fw-semilight);
    padding: 0 12px; /* 手機版進一步縮小 padding 以極大化文字顯示空間 */
  }
}