/* === Theme variables (light default) === */
:root{
  --bg:#ffffff; --text:#111111;
  --muted:#666; --border:#e5e5e5;
  --card-bg:#f9f9f9; --card-border:#e5e5e5;
  --btn-bg:#2563eb; --btn-text:#fff; --btn-border:transparent;
  --input-bg:#fff; --input-text:#111; --input-border:#ddd;
  --link:#2563eb;
}
/* Dark */
html[data-theme="dark"]{
  --bg:#141414; --text:#eaeaea;
  --muted:#aaa; --border:#3a3a3a;
  --card-bg:#1f1f1f; --card-border:#3a3a3a;
  --btn-bg:#3b82f6; --btn-text:#fff; --btn-border:#3a3a3a;
  --input-bg:#161616; --input-text:#eaeaea; --input-border:#3a3a3a;
  --link:#90c2ff;
}

/* = Base = */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Noto Sans TC",sans-serif;
  transition: background .25s, color .25s;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

/* = Layout = */
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.site-header{position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:56px}
/* 左上角品牌 LOGO */
.brand {
  font-weight: 700;
  font-family: "Inter", "Noto Sans TC", "Noto Sans JP", system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--brand-color, #ffd700); /* 可隨時改顏色 */
  text-decoration: none !important;  /* 強制移除底線 */
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .2s ease, opacity .2s ease;
}

.brand:hover {
  opacity: 0.8;
}

.brand:focus-visible {
  outline: 2px solid var(--brand-outline, #3fa9f5);
  outline-offset: 2px;
}

/* Header 右側 icon 按鈕 (🌙 / 🌐 EN / YouTube) */
.nav-right {
  display: flex;
  gap: 12px;                   /* icon 之間間距 */
  align-items: center;
}

.icon-btn {
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;              /* emoji 與 globe icon 尺寸 */
  line-height: 1;
  color: var(--fg, #111);
  font-family: inherit;         /* 跟 LOGO 用同字型 */
  transition: opacity .2s ease, transform .1s ease;
}

.icon-btn:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

/* = Hero = */
.hero{padding:28px 0 12px}
.hero .sub{color:var(--muted); margin:.25rem 0 1rem}
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.input,.select{
  height:36px; padding:0 10px; border-radius:8px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--input-text);
}
.input{min-width:240px}
.select.small{height:32px}
.btn{
  height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--btn-border);
  background:var(--btn-bg); color:var(--btn-text); cursor:pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn.play{font-weight:600}

/* = Toolbar + grid = */
.toolbar{
  display:flex;
  align-items:center;
  /* 原本是 space-between，改成左對齊 + 允許換行 */
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:12px;
  padding:10px 0;
}

/* 小補強：避免子元素被拉伸 */
.toolbar > * { flex: 0 0 auto; }

.count{color:var(--muted)}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, background .25s, border-color .25s;
}
.card:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12)}
.card .thumb{aspect-ratio:16/9; width:100%; object-fit:cover; background:#000}
.card .body{padding:12px}
.card .title{margin:0 0 6px 0; font-size:16px; line-height:1.3}
.meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.06)}
html[data-theme="dark"] .badge{background:rgba(255,255,255,.08)}
.actions{display:flex; gap:8px; margin-top:10px}
.tags{display:flex; gap:6px; flex-wrap:wrap; color:var(--muted); font-size:12px}
.tag{background:transparent; border:1px dashed var(--card-border); padding:2px 6px; border-radius:999px}

/* = Pager = */
.pager{display:flex; gap:6px; justify-content:center; padding:16px 0 28px}
.pagebtn{padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer}
.pagebtn.active{background:var(--btn-bg); color:#fff; border-color:var(--btn-bg)}

/* = Modal dialog = */
dialog{border:none; padding:0; border-radius:12px; max-width:960px; width:min(90vw,960px)}
::backdrop{background:rgba(0,0,0,.5)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--bg)}
.modal-body{width:100%; height:min(70vh,600px); background:#000}
#modalTitle{margin:0; font-size:16px}
#modalClose{height:32px; padding:0 8px}

/* = Footer = */
.site-footer{border-top:1px solid var(--border); margin-top:24px}
.foot{display:flex; align-items:center; justify-content:space-between; height:56px; color:var(--muted)}
.backtop{font-weight:700}


/* === YouTube icon 顏色設定 === */
.yt-icon {
  fill: red;                   /* 預設紅色 */
  transition: fill 0.3s ease;  /* 平滑過渡效果 */
}

.yt-icon:hover {
  fill: #cc0000;               /* 滑鼠移過 → 深紅色 */
}

/* YouTube icon 按鈕 (乾淨版，無背景框) */
.youtube-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0;
}

.yt-icon {
  width: 28px;
  height: 28px;
  fill: red;
  transition: transform 0.2s ease, fill 0.3s ease;
}

.yt-icon:hover {
  fill: #cc0000;
  transform: scale(1.15);
}

/* === Icon Buttons (主題/語言/YouTube 都共用，乾淨無框) === */
.icon-btn {
  background: none;
  border: none;
  padding: 6px;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px; /* 給 emoji（🌙/☀️/🌐）適合的大小 */
  line-height: 1;
}

.icon-btn:hover {
  opacity: 0.7;
}

.card .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.card .actions .btn {
  font-size: 13px;
  padding: 6px 10px;
}

.btn.yt-only {
  background: #FF0000;
  color: #fff;
  border: none;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.btn.yt-only svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* 前面原本的按鈕、卡片、篩選器樣式 … */

/* === 推薦影片 Featured Section === */
.featured-slot {
  margin: 20px auto;
  max-width: 960px;
}

.featured-card {
  background: var(--bg2, #f9f9f9);
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.featured-card h2 {
  margin-bottom: 12px;
  font-size: 1.2rem;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.video-wrapper iframe {
  position: absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  border:0;
}

/* === 推薦影片 Featured Section === */
.featured-card {
  background: var(--bg2, #f9f9f9); /* 白天 */
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  color: var(--fg, #111); /* 白天文字顏色 */
}

.featured-card h2 {
  margin-bottom: 12px;
  font-size: 1.2rem;
}

/* 夜間模式 */
[data-theme="dark"] .featured-card {
  background: #222;       /* 深灰底 */
  color: #eee;            /* 亮文字 */
}

[data-theme="dark"] .featured-card h2 {
  color: #fff;            /* 標題更亮 */
}

/* ===========================
   Topic page styles
   =========================== */

.topic.container { max-width: 1100px; }

/* 麵包屑 */
.topic .crumbs {
  margin: 12px 0 20px;
  color: var(--muted);
  font-size: .95rem;
}
.topic .crumbs a { color: var(--accent, #2563eb); text-decoration: none; }
.topic .crumbs a:hover { text-decoration: underline; }
.topic .crumbs span { opacity: .6; margin: 0 .35rem; }

/* 標題區 */
.topic .topic-head { margin: 6px 0 18px; }
.topic .topic-head h1 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 2vw + 1.2rem, 2.1rem);
  line-height: 1.2;
}
.topic .topic-head .subtitle {
  margin: 0 0 10px;
  color: var(--muted);
}

/* 膠囊 chips */
.topic .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.topic .chip {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 10px;
  border-radius: 999px;
  background: var(--input-bg, #f4f4f4);
  color: var(--fg);
  font-size: .9rem;
  border: 1px solid var(--input-border, #e5e7eb);
}

/* 影片 16:9 */
.topic .yt-wrap {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.topic .yt-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.topic .caption { color: var(--muted); margin: 8px 2px 0; }

/* 章節 */
.topic .topic-section { margin: 26px 0; }
.topic .topic-section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 1.2vw + .9rem, 1.35rem);
}
.topic .topic-section p { margin: 10px 0; }

/* 清單 */
.topic .step-list { padding-left: 1.2rem; }
.topic .step-list li { margin: 6px 0; }

/* 資訊表格 */
.topic .info-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px; overflow: hidden;
}
.topic .info-table th,
.topic .info-table td {
  padding: 10px 14px;
  vertical-align: top;
  border-top: 1px solid var(--border, #e5e7eb);
}
.topic .info-table tr:first-child th,
.topic .info-table tr:first-child td { border-top: none; }
.topic .info-table th {
  width: 160px; color: var(--muted); text-align: left;
}

/* 註記 */
.topic .callout {
  border: 1px solid var(--border, #e5e7eb);
  border-left-width: 4px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--card, #fff);
  margin: 12px 0;
}
.topic .callout.info { border-left-color: #2563eb; }

/* 頁尾 */
.topic .topic-foot { margin: 28px 0 12px; }
.topic .backtop { font-weight: 700; text-decoration: none; }

/* 深色模式微調 */
html[data-theme="dark"] .topic .chip {
  background: #1f2937; border-color: #2b3442;
}
html[data-theme="dark"] .topic .info-table {
  background: #111827; border-color: #2b3442;
}
html[data-theme="dark"] .topic .callout {
  background: #0b1220; border-color: #2b3442;
}
html[data-theme="dark"] .topic .subtitle,
html[data-theme="dark"] .topic .caption {
  color: #9aa4b2;
}

/* 語言切換按鈕（白天模式） */
#langToggle {
  color: #000;  /* 白字變黑字 */
  font-weight: bold;
}

/* 語言切換按鈕（夜晚模式） */
[data-theme="dark"] #langToggle {
  color: #fff;  /* 夜晚用白字 */
}

/* 主題切換按鈕：保證在暗色模式也能看清楚 */
#themeToggle {
  color: #000;
}
[data-theme="dark"] #themeToggle {
  color: #fff;
}

/* Detail 黃色按鈕 */
.btn-detail {
  background: #facc15;        /* 黃色背景 */
  color: #222;                /* 深色文字（在亮色主題看起來清楚） */
  border: 1px solid #eab308;  /* 稍深的黃邊框 */
  font-weight: 600;
}

.btn-detail:hover {
  background: #fde047;        /* hover 更亮一點 */
  border-color: #facc15;
}

/* 深色主題下，字色再壓深一點避免太亮 */
[data-theme="dark"] .btn-detail {
  color: #111;
}

/* 移除卡片按鈕（a.btn）底線 */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active,
.btn-detail,
.btn-detail:link,
.btn-detail:visited,
.btn-detail:hover,
.btn-detail:active,
.btn.ghost,
.btn.ghost:link,
.btn.ghost:visited,
.btn.ghost:hover,
.btn.ghost:active {
  text-decoration: none;
}

/* 讓 a.btn 的排版跟 button 一致（可選） */
.btn,
.btn-detail,
.btn.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}