/* ============================================================
   Icon符號 — 全域樣式
   繁中（台灣）· 純 HTML/CSS/JS 多頁靜態站
   375px 優先撰寫，桌面於 min-width:768px 追加
   ============================================================ */

/* ---------- 設計 Token ---------- */
:root{
  --paper:      #F4F9FF;   /* 頁面底（淡藍白） */
  --surface:    #FFFFFF;   /* 卡片/面板 */
  --ink:        #111111;   /* 主文字（黑） */
  --ink-soft:   #5B564A;   /* 次要文字 */
  --ink-faint:  #8B8575;   /* 弱文字 */
  --line:       #EAE2D0;   /* 分隔線 */
  --line-soft:  #F1ECE0;
  --brand:      #F59F1C;   /* 主強調色：活力青綠 */
  --brand-dark: #C77E08;
  --brand-soft: #FFF3D8;
  --accent:     #F59F1C;   /* 暖金強調（活力） */
  --accent-dark:#C77E08;
  --accent-soft:#FFF3D8;
  --coral:      #F2695B;   /* 珊瑚暖紅（點綴） */
  --coral-soft: #FDE8E2;
  --danger:     #C2453A;
  --danger-soft:#F8E3DF;
  --radius:     14px;
  --radius-s:   10px;
  --shadow:     0 1px 2px rgba(40,38,34,.06), 0 8px 20px -10px rgba(245,159,28,.16);
  --shadow-lg:  0 12px 30px -12px rgba(245,159,28,.32);
  --grad-brand: linear-gradient(135deg,#FFB347 0%, #F59F1C 60%, #E8801A 100%);
  --grad-warm:  linear-gradient(135deg,#FFB347 0%, #F59F1C 60%, #E8801A 100%);
  --font:        "Microsoft JhengHei","PingFang TC","Noto Sans TC","Heiti TC","Segoe UI",system-ui,sans-serif;
  --mono:        "Cascadia Mono","Consolas","Courier New",monospace;
  --header-h:    60px;
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:linear-gradient(180deg,#DDEBFF 0%, #F4F9FF 55%, #FFFFFF 100%);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ line-height:1.3; font-weight:700; margin:0 0 .4em; }
h1{ font-size:1.9rem; }
h2{ font-size:1.4rem; }
h3{ font-size:1.1rem; }
p{ margin:0 0 .9em; }
ul{ padding-left:1.1em; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 16px; }

/* 跳過連結（輔助科技） */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--brand); color:#fff; padding:.5em .9em; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ============================================================
   頁首 Header（多層巢狀 MegaMenu）
   ============================================================ */
#site-header, .site-header{   position:sticky; top:0; z-index:100;   background:linear-gradient(135deg,#16325B 0%, #2E5FA3 50%, #F59F1C 100%);   border-bottom:none; }
.header-bar{
  height:var(--header-h);
  display:flex; align-items:center; gap:12px;
  max-width:1180px; margin:0 auto; padding:0 16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex-shrink:0; }
.brand:hover{ text-decoration:none; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.05rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-name{ font-weight:800; font-size:1.02rem; letter-spacing:.02em; }
.brand-sub{ font-size:.68rem; color:var(--ink-faint); font-weight:500; }

/* 桌面導覽（PC） */
.nav{ display:none; }
@media(min-width:960px){
  .nav{ display:block; margin-left:8px; flex:1; }
  .nav-list{ display:flex; list-style:none; margin:0; padding:0; gap:2px; position:relative; }
  .nav-item{ position:relative; }
  .nav-top{
    display:flex; align-items:center; gap:6px;
    padding:8px 12px; border-radius:9px; font-weight:600; font-size:.92rem;
    color:#fff; border:0; background:none;
    white-space:nowrap; flex-shrink:0;
  }
  .nav-top:hover{ background:rgba(255,255,255,.18); color:#fff; }
  .nav-item.active .nav-top{ background:#16325B; color:#fff; }
  .nav-top .chev{ font-size:.6rem; opacity:.7; transition:transform .15s; }
  .nav-item:hover .nav-top .chev{ transform:rotate(180deg); }

  /* Mega 面板 */
  .mega{
    position:absolute; left:50%; transform:translateX(-50%) translateY(6px); top:100%; z-index:200;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow-lg); padding:1px 2px;
    min-width:min(220px, calc(100vw - 24px)); max-width:min(320px, calc(100vw - 24px));
    opacity:0; visibility:hidden; transition:none;
    display:grid; gap:1px;
  }
  .nav-item:hover .mega, .nav-item.open .mega, .nav-item:focus-within .mega{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  .mega-columns{ display:grid; grid-template-columns:repeat(1,1fr); gap:0; }
  .mega-col-title{
    font-size:.72rem; font-weight:700; color:var(--ink-faint); letter-spacing:.08em;
    margin:0; text-transform:uppercase; font-size:.68rem; text-align:center; cursor:pointer; user-select:none;
  }
  .mega .mega-col .mega-link{ display:none; }
  .mega .mega-col.open .mega-link{ display:flex; }
  .mega-col-title::after{ content:'▾'; margin-left:4px; opacity:.55; }
  .mega-col.open > .mega-col-title::after{ content:'▴'; }
  .mega a.mega-link{
    display:flex; align-items:center; justify-content:center; text-align:center; gap:3px; padding:1px 3px; border-radius:6px;
    color:var(--ink); font-size:.82rem; font-weight:500;
    flex-wrap:nowrap; min-width:0;
  }
.mega-link .lbl{ min-width:0; flex:1 1 auto; }
.mega-link .lbl b{ white-space:normal; }
  .mega a.mega-link:hover{ background:var(--paper); text-decoration:none; color:var(--brand-dark); }
  .mega-link .ic{ width:48px; height:48px; border-radius:12px; background:var(--brand-soft); color:var(--brand-dark);
    display:grid; place-items:center; font-size:1.6rem; flex-shrink:0; }
  .mega-link .lbl b{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); }
  .mega-link .lbl span{ display:none; }
  .mega-note{ margin-top:10px; padding:10px 12px; background:var(--accent-soft); border-radius:10px; font-size:.8rem; color:#6b541a; }
  .mega-foot{ display:none; }
}

/* 手機導覽 */
.nav-toggle{
  display:grid; place-items:center; width:42px; height:42px; margin-left:auto;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink);
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); margin:2.5px 0; border-radius:2px; }
@media(min-width:960px){ .nav-toggle{ display:none; } }

.mobile-nav{
  display:none; border-top:1px solid var(--line); background:var(--surface);
  max-height:calc(100vh - var(--header-h)); overflow-y:auto; padding:10px 16px 18px;
}
.mobile-nav.open{ display:block; }
.m-acc{ border:1px solid var(--line); border-radius:12px; margin:8px 0; overflow:hidden; }
.m-acc-head{
  width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:none; border:0; font-weight:600; font-size:.95rem; text-align:left;
}
.m-acc-head .chev{ margin-left:auto; transition:transform .15s; }
.m-acc.open .m-acc-head .chev{ transform:rotate(180deg); }
.m-acc-body{ display:none; padding:2px 8px 12px; }
.m-acc.open .m-acc-body{ display:block; }
.m-group-label{ font-size:.7rem; color:var(--ink-faint); letter-spacing:.08em; margin:.6em 0 .2em; padding:0 8px; text-transform:uppercase; }
.m-link{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; color:var(--ink); }
.m-link:hover{ background:var(--paper); text-decoration:none; }
.m-link .ic{ width:24px; height:24px; border-radius:6px; background:var(--brand-soft); color:var(--brand-dark); display:grid; place-items:center; flex-shrink:0; }

/* 頁首搜尋（桌上型嵌在導覽後） */
.header-search{ display:none; }
@media(min-width:1200px){
  .header-search{ display:flex; align-items:center; gap:8px; margin-left:8px;
    border:1px solid var(--line); border-radius:999px; padding:5px 8px 5px 14px; background:var(--surface); }
  .header-search input{ border:0; outline:0; background:none; font-size:16px; width:150px; font-family:inherit; }
  .header-search button{ border:0; background:var(--grad-warm); color:#fff; border-radius:999px; padding:5px 12px; font-size:.8rem; }
}

/* ============================================================
   麵包屑 Breadcrumb
   ============================================================ */
.crumb{ margin:14px 0 0; }
.crumb ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0; padding:0; font-size:.82rem; color:var(--ink-faint); }
.crumb li{ display:flex; align-items:center; gap:4px; }
.crumb li+li::before{ content:"/"; color:var(--line); margin:0 2px; }
.crumb a{ color:var(--ink-faint); }
.crumb a:hover{ color:var(--brand); }
.crumb [aria-current]{ color:var(--ink); font-weight:600; }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  background:
    linear-gradient(to right, rgba(244,249,255,1) 0%, rgba(244,249,255,.97) 26%, rgba(244,249,255,.72) 44%, rgba(244,249,255,.28) 62%, rgba(244,249,255,.05) 76%, rgba(244,249,255,0) 88%),
    url("../img/infucoco-base.webp") 72% 40%/cover no-repeat,
    var(--paper);
  border-bottom:1px solid var(--line);
  padding:76px 0 88px;
}
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; color:var(--brand-dark); background:var(--brand-soft); border:1px solid #cfe4df; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.hero h1{ font-size:2rem; margin-bottom:.25em; }
.hero p.lead{ font-size:1.02rem; color:var(--ink-soft); max-width:640px; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:22px; margin-top:18px; }
.hero-stats .st b{ display:block; font-size:1.5rem; color:var(--brand-dark); }
.hero-stats .st span{ font-size:.8rem; color:var(--ink-faint); }

/* 首頁搜尋大框 */
.home-search{ display:flex; gap:8px; max-width:560px; margin-top:22px; }
.home-search input{ flex:1; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:16px; font-family:inherit; background:var(--surface); }
.home-search button{ border:0; background:var(--grad-warm); color:#fff; border-radius:12px; padding:0 22px; font-size:.95rem; font-weight:600; }

/* ============================================================
   區塊與標題
   ============================================================ */
.section{ padding-block:34px 6px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.section-head h2{ margin:0; }
.section-head .more{ font-size:.85rem; font-weight:600; }

/* 分類卡片 */
.cat-grid{ display:grid; grid-template-columns:repeat(1,1fr); gap:14px; }
@media(min-width:640px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
.cat-card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s;
}
.cat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none; color:var(--ink); }
.cat-icon{ width:46px; height:46px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; font-size:1.3rem;
  background:var(--brand-soft); color:var(--brand-dark); }
.cat-card .cat-img{ width:52px; height:52px; flex-shrink:0; border-radius:14px; box-shadow:0 4px 10px rgba(18,104,95,.18); }
.hot-card .hot-img{ width:44px; height:44px; flex-shrink:0; border-radius:11px; }
.cat-card h3{ margin:.1em 0 .15em; font-size:1.02rem; }
.cat-card p{ margin:0; font-size:.83rem; color:var(--ink-soft); }
.cat-card .meta{ margin-top:8px; font-size:.76rem; color:var(--ink-faint); display:flex; gap:10px; flex-wrap:wrap; }

/* 熱門工具橫列 */
.hot-grid{ display:grid; grid-template-columns:repeat(1,1fr); gap:12px; }
@media(min-width:720px){ .hot-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1020px){ .hot-grid{ grid-template-columns:repeat(3,1fr); } }
.hot-card{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
.hot-card:hover{ border-color:var(--brand); text-decoration:none; }
.hot-card .tag{ display:inline-block; font-size:.7rem; font-weight:600; color:var(--brand-dark); background:var(--brand-soft); padding:3px 9px; border-radius:999px; margin-bottom:8px; }
.hot-card h3{ font-size:1rem; color:var(--ink); margin:.2em 0 .3em; }
.hot-card p{ font-size:.82rem; color:var(--ink-soft); margin:0; }

/* ============================================================
   符號瀏覽頁（下拉式篩選 + 符號格）
   ============================================================ */
.toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin:20px 0 4px; box-shadow:var(--shadow);
}
.toolbar label{ font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.toolbar select{
  border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:.9rem;
  font-family:inherit; background:var(--surface); color:var(--ink); min-width:180px;
}
.toolbar .count{ margin-left:auto; font-size:.8rem; color:var(--ink-faint); }
.sym-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; }
@media(min-width:560px){ .sym-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:860px){ .sym-grid{ grid-template-columns:repeat(5,1fr); } }
@media(min-width:1100px){ .sym-grid{ grid-template-columns:repeat(6,1fr); } }
.sym-item{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 6px;
  cursor:pointer; transition:transform .1s, border-color .1s, box-shadow .1s;
}
.sym-item:hover{ transform:translateY(-2px); border-color:var(--brand); box-shadow:var(--shadow); }
.sym-char{
  font-family:var(--mono); font-size:1.5rem; line-height:1.2; min-height:1.8em;
  display:grid; place-items:center; width:100%; overflow-wrap:anywhere; color:var(--ink);
}
.sym-name{ font-size:.68rem; color:var(--ink-faint); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sym-item.copied{ border-color:var(--brand); background:var(--brand-soft); }
.sym-empty{ grid-column:1/-1; text-align:center; color:var(--ink-faint); padding:30px; }

/* 群組說明 */
.group-desc{ background:var(--accent-soft); border:1px solid #eadcc2; border-radius:12px; padding:12px 14px; font-size:.85rem; color:#6b541a; margin-top:14px; }

/* ============================================================
   工具頁通用
   ============================================================ */
.tool-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); margin:18px 0;
}
.tool-box h3{ margin-top:0; }
.tool-box label{ font-weight:600; font-size:.88rem; display:block; margin-bottom:6px; }
.tool-box textarea,.tool-box input[type=text],.tool-box input[type=number],.tool-box input[type=password],.tool-box select{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  font-family:inherit; font-size:.95rem; background:var(--surface); color:var(--ink);
}
.tool-box textarea{ min-height:130px; resize:vertical; }
@media(max-width:640px){
  .tool-box textarea,.tool-box input[type=text],.tool-box input[type=number],.tool-box input[type=password],.tool-box select{ font-size:16px; }
}
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.btn{
  border:0; border-radius:10px; padding:10px 18px; font-size:.9rem; font-weight:600;
  background:var(--brand); color:#fff;
}
.btn:hover{ background:var(--brand-dark); }
.btn.ghost{ background:var(--grad-warm); color:#fff; border:1px solid transparent; }
.btn.ghost:hover{ background:var(--brand-soft); color:var(--brand-dark); }
.btn.accent{ background:var(--accent); color:#fff; }
.btn.accent:hover{ background:#b57816; }
.result-box{ margin-top:14px; }
.result-box .out{
  background:var(--paper); border:1px dashed var(--line); border-radius:10px; padding:14px; min-height:40px;
  font-size:.95rem; word-break:break-word;
}
.result-box .stat{ font-size:.82rem; color:var(--ink-faint); margin-top:6px; }
.copy-btn{ border:1px solid transparent; background:var(--grad-warm); border-radius:9px; padding:6px 12px; font-size:.78rem; color:#fff; }
.copy-btn:hover{ border-color:var(--brand); color:var(--brand-dark); background:var(--brand-soft); }

/* 花式字體產生器 */
.font-list{ display:grid; grid-template-columns:repeat(1,1fr); gap:10px; margin-top:16px; }
@media(min-width:720px){ .font-list{ grid-template-columns:repeat(2,1fr); } }
.font-row{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:12px 14px; display:flex; align-items:center; gap:12px;
}
.font-row .out{ flex:1; font-size:1.02rem; min-width:0; overflow-wrap:anywhere; }
.font-row .meta{ font-size:.72rem; color:var(--ink-faint); }

/* 暱稱產生器 */
.nick-stage{ background:var(--brand-soft); border:1px solid #cfe4df; border-radius:12px; padding:18px; text-align:center; margin:16px 0; }
.nick-stage .cur{ font-size:1.5rem; font-weight:700; color:var(--brand-dark); }
.nick-stage .cur small{ display:block; font-size:.78rem; color:var(--ink-soft); font-weight:500; margin-top:6px; }
.nick-cands{ display:grid; grid-template-columns:repeat(1,1fr); gap:8px; margin-top:14px; }
@media(min-width:640px){ .nick-cands{ grid-template-columns:repeat(2,1fr); } }
.nick-cand{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }

/* 收藏頁 */
.fav-empty{ text-align:center; color:var(--ink-faint); padding:40px 0; }
.fav-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }

/* ============================================================
   統計 / 更新日誌 / 時間軸
   ============================================================ */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:760px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); text-align:center; }
.stat-card b{ font-size:1.7rem; color:var(--brand-dark); display:block; }
.stat-card span{ font-size:.8rem; color:var(--ink-faint); }

.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line); }
.timeline li{ position:relative; padding:0 0 18px 34px; }
.timeline li::before{ content:""; position:absolute; left:4px; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--surface); border:4px solid var(--brand); }
.timeline .t-date{ font-size:.76rem; font-weight:700; color:var(--brand-dark); }
.timeline .t-title{ font-weight:600; margin:.1em 0 .2em; }
.timeline .t-desc{ font-size:.85rem; color:var(--ink-soft); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); background:var(--surface); margin-top:44px; padding:30px 0 24px; }
.foot-grid{ display:grid; grid-template-columns:repeat(1,1fr); gap:22px; }
@media(min-width:720px){ .foot-grid{ grid-template-columns:repeat(3,1fr); } }
.foot-grid h4{ font-size:.9rem; margin-bottom:.5em; }
.foot-grid a{ color:var(--ink-soft); font-size:.85rem; display:block; padding:2px 0; }
.foot-grid a:hover{ color:var(--brand); }
.foot-bottom{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; }

/* ============================================================
   Toast / 其他
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:.86rem;
  opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s; z-index:3000;
  max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

.fav-heart{
  border:0; background:none; font-size:1rem; padding:6px; line-height:1; color:var(--ink-faint);
}
.fav-heart.on{ color:var(--danger); }

.page-head{ padding:30px 0 4px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.page-head .ph-img{ width:60px; height:60px; border-radius:15px; flex-shrink:0; box-shadow:0 4px 12px rgba(18,104,95,.2); }
.page-head h1{ font-size:1.7rem; margin:0; }
.page-head p{ color:var(--ink-soft); max-width:720px; margin:.25em 0 0; }
.badge{ display:inline-block; font-size:.72rem; font-weight:700; color:var(--brand-dark); background:var(--brand-soft); border-radius:999px; padding:3px 10px; }
.badge.accent{ color:#6b541a; background:var(--accent-soft); }

/* 子分類快速連結 chips */
.subchips{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; }
.subchip{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:.84rem; color:var(--ink); font-weight:600; }
.subchip .g{ color:var(--brand-dark); font-size:1rem; }
.subchip:hover{ border-color:var(--brand); background:var(--brand-soft); text-decoration:none; color:var(--brand-dark); }

/* ============================================================
   活潑配色與 hover 強化（活力版）
   ============================================================ */
.brand-mark{ background:var(--grad-brand); }
.hero-eyebrow{ background:var(--grad-warm); color:#fff; border-color:transparent; box-shadow:0 6px 16px -8px rgba(245,159,28,.55); }
.home-search button, .header-search button{ background:var(--grad-warm); transition:transform .14s, box-shadow .14s, filter .14s; }
.home-search button:hover, .header-search button:hover{ filter:brightness(1.06); box-shadow:0 8px 18px -8px rgba(245,159,28,.55); transform:translateY(-1px); }

.btn{ background:var(--grad-warm); box-shadow:0 6px 16px -8px rgba(245,159,28,.5); transition:transform .14s, box-shadow .14s, filter .14s; }
.btn:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(245,159,28,.6); }
.btn.accent{ background:var(--grad-warm); box-shadow:0 6px 16px -8px rgba(245,159,28,.5); }
.btn.accent:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(245,159,28,.55); }

/* 卡片通用 hover：抬升 + 上色陰影 + 邊框高亮 */
.cat-card,.hot-card,.sym-item,.tool-box,.stat-card,.font-row,.nick-cand{
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-card:hover,.hot-card:hover,.stat-card:hover{
  transform:translateY(-4px);
  border-color:var(--brand);
  box-shadow:0 16px 34px -14px rgba(245,159,28,.4);
}
.sym-item:hover{ transform:translateY(-3px); border-color:var(--brand); box-shadow:0 10px 22px -12px rgba(245,159,28,.45); }
.cat-card h3, .hot-card h3{ transition:color .12s; }
.cat-card:hover h3, .hot-card:hover h3{ color:var(--brand-dark); }
.cat-icon,.cat-card .cat-img,.hot-card .hot-img{ transition:transform .15s; }
.cat-card:hover .cat-icon{ transform:scale(1.1); }
.cat-card:hover .cat-img, .hot-card:hover .hot-img{ transform:scale(1.06); }

/* Mega 選單項 */
.mega a.mega-link{ transition:background .12s, transform .12s; }
.mega a.mega-link:hover{ background:var(--brand-soft); transform:translateX(2px); box-shadow:inset 3px 0 0 var(--brand); }
.mega-link .ic{ transition:background .12s, color .12s; }
.mega a.mega-link:hover .ic{ background:var(--brand); color:#fff; }

/* 導覽 */
.nav-top{ transition:background .12s, color .12s; }
.nav-item.active .nav-top{ background:#16325B; color:#fff; }

/* 子分類 chip */
.subchip{ transition:transform .12s, border-color .12s, background .12s, box-shadow .12s; }
.subchip:hover{ transform:translateY(-2px); border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); box-shadow:0 6px 14px -8px rgba(245,159,28,.5); }
.subchip:hover .g{ color:var(--accent-dark); }

/* 複製按鈕 */
.copy-btn{ transition:transform .12s, border-color .12s, box-shadow .12s; }
.copy-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 12px -8px rgba(245,159,28,.45); }

/* 頁尾連結 */
.foot-grid a{ transition:color .12s, transform .12s; }
.foot-grid a:hover{ color:var(--brand); transform:translateX(2px); }

/* 熱門工具標籤 */
.hot-card .tag{ transition:background .12s, color .12s; }
.hot-card:hover .tag{ background:var(--accent-soft); color:var(--accent-dark); }

/* 無障礙：reduced motion */
@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .mega{ transition:none; }
}
/* ===== 內容小卡片：淺暖漸層底色 ===== */
.cat-card,.hot-card,.sym-item,.tool-box,.stat-card,.font-row,.nick-cand,.subchip,.word-item,.rand-item,.paste-item{
  background:linear-gradient(160deg,#F7FBFF 0%,#E7F2FF 55%,#D5E8FF 100%);
}
/* ===== 內容小卡片：卡面內文字全部黑色 ===== */
.cat-card,.hot-card,.sym-item,.tool-box,.stat-card,.font-row,.nick-cand,.subchip,.word-item,.rand-item,.paste-item,
.cat-card *:not(button):not(input):not(textarea):not(select),
.hot-card *:not(button):not(input):not(textarea):not(select),
.sym-item *:not(button):not(input):not(textarea):not(select),
.tool-box *:not(button):not(input):not(textarea):not(select),
.stat-card *:not(button):not(input):not(textarea):not(select),
.font-row *:not(button):not(input):not(textarea):not(select),
.nick-cand *:not(button):not(input):not(textarea):not(select),
.subchip *:not(button):not(input):not(textarea):not(select),
.word-item *:not(button):not(input):not(textarea):not(select),
.rand-item *:not(button):not(input):not(textarea):not(select),
.paste-item *:not(button):not(input):not(textarea):not(select){ color:#000 !important; }
/* ===== 內容小卡片：卡面內文字放大 + 粗體黑字 ===== */
.cat-card h3,.hot-card h3{ font-size:1.2rem; font-weight:800; }
.cat-card p,.hot-card p{ font-size:.96rem; font-weight:600; }
.cat-card .meta{ font-size:.85rem; font-weight:600; }
.hot-card .tag{ font-size:.8rem; font-weight:700; }
.sym-item b,.sym-item span,.sym-item .nm,.sym-item .name{ font-size:1.05rem; font-weight:700; }
.subchip{ font-size:.92rem; font-weight:700; }
.word-item,.rand-item,.paste-item,.stat-card b,.stat-card span,.font-row b,.font-row span,.nick-cand b,.nick-cand span,.tool-box label,.tool-box p{ font-weight:700; }
/* ===== 符號卡片：icon 縮小、點我複製最小並置於愛心旁 ===== */
.sym-item{ display:grid; grid-template-columns:auto auto; grid-template-areas:"char char" "name heart"; align-items:center; justify-content:center; gap:2px 8px; text-align:center; }
.sym-char{ grid-area:char; font-size:1.1rem; font-weight:400; line-height:1.2; width:100%; }
.sym-name{ grid-area:name; font-size:.5rem; font-weight:400; justify-self:end; white-space:nowrap; color:#000; }
.fav-heart{ grid-area:heart; font-size:.85rem; justify-self:start; }

/* ===== 卡片 hover：橘色陰影 + 橘色邊框 ===== */
.cat-card:hover,.hot-card:hover,.sym-item:hover,.stat-card:hover,.font-row:hover,.nick-cand:hover,.subchip:hover,.word-item:hover,.rand-item:hover,.paste-item:hover{ border-color:#f59f1c; box-shadow:0 16px 34px -14px rgba(245,159,28,.45); }

/* ============================================================
   滿版佈局（全站統一：滿版寬、同一頁共用一條捲軸）
   ============================================================ */
body{ display:flex; flex-direction:column; }

#site-header{ flex:0 0 auto; }
main.wrap{ flex:1 1 auto; min-height:0; width:100%; max-width:none; display:flex; flex-direction:column; }
#site-footer{ flex:0 0 auto; margin-top:0; padding:14px 0 10px; }
#site-footer .foot-bottom{ margin-top:10px; padding-top:8px; }

/* 頁首區壓縮，騰出空間給內容 */
.page-head{ padding:10px 0 2px; }
.page-head h1{ font-size:1.4rem; }
#breadcrumb{ margin-top:2px; }

/* 符號/表情/顏文字網格：滿版寬、格子緊湊 */
#collection{ flex:1 1 auto; display:flex; flex-direction:column; }
.sym-grid{ flex:1 1 auto; display:grid; grid-auto-flow:row; grid-template-columns:repeat(auto-fill,minmax(50px,1fr)); grid-auto-rows:auto; gap:4px; margin-top:6px; }
.sym-item{ min-height:0; padding:4px 2px; gap:1px; }
.sym-char{ font-size:1rem; min-height:1.3em; }
.sym-name{ font-size:.44rem; }
.sym-item .fav-heart{ font-size:.7rem; }