/* 홈 화면 — 배너 슬라이드 · 띠 배너 · 추천 상품 줄 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.carousel { position: relative; border-radius: var(--radius); overflow: hidden; }
.carousel .viewport { overflow: hidden; }
.carousel .track { display: flex; transition: transform .5s ease; }
.carousel .slide { flex: 0 0 100%; height: 260px; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 0 64px; }
.carousel .slide h2 { margin: 0 0 8px; font-size: 30px; }
.carousel .slide p { margin: 0; font-size: 18px; }
.carousel .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); font-size: 22px; cursor: pointer; }
.carousel .prev { left: 12px; } .carousel .next { right: 12px; }
.carousel .dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.carousel .dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; }
.carousel .dots button[aria-current=true] { background: #fff; }
.event-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px; background: #fef3c7; border-radius: var(--radius); font-weight: 600; }
.event-strip button { background: none; border: 0; font-size: 20px; cursor: pointer; }
.countdown { margin: 20px 0 8px; font-size: 16px; }
.countdown .clock { color: var(--danger); font-variant-numeric: tabular-nums; }
.post-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.post-list li { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.post-list li:last-child { border-bottom: 0; }
.post-list a { text-decoration: none; }
.post-list .sk { height: 20px; }
.recommend { margin-top: 32px; }
.rec-head { display: flex; justify-content: space-between; align-items: center; }
.rec-row { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 0 12px; }
.rec-row .product { flex: 0 0 220px; overflow: visible; }
.rec-row .product img { border-radius: var(--radius) var(--radius) 0 0; }
.rec-row .tip { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 5; background: #111827; color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 8px; }