/* DX 블로그 최신글 — blog-latest.css (그림자 없음 · 테마 변수 사용 · 다크모드는 변수가 따라감) */
.dxbl-main[hidden],.dxbl-side[hidden]{display:none!important}
.dxbl-main *,.dxbl-side *{box-sizing:border-box}

/* ── 메인 섹션: 첫 글은 크게, 나머지는 작은 이미지 카드 (직각 · 그림자 없음) ── */
.dxbl-main{margin:0}
.dxbl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,16.5vw,236px);gap:15px}
.dxbl-card{position:relative;display:block;min-width:0;overflow:hidden;border-radius:0;background:var(--nc-ink,#20231f);color:#fff;text-decoration:none;isolation:isolate}
.dxbl-card.is-lead{grid-column:span 2;grid-row:span 2}
.dxbl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:-2;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.dxbl-card:hover .dxbl-img{transform:scale(1.045)}
/* 글자가 잘 읽히도록 아래쪽을 어둡게 */
.dxbl-card::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,20,17,.0) 34%,rgba(18,20,17,.46) 64%,rgba(18,20,17,.86) 100%);transition:background .3s}
.dxbl-card:hover::before{background:linear-gradient(180deg,rgba(18,20,17,.08) 24%,rgba(18,20,17,.58) 60%,rgba(18,20,17,.9) 100%)}
/* 아래쪽 포인트 라인 (new-basic 라임) — 마우스를 올리면 왼쪽에서 채워짐 */
.dxbl-card::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--nc-acid,#d7fb55);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.dxbl-card:hover::after{width:100%}
.dxbl-no{position:absolute;top:14px;left:16px;font-size:10px;font-weight:900;letter-spacing:.2em;color:#fff;opacity:.85;font-variant-numeric:tabular-nums}
.dxbl-card.is-lead .dxbl-no{top:20px;left:24px;font-size:11px}
.dxbl-no::after{content:'';display:inline-block;width:18px;height:1px;margin-left:9px;vertical-align:middle;background:var(--nc-acid,#d7fb55)}
.dxbl-info{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:16px 18px 15px}
.dxbl-card.is-lead .dxbl-info{gap:9px;padding:26px 26px 22px}
.dxbl-blog{display:block;font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--nc-acid,#d7fb55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dxbl-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.38;font-weight:800;letter-spacing:-.045em;color:#fff}
.dxbl-card.is-lead .dxbl-title{font-size:clamp(21px,2.2vw,30px);line-height:1.25;font-weight:900;letter-spacing:-.07em;-webkit-line-clamp:3}
.dxbl-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;margin-top:2px;padding-top:9px;border-top:1px solid rgba(255,255,255,.22);font-size:10.5px;font-weight:700;color:rgba(255,255,255,.78)}
.dxbl-by{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dxbl-by i,.dxbl-list small i{display:inline-block;width:2px;height:2px;border-radius:50%;background:currentColor;opacity:.7;flex:none}
.dxbl-cnt{display:flex;gap:11px;flex:none}
.dxbl-cnt span{display:inline-flex;align-items:center;gap:5px}
.dxbl-cnt i{font-size:10px;font-style:normal}
.dxbl-card.is-noimg{background:linear-gradient(135deg,var(--nc-ink,#20231f),#343a31)}
/* 글 개수가 적을 때의 배치 */
.dxbl-n1 .is-lead{grid-column:span 4;grid-row:span 1}
.dxbl-n2 .dxbl-card,.dxbl-n2 .is-lead{grid-column:span 2;grid-row:span 1}
.dxbl-n3 .dxbl-card:not(.is-lead){grid-column:span 2}
.dxbl-n4 .dxbl-card.is-lead+.dxbl-card{grid-column:span 2}
@media(max-width:1100px){
  .dxbl-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(170px,26vw,240px)}
  .dxbl-grid .dxbl-card,.dxbl-grid .dxbl-card:not(.is-lead){grid-column:span 1;grid-row:span 1}
  .dxbl-grid .is-lead{grid-column:span 2;grid-row:span 2}
  .dxbl-n1 .is-lead,.dxbl-n2 .is-lead{grid-row:span 1}
}
@media(max-width:560px){
  .dxbl-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:200px;gap:12px}
  .dxbl-grid .dxbl-card,.dxbl-grid .is-lead{grid-column:span 1;grid-row:span 1}
  .dxbl-grid .is-lead{grid-row:span 2}
  .dxbl-card.is-lead .dxbl-info{padding:20px 20px 18px}
}

/* ── 사이드바 박스 (new-basic 사이드 블록과 같은 평면 스타일) ── */
.dxbl-side{border-top:1px solid var(--text-main,#1d211d);padding-top:14px;margin:0 0 24px}
.dxbl-side-h{margin:0 0 12px;font-size:14px;font-weight:900;letter-spacing:-.03em;color:var(--text-main,#1d211d)}
.dxbl-side-h small{margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--text-muted,#777c70)}
.dxbl-tabs{display:flex;gap:0;margin:0 0 4px;border-bottom:1px solid var(--border,#dedfd5)}
.dxbl-tab{appearance:none;-webkit-appearance:none;margin:0 0 -1px;padding:7px 12px 8px 0;margin-right:14px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;font:inherit;font-size:12px;font-weight:800;letter-spacing:-.02em;color:var(--text-muted,#777c70);cursor:pointer}
.dxbl-tab:hover{color:var(--text-main,#1d211d)}
.dxbl-tab.is-on{color:var(--text-main,#1d211d);border-bottom-color:var(--text-main,#1d211d)}
.dxbl-list{margin:0;padding:0;list-style:none}
.dxbl-list[hidden]{display:none!important}
.dxbl-list li{border-bottom:1px solid var(--border,#dedfd5)}
.dxbl-list li:last-child{border-bottom:0}
.dxbl-list a{display:block;padding:11px 0;color:var(--text-main,#1d211d);text-decoration:none}
.dxbl-lt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.5;font-weight:700;letter-spacing:-.02em}
.dxbl-list a:hover .dxbl-lt{text-decoration:underline}
.dxbl-list small{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10.5px;font-weight:600;color:var(--text-muted,#777c70);white-space:nowrap;overflow:hidden}
.dxbl-list small{text-overflow:ellipsis}
.dxbl-all{display:inline-block;margin-top:4px;padding:6px 0 3px;border-bottom:1px solid var(--text-main,#1d211d);font-size:11px;font-weight:850;color:var(--text-main,#1d211d);text-decoration:none}
.dxbl-all:hover{opacity:.6}
/* 웹진형: 글 왼쪽, 이미지 오른쪽 */
.dxbl-list a.dxbl-wz{display:flex;align-items:center;gap:12px}
.dxbl-wz-tx{flex:1;min-width:0}
.dxbl-wz-img{position:relative;flex:none;width:76px;height:76px;border-radius:4px;overflow:hidden;background:var(--nc-lav,#e6e1ff)}
.dxbl-wz-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dxbl-wz-img.dxbl-tone1{background:var(--nc-mint,#d9e7e1)}
.dxbl-wz-img.dxbl-tone2{background:var(--nc-sky,#d6e6ff)}
.dxbl-wz-img.dxbl-tone3{background:var(--nc-rose,#f8c5b8)}
/* 사이드바가 숨겨지는 화면(모바일)에서는 본문 아래에 붙음 */
.dxbl-side.dxbl-m{margin:28px 0 0;padding-top:14px}