/* ==========================================================================
   LOUIBELLE — 디자인 레이어 (2026-08-09 · 2차)

   1차(잡지형 에디토리얼)는 폐기했다. 두 가지가 실제로 잘못됐다:
     1) 스크롤 리빌(animation-timeline:view())이 콘텐츠를 opacity:0 으로 붙잡아
        페이지 절반이 빈 화면으로 보였다. → **리빌 애니메이션을 쓰지 않는다.**
     2) 여백만 넓은 성긴 지면이라 쇼핑몰로 안 읽혔다. → 촘촘한 커머스 그리드로.

   방향(사장님이 참고로 준 리베르 스타일): 순백 배경 · 산세리프 · 가운데 정렬 섹션 제목 ·
   정직한 4열 그리드 · 카드 안에 액션 버튼 · 넉넉하지만 낭비 없는 여백.
   부티크민과의 구분은 '색과 서체'가 아니라 **구성과 밀도**로 낸다.

   로드 순서: style.css → app.css → editorial.css(여기) → louibelle-home.css
   ========================================================================== */

:root{
  --red:#d24a4a;            /* 세일·강조 (부티크민 스카이블루 자리) */
  --red-deep:#a83636;
  --ink:#14141a;
  --ink-solid:#14141a;
  --paper:#ffffff;
  --cream:#f6f6f7;          /* 상품 사진 뒷배경 */
  --cream-2:#eeeef1;
  --ash:#8b8b93;
  --ash-2:#b6b6bd;
  --line:#e8e8ec;
  --line-2:#d8d8de;

  --sans:'Archivo','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  --kr:'Noto Sans KR',sans-serif;
  --font:'Archivo','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;   /* 워드마크에만 쓴다 */

  --nav-h:112px;
  --maxw:1440px;
  --pad:clamp(16px,2.6vw,44px);
}

body{background:var(--paper);color:var(--ink);letter-spacing:-.01em}

/* 모서리는 거의 없애되(2~4px) 완전히 각지게 두지는 않는다 — 커머스는 손에 닿는 물건이다 */
.card,.card__media,.btn,.eco__item,.eco__panel,.rvsum,.rvcard__pic,.pg,.promo-banner{border-radius:2px}
.card,.card__media,.eco__item,.eco__panel,.rvcard__pic,.rvsum{box-shadow:none}

/* ── 헤더 — 좌 메뉴 / 중앙 워드마크 / 우 유틸 한 줄 ─────────────────────
   ⚠️ 원본 .header 는 height·min-height·max-height 를 --nav-h 로 못 박는다.
      2단으로 쓰려면 셋 다 풀어야 아랫줄이 안 잘린다(1차에서 실측). */
.lbhead,.lbhead .bar{height:auto;min-height:0;max-height:none}
.lbhead{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0}
.lbhead__mast{display:flex;align-items:baseline;justify-content:center;gap:12px;padding:20px var(--pad) 14px}
.lbhead .logo{
  font-family:var(--serif);font-weight:500;letter-spacing:.34em;
  font-size:clamp(21px,2.5vw,30px);text-indent:.34em;line-height:1
}
.lbhead__tag{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-2)}
.lbhead .bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--pad) 13px
}
.lbhead .nav-left{display:flex;gap:clamp(16px,2.4vw,34px)}
.lbhead .nav-right{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px)}
.nav-left a,.nav-act .t{font-size:12px;letter-spacing:.06em;font-weight:600}
.nav-left a.is-on{color:var(--red)}
@media (max-width:760px){
  .lbhead__mast{justify-content:flex-start;padding:14px var(--pad) 10px}
  .lbhead .nav-left{display:none}
  :root{--nav-h:96px}
}

/* ── 섹션 제목 — 가운데 정렬, 굵게 ────────────────────────────────────── */
.sec-head{display:block;text-align:center;border:0;padding:0;margin-bottom:clamp(24px,3vw,44px)}
.sec-head h2{font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.02em}
.sec-head .more{
  display:inline-block;margin-top:10px;font-size:12px;color:var(--ash);
  border-bottom:1px solid var(--line-2);padding-bottom:2px
}
.sec-head .more:hover{color:var(--ink);border-color:var(--ink)}

/* ── 상품 카드(.card — 샵 목록·검색 등 공용) ─────────────────────────── */
.card__media{aspect-ratio:1/1;background:var(--cream)}
.card__b{padding-top:12px;text-align:left}
.card__cat{font-size:11px;color:var(--ash);letter-spacing:0;text-transform:none;margin-bottom:5px}
.card__nm{font-size:13.5px;font-weight:500;line-height:1.5;letter-spacing:-.01em}
.card__pr{font-size:14px;font-weight:700;margin-top:7px}
.card__hot,.card__rate{font-size:11.5px;color:var(--ash);font-weight:500;letter-spacing:0}
.card__hot b{color:var(--ink);font-weight:700}
.badge{
  background:var(--ink);color:#fff;border:0;border-radius:2px;
  font-size:10px;font-weight:700;letter-spacing:.02em;padding:4px 8px
}
.badge.dark{background:var(--red)}
.badge.soldout{background:rgba(20,20,26,.72)}
.badge--limited,.badge--hot{background:var(--red);color:#fff;border:0}

/* ── 버튼 ────────────────────────────────────────────────────────────── */
.btn,.btn--red,.btn--outline,.btn--wht,.btn--block{border-radius:2px}
.btn{font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;padding:15px 28px}
.btn--red{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn--red:hover{background:#000;border-color:#000}
.btn--outline{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink)}
.d-guest__cta .btn{border-radius:2px}

/* ── 페이지네이션 ────────────────────────────────────────────────────── */
.pagination .pg,.pg{border-radius:2px;border:1px solid var(--line);font-size:13px;letter-spacing:0}
.pagination .pg.on,.pg.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination__meta{font-size:12px;color:var(--ash);letter-spacing:0;text-transform:none}

/* ── 리뷰 (부티크민에서 넘어온 구조를 흰 톤으로) ─────────────────────── */
.rvsum{background:var(--cream);border:0;border-radius:2px;padding:22px clamp(16px,2.4vw,28px)}
.rvsum__bar i{background:var(--ink)}
.rvsum__stars,.rvcard__stars,.rvm__stars{color:#f2b01e}
.rvcard__pic{aspect-ratio:1/1}
.rvcard__tag{background:rgba(255,255,255,.94);border:0;border-radius:2px;font-size:10px;letter-spacing:0;color:var(--ink)}
.rvcard__tag--best{background:var(--red);color:#fff}
.rvcard__body{font-size:13px;line-height:1.6}
.rvcard__ava{border-radius:50%;background:var(--cream-2);color:var(--ink)}
.rvcard__meta em{font-size:11.5px;letter-spacing:0}
.rvcard__more{letter-spacing:0;text-transform:none;font-size:11.5px}
.rvm{border-radius:3px}
.rvm__cta{border-radius:2px;background:var(--ink);letter-spacing:0;text-transform:none;font-size:14px}
.rvm__quote p{font-size:15.5px;line-height:1.75}
.rvm__eyebrow{letter-spacing:.14em}

/* 상단 리뷰 롤링 바 — 공지 티커와 함께 얇게 */
.rev-roll{background:var(--cream);border-bottom:1px solid var(--line);height:38px}
.rev-roll::after{display:none}
.rev-roll__it{color:var(--ink);font-size:12px;letter-spacing:0}
.rev-roll .rr-stars{color:#f2b01e}
.rev-roll .rr-prod,.rev-roll .rr-arw{color:var(--ash)}

/* ── 상품 상세 ───────────────────────────────────────────────────────── */
.detail h1,.pd-title{font-weight:700;letter-spacing:-.02em}
.crumb{font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--ash)}
.buyrow--secret{--bb-radius:2px;--bb-border:1px;--bb-font:14px;--bb-pad-y:17px}
.buyrow--secret .btn-price-ask,.buyrow--secret .buyrow-wish{font-weight:600;letter-spacing:0;text-transform:none}
.btn-price-ask{background:var(--ink)}
.btn-price-ask.is-ready{box-shadow:none}
.btn-price-ask.is-ready:hover,.btn-price-ask.is-ready:focus-visible{background:#000}
/* ⚠️ 보조 버튼 테두리를 더 옅게 하면 빈 입력칸처럼 보인다(원본에 기록된 실측) */
.buyrow--secret .buyrow-wish{border-color:var(--line-2);background:#fff;color:var(--ink)}

/* ── 푸터 ────────────────────────────────────────────────────────────── */
.footer{background:var(--paper);border-top:1px solid var(--line);color:var(--ink)}
.footer a{color:var(--ash)}
.footer a:hover{color:var(--ink)}