/* ===== 琉急式日誌：高質感卡片設計 ===== */
.main-content { padding-top: var(--nav-h, 0px); }

/* 容器寬度與節奏 */
.main-content .hero-section{
  max-width: 920px;
  margin: 0 auto;
  padding-inline: 16px;
}

/* 篩選區維持膠囊風格 */
.log-toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:12px;
  border-radius:16px;
  background: rgba(10,16,22,.45);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.log-search{
  flex:1 1 280px; max-width:560px;
  padding:10px 14px 10px 40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35) url('https://cdn.jsdelivr.net/gh/tabler/tabler-icons/icons/search.svg') no-repeat 14px center/18px;
  color:#fff; outline:none;
  box-shadow: inset 0 0 6px rgba(255,255,255,.15);
}
.log-search:focus{ border-color:#12b886; box-shadow:0 0 10px rgba(18,184,134,.55); }
.log-tags-filter{ display:flex; gap:8px; flex-wrap:wrap; }
.tag-pill{
  border-radius:999px; padding:6px 12px; font-size:.9rem; color:#fff;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer; transition:all .25s ease;
}
.tag-pill:hover{ background:rgba(255,255,255,.16); box-shadow:0 0 10px rgba(255,255,255,.25); }
.tag-pill.active{ background:#12b886; border-color:transparent; box-shadow:0 0 12px rgba(18,184,134,.6); }

/* 清單節奏 */
.log-list{ display:grid; gap:18px; }

/* —— 卡片：玻璃擬態 + 漸層描邊 —— */
.log-item{
  position: relative;
  border-radius: 18px;
  padding: 18px 20px;
  background: rgba(8,12,18,.52);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* 漸層外光暈描邊 */
.log-item::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:19px;
  padding:1px;
  background: linear-gradient(135deg,#12b88655,#4dabf755,#845ef755);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.log-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.40), 0 0 18px rgba(18,184,134,.35);
}

/* 頂部：類型 → 做成微膠囊列 */
.log-type-line{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:10px;
}
.log-type-line::before{ /* 左側小標題點綴 */
  content:"";
  width:8px; height:8px; border-radius:50%;
  background: #12b886; margin:7px 6px 0 0; box-shadow:0 0 8px #12b886;
}
.log-type-line span, .log-type-line{
  font-weight:800; color:#a5d8ff; letter-spacing:.2px;
}

/* 標題區 */
.log-title{
  margin: 2px 0 10px 0;
  font-size: 1.25rem; line-height: 1.35;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* 內容：段落化、左邊細導引線 */
.log-body{
  position: relative; padding-left: 14px; margin-bottom: 12px;
}
.log-body::before{
  content:""; position:absolute; left:4px; top:4px; bottom:4px;
  width:2px; border-radius:2px;
  background: linear-gradient(#12b886,#4dabf7);
  opacity:.75;
}
.log-body p{ margin:6px 0; line-height:1.7; opacity:.96; }

/* 底部：日期與版本 → 置中且分開層次 */
.log-meta{
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.log-date{
  font-weight:700; font-size:.92rem; color:#e6fcf5;
  padding:6px 12px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 0 8px rgba(255,255,255,.10);
}
.log-version{
  font-weight:900; font-size:.9rem; letter-spacing:.3px;
  color:#082f2a;
  padding:6px 12px; border-radius:999px;
  background: linear-gradient(135deg,#20c997,#0cf2d3);
  border:1px solid rgba(12,242,211,.7);
  box-shadow: 0 0 12px rgba(12,242,211,.6);
}

/* 針對特定 type（可選） */
.log-badge, .log-type-line .badge{ display:inline-block; }
.log-badge.feature, .log-type-line .feature{ background:#4dabf7; }
.log-badge.fix,      .log-type-line .fix     { background:#fa5252; }
.log-badge.ui,       .log-type-line .ui      { background:#845ef7; }
.log-badge.map,      .log-type-line .map     { background:#20c997; }
.log-badge.marquee,  .log-type-line .marquee { background:#339af0; }

/* RWD 微調 */
@media (max-width: 480px){
  .log-item{ padding:16px 14px; }
  .log-title{ font-size:1.15rem; }
  .log-toolbar{ padding:10px; }
}
.log-toolbar {
  display: none !important;
}