/* ============================================================
   RFID 教學網站 · 共用樣式（單一來源）
   依「設計規範.md」· DA2 Studio 品牌 · 平面風格（Flat Design）
   ============================================================ */

:root{
  --brand:#FF9500; --green:#0D9488; --blue:#0078D4;
  --ink:#333333; --sub:#666666; --muted:#999999;
  --bg:#f5f5f5; --card:#ffffff; --line:#f0f0f0; --line2:#dddddd;
  --warn-bg:#fff8f0; --tip-bg:#f0fdfa; --info-bg:#f0f8ff; --note-bg:#f9f9f9;
  --header-h:52px;   /* sticky 頁首高度，供章節導航與錨點偏移使用 */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:110px;}  /* 點章節時不被固定列遮住 */
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Microsoft JhengHei',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;padding:0 20px 40px;
}
a{color:var(--brand);}

/* ---------- 企業版頁首（sticky header，共用單一來源）---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(0,0,0,.04);}
.hwrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 20px;}
.hwrap .brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:bold;font-size:1.15em;color:var(--brand);}
.hwrap .brand img{height:30px;width:auto;}
.hwrap .brand b{color:var(--ink);font-weight:700;}
.mainnav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.mainnav a{color:var(--sub);text-decoration:none;font-size:.95em;padding:8px 12px;border-radius:4px;transition:all .2s ease-out;}
.mainnav a:hover{background:var(--warn-bg);color:var(--brand);}
.mainnav a.nav-cta{background:var(--brand);color:#fff;font-weight:600;margin-left:6px;}
.mainnav a.nav-cta:hover{background:#e07f00;}
.navtoggle{display:none;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:auto;}
.hamburger span{width:24px;height:2px;background:var(--ink);border-radius:2px;}
@media(max-width:760px){
  .hwrap{flex-wrap:wrap;}
  .hamburger{display:flex;}
  .mainnav{display:none;flex-direction:column;align-items:stretch;width:100%;gap:2px;margin-left:0;padding-top:8px;}
  .navtoggle:checked ~ .mainnav{display:flex;}
  .mainnav a{padding:11px 12px;}
  .mainnav a.nav-cta{margin-left:0;text-align:center;}
}
/* 舊 .topnav 仍保留相容（未使用） */
.topnav{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:16px 4px;flex-wrap:wrap;}
.topnav .brand{font-weight:bold;color:var(--brand);text-decoration:none;}
.topnav a.navlink{color:var(--sub);text-decoration:none;font-size:.9em;padding:4px 10px;}
.breadcrumb{font-size:.85em;color:var(--muted);}
.breadcrumb a{color:var(--sub);text-decoration:none;}
.breadcrumb a:hover{color:var(--brand);}

/* ---------- 容器 ---------- */
.container{max-width:1200px;margin:0 auto;background:var(--card);padding:40px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);}

/* ---------- 標題層級 ---------- */
h1{font-size:2.5em;font-weight:bold;color:var(--brand);border-bottom:3px solid var(--brand);padding-bottom:15px;margin-bottom:10px;}
.subtitle{font-size:1.05em;color:var(--sub);margin-bottom:8px;}
.meta-line{font-size:.9em;color:var(--muted);margin-bottom:24px;}
h2{font-size:2em;font-weight:bold;color:var(--ink);border-left:4px solid var(--brand);padding-left:15px;margin:40px 0 15px;}
h2 .n{display:inline-block;background:var(--brand);color:#fff;width:32px;height:32px;line-height:32px;text-align:center;border-radius:4px;font-size:.7em;margin-right:10px;vertical-align:middle;}
h3{font-size:1.5em;font-weight:600;color:var(--blue);border-bottom:1px solid var(--blue);padding-bottom:8px;margin:24px 0 12px;}
h4{font-size:1.15em;font-weight:600;color:var(--green);margin:15px 0 8px;}
p{margin-bottom:8px;}
.lead{color:var(--sub);margin-bottom:16px;font-size:1em;}
code{font-family:'Courier New',monospace;background:var(--line);padding:2px 7px;border-radius:4px;font-size:.9em;color:var(--ink);}
sup,sub{font-size:.75em;}

/* ---------- 難度徽章 ---------- */
.badge{display:inline-block;font-size:.72em;font-weight:600;color:#fff;border-radius:3px;padding:2px 9px;vertical-align:middle;}
.badge.lv1{background:var(--green);}   /* 入門 */
.badge.lv2{background:var(--blue);}    /* 中階 */
.badge.lv3{background:var(--brand);}   /* 專業 */
.badge.lv4{background:#555;}            /* 進階 */
.badge.lv5{background:#7e57c2;}         /* 實務 */
.badge.lv6{background:#0891b2;}         /* 整合 */

/* ---------- 本頁目錄（捲動時固定於頁首下方，快速跳章節）---------- */
.toc{
  position:sticky; top:var(--header-h); z-index:90;
  display:flex; flex-wrap:wrap; gap:8px;
  margin:16px -40px 20px; padding:12px 40px;   /* 負邊距讓固定列鋪滿容器寬度，蓋住下方捲動內容 */
  background:var(--card); border-bottom:1px solid var(--line2);
  box-shadow:0 4px 8px rgba(0,0,0,.05);
}
.toc a{font-size:.9em;background:var(--warn-bg);border:1px solid var(--brand);color:var(--brand);text-decoration:none;border-radius:4px;padding:6px 14px;transition:all .2s ease-out;white-space:nowrap;}
.toc a:hover,.toc a.active{background:var(--brand);color:#fff;}  /* .active＝目前所在章節（scrollspy 加上）*/
@media(max-width:640px){
  /* 手機：改成單行可橫向滑動，固定時不佔太多高度 */
  .toc{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .toc a{flex:0 0 auto;}
}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.95em;}
th{background:var(--ink);color:#fff;padding:12px;text-align:left;font-weight:600;}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
tr:nth-child(even) td{background:var(--note-bg);}
tr.hl td{background:var(--warn-bg)!important;}

/* ---------- 提示框 ---------- */
.box{border-radius:4px;padding:15px 18px;margin:16px 0;font-size:.95em;}
.box.warn{background:var(--warn-bg);border-left:4px solid var(--brand);}
.box.tip{background:var(--tip-bg);border-left:4px solid var(--green);}
.box.info{background:var(--info-bg);border-left:4px solid var(--blue);}
.box.note{background:var(--note-bg);border-left:4px solid var(--sub);}

/* ---------- 概念卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px;}
.card{border:1px solid var(--line2);border-radius:4px;padding:18px;}
.card .ico{font-size:2.2em;display:block;margin-bottom:8px;}
.card h4{color:var(--ink);margin:0 0 8px;}
.card p{font-size:.9em;color:var(--sub);margin:0;}

/* ---------- 對比卡 ---------- */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:16px;}
.vcard{border-radius:4px;padding:18px;border:2px solid var(--line2);}
.vcard h4{font-size:1.1em;margin:0 0 8px;}
.vcard ul{list-style:none;font-size:.9em;}
.vcard li{padding:3px 0;}
.vcard li::before{content:"▸ ";color:var(--brand);font-weight:bold;}

/* ---------- 圖片與圖說 ---------- */
figure.figure{margin:16px 0;text-align:center;}
figure.figure img{max-width:100%;height:auto;border:1px solid var(--line2);border-radius:6px;background:#fff;padding:10px;}
figure.figure figcaption{font-size:.85em;color:var(--muted);margin-top:8px;}
figure.figure figcaption .credit{color:var(--brand);}

/* ---------- 時序列 ---------- */
.seq{margin-top:16px;}
.seq .row{display:flex;gap:12px;margin-bottom:10px;align-items:flex-start;}
.seq .who{width:84px;flex-shrink:0;text-align:center;font-weight:bold;font-size:.82em;border-radius:4px;padding:8px 4px;color:#fff;}
.seq .who-rd{background:var(--blue);}
.seq .who-tag{background:var(--green);}
.seq .msg{flex:1;background:var(--note-bg);border:1px solid var(--line);border-radius:4px;padding:8px 14px;font-size:.9em;}

/* ---------- 轉換 CTA（教學中立、轉換分離）---------- */
.cta{max-width:1200px;margin:28px auto 0;background:var(--warn-bg);border:1px solid #ffd9a8;border-radius:8px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.cta .ctatext{font-size:.95em;color:var(--ink);}
.cta .ctatext b{color:var(--brand);}
.cta a.ctabtn{background:var(--brand);color:#fff;text-decoration:none;border-radius:6px;padding:10px 22px;font-size:.95em;font-weight:600;white-space:nowrap;}
.cta a.ctabtn:hover{background:#e07f00;}

/* 服務頁卡片 */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px;}
.svc .card .ico{font-size:1.8em;display:block;margin-bottom:6px;}

/* ---------- 企業版多欄頁尾（共用單一來源）---------- */
.site-footer{background:var(--ink);color:#cfcfcf;margin-top:48px;}
.footwrap{max-width:1200px;margin:0 auto;padding:40px 20px 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
.footcol h4{color:#fff;font-size:1em;margin:0 0 12px;border:none;}
.footcol p{font-size:.88em;color:#aaa;margin:0;line-height:1.7;}
.footcol a{display:block;color:#cfcfcf;text-decoration:none;font-size:.9em;padding:4px 0;transition:color .2s ease-out;}
.footcol a:hover{color:var(--brand);}
.footbrand{font-weight:bold;font-size:1.2em;color:var(--brand);margin-bottom:10px;}
.footbrand b{color:#fff;}
.footbar{border-top:1px solid #4a4a4a;}
.footbar .inner{max-width:1200px;margin:0 auto;padding:16px 20px;font-size:.82em;color:#999;text-align:center;line-height:1.7;}
.footbar a{color:var(--brand);text-decoration:none;}
@media(max-width:760px){.footwrap{grid-template-columns:1fr 1fr;gap:20px;}}
@media(max-width:480px){.footwrap{grid-template-columns:1fr;}}

/* ---------- 首頁：學習動線 ---------- */
.hero{max-width:1200px;margin:0 auto 8px;}
.station{max-width:1200px;margin:0 auto 28px;background:var(--card);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.07);overflow:hidden;}
.station-head{padding:16px 24px;color:#fff;font-weight:bold;font-size:1.15em;display:flex;align-items:center;gap:10px;}
.station-body{padding:18px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}

/* ---------- 六站總覽卡（首頁精簡版）---------- */
.stationgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:16px 0;}
.scard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line2);border-top:4px solid var(--brand);border-radius:8px;padding:22px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s;}
.scard:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,.1);}
.scard-no{font-size:.85em;font-weight:700;margin-bottom:4px;}
.scard-title{font-size:1.25em;font-weight:bold;color:var(--ink);margin:0 0 8px;}
.scard-lv{align-self:flex-start;color:#fff;font-size:.72em;border-radius:3px;padding:2px 9px;margin-bottom:10px;}
.scard p{font-size:.9em;color:var(--sub);margin:0 0 14px;flex:1;}
.scard-meta{font-size:.9em;font-weight:600;color:var(--brand);}

/* ---------- 企業版首頁：Hero / 賣點 / 關於 / 按鈕 ---------- */
.eyebrow{display:inline-block;color:var(--brand);font-size:.8em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-weight:600;padding:12px 26px;border-radius:4px;transition:all .2s ease-out;}
.btn:hover{background:#e07f00;}
.btn-outline{display:inline-block;background:transparent;color:var(--brand);border:2px solid var(--brand);text-decoration:none;font-weight:600;padding:10px 24px;border-radius:4px;transition:all .2s ease-out;}
.btn-outline:hover{background:var(--brand);color:#fff;}

.hero-banner{background:var(--warn-bg);border-bottom:1px solid #ffe3c2;}
.hero-inner{max-width:1200px;margin:0 auto;padding:56px 20px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;}
.hero-inner h1{font-size:2.6em;line-height:1.25;color:var(--ink);border:none;padding:0;margin:0 0 14px;}
.hero-inner h1 .hl{color:var(--brand);}
.hero-inner .hook{font-size:1.12em;line-height:1.6;color:var(--ink);background:#fff;border-left:4px solid var(--brand);border-radius:0 8px 8px 0;padding:12px 16px;margin:0 0 18px;}
.hero-inner .hook b{color:var(--brand);}
.hero-inner .lead{font-size:1.05em;color:var(--sub);margin-bottom:24px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.hero-visual{text-align:center;}
.hero-visual img{max-width:100%;border-radius:8px;border:1px solid var(--line2);}
@media(max-width:760px){.hero-inner{grid-template-columns:1fr;padding:40px 20px;text-align:center;}.hero-actions{justify-content:center;}.hero-visual{display:none;}}

.section{max-width:1200px;margin:0 auto;padding:16px 20px;}
.section-title{text-align:center;margin:32px 0 4px;}
.section-title h2{display:inline-block;border:none;padding:0;font-size:1.8em;}
.section-sub{text-align:center;color:var(--sub);margin-bottom:10px;font-size:.95em;}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:16px 0;}
.feat{border:1px solid var(--line2);border-radius:8px;padding:22px;text-align:center;background:#fff;}
.feat .ico{font-size:2.2em;display:block;margin-bottom:8px;}
.feat h4{margin:0 0 6px;color:var(--ink);}
.feat p{font-size:.88em;color:var(--sub);margin:0;}

.about{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin:16px 0;}
.about h2{font-size:1.8em;}
.about ul.checks{list-style:none;margin:14px 0 0;}
.about ul.checks li{padding:6px 0 6px 28px;position:relative;font-size:.95em;}
.about ul.checks li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:bold;}
.about .about-visual img{max-width:100%;border-radius:8px;border:1px solid var(--line2);}
@media(max-width:760px){.about{grid-template-columns:1fr;}}

@media(max-width:640px){.container{padding:24px 16px;} h1{font-size:2em;} h2{font-size:1.6em;}}