/* ============================================================
   cards.css — 文章卡片（白底大圓角）+ 等級標籤
   卡片動作：右下角珊瑚紅「閱讀 →」按鈕（整卡仍可點，按鈕是視覺焦點）
   ============================================================ */
.postcard{
  position:relative; background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding:18px; text-decoration:none;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;
}
.postcard:hover{ transform:translateY(-3px); box-shadow: var(--shadow-hover); }

/* 頭列：emoji 方塊 + 標題 */
.card-head{ display:flex; gap:13px; align-items:center; margin-bottom:8px; }
.card-emoji{ line-height:1; background: var(--paper); border-radius:14px; padding:11px; flex-shrink:0; }
.card-emoji .emoji{ width:1.8rem; height:1.8rem; }
.postcard h3.en{ font-family: var(--font-display); font-size:1.1rem; margin:0; overflow-wrap:break-word; }
.postcard .zh{ font-family: var(--font-serif); font-weight:600; color: var(--ink-soft); font-size:.86rem; }
.card-summary{ font-family: var(--font-serif); font-size:.82rem; color: var(--ink-soft); line-height:1.55; margin:6px 0 14px; flex:1; }

/* 底列：等級標籤靠左、閱讀鈕靠右 */
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-levels{ display:flex; gap:6px; flex-wrap:wrap; }
.read-btn{ display:inline-flex; align-items:center; gap:5px; flex-shrink:0; font-family: var(--font-mono);
  font-size:.82rem; font-weight:600; background: var(--coral); color:#fff; padding:8px 17px; border-radius:20px;
  box-shadow:0 4px 12px rgba(232,93,61,.3); }

/* ---- 等級標籤（卡片與文章標頭共用） ---- */
.level-badge{ display:inline-block; font-family: var(--font-mono); font-size:.64rem; letter-spacing:.5px;
  padding:3px 9px; border-radius:12px; background:rgba(23,126,110,.1); color: var(--teal-dark); font-weight:600; }
.level-badge.lv-GEPT{ background:rgba(233,163,25,.15); color:#8A6008; }