/* ============================================
   fitfinance — 瘦身 × 理財生活誌
   Complete Design System v2
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;800&display=swap');

:root {
  --green: #059669;
  --green-dark: #047857;
  --green-light: #d1fae5;
  --green-subtle: #ecfdf5;
  --amber: #f59e0b;
  --amber-light: #fef3c7;
  --blue: #3b82f6;
  --blue-light: #dbeafe;
  --blue-subtle: #eff6ff;
  --pink: #ec4899;
  --pink-light: #fce7f3;

  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --bg: #ffffff;
  --bg-warm: #fafaf9;
  --bg-cool: #f8fafc;
  --border: #e2e8f0;
  --border-subtle: #f1f5f9;

  --card-radius: 20px;
  --btn-radius: 14px;
  --max-w: 1200px;
  --content-w: 720px;
  --nav-h: 72px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.25s var(--ease);
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.7; color: var(--text); background: var(--bg);
}
a { color: var(--green); text-decoration:none; transition: var(--transition); }
a:hover { color: var(--green-dark); }
img { max-width:100%; display:block; }

/* --- Container --- */
.container { max-width: var(--max-w); margin:0 auto; padding:0 24px; }
.container-sm { max-width: var(--content-w); margin:0 auto; padding:0 24px; }

/* ============ NAV ============ */
.nav {
  position: fixed; top:0; left:0; right:0; height: var(--nav-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.nav .container { display:flex; align-items:center; justify-content:space-between; height:100%; }

.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -0.5px;
}
.nav-logo:hover { color: var(--text); }
.logo-mark {
  display: inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--green), var(--amber));
  border-radius: 10px; color:#fff; font-size:1.2rem;
}

.nav-links { display:flex; align-items:center; gap:8px; list-style:none; padding:0; }
.nav-links a {
  padding: 8px 18px; border-radius: 10px;
  font-size: 0.9rem; font-weight: 500; color: var(--text-secondary);
  transition: var(--transition);
}
.nav-links a:hover { background: var(--bg-warm); color: var(--text); }
.nav-links a.active { background: var(--green-subtle); color: var(--green); font-weight: 600; }

.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span {
  display:block; width:22px; height:2.5px;
  background: var(--text); margin:5px 0; border-radius:2px;
  transition: var(--transition);
}

/* ============ HERO ============ */
.hero {
  padding: 140px 0 80px;
  background: linear-gradient(165deg, #f0fdf4 0%, #ffffff 40%, #fefce8 100%);
  text-align: center;
  position: relative; overflow: hidden;
  min-height: 500px;
  display: flex; align-items: center;
}
.hero::before {
  content: ''; position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5,150,105,0.07) 0%, transparent 70%);
  top: -200px; right: -200px;
}
.hero::after {
  content: ''; position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%);
  bottom: -200px; left: -150px;
}

.hero-content { position: relative; z-index:1; }

.hero-badge {
  display: inline-flex; align-items:center; gap:6px;
  background: rgba(5,150,105,0.1); color: var(--green);
  padding: 8px 18px; border-radius: 100px;
  font-size: 0.85rem; font-weight: 600; margin-bottom: 24px;
  border: 1px solid rgba(5,150,105,0.15);
}

.hero h1 {
  font-size: 3.5rem; font-weight: 900;
  line-height: 1.1; margin-bottom: 20px;
  letter-spacing: -1px;
}
.hero h1 .gradient-green {
  background: linear-gradient(135deg, var(--green), #10b981);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero h1 .gradient-amber {
  background: linear-gradient(135deg, var(--amber), #d97706);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.2rem; color: var(--text-secondary);
  max-width: 560px; margin: 0 auto 36px;
  line-height: 1.7;
}

.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hero-stats {
  display:flex; justify-content:center; gap:48px;
  margin-top: 48px; padding-top: 40px;
  border-top: 1px solid var(--border);
}
.hero-stat { text-align:center; }
.hero-stat .num { font-size: 1.8rem; font-weight: 800; color: var(--text); }
.hero-stat .label { font-size: 0.85rem; color: var(--text-muted); margin-top:2px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items:center; gap:8px;
  padding: 14px 30px; border-radius: var(--btn-radius);
  font-size: 1rem; font-weight: 600; cursor:pointer;
  transition: all 0.25s var(--ease); border: none; text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--green), #10b981);
  color: #fff; box-shadow: 0 4px 14px rgba(5,150,105,0.3);
}
.btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(5,150,105,0.35);
  color: #fff;
}
.btn-secondary {
  background: #fff; color: var(--text); border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  border-color: var(--green); color: var(--green); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-amber {
  background: linear-gradient(135deg, var(--amber), #d97706);
  color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,0.3);
}
.btn-amber:hover { transform: translateY(-2px); color: #fff; }

/* ============ SECTION ============ */
.section { padding: 80px 0; }
.section-alt { background: var(--bg-warm); }
.section-header {
  text-align: center; margin-bottom: 48px;
  max-width: 600px; margin-left: auto; margin-right: auto;
}
.section-header h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 8px; letter-spacing:-0.5px; }
.section-header p { color: var(--text-secondary); font-size: 1.1rem; }

/* ============ CAT TAG ============ */
.cat-tag {
  display: inline-block; padding: 5px 14px; border-radius: 100px;
  font-size: 0.78rem; font-weight: 600; letter-spacing:0.3px;
}
.cat-tag.fitness { background: var(--green-subtle); color: var(--green); }
.cat-tag.finance { background: var(--blue-subtle); color: var(--blue); }

/* ============ POST CARDS ============ */
.featured-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }

.post-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--card-radius); overflow:hidden;
  transition: all 0.35s var(--ease);
  box-shadow: var(--shadow-card);
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.post-card-image {
  width:100%; height: 220px;
  display: flex; align-items:center; justify-content:center;
  font-size: 3.5rem; position:relative; overflow:hidden;
}
.featured-grid .post-card:first-child .post-card-image { height: 320px; }

.post-card-image::after {
  content: ''; position:absolute; bottom:0; left:0; right:0;
  height: 60%; background: linear-gradient(transparent, rgba(0,0,0,0.03));
  pointer-events:none;
}

.post-card-body { padding: 24px; }
.post-card-body .cat-tag { margin-bottom: 12px; }
.post-card-body h3 {
  font-size: 1.3rem; font-weight: 700; margin: 10px 0 10px;
  line-height: 1.35;
}
.post-card-body h3 a { color: var(--text); }
.post-card-body h3 a:hover { color: var(--green); }
.post-card-body p {
  color: var(--text-secondary); font-size: 0.95rem;
  line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.post-meta {
  display:flex; align-items:center; gap:16px; margin-top:16px;
  font-size: 0.83rem; color: var(--text-muted);
}
.post-meta span { display:flex; align-items:center; gap:4px; }

/* --- Featured card variant --- */
.featured-grid .post-card:first-child .post-card-body { padding: 28px; }
.featured-grid .post-card:first-child .post-card-body h3 { font-size: 1.5rem; }

/* ============ CATEGORY CARDS ============ */
.categories-showcase { display:grid; grid-template-columns:1fr 1fr; gap:28px; }

.cat-card {
  padding: 48px 40px; border-radius: 24px; text-align:center;
  transition: all 0.35s var(--ease); position:relative; overflow:hidden;
}
.cat-card.fitness {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid rgba(16,185,129,0.15);
}
.cat-card.finance {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(59,130,246,0.15);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

.cat-card-icon { font-size: 3.5rem; margin-bottom: 16px; display:block; }
.cat-card h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.cat-card p { color: var(--text-secondary); margin-bottom: 24px; line-height:1.6; }

.cat-card .btn {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  color: var(--text); border: 1px solid rgba(255,255,255,0.5);
}
.cat-card.fitness .btn:hover { background: var(--green); color:#fff; }
.cat-card.finance .btn:hover { background: var(--blue); color:#fff; }

/* ============ NEWSLETTER ============ */
.newsletter {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
  color: #fff; text-align:center; padding: 72px 0; position:relative; overflow:hidden;
}
.newsletter::before {
  content: ''; position:absolute;
  width: 400px; height:400px; border-radius:50%;
  background: rgba(255,255,255,0.03);
  top: -150px; left: -100px;
}
.newsletter::after {
  content: ''; position:absolute;
  width: 300px; height:300px; border-radius:50%;
  background: rgba(245,158,11,0.05);
  bottom: -100px; right: -80px;
}

.newsletter * { position:relative; z-index:1; }
.newsletter h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; }
.newsletter p { opacity: 0.85; margin-bottom: 32px; font-size:1.1rem; }

.newsletter-form {
  display:flex; max-width:480px; margin:0 auto; gap:12px;
}
.newsletter-form input {
  flex:1; padding: 16px 22px; border:none; border-radius:14px;
  font-size:1rem; outline:none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.newsletter-form .btn {
  background: linear-gradient(135deg, var(--amber), #d97706);
  color:#fff; white-space:nowrap; padding: 16px 28px;
}
.newsletter-form .btn:hover { transform: translateY(-2px); }

/* ============ FOOTER ============ */
.footer {
  background: #0c0a09; color: #a8a29e; padding: 56px 0 32px;
}
.footer-grid {
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-brand h3 { color:#fff; font-size:1.3rem; font-weight:700; margin-bottom:12px; }
.footer-brand p { font-size:0.9rem; line-height:1.7; }
.footer h4 {
  color: #d6d3d1; font-size:0.85rem; font-weight:600;
  margin-bottom: 16px; text-transform:uppercase; letter-spacing:1px;
}
.footer ul { list-style:none; padding:0; }
.footer ul li { margin-bottom: 10px; }
.footer ul li a { color: #a8a29e; font-size:0.9rem; }
.footer ul li a:hover { color:#fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px; display:flex; justify-content:space-between;
  align-items:center; font-size:0.85rem; flex-wrap:wrap; gap:12px;
}
.footer-bottom .disclaimer { font-size:0.78rem; opacity:0.5; }

/* =============================================
   CATEGORY PAGES
   ============================================= */
.category-hero {
  padding: 140px 0 64px; text-align:center;
}
.category-hero.fitness { background: linear-gradient(180deg, #ecfdf5, #fff 60%); }
.category-hero.finance { background: linear-gradient(180deg, #eff6ff, #fff 60%); }
.category-hero h1 { font-size: 3rem; font-weight: 900; margin-bottom: 8px; }
.category-hero p { color: var(--text-secondary); font-size:1.15rem; max-width:480px; margin:0 auto; }

.posts-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:28px;
}

/* =============================================
   ARTICLE PAGE
   ============================================= */
.article { padding: 140px 0 60px; background: var(--bg-warm); }

.article-header {
  max-width: var(--content-w); margin:0 auto 48px; text-align:center;
}
.article-header h1 {
  font-size: 2.6rem; font-weight: 800; line-height:1.2;
  margin: 16px 0; letter-spacing:-0.5px;
}
.article-header .post-meta { justify-content:center; }

.article-image {
  max-width: var(--content-w); margin:0 auto 48px;
  height: 420px; border-radius: 24px;
  display:flex; align-items:center; justify-content:center;
  font-size: 5rem; box-shadow: var(--shadow-lg);
}

.article-content-wrap {
  background: #fff; border-radius: 24px;
  padding: 48px 56px; box-shadow: var(--shadow-card);
  max-width: var(--content-w); margin:0 auto;
}

.article-content { font-size:1.1rem; line-height:1.9; color: var(--text); }

.article-content h2 {
  font-size: 1.7rem; font-weight: 700; margin: 44px 0 16px;
}
.article-content h3 {
  font-size: 1.3rem; font-weight: 600; margin: 32px 0 12px;
}
.article-content p { margin-bottom: 20px; }
.article-content ul, .article-content ol { margin-bottom: 20px; padding-left:1.5rem; }
.article-content li { margin-bottom: 8px; }

.article-content .tip-box {
  background: var(--green-subtle);
  border-left: 4px solid var(--green);
  padding: 20px 24px; border-radius: 0 16px 16px 0;
  margin: 28px 0;
}
.article-content .tip-box strong { color: var(--green-dark); }

.article-content .affiliate-box {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid var(--amber); border-radius: 20px;
  padding: 28px; margin: 36px 0; text-align:center;
}
.article-content .affiliate-box h4 { font-size:1.2rem; margin-bottom:8px; }
.article-content .affiliate-box p { margin-bottom:12px; }
.article-content .affiliate-box small { display:block; margin-top:10px; font-size:0.8rem; color: var(--text-muted); }

.article-content table {
  width:100%; border-collapse:collapse; margin:24px 0;
  font-size:0.95rem; border-radius:12px; overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.article-content th, .article-content td {
  padding: 14px 18px; text-align:left; border-bottom:1px solid var(--border);
}
.article-content th { background: var(--bg-warm); font-weight:600; }
.article-content tr:last-child td { border-bottom:none; }
.article-content tr:hover td { background: var(--bg-warm); }

.article-footer {
  max-width: var(--content-w); margin: 48px auto 0;
  padding-top: 32px; border-top:2px solid var(--border-subtle);
  display:flex; justify-content:space-between; align-items:center;
}

.affiliate-disclosure {
  max-width: var(--content-w); margin: 20px auto 0;
  padding: 14px 20px; background: var(--bg-warm);
  border-radius: 12px; font-size:0.82rem; color: var(--text-muted);
  text-align:center;
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-hero {
  padding: 140px 0 60px;
  background: linear-gradient(180deg, #f0fdf4, #fff 60%);
  text-align:center;
}
.about-hero h1 { font-size: 3rem; font-weight:900; margin-bottom:16px; }

.about-content {
  max-width: var(--content-w); margin:0 auto;
  padding: 48px 56px; background:#fff;
  border-radius: 24px; box-shadow: var(--shadow-card);
  text-align:center; margin-bottom: 60px;
}
.about-content p {
  font-size: 1.1rem; color: var(--text-secondary);
  line-height:1.8; margin-bottom: 20px;
}
.about-content ul { display:inline-block; text-align:left; }
.about-content .mission {
  font-size: 1.3rem; font-weight:700; color: var(--text);
  margin: 32px 0 8px; padding: 24px;
  background: linear-gradient(135deg, var(--green-subtle), var(--amber-light));
  border-radius: 16px;
}

/* =============================================
   404 PAGE
   ============================================= */
.error-page {
  padding: 180px 0; text-align:center;
}
.error-page .error-code {
  font-size: 10rem; font-weight:900;
  background: linear-gradient(135deg, var(--border), var(--text-muted));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1;
}
.error-page h1 { font-size:2rem; margin:12px 0 8px; }
.error-page p { color: var(--text-secondary); margin-bottom:32px; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .hero h1 { font-size: 2.8rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:32px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .nav-links {
    display:none; position:absolute; top:var(--nav-h);
    left:0; right:0; background:#fff; flex-direction:column;
    padding:12px 16px; gap:4px;
    border-bottom:1px solid var(--border); box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 16px; width:100%; border-radius:8px; }
  .nav-toggle { display:block; }

  .hero { padding: 120px 0 60px; min-height:auto; }
  .hero h1 { font-size: 2.2rem; }
  .hero p { font-size: 1rem; }
  .hero-stats { gap: 24px; flex-wrap:wrap; }
  .hero-stat .num { font-size: 1.4rem; }

  .featured-grid { grid-template-columns:1fr; gap:20px; }
  .featured-grid .post-card:first-child .post-card-image { height:220px; }
  .featured-grid .post-card:first-child .post-card-body h3 { font-size:1.3rem; }

  .categories-showcase { grid-template-columns:1fr; gap:20px; }
  .cat-card { padding: 36px 28px; }

  .newsletter-form { flex-direction:column; }
  .newsletter h2 { font-size:1.7rem; }

  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }

  .article-header h1 { font-size:1.8rem; }
  .article-content-wrap { padding: 28px 24px; border-radius:16px; }
  .article-content { font-size:1rem; }
  .article-image { height: 260px; }

  .posts-grid { grid-template-columns:1fr; }
  .section { padding: 48px 0; }
  .section-header h2 { font-size:1.7rem; }

  .about-content { padding: 32px 24px; }
  .about-hero h1 { font-size: 2.2rem; }
  .category-hero h1 { font-size: 2.2rem; }

  .container { padding: 0 20px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.8rem; }
  .post-card-body { padding: 18px; }
  .post-card-image { height: 180px; }
  .post-card-body h3 { font-size:1.15rem; }
  .article-image { height: 200px; font-size:3.5rem; }
  .article-content-wrap { padding: 20px 16px; }
}