/* ================= 設計權杖 ================= */
:root{
  --nav-blue:#0a5bc0;
  --nav-blue-dark:#083f8f;
  --brand-navy:#123e86;
  --brand-navy-2:#1a58a8;
  --ink:#333;
  --ink-soft:#5b6572;
  --line:#e4e9f0;
  --bg-soft:#f4f7fb;
  --sky-1:#eaf5fd;
  --sky-2:#cfeaf8;
  --sky-3:#dcefff;
  --radius:12px;
  --wrap:1400px;
  --shadow-card:0 6px 20px rgba(20,60,120,.08);
}

/* ================= 基礎 ================= */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Heiti TC",sans-serif;
  color:var(--ink);line-height:1.6;background:#fff;font-size:1rem;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ================= 頁首 ================= */
.site-header{position:relative;z-index:30;background:#fff}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:18px;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-emblem{flex:none;display:flex;align-items:center}
.brand-emblem img{display:block;width:54px;height:54px;object-fit:contain;mix-blend-mode:multiply}
.brand-org strong{display:block;font-size:1.25rem;font-weight:800;color:#222;letter-spacing:1px;line-height:1.25}
.brand-org small{display:block;font-size:0.6562rem;color:#8a93a0;letter-spacing:.2px}
.brand-divider{width:1px;height:40px;background:var(--line);margin:0 4px}
.brand-platform strong{display:block;font-size:1.4375rem;font-weight:800;color:var(--brand-navy);letter-spacing:2px;line-height:1.2}
.brand-platform small{display:block;font-size:0.7812rem;color:#8a93a0;letter-spacing:1px}

.header-tools{margin-left:auto;display:flex;align-items:center;gap:16px}
.tool-link{display:inline-flex;align-items:center;gap:6px;font-size:0.8438rem;color:#4a5462}
.tool-link:hover{color:var(--nav-blue)}
.dot-grid{width:14px;height:14px;background:
  radial-gradient(circle,#3f7fd0 1.4px,transparent 1.6px) 0 0/5px 5px;}
.globe-mini{color:#3f7fd0;font-size:0.8125rem}
.font-size{display:flex;align-items:center;gap:2px}
.font-size button{
  border:none;background:transparent;cursor:pointer;color:#5b6572;
  font-size:0.8125rem;padding:2px 5px;border-radius:4px;font-family:inherit;
}
.font-size button:first-child{font-size:0.6875rem}
.font-size button:last-child{font-size:0.9375rem}
.font-size button.on{background:#eef3fb;color:var(--nav-blue);font-weight:700}
.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.search input{border:none;outline:none;padding:8px 12px;font-size:0.8438rem;width:190px;font-family:inherit}
.search button{border:none;background:var(--nav-blue);padding:0 12px;cursor:pointer;align-self:stretch;display:flex;align-items:center}

/* ================= 主選單 ================= */
.main-nav{background:linear-gradient(180deg,#0d63cb,#0a56b6);box-shadow:0 3px 8px rgba(10,60,140,.18)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex}
.nav-inner>li{position:relative;flex:1 1 0}
.nav-inner>li>a{
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  height:56px;color:#fff;font-size:1.08rem;font-weight:600;letter-spacing:1px;line-height:1.2;
  border-right:1px solid rgba(255,255,255,.12);transition:background .15s;padding:0 4px;
}
.nav-inner>li:first-child>a{border-left:1px solid rgba(255,255,255,.12)}
.nav-inner>li>a svg{opacity:.95}
.nav-inner>li:hover>a{background:rgba(255,255,255,.12)}
.nav-inner>li.is-active>a{background:var(--nav-blue-dark);box-shadow:inset 0 -3px 0 #ffd24a}
.submenu{
  position:absolute;top:100%;left:0;right:0;background:#fff;
  box-shadow:0 12px 24px rgba(20,60,120,.16);border-radius:0 0 8px 8px;
  padding:6px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.16s;z-index:40;min-width:170px;
}
.nav-inner>li:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu li a{display:block;padding:10px 18px;font-size:0.9062rem;color:#3a4452}
.submenu li a:hover{background:#eef4fc;color:var(--nav-blue)}

/* ================= Hero 世界地圖 ================= */
.hero{position:relative;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 45%,var(--sky-3) 100%);overflow:hidden}
.hero-map{position:relative;max-width:1600px;margin:0 auto;height:min(42vw,420px);min-height:330px}
.map-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-copy{position:absolute;left:max(24px,4%);top:24%;z-index:5;text-shadow:0 2px 10px rgba(255,255,255,.5)}
.hero-title span{display:block;font-size:clamp(28px,3.6vw,52px);font-weight:900;color:var(--brand-navy);letter-spacing:4px;line-height:1.28}
.hero-title span:nth-child(2){color:var(--brand-navy-2)}
.hero-sub{margin-top:18px;font-size:clamp(14px,1.4vw,20px);color:#3f5f86;letter-spacing:3px;font-weight:600}

.map-cards{position:absolute;inset:0;z-index:6;pointer-events:none}
.country-card{
  position:absolute;transform:translate(-50%,-100%);transform-origin:50% 100%;
  background:#fff;border-radius:8px;box-shadow:0 5px 14px rgba(20,60,120,.16);
  padding:5px 9px 6px;min-width:100px;pointer-events:auto;cursor:pointer;
  border:1px solid #eaf0f7;line-height:1.35;transition:transform .18s,box-shadow .18s,border-color .18s;
}
.country-card:hover{z-index:40;box-shadow:0 8px 20px rgba(20,60,120,.24)}
.country-card.active{
  transform:translate(-50%,-100%) scale(1.16);
  box-shadow:0 14px 30px rgba(20,60,120,.32);border-color:var(--nav-blue);z-index:60;
}
.cc-head{display:flex;align-items:center;gap:5px;margin-bottom:1px}
.cc-flag{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06);object-fit:cover}
.cc-name{font-size:0.85rem;font-weight:800;color:#1f2c3d}
.cc-label{font-size:0.625rem;color:#8b95a3;letter-spacing:.3px}
.cc-amount{font-size:0.9062rem;font-weight:800;color:var(--nav-blue);letter-spacing:.2px}
.cc-amount .unit{font-size:0.625rem;color:#9aa4b2;font-weight:600;margin-left:3px}
.cc-dot{position:absolute;width:8px;height:8px;background:#0a5bc0;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(10,91,192,.22),0 0 0 1px #fff;z-index:5}

/* 臺灣高亮（不用大頭針，改以光暈 + 陸地上色突顯）*/
.tw-glow{position:absolute;transform:translate(-50%,-50%);z-index:6;pointer-events:none;width:0;height:0}
.tw-glow .core{position:absolute;left:0;top:0;width:11px;height:11px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,#ffd066,#f5951a);box-shadow:0 0 8px 2px rgba(245,150,26,.7)}
.tw-glow .ring{position:absolute;left:0;top:0;width:16px;height:16px;transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid rgba(245,150,26,.6);animation:twpulse 2.4s ease-out infinite}
.tw-glow .ring.r2{animation-delay:1.2s}
@keyframes twpulse{0%{width:12px;height:12px;opacity:.9}100%{width:52px;height:52px;opacity:0}}

.map-note{position:absolute;right:18px;bottom:12px;font-size:0.7812rem;color:#5b7ba0;z-index:6}
.map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5b7ba0;font-size:0.9375rem}

/* 地圖 SVG 樣式 */
.map-svg .sphere{fill:transparent}
.map-svg .land{fill:url(#landGrad);stroke:#bfe0ef;stroke-width:.4}
.map-svg .tw-land{fill:url(#twGrad);stroke:#e8890f;stroke-width:.8;filter:drop-shadow(0 0 3px rgba(245,150,26,.8))}
.map-svg .graticule{fill:none;stroke:#bcd9ec;stroke-width:.4;opacity:.4}
.map-svg .flow{fill:none;stroke:#5aa9dd;stroke-width:1.4;stroke-dasharray:2 6;opacity:.55;stroke-linecap:round;animation:flow 24s linear infinite}
@keyframes flow{to{stroke-dashoffset:-200}}

/* ================= 功能卡片 ================= */
.feature-cards{background:#fff;padding:52px 0 64px}
.cards-inner{max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(7,1fr);gap:18px}
.fcard{
  background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:26px 20px 22px;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;
}
.fcard::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--accent);opacity:.85;border-radius:0 0 14px 14px}
.fcard:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(20,60,120,.14)}
.fcard-icon{
  width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,#fff);margin-bottom:16px;
}
.fcard-title{font-size:1.375rem;font-weight:800;color:var(--accent);letter-spacing:2px;margin-bottom:14px}
.fcard-list{width:100%;text-align:left;flex:1;padding-left:4px}
.fcard-list li{position:relative;padding-left:16px;font-size:0.9062rem;color:#5a6472;line-height:2}
.fcard-list li::before{content:"";position:absolute;left:2px;top:.85em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.fcard-more{margin-top:16px;align-self:flex-start;font-size:0.875rem;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:4px}
.fcard-more span{transition:transform .15s}
.fcard-more:hover span{transform:translateX(3px)}

/* ================= 內頁 ================= */
.page-banner{background:linear-gradient(120deg,#0d63cb,#1a86d6);color:#fff;position:relative;overflow:hidden}
.page-banner::after{content:"";position:absolute;right:-40px;top:-40px;width:320px;height:320px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.page-banner-inner{max-width:var(--wrap);margin:0 auto;padding:44px 24px 40px}
.page-banner h1{font-size:2rem;font-weight:800;letter-spacing:4px}
.breadcrumb{margin-top:10px;font-size:0.8438rem;opacity:.92;display:flex;gap:8px;align-items:center}
.breadcrumb a:hover{text-decoration:underline}
.page-body{background:var(--bg-soft);min-height:44vh;padding:36px 0 64px}
.page-inner{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.cat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.cat-tabs a{padding:8px 20px;border-radius:22px;background:#fff;border:1px solid var(--line);font-size:0.9062rem;color:#5a6472}
.cat-tabs a.on,.cat-tabs a:hover{background:var(--nav-blue);color:#fff;border-color:var(--nav-blue)}
.article-list{background:#fff;border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden}
.article-list li a{display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid var(--line)}
.article-list li:last-child a{border-bottom:none}
.article-list li a:hover{background:#f6f9fe}
.al-date{color:#98a2b0;font-size:0.8438rem;flex:none;font-variant-numeric:tabular-nums}
.al-title{flex:1;color:#333;font-size:0.9688rem}
.al-file{font-size:0.75rem;color:var(--nav-blue);border:1px solid var(--nav-blue);border-radius:4px;padding:1px 7px}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:26px;flex-wrap:wrap}
.pager .pg{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:#5a6472;font-size:0.9rem}
.pager .pg.num{padding:0}
.pager .pg:hover{border-color:var(--nav-blue);color:var(--nav-blue)}
.pager .pg.on{background:var(--nav-blue);color:#fff;border-color:var(--nav-blue);font-weight:700}
.pager .pg.disabled{opacity:.4;pointer-events:none}
.empty-state{background:#fff;border-radius:12px;box-shadow:var(--shadow-card);padding:76px 20px;text-align:center}
.empty-icon{font-size:3.25rem;margin-bottom:14px}
.empty-state p{font-size:1.375rem;font-weight:700;color:#5a6472;letter-spacing:2px}
.empty-hint{display:block;margin-top:8px;color:#98a2b0;font-size:0.875rem}
.btn{display:inline-block;margin-top:20px;background:var(--nav-blue);color:#fff;padding:10px 26px;border-radius:24px;font-size:0.9375rem}

.al-tag{flex:none;font-size:0.75rem;color:#fff;background:var(--nav-blue);border-radius:4px;padding:2px 9px}
.article-list li a{flex-wrap:wrap}

/* 文章詳情 */
.article-detail{background:#fff;border-radius:12px;box-shadow:var(--shadow-card);padding:36px 40px}
.ad-head{border-bottom:2px solid #eef2f7;padding-bottom:18px;margin-bottom:22px}
.ad-head h2{font-size:1.625rem;color:#20344f;line-height:1.4}
.ad-meta{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:0.8438rem;color:#8a94a3}
.ad-cat,.ad-unit{background:#eef4fc;color:var(--nav-blue);padding:3px 12px;border-radius:14px}
.ad-summary{background:#f6f9fe;border-left:4px solid var(--nav-blue);padding:14px 18px;border-radius:6px;color:#4a5568;margin-bottom:22px}
.ad-body{font-size:1rem;color:#3a4452;line-height:2}
.ad-body p{margin-bottom:14px}
.ad-body .sp-h{font-size:1.125rem;color:var(--brand-navy);margin:22px 0 10px;font-weight:700}
.ad-body .muted{color:#98a2b0}
.ad-attach{margin-top:28px;padding:20px;background:#f6f9fe;border-radius:10px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ad-attach-label{font-weight:700;color:#4a5568}
.ad-foot{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.ghost-btn{background:#eef3fb;color:var(--nav-blue)}

/* 搜尋 */
.search-bar{display:flex;gap:10px;margin-bottom:22px;max-width:560px}
.search-bar input{flex:1;padding:12px 16px;border:1px solid var(--line);border-radius:8px;font-size:0.9375rem;font-family:inherit}
.search-bar button{background:var(--nav-blue);color:#fff;border:none;padding:0 26px;border-radius:8px;cursor:pointer;font-size:0.9375rem}
.search-summary{margin-bottom:16px;color:#5a6472}

/* 網站導覽 */
.sitemap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sitemap-col{background:#fff;border-radius:12px;box-shadow:var(--shadow-card);padding:22px}
.sitemap-col h3{font-size:1.0625rem;margin-bottom:12px;border-bottom:2px solid #eef2f7;padding-bottom:10px}
.sitemap-col h3 a{color:var(--brand-navy)}
.sitemap-col ul li{padding:6px 0}
.sitemap-col ul li a{color:#5a6472;font-size:0.9062rem}
.sitemap-col ul li a:hover{color:var(--nav-blue)}
@media (max-width:900px){.sitemap-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sitemap-grid{grid-template-columns:1fr}.article-detail{padding:24px 20px}}

/* ================= 頁尾 ================= */
.site-footer{background:#1f2b3d;color:#c3ccd8}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:34px 24px;display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.footer-brand{display:flex;flex-direction:column}
.footer-logo{height:54px;width:auto;display:block}
.footer-info{flex:1;min-width:280px;font-size:0.8125rem;line-height:1.9}
.footer-info .copyright{color:#8792a2;margin-top:4px}
.footer-links{display:flex;gap:18px;font-size:0.8438rem}
.footer-links a:hover{color:#fff}

/* ================= RWD ================= */
@media (max-width:1180px){
  .cards-inner{grid-template-columns:repeat(4,1fr)}
  .brand-org small,.brand-platform small{display:none}
}
.nav-toggle{display:none}
@media (max-width:980px){
  .header-tools .search input{width:130px}
  .nav-toggle{display:flex;align-items:center;gap:12px;width:100%;border:none;cursor:pointer;
    background:linear-gradient(180deg,#0d63cb,#0a56b6);color:#fff;padding:14px 24px;
    font-size:1rem;font-family:inherit;letter-spacing:2px}
  .burger{display:inline-flex;flex-direction:column;gap:4px;width:22px}
  .burger span{height:2px;background:#fff;border-radius:2px;transition:.2s}
  .nav-toggle.is-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle.is-open .burger span:nth-child(2){opacity:0}
  .nav-toggle.is-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .main-nav{display:none}
  .main-nav.open{display:block}
  .nav-inner{flex-direction:column;padding:0}
  .nav-inner>li{flex:none;width:100%}
  .nav-inner>li>a{justify-content:flex-start;height:auto;padding:14px 24px;font-size:1rem;letter-spacing:1px;
    border-right:none;border-bottom:1px solid rgba(255,255,255,.14)}
  .nav-inner>li:first-child>a{border-left:none}
  .nav-inner>li.is-active>a{box-shadow:inset 4px 0 0 #ffd24a}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:0;
    background:rgba(255,255,255,.08);padding:0}
  .submenu li a{color:#e6eefb;padding:11px 24px 11px 44px}
  .submenu li a:hover{background:rgba(255,255,255,.1);color:#fff}
  .hero-map{height:52vw;min-height:300px}
  .country-card{min-width:96px;padding:5px 8px}
  .cc-name{font-size:0.7812rem}.cc-amount{font-size:0.8438rem}
}
@media (max-width:760px){
  .header-inner{flex-wrap:wrap;gap:10px}
  .brand-divider{display:none}
  .brand-platform strong{font-size:1.1875rem}
  .header-tools{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .cards-inner{grid-template-columns:repeat(2,1fr)}
  .hero-copy{top:16px;left:16px}
  .map-note{position:static;text-align:right;padding:6px 16px;background:#eaf4fd}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .cards-inner{grid-template-columns:1fr}
}