@charset "UTF-8";

/* ==========================================================================
   PlayPlus - 法律聲明與條款專用樣式 (legal.css)
   適用頁面：privacy.html (隱私權政策)、terms.html (服務條款)
   遵循 PlayPlus 全站 Design System 規範與 2026 視覺風格
   ========================================================================== */

/* ── 頁面整體包裝區塊 ── */
.legal-page-wrapper {
  position: relative;
  z-index: 1;
  background-color: var(--bg-main);
  background-image:
    radial-gradient(ellipse 65% 50% at 85% 10%, rgba(212, 162, 127, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 12% 35%, rgba(51, 204, 51, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 65% 55% at 80% 80%, rgba(235, 219, 188, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 92%, rgba(51, 204, 51, 0.06) 0%, transparent 68%);
  background-repeat: no-repeat;
  min-height: 100vh;
  padding-bottom: var(--space-6xl);
}

/* ── 麵包屑導航 Breadcrumb ── */
.breadcrumb-nav {
  margin-top: 0;
  padding-top: calc(76px + var(--space-md));
  padding-bottom: var(--space-md);
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .breadcrumb-nav {
    padding-top: calc(70px + var(--space-sm));
  }
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-muted);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb-item a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb-item a:hover {
  color: var(--swatch-brand-green);
}

.breadcrumb-item.current {
  color: var(--text-primary);
  font-weight: 600;
}

.breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  color: var(--swatch-cloud-dark);
  opacity: 0.6;
}

.breadcrumb-separator svg {
  width: 14px;
  height: 14px;
}

/* ── HERO 頂部介紹區塊 ── */
.legal-hero-section {
  padding: var(--space-xl) 0 var(--space-3xl);
  position: relative;
  z-index: 1;
}

.legal-hero-inner {
  max-width: 980px;
  margin: 0 auto;
}

/* 頂部眉標徽章 */

.legal-hero-title {
  font-family: var(--font-sans);
  font-size: round(nearest, clamp(2.2rem, 4vw, 3rem), 2px);
  font-weight: 800;
  color: var(--swatch-slate-dark);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md) 0;
}

/* 條款狀態/版本資訊列 */

/* 前言導讀卡片 */

.legal-hero-lead-text {
  font-size: round(nearest, clamp(1rem, 1.3vw, 1.08rem), 2px);
  line-height: 1.85;
  color: var(--swatch-slate-dark);
  margin: 0;
}

/* ── 置中純文字版本 (適用於 terms.html 簡潔排版) ── */
.legal-hero-section.legal-hero-centered {
  text-align: center;
  padding-bottom: var(--space-3xl);
}

.legal-hero-inner.centered {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.legal-hero-inner.centered .legal-hero-title {
  text-align: center;
}

/* 前言純文字樣式 (無卡片外框、無陰影) */
.legal-hero-lead {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 820px;
  margin: var(--space-md) auto 0;
  text-align: center;
}

.legal-hero-lead .legal-hero-lead-text {
  font-size: round(nearest, clamp(1rem, 1.25vw, 1.08rem), 2px);
  line-height: 1.85;
  color: var(--swatch-slate-light);
  margin: 0;
  text-align: center;
}

/* 內文置中排版容器 */
.legal-article-body.legal-article-centered {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ── 核心排版網格 (左側目錄 + 右側條款內文) ── */

/* ── 左側 Sticky 側邊欄 ── */

/* 目錄連結清單 */

/* 條款切換卡片 */

/* 諮詢聯絡小卡 */

/* ── 右側條款文章主體 ── */
.legal-article-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  min-width: 0;
}

/* 條款區塊卡片 */
.legal-section-card {
  background: var(--swatch-white);
  border: 1px solid rgba(21, 22, 26, 0.08);
  border-radius: var(--radius-card);
  padding: var(--space-2xl) var(--space-3xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  scroll-margin-top: calc(76px + var(--space-lg));
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  position: relative;
}


/* 區塊標題 */
.legal-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(21, 22, 26, 0.06);
}

.legal-section-title {
  font-family: var(--font-sans);
  font-size: round(nearest, clamp(1.25rem, 2vw, 1.45rem), 2px);
  font-weight: 800;
  color: var(--swatch-slate-dark);
  line-height: 1.4;
  margin: 0;
  letter-spacing: -0.01em;
}

/* 段落文字排版 */
.legal-p {
  font-size: var(--text-base);
  line-height: 1.9;
  color: #2c2e35;
  margin: 0 0 var(--space-md) 0;
  text-align: left;
}

.legal-p:last-child {
  margin-bottom: 0;
}

/* 條列清單樣式 */

/* 編號子清單 (有序列表 1, 2, 3...) */

/* 重點提示 / 但書強調——沿用站上既有的左側綠線純文字樣式
   （跟 .what-is-highlight-box／.contact-reassure-note 同一套做法），
   不另外做獨立的卡片樣式（無底色、無外框、無圓角） */

/* 條款內行內連結樣式 */
.legal-inline-link {
  color: #157315;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) ease;
}

.legal-inline-link:hover {
  color: var(--swatch-slate-dark);
}

/* ── 頁尾延伸導航雙卡片 ── */

/* ── 響應式佈局適應 ── */

@media (max-width: 768px) {
  .legal-section-card {
    padding: var(--space-xl) var(--space-lg);
  }

  .legal-section-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  

  
}

/* 條款聯絡資訊：兩頁共用欄位順序與對齊方式。 */
.legal-contact-details {
  margin-top: var(--space-lg);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-primary);
}
.legal-contact-row {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: var(--space-xs) var(--space-sm);
  padding: 0;
}

.legal-contact-row dt { color: var(--text-secondary); font-weight: 500; }
.legal-contact-row dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .legal-contact-row { grid-template-columns: 1fr; gap: 2px; }
  .legal-contact-row + .legal-contact-row { margin-top: 1rem; }
}