/* 2026-10-08 hubleft (그록 봇): 허브 첫 화면 '지금 뜨는 글'. templates_blog/_cd_hubleft.html, 아이템 스타일은 cd_blogleft.css 재사용.
   기본(<1440px·모바일): 히어로 아래 가로 스크롤 한 줄 (카드 높이 ~64px, 본문을 크게 밀지 않음).
   ≥1440px: .blog-area 1352px + padding-left 252px → 본문 1080px 그대로, 왼쪽 20px 에 208px sticky 칸 (본문과 24px).
   ≥1600px: 오른쪽 160x600 광고 레일(cd_adrail.css, 목록 바깥 24px)과 함께 화면 가운데 오도록 left:-92px.
   ≥1680px: 본문 위치 원래대로, 칸은 광고 레일과 대칭으로 본문 영역 바깥 왼쪽 24px. :has() 미지원이면 가로 한 줄 그대로 */
.cd-hubleft{max-width:none;margin:-6px 0 18px}
.cd-hubleft .cd-blogleft__stick{display:block}
.cd-hubleft__sec{padding:12px 14px 12px}
.cd-hubleft .cd-blogleft__hd{margin:0 0 8px}
.cd-hubleft .cd-blogleft__h::before{background:#ef4444}
.cd-hubleft__list{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0;padding:0 0 2px}
.cd-hubleft__list::-webkit-scrollbar{display:none}
.cd-hubleft__list li{flex:0 0 248px;scroll-snap-align:start;min-width:0}
.cd-blogleft__list.cd-hubleft__list li + li{border-top:0}
.cd-hubleft .cd-blogleft__item{border:1px solid #eef1f6;border-radius:12px;padding:8px 10px;gap:10px;height:100%;box-sizing:border-box}
.cd-hubleft .cd-blogleft__th{width:44px;height:44px;border-radius:10px;font-size:18px}
.cd-hubleft .cd-blogleft__t{font-size:13.5px;line-height:1.42}
.cd-hubleft .cd-blogleft__c{font-size:11.5px}
@media (max-width:480px){.cd-hubleft__list li{flex-basis:76%}.cd-hubleft{margin:-8px 0 16px}}
@supports selector(:has(*)) {
  @media (min-width:1440px) {
    .blog-area.blog-area:has(> .cd-hubleft){position:relative;max-width:1352px;padding-left:252px}
    .blog-area > .cd-hubleft{position:absolute;top:16px;bottom:64px;left:20px;width:208px;margin:0;z-index:1}
    .cd-hubleft .cd-blogleft__stick{position:-webkit-sticky;position:sticky;top:133px;max-height:calc(100vh - 153px);overflow-y:auto;scrollbar-width:thin}
    .cd-hubleft__sec{padding:12px 14px 4px}
    .cd-hubleft .cd-blogleft__hd{margin:0 0 2px}
    .cd-hubleft .cd-blogleft__h{font-size:14px}
    .cd-hubleft__list{display:block;overflow:visible;margin:0;padding:0}
    .cd-blogleft__list.cd-hubleft__list li + li{border-top:1px solid #f1f3f8}
    .cd-hubleft .cd-blogleft__item{border:0;border-radius:0;align-items:flex-start;padding:9px 0;height:auto}
    .cd-hubleft .cd-blogleft__t{font-size:13px}
  }
  @media (min-width:1600px) {
    .blog-area.blog-area:has(> .cd-hubleft){left:-92px}
  }
  @media (min-width:1680px) {
    .blog-area.blog-area:has(> .cd-hubleft){left:0;max-width:1120px;padding-left:20px}
    .blog-area > .cd-hubleft{left:auto;right:calc(100% + 24px)}
  }
}
@media print{.cd-hubleft{display:none!important}}