/* BNotes 品牌設計系統 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500&display=swap');

:root {
  --coffee-dark: #2C1810;
  --coffee-warm: #8B4513;
  --coffee-gold: #C8922A;
  --coffee-cream: #F5F0E8;
  --coffee-light: #FDF8F0;
  --coffee-text: #3D2B1F;
  --accent-green: #4A7C59;
  --border: #E8DDD0;
  --shadow: rgba(44,24,16,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans TC', 'Arial', sans-serif;
  background: var(--coffee-light);
  color: var(--coffee-text);
  line-height: 1.8;
  font-size: 16px;
}

/* ─── HEADER ─── */
.site-header {
  background: var(--coffee-dark);
  color: #fff;
  padding: 0 2rem;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.site-logo {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--coffee-gold); text-decoration: none; letter-spacing: .04em;
}
.site-logo span { color: #fff; font-weight: 400; font-size: 0.8rem; margin-left: 8px; opacity: .7; }
.site-nav { display: flex; gap: 2rem; }
.site-nav a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; transition: color .2s; }
.site-nav a:hover { color: var(--coffee-gold); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: #fff; font-size: 1.5rem; }

/* ─── HERO ─── */
.site-hero {
  background: linear-gradient(135deg, var(--coffee-dark) 0%, var(--coffee-warm) 100%);
  color: #fff; text-align: center;
  padding: 80px 2rem 64px;
}
.site-hero h1 { font-family: 'Noto Serif TC', serif; font-size: 2.4rem; line-height: 1.4; margin-bottom: 1rem; }
.site-hero p { font-size: 1.05rem; opacity: .85; max-width: 560px; margin: 0 auto 2rem; }
.btn-primary {
  display: inline-block; background: var(--coffee-gold);
  color: #fff; padding: .75rem 2rem; border-radius: 4px;
  text-decoration: none; font-weight: 500; transition: background .2s;
}
.btn-primary:hover { background: #b07d20; }

/* ─── MAIN LAYOUT ─── */
.main-container { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; }

/* ─── ARTICLE GRID ─── */
.section-title {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.5rem; color: var(--coffee-dark);
  margin-bottom: 1.5rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--coffee-gold);
  display: flex; align-items: center; gap: .6rem;
}
.articles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 3rem; }
@media(max-width:900px){ .articles-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .articles-grid { grid-template-columns: 1fr; } }

.article-card {
  background: #fff; border-radius: 8px;
  box-shadow: 0 2px 12px var(--shadow);
  overflow: hidden; transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.article-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--shadow); }
.card-img { height: 180px; background: var(--coffee-cream); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-img img { width:100%; height:100%; object-fit:cover; }
.card-img .card-emoji { font-size: 3rem; }
.card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.card-category {
  display: inline-block; background: var(--coffee-cream);
  color: var(--coffee-warm); font-size: .75rem; font-weight: 500;
  padding: .2rem .6rem; border-radius: 3px; margin-bottom: .75rem;
}
.card-body h3 { font-family: 'Noto Serif TC', serif; font-size: 1rem; line-height: 1.5; margin-bottom: .5rem; flex: 1; }
.card-body h3 a { color: var(--coffee-dark); text-decoration: none; }
.card-body h3 a:hover { color: var(--coffee-warm); }
.card-meta { font-size: .8rem; color: #888; margin-top: .75rem; display: flex; gap: .75rem; }
.card-tag { background: var(--coffee-light); color: var(--coffee-warm); padding: .15rem .5rem; border-radius: 3px; font-size: .72rem; }

/* ─── ARTICLE PAGE ─── */
.article-layout { max-width: 820px; margin: 0 auto; padding: 2.5rem 2rem; }
.breadcrumb { font-size: .82rem; color: #888; margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--coffee-warm); text-decoration: none; }

.article-header { margin-bottom: 2rem; }
.article-category { display:inline-block; background:var(--coffee-cream); color:var(--coffee-warm); padding:.3rem .8rem; border-radius:4px; font-size:.8rem; font-weight:500; margin-bottom:.75rem; }
.article-header h1 { font-family:'Noto Serif TC',serif; font-size:2rem; line-height:1.5; color:var(--coffee-dark); margin-bottom:1rem; }
.article-meta-bar { display:flex; gap:1.5rem; font-size:.82rem; color:#888; flex-wrap:wrap; margin-bottom:1.5rem; }
.article-meta-bar span { display:flex; align-items:center; gap:.3rem; }
.article-hero-img { width:100%; height:320px; object-fit:cover; border-radius:8px; margin-bottom:2rem; }
.article-hero-placeholder { width:100%; height:280px; background:linear-gradient(135deg,var(--coffee-cream),#e8d8c0); border-radius:8px; margin-bottom:2rem; display:flex;align-items:center;justify-content:center; font-size:4rem; }

/* Key Takeaways */
.key-takeaways { background: linear-gradient(135deg, #fff8f0, #fff3e6); border-left: 4px solid var(--coffee-gold); border-radius: 0 8px 8px 0; padding: 1.5rem 1.75rem; margin: 2rem 0; }
.key-takeaways h3 { font-family:'Noto Serif TC',serif; color:var(--coffee-dark); font-size:1.05rem; margin-bottom:1rem; }
.key-takeaways ul { list-style: none; }
.key-takeaways ul li { padding: .4rem 0; padding-left: 1.5rem; position:relative; color:var(--coffee-text); font-size:.95rem; }
.key-takeaways ul li::before { content:'▸'; position:absolute; left:0; color:var(--coffee-gold); }

/* Article Body */
.article-body h2 { font-family:'Noto Serif TC',serif; font-size:1.5rem; color:var(--coffee-dark); margin:2.5rem 0 1rem; padding-bottom:.5rem; border-bottom:2px solid var(--coffee-cream); }
.article-body h3 { font-family:'Noto Serif TC',serif; font-size:1.2rem; color:var(--coffee-warm); margin:2rem 0 .75rem; }
.article-body p { margin-bottom:1.25rem; line-height:1.9; }
.article-body ul, .article-body ol { margin:1rem 0 1.25rem 1.5rem; }
.article-body li { margin-bottom:.4rem; line-height:1.8; }
.article-body strong { color:var(--coffee-dark); }
.article-body em { color:var(--coffee-warm); font-style:normal; background:rgba(200,146,42,.08); padding:0 3px; border-radius:2px; }
.article-body blockquote { border-left:4px solid var(--coffee-gold); background:var(--coffee-cream); padding:1rem 1.5rem; margin:1.5rem 0; border-radius:0 6px 6px 0; font-style:italic; color:var(--coffee-warm); }

/* Tables */
.spec-table, .compare-table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9rem; box-shadow:0 2px 8px var(--shadow); border-radius:8px; overflow:hidden; }
.spec-table th, .compare-table th { background:var(--coffee-dark); color:#fff; padding:.75rem 1rem; text-align:left; font-family:'Noto Serif TC',serif; font-size:.85rem; }
.spec-table td, .compare-table td { padding:.65rem 1rem; border-bottom:1px solid var(--border); }
.spec-table tr:last-child td, .compare-table tr:last-child td { border-bottom:none; }
.spec-table tr:nth-child(even), .compare-table tr:nth-child(even) { background:var(--coffee-light); }
.table-title { font-family:'Noto Serif TC',serif; font-size:1rem; color:var(--coffee-dark); margin:2rem 0 .5rem; font-weight:600; }

/* Brew Params */
.brew-params { background:var(--coffee-dark); color:#fff; border-radius:8px; padding:1.5rem 2rem; margin:2rem 0; }
.brew-params h3 { font-family:'Noto Serif TC',serif; color:var(--coffee-gold); font-size:1.1rem; margin-bottom:1.25rem; }
.params-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:700px){ .params-grid { grid-template-columns:repeat(2,1fr); } }
.param-item { text-align:center; }
.param-value { font-size:1.4rem; font-weight:700; color:var(--coffee-gold); font-family:'Noto Serif TC',serif; }
.param-label { font-size:.75rem; color:rgba(255,255,255,.7); margin-top:.25rem; }

/* CSS Bar Chart */
.bar-chart { margin:1.5rem 0; }
.bar-chart-title { font-family:'Noto Serif TC',serif; font-size:1rem; color:var(--coffee-dark); margin-bottom:1rem; font-weight:600; }
.bar-row { display:flex; align-items:center; margin-bottom:.6rem; gap:.75rem; }
.bar-label { width:140px; font-size:.85rem; color:var(--coffee-text); flex-shrink:0; }
.bar-track { flex:1; height:20px; background:var(--coffee-cream); border-radius:10px; overflow:hidden; }
.bar-fill { height:100%; border-radius:10px; background:linear-gradient(90deg,var(--coffee-warm),var(--coffee-gold)); transition:width .6s; }
.bar-value { width:50px; font-size:.82rem; color:var(--coffee-warm); font-weight:600; text-align:right; }

/* Flavor Radar (SVG) */
.flavor-radar { text-align:center; margin:1.5rem 0; }
.flavor-radar figcaption { font-size:.82rem; color:#888; margin-top:.5rem; }

/* Timeline */
.timeline { position:relative; margin:1.5rem 0; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:.5rem; top:0; bottom:0; width:2px; background:var(--coffee-cream); }
.timeline-step { position:relative; margin-bottom:1.5rem; }
.timeline-step::before { content:attr(data-step); position:absolute; left:-2rem; width:1.5rem; height:1.5rem; background:var(--coffee-gold); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; top:.15rem; }
.timeline-step h4 { font-family:'Noto Serif TC',serif; color:var(--coffee-dark); font-size:.95rem; margin-bottom:.25rem; }
.timeline-step p { font-size:.88rem; color:#666; }

/* Diagnosis Box */
.diagnosis-box { background:#fff; border:1px solid var(--border); border-radius:8px; padding:1.5rem; margin:1.5rem 0; }
.diagnosis-box h4 { font-family:'Noto Serif TC',serif; color:var(--coffee-warm); margin-bottom:.75rem; font-size:1rem; }
.diagnosis-row { display:flex; gap:1rem; margin-bottom:.5rem; align-items:flex-start; }
.diag-label { background:var(--coffee-cream); color:var(--coffee-warm); padding:.2rem .6rem; border-radius:4px; font-size:.8rem; font-weight:500; flex-shrink:0; width:80px; text-align:center; }
.diag-content { font-size:.88rem; line-height:1.6; }

/* CTA */
.article-cta { background:linear-gradient(135deg,var(--coffee-dark),var(--coffee-warm)); color:#fff; border-radius:12px; padding:2.5rem; margin:3rem 0; text-align:center; }
.article-cta h3 { font-family:'Noto Serif TC',serif; font-size:1.4rem; margin-bottom:.75rem; color:var(--coffee-gold); }
.article-cta p { opacity:.85; margin-bottom:1.5rem; font-size:.95rem; max-width:480px; margin-left:auto; margin-right:auto; }
.cta-form { display:flex; gap:.75rem; max-width:440px; margin:0 auto; }
.cta-form input { flex:1; padding:.7rem 1rem; border:none; border-radius:4px; font-size:.9rem; font-family:inherit; }
.cta-form button { background:var(--coffee-gold); color:#fff; border:none; padding:.7rem 1.25rem; border-radius:4px; cursor:pointer; font-weight:500; white-space:nowrap; font-family:inherit; transition:background .2s; }
.cta-form button:hover { background:#b07d20; }
@media(max-width:500px){ .cta-form { flex-direction:column; } }

/* Related Articles */
.related-section { margin:2rem 0; }
.related-section h3 { font-family:'Noto Serif TC',serif; font-size:1.1rem; color:var(--coffee-dark); margin-bottom:1rem; border-bottom:2px solid var(--coffee-cream); padding-bottom:.5rem; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:600px){ .related-grid { grid-template-columns:1fr; } }
.related-card { background:#fff; border:1px solid var(--border); border-radius:6px; padding:1rem; }
.related-card h4 { font-size:.88rem; font-family:'Noto Serif TC',serif; line-height:1.4; }
.related-card h4 a { color:var(--coffee-dark); text-decoration:none; }
.related-card h4 a:hover { color:var(--coffee-warm); }
.related-card .rc-cat { font-size:.75rem; color:var(--coffee-warm); margin-bottom:.35rem; }

/* FOOTER */
.site-footer { background:var(--coffee-dark); color:rgba(255,255,255,.7); padding:3rem 2rem 1.5rem; margin-top:4rem; }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
@media(max-width:700px){ .footer-grid { grid-template-columns:1fr; } }
.footer-brand p { font-size:.85rem; margin-top:.75rem; opacity:.75; line-height:1.7; }
.footer-col h4 { font-family:'Noto Serif TC',serif; color:var(--coffee-gold); font-size:.95rem; margin-bottom:.75rem; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:.4rem; font-size:.85rem; }
.footer-col ul li a { color:rgba(255,255,255,.65); text-decoration:none; transition:color .2s; }
.footer-col ul li a:hover { color:var(--coffee-gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.25rem; font-size:.8rem; text-align:center; opacity:.55; }

/* Search bar */
.search-bar { max-width:480px; margin:1.5rem auto; display:flex; gap:.5rem; }
.search-bar input { flex:1; padding:.6rem 1rem; border:2px solid var(--border); border-radius:6px; font-size:.9rem; font-family:inherit; background:#fff; }
.search-bar input:focus { outline:none; border-color:var(--coffee-gold); }
.search-bar button { background:var(--coffee-warm); color:#fff; border:none; padding:.6rem 1rem; border-radius:6px; cursor:pointer; }
.no-results { text-align:center; color:#888; padding:2rem; }

/* Tag filter */
.tag-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.tag-btn { background:#fff; border:1.5px solid var(--border); color:var(--coffee-text); padding:.35rem .85rem; border-radius:20px; cursor:pointer; font-size:.82rem; transition:all .2s; }
.tag-btn:hover, .tag-btn.active { background:var(--coffee-warm); border-color:var(--coffee-warm); color:#fff; }

/* Highlight text */
.highlight { background:linear-gradient(180deg, transparent 60%, rgba(200,146,42,.25) 60%); }
.term { border-bottom:1px dashed var(--coffee-gold); cursor:help; }

/* Callout */
.callout { background:var(--coffee-cream); border-left:4px solid var(--accent-green); border-radius:0 6px 6px 0; padding:1rem 1.5rem; margin:1.5rem 0; }
.callout-warn { background:#fff8f0; border-left-color:var(--coffee-gold); }
.callout-tip { background:#f0f7f3; border-left-color:var(--accent-green); }
.callout strong { display:block; margin-bottom:.35rem; color:var(--coffee-dark); }

/* Responsive nav */
@media(max-width:768px){
  .site-nav { display:none; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:var(--coffee-dark); padding:1rem 2rem; gap:1rem; }
  .site-nav.open { display:flex; }
  .nav-toggle { display:block; }
  .article-header h1 { font-size:1.5rem; }
  .article-layout { padding:1.5rem 1rem; }
  .brew-params { padding:1rem; }
  .params-grid { grid-template-columns:repeat(2,1fr); }
}

/* Utility */
.text-center { text-align:center; }
.mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:1rem; }
.tag-new { background:var(--coffee-gold); color:#fff; font-size:.7rem; padding:.1rem .4rem; border-radius:3px; vertical-align:middle; margin-left:.4rem; }
.w01-badge, .w02-badge, .w03-badge, .w04-badge { font-size:.7rem; background:var(--accent-green); color:#fff; padding:.1rem .4rem; border-radius:3px; margin-left:.3rem; }