/* =========================================================
   카이스 — 블로그 페이지 전용 스타일
   ========================================================= */
.blog-page{ padding-top:69px; }

/* featured carousel */
.blog-feat{ position:relative; border-radius:20px; overflow:hidden; margin-top:clamp(28px,4vw,44px); box-shadow:var(--shadow-md);
  aspect-ratio:21/8; min-height:300px; background:var(--navy-deep); }
.blog-feat .fslide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s var(--ease); }
.blog-feat .fslide.on{ opacity:1; visibility:visible; }
.blog-feat .fslide img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-feat .fov{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,20,34,.86) 0%, rgba(13,20,34,.5) 45%, rgba(13,20,34,.15) 75%); }
.blog-feat .ftext{ position:absolute; left:clamp(24px,4vw,52px); right:clamp(24px,4vw,52px); bottom:clamp(28px,4vw,48px); z-index:2; color:#fff; max-width:760px; }
.blog-feat .fcat{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em;
  background:var(--brand-default); color:#fff; padding:5px 12px; border-radius:var(--r-sm); }
.blog-feat h2{ color:#fff; font-size:clamp(22px,2.6vw,34px); font-weight:800; letter-spacing:-.025em; margin-top:16px; line-height:1.3; }
.blog-feat .fexc{ color:rgba(255,255,255,.82); font-size:clamp(14px,1.15vw,16px); margin-top:12px; line-height:1.6; }
.blog-feat .fdate{ color:rgba(255,255,255,.55); font-size:13px; margin-top:14px; }
.blog-feat .fnav{ position:absolute; right:clamp(20px,3vw,40px); bottom:clamp(28px,4vw,48px); z-index:3; display:flex; gap:10px; }
.blog-feat .fbtn{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; color:#fff; backdrop-filter:blur(6px); transition:.18s var(--ease); }
.blog-feat .fbtn:hover{ background:rgba(255,255,255,.26); }
.blog-feat .fdots{ position:absolute; left:clamp(24px,4vw,52px); bottom:18px; z-index:3; display:flex; gap:8px; }
.blog-feat .fdot{ width:26px; height:4px; border-radius:3px; border:0; background:rgba(255,255,255,.3); padding:0; cursor:pointer; transition:.2s; }
.blog-feat .fdot.on{ background:#fff; width:36px; }

/* filter chips */
.blog-filter{ display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(32px,4vw,48px); }
.bf-chip{ font-size:14px; font-weight:600; color:var(--c-emph); background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-full); padding:9px 18px; transition:.16s var(--ease); }
.bf-chip:hover{ border-color:var(--brand-line); color:var(--brand-default); }
.bf-chip.on{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; }

/* card grid */
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.5vw,30px) clamp(24px,3vw,40px); margin-top:32px; }
.bcard{ cursor:pointer; }
/* ── 카테고리별 6색 브랜드 썸네일 (1200×628) — 블로그·홈사례·글상세 공통 ── */
.bcard-cover{ position:relative; overflow:hidden; border-radius:16px; box-shadow:var(--shadow-sm);
  aspect-ratio:1200/628; background:var(--covbg,#edf1f7); display:block; container-type:inline-size; }
.cov-navy   { --cov:#1f3a63; --covbg:#edf1f7; }
.cov-blue   { --cov:#2461c2; --covbg:#e9f1fb; }
.cov-crimson{ --cov:#b7283c; --covbg:#fbedef; }
.cov-teal   { --cov:#0e7a71; --covbg:#e7f4f1; }
.cov-green  { --cov:#3f7a4e; --covbg:#ecf4ee; }
.cov-slate  { --cov:#44506a; --covbg:#edeff4; }
.cov-emblem{ position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:44%; height:auto; z-index:1; opacity:.06; pointer-events:none; }
.cov-lines{ position:absolute; right:-4%; bottom:-24%; width:56%; height:120%; z-index:1; pointer-events:none; opacity:.14;
  background:repeating-radial-gradient(circle at 86% 92%, transparent 0 1.4cqw, var(--cov) 1.4cqw 1.62cqw);
  -webkit-mask-image:radial-gradient(circle at 86% 92%, #000 0 52%, transparent 70%);
  mask-image:radial-gradient(circle at 86% 92%, #000 0 52%, transparent 70%); }
.cov-badge{ position:absolute; left:5.5%; top:11%; z-index:3; color:#fff; background:var(--cov);
  font-size:2.6cqw; font-weight:700; letter-spacing:-.01em; padding:0.85cqw 2.3cqw; border-radius:var(--r-full); }
.cov-title{ position:absolute; left:5.5%; top:30%; right:33%; z-index:3; color:var(--cov);
  font-size:5.8cqw; font-weight:800; letter-spacing:-.03em; line-height:1.22;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cov-brand{ position:absolute; left:5.5%; bottom:9.5%; z-index:3; display:flex; align-items:center; gap:1.4cqw; }
.cov-brand > img{ width:5.4cqw; height:auto; flex:none; }
.cov-brand-txt{ display:flex; flex-direction:column; padding-left:1.4cqw; line-height:1.15;
  border-left:0.18cqw solid color-mix(in srgb, var(--cov) 34%, transparent); }
.cov-brand-txt b{ font-size:2.7cqw; font-weight:800; color:var(--cov); letter-spacing:-.01em; }
.cov-brand-txt small{ font-size:1cqw; font-weight:600; letter-spacing:.06em; margin-top:0.5cqw;
  color:color-mix(in srgb, var(--cov) 72%, #8a8a8a); }
.bcard-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.bcard-tag{ font-size:12px; font-weight:600; color:var(--c-emph); background:var(--bg-subtle); border-radius:var(--r-sm); padding:4px 10px; }
.bcard h4{ font-size:18px; font-weight:700; color:var(--c-strong); letter-spacing:-.015em; margin-top:13px; line-height:1.45; }
.bcard:hover h4{ color:var(--brand-default); }
.bcard p{ font-size:14px; color:var(--c-default); line-height:1.66; margin-top:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bcard .bdate{ font-size:13px; color:var(--c-subtle); margin-top:14px; }

.blog-more{ display:flex; justify-content:center; margin-top:clamp(40px,5vw,56px); }

@media (max-width:860px){
  .blog-grid{ grid-template-columns:1fr; }
  .blog-feat{ aspect-ratio:auto; min-height:0; }
  .blog-feat .fslide{ position:relative; }
  .blog-feat .fslide:not(.on){ display:none; }
  .blog-feat .fslide img{ height:240px; }
}