/* DANOVI 홈 — 대표 작업 4개 + 전체 작업 보기 */

section.dn-hw{padding:calc(72px + 48px) 0 var(--sec)}
@media (max-width:720px){section.dn-hw{padding:calc(72px + 28px) 0 var(--sec)}}
.dn-hw-h{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin-bottom:20px}

/* 데스크톱 — 4개 + 오른쪽 끝에 다음 작업이 잘려 이어짐.
   흐림/마스크를 쓰지 않습니다. 잘린 이미지가 "깨짐"으로 읽히지 않게 하기 위함입니다. */
.dn-hw-row{--g:14px;display:flex;gap:var(--g);overflow:hidden}
.dn-hw-card,.dn-hw-peek{flex:0 0 auto;display:block;color:inherit;min-width:0}
.dn-hw-card{width:calc((100% - 4 * var(--g)) / 4.5)}
.dn-hw-peek{width:calc((100% - 4 * var(--g)) / 9)}
.dn-hw-peek .dn-hw-img{background:var(--ink)}
.dn-hw-img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--paper)}
.dn-hw-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.dn-hw-card:hover .dn-hw-img img{transform:scale(1.04)}
.dn-hw-peek .dn-hw-img img{opacity:1}
.dn-hw-peek-arw{position:absolute;right:9px;bottom:9px;width:24px;height:24px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.dn-hw-meta{display:flex;align-items:baseline;gap:8px;margin-top:10px;white-space:nowrap}
.dn-hw-meta b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.dn-hw-meta em{font-style:normal;font-size:12.5px;color:var(--ink-2)}

.dn-hw-more{display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding:13px 24px;border-radius:999px;border:1px solid var(--ink);font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;transition:.24s ease}
.dn-hw-more .arw{transition:transform .24s ease}
.dn-hw-more:hover{background:var(--ink);color:#fff}
.dn-hw-more:hover .arw{transform:translateX(4px)}

/* 모바일 — 2×2. 잘린 칸은 두지 않고 버튼만 남깁니다. */
@media (max-width:720px){
  .dn-hw-row{--g:10px;display:grid;grid-template-columns:1fr 1fr;row-gap:18px;overflow:visible}
  .dn-hw-card{width:auto}
  .dn-hw-peek{display:none}
  .dn-hw-meta b{font-size:13.5px}
  .dn-hw-meta em{font-size:11.5px}
  .dn-hw-more{margin-top:18px;display:flex;justify-content:center;min-height:48px}
}
@media (prefers-reduced-motion:reduce){.dn-hw-img img{transition:none}}
