/* ==========================================================================
   LOUIBELLE — 홈 (2026-08-09 · 2차)

   ⚠️ 1차의 스크롤 리빌(animation-timeline:view())은 **전부 걷어냈다.**
      화면에 들어오기 전 요소를 opacity:0 으로 붙잡아 페이지 절반이 빈 화면으로
      보였다(실측: 전체 스크린샷에서 상품 영역이 통째로 비었다).
      등장 연출은 이제 쓰지 않는다 — 콘텐츠가 먼저다.

   구성(참고: 리베르): 공지 티커 → 히어로 → 브랜드 배너 → 베스트 → 신상품 →
   카테고리 → 리뷰. 섹션 제목은 가운데, 상품은 4열 그리드.
   ========================================================================== */

/* 공지 바는 layout 이 까는 .announce 하나만 쓴다(여기서 또 만들지 않는다).
   색만 맞춰 준다 — 원본은 브랜드 컬러 배경이라 화면 맨 위가 붉게 튄다. */
.announce{background:var(--ink);color:#fff}
.announce a{color:#fff}

/* ── 히어로 ──────────────────────────────────────────────────────────── */
.lbhero{position:relative;width:100%;aspect-ratio:16/7;min-height:340px;max-height:76vh;overflow:hidden;background:var(--cream)}
.lbhero__f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.lbhero__f.on{opacity:1}
.lbhero__f img,.lbhero__f video{width:100%;height:100%;object-fit:cover;display:block}
.lbhero__txt{
  position:absolute;left:0;right:0;bottom:clamp(28px,5vw,64px);z-index:2;text-align:center;color:#fff;
  padding-inline:var(--pad);text-shadow:0 1px 22px rgba(0,0,0,.4)
}
.lbhero__txt h2{font-size:clamp(24px,3.4vw,44px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.lbhero__txt p{font-size:13.5px;opacity:.92;margin-bottom:18px}
.lbhero__cta{
  display:inline-block;padding:13px 30px;background:#fff;color:var(--ink);
  border-radius:2px;font-size:13px;font-weight:600
}
.lbhero__cta:hover{background:var(--ink);color:#fff}
.lbhero__dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:7px}
.lbhero__dots i{width:22px;height:2px;background:rgba(255,255,255,.45);display:block}
.lbhero__dots i.on{background:#fff}
@media (max-width:760px){.lbhero{aspect-ratio:4/5;max-height:none}}

/* ── 공통 섹션 ───────────────────────────────────────────────────────── */
.lbsec{padding-block:clamp(40px,5vw,76px)}
.lbsec__head{text-align:center;margin-bottom:clamp(22px,2.8vw,40px)}
.lbsec__head h2{font-size:clamp(19px,2.3vw,27px);font-weight:700;letter-spacing:-.02em}
.lbsec__head p{margin-top:9px;font-size:13px;color:var(--ash)}
.lbsec__more{
  display:block;width:max-content;margin:clamp(24px,3vw,40px) auto 0;
  padding:13px 34px;border:1px solid var(--line-2);border-radius:2px;
  font-size:13px;font-weight:600
}
.lbsec__more:hover{border-color:var(--ink)}

/* ── 상품 그리드 ─────────────────────────────────────────────────────── */
.lbgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,28px) clamp(12px,1.4vw,22px)}
@media (max-width:1024px){.lbgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.lbgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}

/* 첫 칸을 크게 쓰는 편집형 그리드(베스트) — 리베르의 첫 칸 연출컷과 같은 자리 */
.lbgrid--lead{grid-template-columns:repeat(4,minmax(0,1fr))}
.lbgrid--lead .lbc:first-child{grid-row:span 1}
@media (min-width:1025px){
  .lbgrid--lead .lbc:first-child .lbc__fig{aspect-ratio:1/1}
}

/* ── 카드 ────────────────────────────────────────────────────────────── */
.lbc{display:flex;flex-direction:column}
.lbc__fig{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--cream);border-radius:2px}
.lbc__fig img{width:100%;height:100%;object-fit:cover;display:block}
.lbc__badge{
  position:absolute;top:10px;left:10px;padding:4px 8px;border-radius:2px;
  background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em
}
.lbc__sold{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.68);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink)
}
.lbc__b{display:flex;flex-direction:column;gap:5px;padding-top:12px;flex:1}
.lbc__nm{
  font-size:13.5px;font-weight:500;line-height:1.5;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* ⚠️ 높이를 2줄로 못 박는다 — 줄 수가 다르면 아래 가격·버튼이 카드마다 오르내린다 */
  height:calc(1.5em * 2)
}
.lbc__nm:hover{text-decoration:underline;text-underline-offset:3px}
.lbc__cat{font-size:11.5px;color:var(--ash)}
.lbc__pr{font-size:14.5px;font-weight:700;margin:2px 0 0}
.lbc__rv{font-size:11.5px;color:#f2b01e;font-weight:600;margin:0}
.lbc__rv span{color:var(--ash);font-weight:500}
.lbc__act{display:flex;gap:6px;margin-top:auto;padding-top:11px}
.lbc__cta{
  flex:1;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:2px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer
}
.lbc__cta:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.lbc__cta.is-off{color:var(--ash-2);cursor:default;background:var(--cream)}
.lbc__wish{
  width:42px;height:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:2px;background:#fff;color:var(--ash);cursor:pointer
}
.lbc__wish:hover{border-color:var(--ink);color:var(--ink)}
.lbc__wish.on{color:var(--red);border-color:var(--red)}
.lbc__wish.on svg{fill:currentColor}
@media (prefers-reduced-motion:no-preference){
  .lbc__fig img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .lbc:hover .lbc__fig img{transform:scale(1.04)}
  .lbc__cta,.lbc__wish{transition:background .2s,border-color .2s,color .2s}
}
/* 스크롤 중에는 확대 전환을 끈다 — 지나가는 카드마다 애니메이션이 연쇄로 시작된다 */
body.is-scrolling .lbc__fig img{transition:none}

/* ── 브랜드 배너 (사진 + 가운데 문구) ────────────────────────────────── */
.lbband{position:relative;overflow:hidden;min-height:clamp(260px,34vw,460px);display:grid;place-items:center}
.lbband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 사진이 밝거나 알록달록하면 흰 글자가 묻는다 — 아래쪽을 더 눌러 준다 */
.lbband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,16,.28) 0%,rgba(12,12,16,.52) 100%)}
.lbband__in{position:relative;z-index:1;text-align:center;color:#fff;padding:40px var(--pad);max-width:640px}
.lbband__in h2{font-size:clamp(22px,3vw,38px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.lbband__in p{font-size:13.5px;line-height:1.85;opacity:.92;margin-bottom:18px}
.lbband__in a{display:inline-block;font-size:12.5px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px}
.lbband__in a:hover{border-color:#fff}

/* ── 카테고리 줄 ─────────────────────────────────────────────────────── */
/* ⚠️ auto-fit 은 13개를 11+2 로 흩어 놓는다 — 칸 수를 못 박아 균형을 잡는다 */
.lbcats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
@media (max-width:1100px){.lbcats{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:760px){.lbcats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}
@media (max-width:480px){.lbcats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lbcat{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;
  border:1px solid var(--line);border-radius:2px;text-align:center
}
.lbcat:hover{border-color:var(--ink)}
.lbcat span{font-size:22px;line-height:1}
.lbcat b{font-size:12.5px;font-weight:600}
.lbcat em{font-size:11px;font-style:normal;color:var(--ash-2)}

/* ── 리뷰 줄 ─────────────────────────────────────────────────────────── */
.lbrev{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(12px,1.6vw,22px)}
@media (max-width:520px){.lbrev{grid-template-columns:1fr 1fr;gap:12px}}