.wrapN{ max-width:1100px; margin:0 auto; padding:0 18px; }

.blogTop{ padding:28px 0 10px; }
.blogTop h1{ margin:0; font-size:32px; letter-spacing:-.02em; }
.blogTop p{ margin:10px 0 0; color:var(--ink-soft); max-width:62ch; }

.chipsRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.chipX{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.68);
  font-size:12px; font-weight:900;
}
.chipX a{ color:inherit; text-decoration:none; opacity:.85; margin-left:8px; font-weight:900; }
.chipX a:hover{ opacity:1; text-decoration:underline; }

.blogGrid{ display:grid; grid-template-columns: 1fr; gap:16px; padding:12px 0 48px; }
@media(min-width: 980px){ .blogGrid{ grid-template-columns: 1fr 330px; gap:18px; padding-top:16px; } }

.cardX{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
}

.cardXEmpty{ padding:16px; color:var(--ink-soft); }
.cardXPost{ margin-bottom:12px; }

.postItem{ display:grid; grid-template-columns: 98px 1fr; gap:14px; padding:14px; }
@media(min-width: 560px){ .postItem{ grid-template-columns: 140px 1fr; padding:16px; } }

.thumb{
  width:100%; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.metaRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.dateX{ font-size:12px; color:var(--ink-soft); }

.titleX{ font-size:18px; font-weight:900; margin:8px 0 6px; letter-spacing:-.01em; }
.descX{ color: rgba(15,17,21,.78); line-height:1.55; font-size:14px; }

.postLink{ text-decoration:none; color:inherit; display:block; }
.postLink:hover .titleX{ text-decoration: underline; }

.sideBox{ padding:14px; }
.sideHd{ font-weight:900; margin:4px 0 10px; }
.sideList{ display:flex; flex-direction:column; gap:8px; }
.sideListCats{ margin-bottom:14px; }

.sideA{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  text-decoration:none; color:inherit;
  font-weight:900;
}
.sideA:hover{ border-color: rgba(0,0,0,.14); background: rgba(255,255,255,.75); }
.sideA small{ color:var(--ink-soft); font-weight:900; }
.sideA.isActive{ border-color: rgba(194,143,86,.55); background: rgba(194,143,86,.10); }

.pager{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:14px; }
.pagerLabel{ color:var(--ink-soft); font-size:13px; }

.btnX{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  text-decoration:none; color:inherit; font-weight:900; font-size:13px;
}
.btnX[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* --------- MOBILE FILTER (sticky button + sheet) --------- */
.desktopOnly{ display:none; }
@media(min-width:980px){
  .desktopOnly{ display:block; }
  .mobileFilterBar, .mfSheet{ display:none !important; }
}

.mobileFilterBar{
  position: sticky; top: 64px; z-index: 50;
  padding: 10px 0 6px;
  background: linear-gradient(to bottom, rgba(247,243,237,.95), rgba(247,243,237,0));
}
.mfBtn{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  font-weight: 900;
}
.mfPill{
  display:inline-flex; align-items:center;
  padding: 6px 10px; border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  font-size:12px;
}
.mfDot{ opacity:.35; }

.mfSheet{ position: fixed; inset:0; z-index: 80; display:none; }
.mfSheet.isOpen{ display:block; }
.mfOverlay{ position:absolute; inset:0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); }

.mfPanel{
  position:absolute; left:12px; right:12px; top: 78px;
  border-radius: 20px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
  padding: 14px;
  max-height: calc(100vh - 100px);
  overflow:auto;
}
.mfHd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mfX{
  width:40px; height:40px; border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  font-size: 22px; font-weight: 900; line-height: 1;
}
.mfSec{ margin-top: 12px; }
.mfTitle{ font-weight: 900; margin: 6px 0 10px; }
.mfList{ display:flex; flex-direction:column; gap:8px; }
.mfA{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.60);
  text-decoration:none; color:inherit;
  font-weight: 900;
}
.mfA small{ color: var(--ink-soft); font-weight: 900; }
.mfA.isActive{ border-color: rgba(194,143,86,.55); background: rgba(194,143,86,.10); }

/* -------------------- CALENDAR (NO DOT) -------------------- */
.cal{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  border-radius: 16px;
  padding: 10px;
}
.calTop{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 8px;
}
.calTop strong{ font-weight: 900; }
.calNav{ display:flex; gap:8px; }
.calNav button{
  width:36px; height:36px; border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  font-weight:900;
}
.calGrid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:6px;
}
.calDow{
  font-size:11px; color:var(--ink-soft);
  text-align:center; padding:4px 0;
  font-weight:900;
}
.calDay{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.60);
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  text-decoration:none;
  color: inherit;
  user-select:none;
}
.calDay.isEmpty{ opacity:.22; pointer-events:none; }
.calDay.hasPost{
  border-color: rgba(194,143,86,.55);
  background: rgba(194,143,86,.10);
}
.calDay.isSelected{
  border-color: rgba(194,143,86,.90);
  box-shadow: 0 0 0 2px rgba(194,143,86,.22) inset;
}
.calHint{
  margin-top:8px;
  color:var(--ink-soft);
  font-size:12px;
  line-height:1.35;
}