/* ========================================================
   AI 光敏印章手作工作坊 - 教師端與學員端共用本地字型庫 (fonts.css)
   全部使用專案內 WOFF2 字型檔，不依賴 Google Fonts 或 jsDelivr
   ======================================================== */

/* --- 中文：基本 --- */
@font-face {
  font-family: 'Noto Sans TC';
  src: url('assets/fonts/NotoSansTC.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif TC';
  src: url('assets/fonts/NotoSerifTC.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 中文：可愛 --- */
@font-face {
  font-family: 'jf-openhuninn';
  src: url('assets/fonts/jf-openhuninn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 中文：手寫 --- */
@font-face {
  font-family: 'LXGW WenKai TC';
  src: url('assets/fonts/LXGWWenKaiTC-Bold.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JasonHandwriting';
  src: url('assets/fonts/JasonHandwriting2.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ChenYuluoyan';
  src: url('assets/fonts/ChenYuluoyan.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 英文：基本 --- */
@font-face {
  font-family: 'Noto Sans';
  src: url('assets/fonts/NotoSans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 英文：可愛 --- */
@font-face {
  font-family: 'Fredoka';
  src: url('assets/fonts/Fredoka.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lilita One';
  src: url('assets/fonts/LilitaOne.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chewy';
  src: url('assets/fonts/Chewy.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sniglet';
  src: url('assets/fonts/Sniglet.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Baloo 2';
  src: url('assets/fonts/Baloo2.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url('assets/fonts/Quicksand.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 英文：手寫／草寫 --- */
@font-face {
  font-family: 'Caveat';
  src: url('assets/fonts/Caveat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pacifico';
  src: url('assets/fonts/Pacifico.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 兩端共用字型面板樣式 --- */
#drawerPane_font .lc-font-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  max-height: 128px;
  overflow-y: auto;
  padding: 2px;
}

@media (max-width: 480px) {
  #drawerPane_font .lc-font-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: 148px;
  }
}

#drawerPane_font .lc-font-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 4px 4px;
  border-radius: 8px;
  border: 1.5px solid #CBD5E1;
  background: #F8FAFC;
  color: #1E293B;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.14s ease;
}

#drawerPane_font .lc-font-tile .lc-font-cat {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748B;
  line-height: 1.1;
  pointer-events: none;
}

#drawerPane_font .lc-font-tile .lc-font-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

#drawerPane_font .lc-font-tile:hover,
#drawerPane_font .lc-font-tile.active {
  background: #FCE8E6;
  border-color: #D93025;
  color: #B31412;
  font-weight: 800;
}

#drawerPane_font .lc-font-tile:hover .lc-font-cat,
#drawerPane_font .lc-font-tile.active .lc-font-cat {
  color: #D93025;
}