body { margin: 0; font-family: "Microsoft JhengHei", "PingFang HK", Segoe UI, sans-serif; color: #222; background: #f6f7f9; }
a { color: #0b5fff; }
.blog-top { background: #123; color: #fff; padding: 12px 16px; }
.blog-top a { color: #fff; text-decoration: none; margin-right: 14px; font-weight: 600; }
.blog-wrap { max-width: 760px; margin: 0 auto; padding: 16px; }
.blog-wrap.blog-wide { max-width: 1180px; }
.crumb { font-size: 13px; color: #8b95a1; margin: 0 0 12px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb a { color: #5c6b7a; text-decoration: none; }
.crumb a:hover { color: #0b5fff; }
.crumb .sep { color: #c5ccd4; margin: 0 6px; }
.crumb .here { color: #243040; font-weight: 700; }
.blog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.blog-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 0; margin: 0; overflow: hidden; box-shadow: 0 1px 4px rgba(16, 24, 40, .06); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #e8edf3; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-title { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; }
.thumb-text { color: #fff; font-weight: 700; font-size: 18px; line-height: 1.4; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-title { margin: 12px 12px 0; font-size: 15px; line-height: 1.45; font-weight: 700; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.blog-card-date { margin: 10px 12px 14px; color: #8b95a1; font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.blog-card:has(.blog-card-tags) .blog-card-date { margin-bottom: 8px; }
.blog-card-date svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.blog-card-tags, .blog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.blog-card-tags { padding: 0 12px 14px; }
.blog-card-tags a, .blog-tags a {
  display: inline-block; padding: 3px 8px; border-radius: 999px; background: #eef3f8;
  color: #245; text-decoration: none; font-size: 12px; line-height: 1.4;
}
.blog-tags { margin: 0 0 14px; }
.blog-tags-end { margin: 14px 0 0; }
.blog-meta { color: #667; font-size: 13px; margin-bottom: 6px; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 12px; font-weight: 700; }
.tag.lock { background: #fff3cd; color: #856404; }
.tag.cat { background: #e8f0fe; color: #0b5fff; }
.pager { display: flex; gap: 8px; margin: 12px 0; }
.pager a, .pager span { padding: 6px 10px; background: #fff; border: 1px solid #dde; border-radius: 4px; text-decoration: none; }
article h1 { font-size: 28px; line-height: 1.35; margin: 0 0 8px; }
.blog-body { background: #fff; border: 1px solid #e4e8ee; border-radius: 8px; padding: 16px 18px; line-height: 1.75; font-size: 17px; }
.blog-body img { max-width: 100%; height: auto; cursor: zoom-in; }
.blog-lightbox { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 80; background: rgba(0,0,0,.92); display: flex; flex-direction: column; }
.blog-lightbox[hidden] { display: none !important; }
.blog-lightbox-count { flex: none; text-align: center; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; padding: 12px 16px 0; }
.blog-lightbox-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.blog-lightbox-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-drag: none; }
.blog-lightbox-arrow { position: absolute; top: 50%; margin-top: -22px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #123; font-size: 28px; line-height: 44px; cursor: pointer; }
.blog-lightbox-arrow.prev { left: 10px; }
.blog-lightbox-arrow.next { right: 10px; }
.blog-lightbox-arrow[hidden] { display: none !important; }
.blog-lightbox-bar { position: relative; z-index: 3; flex: none; display: flex; justify-content: center; align-items: center; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.72); }
.blog-lightbox-close { background: #fff; color: #123; border: 0; border-radius: 999px; min-height: 44px; min-width: 120px; padding: 10px 22px; font-size: 16px; font-weight: 700; cursor: pointer; }
.blog-body table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.blog-body th, .blog-body td { border: 1px solid #d5dde6; padding: 6px 8px; }
.blog-body blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid #c5ced8; color: #445; }
.blog-yt-wrap { position: relative; padding-top: 56.25%; margin: 12px 0; background: #111; border-radius: 8px; overflow: hidden; }
.blog-yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lock-box { background: #fff; border: 1px solid #e4e8ee; border-radius: 8px; padding: 16px; }
.lock-box input { width: 100%; max-width: 320px; padding: 8px; box-sizing: border-box; }
.lock-box button { margin-top: 8px; background: #0b5fff; color: #fff; border: 0; padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.err { color: #8a1f1f; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cats a { display: inline-block; padding: 6px 12px; background: #fff; border: 1px solid #dde3ea; border-radius: 999px; text-decoration: none; color: #234; }
.cats a.on { background: #123; color: #fff; border-color: #123; }
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 560px) {
  .blog-wrap { padding: 12px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-top { padding: 12px; }
  .blog-top a { display: inline-block; margin: 0 12px 0 0; }
  article h1 { font-size: 22px; }
  .blog-body { padding: 12px 14px; font-size: 16px; }
  .thumb-text { font-size: 16px; }
}