/* =========================================================
   KKOCX / 政揚 UI Kit v1.0
   命名規則：zy-* 皆為可重用元件樣式
   ========================================================= */

:root{
  /* 色票（對齊你現有配色） */
  --zy-primary-500:#3b82f6;   /* Indigo/Blue gradient 起點 */
  --zy-primary-600:#2563eb;   /* Indigo/Blue gradient 終點 */
  --zy-primary-700:#1d4ed8;
  --zy-indigo-600:#6366f1;

  --zy-text-900:#111827;
  --zy-text-800:#1f2937;
  --zy-text-700:#374151;
  --zy-text-600:#4b5563;

  --zy-bg:#ffffff;
  --zy-bg-soft:#f8fafc;
  --zy-bg-soft-2:#eef2f7;

  --zy-danger:#dc2626;
  --zy-success:#16a34a;

  --zy-badge-bg:#dbeafe;
  --zy-badge-text:#2563eb;

  /* 造型 */
  --zy-radius-lg:1rem;        /* 16px */
  --zy-radius-md:.75rem;      /* 12px */
  --zy-pill:9999px;

  /* 陰影 */
  --zy-shadow-card:0 10px 25px rgba(2,132,199,.12);
  --zy-shadow-mini:0 4px 12px rgba(0,0,0,.05);
  --zy-shadow-toast:0 8px 24px rgba(0,0,0,.25);

  /* 間距 */
  --zy-gap-lg:2rem;
  --zy-gap-md:1.25rem;

  /* 動畫 */
  --zy-anim-in:.2s ease;
}

/* ============ 排版 / 容器 ============ */
.zy-container{
  max-width:1120px;
  margin:0 auto;
  padding:0 1rem;
}
.zy-hero{
  text-align:center;
  margin-bottom:3rem; /* 12 */
}
@media (min-width:768px){
  .zy-hero{ margin-top:4rem; }   /* md:mt-16 */
}
@media (min-width:1024px){
  .zy-hero{ margin-top:5rem; }   /* lg:mt-20 */
}

/* 主/副標題（維持你現在大小與動畫） */
@keyframes zy-fade-in-up{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.zy-title-main{
  font-size:36px;
  font-weight:700;
  color:var(--zy-text-800);
  display:inline-block;
  margin-bottom:.5rem;
  padding-bottom:6px;
  border-bottom:4px solid var(--zy-indigo-600);
  animation:zy-fade-in-up .6s ease-out;
}
.zy-title-sub{
  font-size:22px;
  font-weight:500;
  color:var(--zy-text-600);
  animation:zy-fade-in-up .8s ease-out;
}
@media (max-width:640px){
  .zy-title-sub{ font-size:18px; }
}

/* ============ 卡片 ============ */
.zy-card{
  background:var(--zy-bg);
  border-radius:var(--zy-radius-lg);
  box-shadow:var(--zy-shadow-card);
  transition:transform .2s ease;
  padding:2rem 2.5rem;
  width:100%;
}
.zy-card:hover{ transform:translateY(-4px); }

.zy-card-title{
  font-size:1.25rem;
  font-weight:700;
  color:var(--zy-text-800);
  text-align:center;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* 檔案卡片區（上半部兩欄 / 手機單欄） */
.zy-grid-files{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--zy-gap-lg);
}
@media (max-width:820px){
  .zy-grid-files{
    grid-template-columns:1fr;
    gap:var(--zy-gap-md);
  }
}

/* 群組卡片（固定單欄） */
.zy-grid-sections{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--zy-gap-lg);
  margin-top:var(--zy-gap-lg);
}

/* 小卡網格（年/工具） */
.zy-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  width:100%;
}
@media (max-width:900px){ .zy-grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .zy-grid-3{ grid-template-columns:1fr;} }

/* 年度 / 工具 小卡 */
.zy-mini-card{
  background:var(--zy-bg-soft);
  border-radius:var(--zy-radius-md);
  padding:.9rem;
  text-align:center;
  box-shadow:var(--zy-shadow-mini);
  transition:background var(--zy-anim-in), transform var(--zy-anim-in);
  cursor:pointer;
}
.zy-mini-card:hover{
  background:var(--zy-bg-soft-2);
  transform:translateY(-2px);
}
.zy-mini-title{
  display:block;
  font-size:1rem;
  font-weight:700;
  color:#0f172a;
}
.zy-mini-sub{
  display:block;
  margin-top:.15rem;
  font-size:.8rem;
  color:#475569;
}

/* ============ 按鈕 ============ */
.zy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--zy-pill);
  font-weight:600;
  padding:.8rem 1.5rem;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  user-select:none;
  text-decoration:none;
}

.zy-btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--zy-primary-500), var(--zy-primary-600));
}
.zy-btn-primary:hover{
  background:linear-gradient(135deg, var(--zy-primary-600), var(--zy-primary-700));
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(37,99,235,.35);
}

/* 未開放按鈕/卡片 */
.zy-locked-card{ opacity:.95; filter:grayscale(.12); }
.zy-btn-locked{
  color:#fff;
  background:linear-gradient(135deg, #9ca3af, #6b7280);
  cursor:not-allowed;
}

/* ============ Badge / 標籤 ============ */
.zy-badge{
  font-size:.9rem;
  color:var(--zy-badge-text);
  background:var(--zy-badge-bg);
  border-radius:var(--zy-pill);
  padding:.3rem .8rem;
  white-space:nowrap;
}

/* ============ Toast / 提示泡泡 ============ */
#toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  padding:10px 16px;
  border-radius:var(--zy-pill);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
  box-shadow:var(--zy-shadow-toast);
  z-index:9999;
}
.toast--danger{ background:var(--zy-danger) !important; }
.toast--success{ background:var(--zy-success) !important; }

/* ============ 輔助工具類 ============ */
.zy-center{ display:flex; align-items:center; justify-content:center; }
.zy-mt-lg{ margin-top:var(--zy-gap-lg); }
.zy-mb-lg{ margin-bottom:var(--zy-gap-lg); }
.zy-text-center{ text-align:center; }

/* ============ 可選：版面背景（沿用你原本的漸層） ============ */
.zy-page-bg{
  background:linear-gradient(to right, #e0f2fe, #f0f9ff);
  min-height:100vh;
}