/* 인사이트 블로그 목록(/blog) 고유 스타일 — base.css 다음에 로드된다. */
/* ---------- 히어로 + 추천 글 캐러셀 ---------- */
.bhero{position:relative;background:var(--bg-mint);padding:96px 0 120px;overflow:hidden}
.bhero-deco-a{position:absolute;right:-40px;bottom:-120px;width:517px;pointer-events:none}
.bhero-deco-b{position:absolute;left:190px;top:-110px;width:259px;pointer-events:none}
.bhero-deco-c{position:absolute;left:140px;top:24px;width:180px;height:180px;border-radius:50%;background:#51ba61;opacity:.04;pointer-events:none}
.bhero-head{position:relative;text-align:center}
.bhero-head .eyebrow{font-size:clamp(14px,1.8vw,18px);font-weight:600;line-height:1.5;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.bhero-head h1{font-size:clamp(32px,7vw,48px);font-weight:200;line-height:1.4;letter-spacing:-.025em;color:var(--ink)}
.bhero-head .sub{font-size:clamp(15px,3.1vw,20px);font-weight:300;letter-spacing:-.025em;line-height:1.6;color:var(--muted);margin-top:16px}
/* 강조 세그먼트 — 랜딩 히어로의 .b5 와 같은 규칙 (weight 500 + ink #333333). */
.bhero-head .sub b{font-weight:500;color:var(--ink)}

.feat-outer{position:relative;margin-top:88px}
.feat-scroll{
  display:flex;gap:24px;align-items:flex-start;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:max(24px,calc((100vw - 1072px)/2));
  scrollbar-width:none;
}
.feat-scroll::-webkit-scrollbar{display:none}
.feat-card{flex:none;width:min(428px,84vw);scroll-snap-align:start}
.feat-card.lg{width:min(620px,84vw)}
.feat-card .thumb{border-radius:8px;overflow:hidden;background:#fff;aspect-ratio:428/258}
.feat-card.lg .thumb{aspect-ratio:620/374}
.feat-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.feat-card:hover .thumb img{transform:scale(1.03)}
.feat-card .info{margin-top:16px;padding:0 8px}
.feat-card .meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feat-card .chips{display:flex;align-items:center;gap:8px}
.feat-card .date{font-size:14px;color:var(--muted-2);flex:none}
.feat-card.lg .date{font-size:16px}
.feat-card h2{margin-top:12px;font-size:18px;font-weight:500;letter-spacing:-.025em;line-height:1.5;color:var(--ink);transition:color .2s}
.feat-card.lg h2{font-size:22px}
.feat-card:hover h2{color:var(--green)}
.feat-card .excerpt{margin-top:8px;font-size:14px;line-height:1.5;letter-spacing:-.025em;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feat-card.lg .excerpt{font-size:16px;-webkit-line-clamp:2}

/* 뱃지 */
/* .chip* 는 base.css 로 옮김 (상세 시안과 바이트 단위로 동일) */

/* 캐러셀 진행바 + 화살표 */
.feat-ctrl{display:flex;align-items:center;gap:16px;margin-top:56px}
.feat-progress{display:flex;flex:1;height:3px}
.feat-progress i{flex:1;background:rgba(0,151,75,.08);transition:background .3s}
.feat-progress i.on{background:var(--green)}
.arrow-btn{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:#fff;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);transition:box-shadow .25s var(--ease),transform .25s var(--ease),opacity .2s;
}
.arrow-btn:hover{box-shadow:0 8px 20px rgba(51,51,51,.12);transform:translateY(-1px)}
.arrow-btn[disabled]{opacity:.35;pointer-events:none}
.arrow-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feat-arrows{display:flex;gap:8px}

/* ---------- 아티클 그리드 ---------- */
.articles{position:relative;background:#fff;padding:120px 0;overflow:hidden}
.articles-deco{position:absolute;left:-160px;bottom:40px;width:517px;pointer-events:none}
.articles-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.articles-head h2{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.5;color:var(--ink)}
.articles-head .count{font-size:16px;color:var(--ink)}
.articles-head .count b{color:var(--green);font-weight:600}

.tabs{display:flex;align-items:center;gap:8px;margin-top:40px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:6px;font-size:16px;color:var(--muted-2);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.tab:hover{color:var(--green)}
.tab.on{color:var(--green);font-weight:500;border-bottom-color:var(--green)}

.grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.post-card{display:block}
.post-card .thumb{border-radius:8px;overflow:hidden;background:#fff;aspect-ratio:524/316}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post-card:hover .thumb img{transform:scale(1.03)}
.post-card .info{margin-top:16px;padding:0 8px}
.post-card .meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.post-card .date{font-size:14px;color:var(--muted-2)}
.post-card h3{margin-top:12px;font-size:18px;font-weight:500;letter-spacing:-.025em;line-height:1.5;color:var(--ink);transition:color .2s}
.post-card:hover h3{color:var(--green)}
.post-card .excerpt{margin-top:8px;font-size:14px;line-height:1.5;letter-spacing:-.025em;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 페이지네이션 ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:56px}
.pager-pages{display:flex;align-items:center;gap:4px}
.pager-pages a,.pager-pages span{
  width:40px;height:40px;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--muted-2);transition:color .2s,background .2s;
}
.pager-pages a:hover{color:var(--green);background:var(--bg-mint)}
.pager-pages a.on{color:var(--green);font-weight:500;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,151,75,.25)}
.pager-pages span{width:auto;padding:0 4px}

/* ---------- 템플릿에서 새로 쓰는 것 ---------- */
/* 대표 이미지가 없는 글의 썸네일 자리. 빈 칸으로 두면 카드 높이가 무너져 그리드가
   들쭉날쭉해진다 — 시안의 aspect-ratio 를 유지한 채 옅은 민트로 채운다. */
.thumb-fallback{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--bg-mint) 0%,#eef7f2 100%)}
.filter-note{margin-top:20px;font-size:15px;font-weight:300;letter-spacing:-.025em;color:var(--muted)}
.filter-note b{font-weight:600;color:var(--green)}
.filter-note a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.empty-note{margin-top:64px;text-align:center;font-size:16px;font-weight:300;color:var(--muted)}

/* ---------- 반응형 ---------- */
@media(max-width:1024px){
  .bhero{padding:88px 0 96px}
  .feat-outer{margin-top:64px}
  .articles{padding:96px 0}
}
@media(max-width:767px){
  .bhero{padding:72px 0 72px}
  .bhero-deco-b{left:-60px}
  .bhero-deco-c{display:none}
  .bhero-deco-a{width:300px;right:-100px;bottom:-80px}
  .feat-outer{margin-top:48px}
  .feat-ctrl{margin-top:36px}
  .feat-card,.feat-card.lg{width:calc(100vw - 48px)}
  .grid{grid-template-columns:1fr;gap:40px}
  .articles{padding:72px 0}
  .articles-deco{display:none}
  .pager{margin-top:48px}
}