/* ============================================================
   更鑫開發顧問有限公司 — 共用樣式
   所有頁面引用此檔案，避免重複 CSS
   ============================================================ */
:root{
  --teal:#2E5260;--teal2:#3d6878;--teal3:#1e3d4d;
  --olive:#7D8B2A;--olive2:#96a832;--olive-lt:#eef1d6;
  --cream:#F7F5EF;--white:#fff;--text:#1c2b30;
  --muted:#5a6e72;--border:#d8dfd0;--r:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Noto Sans TC',sans-serif;color:var(--text);background:var(--white);line-height:1.75;display:flex;flex-direction:column;min-height:100vh}

/* ── Progress bar ── */
#nprogress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--olive);z-index:9999;transform:scaleX(0);transform-origin:left;transition:transform .3s ease,opacity .4s ease;opacity:1}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-wrap{max-width:1160px;margin:0 auto;padding:0 2rem;height:66px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo img{height:44px;object-fit:contain;border-radius:8px}
.nav-logo-name{font-family:'Noto Serif TC',serif;font-size:15px;font-weight:700;color:var(--teal);line-height:1.25}
.nav-logo-en{font-size:9.5px;color:var(--muted)}
.nav-links{display:flex;gap:1.75rem;list-style:none}
.nav-links a{text-decoration:none;font-size:14px;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--olive)}
.nav-cta{background:var(--olive);color:#fff;padding:8px 20px;border-radius:6px;font-size:13px;text-decoration:none;font-weight:500;transition:background .2s}
.nav-cta:hover{background:var(--olive2)}

/* ── Hamburger ── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none;border-radius:6px}
.hamburger span{display:block;width:22px;height:2px;background:var(--teal);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobile menu ── */
#mobile-menu{display:none;position:fixed;inset:0;z-index:600;flex-direction:column}
#mobile-menu.open{display:flex}
.mm-backdrop{position:absolute;inset:0;background:rgba(15,30,38,.6);backdrop-filter:blur(4px)}
.mm-panel{position:relative;z-index:1;background:var(--white);width:min(320px,85vw);height:100%;margin-left:auto;display:flex;flex-direction:column;animation:sli .25s cubic-bezier(.34,1.26,.64,1)}
@keyframes sli{from{transform:translateX(100%)}to{transform:translateX(0)}}
.mm-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.mm-header strong{font-size:15px;font-weight:700;color:var(--teal);font-family:'Noto Serif TC',serif}
.mm-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:16px}
.mm-nav{display:flex;flex-direction:column;padding:1rem 0;flex:1}
.mm-nav a{display:flex;align-items:center;gap:12px;padding:1rem 1.5rem;font-size:15px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);transition:background .15s}
.mm-nav a:hover{background:var(--cream);color:var(--olive)}
.mm-nav a i{font-size:18px;color:var(--olive);width:20px}
.mm-cta{margin:1.25rem 1.5rem;background:var(--olive);color:#fff;padding:13px;border-radius:8px;text-align:center;font-size:15px;font-weight:600;text-decoration:none;display:block;transition:background .2s}
.mm-cta:hover{background:var(--olive2)}

/* ── Page header (sub-pages) ── */
.page-header{background:var(--teal);color:#fff;padding:56px 2rem 48px;flex-shrink:0}
.page-wrap{max-width:900px;margin:0 auto}
.page-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--olive2);margin-bottom:.5rem}
.page-title{font-family:'Noto Serif TC',serif;font-size:clamp(24px,4vw,36px);font-weight:700;color:#fff;margin-bottom:.5rem}
.page-sub{font-size:15px;color:rgba(255,255,255,.65)}
.page-body{padding:48px 2rem;background:var(--white);flex:1}

/* ── Toolbar / Search ── */
.toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.search-box{flex:1;min-width:200px;border:1.5px solid var(--border);border-radius:8px;padding:9px 14px;font-size:13px;font-family:'Noto Sans TC',sans-serif;outline:none;transition:border-color .2s}
.search-box:focus{border-color:var(--olive)}
.filter-sel{border:1.5px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;font-family:'Noto Sans TC',sans-serif;color:var(--text);background:var(--white);outline:none;cursor:pointer}

/* ── Item list ── */
.item-row{padding:1.1rem 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;position:relative}
.item-row:last-child{border-bottom:none}
.item-row:hover .item-title{color:var(--olive)}
.item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.item-title{font-size:15px;font-weight:700;color:var(--teal);line-height:1.5;transition:color .2s}
.item-arrow{color:var(--border);font-size:18px;flex-shrink:0;transition:color .2s}
.item-row:hover .item-arrow{color:var(--olive)}
.item-meta{display:flex;align-items:center;gap:8px;margin-top:.35rem;flex-wrap:wrap}
.item-date{font-size:11px;color:var(--muted)}
.item-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;background:var(--olive-lt);color:var(--olive)}
.item-tag.reg{background:#e8f3fb;color:#2a6090}
.pinned-badge{font-size:10px;font-weight:700;color:var(--olive);background:var(--olive-lt);padding:2px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:3px}

/* ── Portfolio card ── */
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.pc{background:var(--white);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .22s;border:1px solid var(--border)}
.pc:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(46,82,96,.12);border-color:var(--olive)}
.pc-img{height:180px;background:linear-gradient(135deg,var(--teal3),var(--teal));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pc-img .no-img i{font-size:40px;color:rgba(255,255,255,.3);position:relative}
.pc-tag{position:absolute;top:12px;left:12px;background:var(--olive);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:4px;z-index:2}
.pc-body{padding:1.25rem 1.5rem}
.pc-body h3{font-size:15px;font-weight:700;color:var(--teal);margin-bottom:.4rem;line-height:1.45}
.pc-body p{font-size:13px;color:var(--muted);line-height:1.65;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pc-footer{padding:.75rem 1.5rem 1.25rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border)}
.pc-year{font-size:11px;color:var(--muted)}
.pc-more{font-size:12px;color:var(--olive);display:flex;align-items:center;gap:4px}

/* ── Empty state / Skeleton ── */
.empty{padding:3rem 0;text-align:center;color:var(--muted)}
.empty i{font-size:40px;display:block;margin-bottom:.75rem;opacity:.3}
.sk{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shim 1.5s infinite;border-radius:6px;height:16px;margin-bottom:10px}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Back to top ── */
#btt{display:none;position:fixed;bottom:28px;right:28px;z-index:700;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);align-items:center;justify-content:center;font-size:20px;transition:all .2s}
#btt:hover{background:var(--teal2);transform:translateY(-3px)}
#btt.show{display:flex}

/* ── Footer ── */
footer{background:#1c2f36;color:rgba(255,255,255,.4);text-align:center;padding:.9rem 1.5rem;font-size:12px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem .75rem;flex-shrink:0}
footer strong{color:rgba(255,255,255,.7)}
footer .fs{color:rgba(255,255,255,.2)}

/* ── Responsive ── */
@media(max-width:800px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
}