/* 첫 화면 띠 (2026-10-21) — 덤핑 띠(sale.html) · 프로젝트 · 맞춤 제작 띠(project.html · custom.html). index.html 에서 뺌 */
.sale-band { display: flex; align-items: center; gap: var(--z-s4); padding: 26px var(--z-gutter); background: var(--z-black); color: #fff; text-decoration: none; }
.sale-band[hidden] { display: none; }
.sale-band .off { font: 400 clamp(56px, 6vw, 92px)/1 var(--z-display); color: var(--z-red); white-space: nowrap; }
.sale-band .txt { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.sale-band strong { font: 900 clamp(28px, 3vw, 44px)/1.1 var(--z-display-ko); }
.sale-band strong em { font-style: normal; color: #cfcfcf; font-size: .7em; margin-left: 6px; }
.sale-band small { color: #cfcfcf; font-size: 15px; }
.sale-band .pics { display: flex; gap: 6px; }
.sale-band .pics img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
@media (max-width: 760px) { .sale-band { flex-wrap: wrap; gap: 14px 16px; padding: 24px 16px; } .sale-band .pics { display: none; } .sale-band .z-btn { flex: 1 1 100%; justify-content: center; min-height: 52px; } }
.pj-band { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--z-black); }
.pj-b { position: relative; display: block; height: 220px; overflow: hidden; color: #fff; text-decoration: none; }
.pj-b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--z-ease); }
.pj-b:hover img { transform: scale(1.05); }
.pj-b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.15)); }
.pj-b .t { position: absolute; left: var(--z-gutter); bottom: 30px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.pj-b .z-label { color: var(--z-red); }
.pj-b strong { font: 900 clamp(28px, 3vw, 44px)/1.1 var(--z-display-ko); }
.pj-b small { color: #ddd; font-size: 15px; }
.pj-b .go { position: absolute; right: 30px; bottom: 30px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: var(--z-red); display: grid; place-items: center; font-size: 22px; }
@media (max-width: 760px) { .pj-band { grid-template-columns: 1fr; } .pj-b { height: 180px; } .pj-b .t { left: 16px; bottom: 22px; } .pj-b .go { right: 16px; bottom: 22px; width: 44px; height: 44px; } }