/* ============================================================
   LOUIBELLE 스킨 — 원본 louibelle.com 실측값 기반
   ⚠️ 이 파일은 항상 **마지막**에 로드된다. 같은 특이도면 나중 규칙이 이기므로
      기존 style.css / app.css / editorial.css 를 여기서 덮어쓴다.
   ⚠️ 실측 출처: 2026-08-09 원본 DOM getComputedStyle (1280px 뷰포트)
   ============================================================ */

/* ── 폰트 ────────────────────────────────────────────────── */
/* ⚠️ 경로 주의: `/gh/orioncactus/...` 는 **404** 다(2026-08-09 실측). npm 배포본을 써야 한다.
   폰트가 안 뜨면 Arial 로 떨어져 자간·굵기가 전부 달라 보인다 — 루이벨르의 얼굴이 Pretendard 다. */
@font-face{
  font-family:'Pretendard';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

/* ── 토큰 ────────────────────────────────────────────────── */
:root{
  --w-blue:#81AAE1;          /* 메인 블루 — 할인율·로고·강조 */
  --w-blue-deep:#4A7FC1;
  --w-blue-chip:#208EFF;     /* 프로모 칩 배경 */
  --w-yellow:#FFF225;        /* 칩 안쪽 하이라이트 */
  --w-ink:#000;
  --w-body:#333;
  --w-gray:#666;
  --w-gray-2:#646E76;
  --w-mute:#B4B4B4;
  --w-card:#F8F8F8;
  --w-card-2:#F9F9F9;
  --w-line:#EEE;
  --w-paper:#fff;

  /* 좌우 여백 — 원본 실측: 1425px 뷰포트에서 콘텐츠 x=60 · w=1305 (= 100% - 120px).
     1280px 이하에서는 30px 로 줄어든다(아래 미디어쿼리). */
  --w-gap:60px;
  --w-r-card:48px;           /* 상품카드·대형 패널 */
  --w-r-thumb:32px;          /* 썸네일 */
  --w-r-head:40px;           /* 헤더 pill */
  --w-head-h:70px;
  /* 헤더가 화면 꼭대기에서 뜨는 거리. 공지바(--w-ann-h) 바로 아래에 붙는 값이라야
     "상단바만 혼자 동떨어져 떠 있는" 느낌이 안 난다(사장님 지적).
     스크롤해서 공지바가 사라지면 .is-solid 가 더 위로 끌어올린다. */
  --w-head-top:44px;
  --w-head-top-scrolled:12px;
  --w-ann-h:36px;

  --w-font:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Malgun Gothic',Arial,sans-serif;
  --w-serif:'Cormorant Garamond','Times New Roman',serif;

  /* ── 유동 타이포 (원본 실측) ────────────────────────────────
     원본은 일부 글자 크기를 **vw 비례**로 키운다. 1280→1440 실측:
       GNB 16→18 · 히어로 40→45 · 상품명 20→22.5 · 판매가 23.3→26.25 · Pick's 26.7→30
     고정 px 로 박아 두면 큰 화면에서 우리만 글자가 작아 헐거워 보인다(사장님 지적).
     clamp 상·하한은 모바일에서 너무 작아지거나 4K 에서 과하게 커지는 걸 막는다. */
  --w-fs-gnb:clamp(15px,1.25vw,20px);
  --w-fs-hero:clamp(26px,3.125vw,52px);
  --w-lh-hero:clamp(32px,3.75vw,62px);
  --w-fs-hero-sub:clamp(14px,1.25vw,20px);
  --w-lh-hero-sub:clamp(21px,1.875vw,30px);
  --w-fs-badge:clamp(13px,1.25vw,20px);
  --w-fs-prd-name:clamp(15px,1.5625vw,25px);
  --w-lh-prd-name:clamp(21px,2.1875vw,35px);
  --w-fs-price:clamp(18px,1.8229vw,29px);
  --w-fs-theme:clamp(20px,2.0833vw,33px);

  /* ── 복제 원본(루이벨르)의 팔레트 토큰을 루이벨르 값으로 덮는다 ────────────
     ⚠️ 이걸 안 하면 상세·장바구니·마이페이지처럼 스킨을 새로 안 쓴 화면에서
        강조색이 **빨강(--red:#d24a4a)** 으로 남는다. 루이벨르 의 강조색은 파랑이다.
        (실측: 상세 Total 금액·별점·배송 안내가 전부 빨갛게 나왔다) */
  --ink:#000;
  --ash:#646E76;
  --red:#81AAE1;
  --cream:#F8F8F8;
  --line:#EEE;
  --paper:#fff;
}

/* ── 리셋 · 바탕 ─────────────────────────────────────────── */
/* ⚠️ letter-spacing 을 주지 말 것. 원본은 **normal** 이다(실측).
   음수 자간을 주면 Pretendard 의 한글 자모가 서로 붙어 작은 크기에서 지글거려 보인다. */
body{
  font-family:var(--w-font);
  font-size:13px;
  color:var(--w-ink);
  background:var(--w-paper);
  letter-spacing:normal;
}
body,button,input,select,textarea{font-family:var(--w-font)}
img{max-width:100%;display:block}
.w-wrap{width:100%;padding-inline:var(--w-gap);box-sizing:border-box}
.ellipsis-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ellipsis-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 워드마크 — 원본 로고(이미지) 대체. Well=필기 세리프 / 247=굵은 산세리프 */
.w-mark{display:inline-flex;align-items:baseline;gap:1px;line-height:1;color:var(--w-ink)}
.w-mark i{font-family:var(--w-serif);font-style:italic;font-weight:500;letter-spacing:0}
.w-mark b{font-weight:800;letter-spacing:-.04em}
.w-mark--blue{color:var(--w-blue)}

/* ============================================================
   1. 공지바 (최상단 검정 · 좌우 흐름)
   ============================================================ */
/* 원본은 문구가 **중앙에 한 줄씩** 뜬다(좌우로 흐르는 마퀴가 아니다).
   여러 개면 세로로 넘기고, 하나뿐이면 그대로 멈춰 있다. */
.w-ann{
  position:relative;z-index:60;
  height:var(--w-ann-h);
  background:#000;color:#fff;
  overflow:hidden;
}
.w-ann__track{
  display:flex;flex-direction:column;align-items:center;
  animation:w-ann-roll 12s infinite;
}
.w-ann__track p{
  margin:0;height:var(--w-ann-h);line-height:var(--w-ann-h);
  font-size:13px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
/* 3장 기준. 각 장이 3초 머물고 1초에 걸쳐 올라간다 */
@keyframes w-ann-roll{
  0%,25%{transform:translateY(0)}
  33%,58%{transform:translateY(calc(var(--w-ann-h) * -1))}
  66%,91%{transform:translateY(calc(var(--w-ann-h) * -2))}
  100%{transform:translateY(calc(var(--w-ann-h) * -3))}
}
.w-ann:hover .w-ann__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.w-ann__track{animation:none}}

/* ============================================================
   2. 헤더 (glass pill · fixed)
   ============================================================ */
.w-head{
  position:fixed;
  top:var(--w-head-top);
  left:var(--w-gap);
  right:var(--w-gap);
  z-index:50;
  height:var(--w-head-h);
  padding:0 var(--w-gap);   /* 원본 실측: 1280→30px · 1440→60px (여백 변수와 같이 움직인다) */
  display:flex;align-items:center;justify-content:space-between;
  border-radius:var(--w-r-head);
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(25px);
  backdrop-filter:blur(25px);
  box-shadow:0 5px 20px 0 rgba(0,0,0,.1),
             inset 4px 2px 4px 0 rgba(0,0,0,.1),
             inset -2px -5px 5px 0 rgba(255,255,255,.2);
  transition:background .3s ease,top .3s ease;
  box-sizing:border-box;
}
/* 히어로를 벗어나면 불투명하게 — 흰 배경 위에서 유리가 안 보이면 글자만 뜬다.
   동시에 위쪽으로 더 붙는다(공지바가 이미 스크롤돼 사라진 상태라 그 자리가 비어 보인다). */
.w-head.is-solid{background:rgba(255,255,255,.86);top:var(--w-head-top-scrolled)}
.w-head.is-hidden{top:calc(var(--w-head-top) * -1 - var(--w-head-h))}

/* 원본 로고(이미지)는 1440 뷰포트에서 124×27px 다. 워드마크로 그 크기에 맞춘다 */
.w-head__logo{margin:0;font-size:clamp(21px,1.95vw,32px);line-height:1}
.w-head__logo a{display:inline-block}

.w-head__center{display:flex;align-items:center;flex:1;justify-content:center}
.w-gnb{display:flex;align-items:center;gap:40px;list-style:none;margin:0;padding:0}
.w-gnb a{
  font-size:var(--w-fs-gnb);font-weight:500;color:var(--w-ink);
  position:relative;padding:2px 0;
}
.w-gnb a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.w-gnb a:hover::after,.w-gnb a.is-on::after{transform:scaleX(1);transform-origin:left}

/* 프로모 롤링 칩 */
.w-promo{
  margin-left:24px;
  height:clamp(20px,1.95vw,30px);overflow:hidden;
  border-radius:50px;
  background:var(--w-blue-chip);
  box-shadow:inset -2px -2px 6px 0 var(--w-yellow);
  display:flex;align-items:center;
}
.w-promo__track{display:block;padding:0 14px}
.w-promo p{
  margin:0;height:clamp(20px,1.95vw,30px);line-height:clamp(20px,1.95vw,30px);
  font-size:clamp(12px,1.04vw,16px);color:#fff;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
}
.w-promo p span{font-weight:700}
.w-promo p i{font-style:normal;font-size:11px;margin-left:2px}
.w-promo__track{animation:w-promo-roll 9s infinite}
@keyframes w-promo-roll{
  0%,28%{transform:translateY(0)}
  33%,61%{transform:translateY(-20px)}
  66%,94%{transform:translateY(-40px)}
  100%{transform:translateY(-60px)}
}
@media (prefers-reduced-motion:reduce){.w-promo__track{animation:none}}

/* 유틸 (검색·계정·장바구니) */
.w-util{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}
.w-util__btn{
  width:24px;height:24px;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--w-ink);
  position:relative;
}
.w-util__btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.w-util__cnt{
  position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--w-blue-chip);color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
}
.w-util__cnt:empty,.w-util__cnt[hidden]{display:none}
/* 헤더 검색 입력 — 아이콘 클릭 시 좌측으로 펼침 */
.w-search{display:flex;align-items:center}
.w-search input{
  width:0;padding:0;border:0;background:transparent;outline:none;
  font-size:13px;color:var(--w-ink);
  transition:width .35s cubic-bezier(.22,.61,.36,1),padding .35s;
}
.w-search.is-open input{width:160px;padding:0 8px;border-bottom:1px solid rgba(0,0,0,.25)}

/* 모바일 햄버거 */
.w-hamb{display:none;width:24px;height:18px;background:none;border:0;padding:0;position:relative;cursor:pointer}
.w-hamb span{position:absolute;left:0;right:0;height:2px;background:var(--w-ink);transition:.3s}
.w-hamb span:nth-child(1){top:0}
.w-hamb span:nth-child(2){top:8px}
.w-hamb span:nth-child(3){top:16px}

/* ============================================================
   3. 홈 — 히어로 (sec-main)
   ============================================================ */
.w-main{padding-top:0}
/* ⚠️ 히어로에도 **48px 라운드가 있다.** 원본은 sec-main 이 아니라 **슬라이드(li)** 에
   radius:48px + overflow:hidden 을 건다 — 겉 컨테이너만 보면 0px 이라 놓치기 쉽다(실측 정정). */
/* ⚠️ 히어로 **상단은 헤더 상단과 같은 높이**여야 한다(원본 실측: 헤더 y=60 · 히어로 y=60).
   히어로가 조금이라도 위에서 시작하면 유리 헤더 바깥으로 배경이 삐져나와
   "상단바에 안 묻히고 배너가 튀어나온" 모양이 된다(사장님 지적).
   공지바 바로 아래(= --w-ann-h)에서 시작하므로, 헤더가 뜬 만큼만 더 내려 준다.
   공지바를 끄면 음수가 되므로 max() 로 0 에서 막는다. */
.w-hero{
  position:relative;
  margin:max(0px, calc(var(--w-head-top) - var(--w-ann-h))) var(--w-gap) 0;
  border-radius:var(--w-r-card);
  overflow:hidden;
  background:#DCE7F5;
}
.w-hero__slides{position:relative;height:780px}
.w-hero__slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity .8s ease;
  pointer-events:none;
}
.w-hero__slide.is-on{opacity:1;pointer-events:auto}
.w-hero__slide picture,.w-hero__slide img{width:100%;height:100%;object-fit:cover}
/* 원본 실측: 히어로 좌측에서 85px · 바닥에서 100px · 최대폭 522px */
.w-hero__txt{
  position:absolute;left:85px;bottom:100px;z-index:2;
  max-width:522px;
}
.w-cate-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  background:#000;color:#fff;
  font-size:var(--w-fs-badge);font-weight:600;line-height:1;
}
.w-cate-badge .w-mark{color:#fff;font-size:.95em}
.w-hero__tit{
  margin:16px 0;
  font-size:var(--w-fs-hero);font-weight:800;line-height:var(--w-lh-hero);color:var(--w-ink);
}
.w-hero__sub{
  margin:0;font-size:var(--w-fs-hero-sub);font-weight:500;line-height:var(--w-lh-hero-sub);color:var(--w-body);
}
.w-hero__sub strong{font-weight:700}
.w-hero__more{
  display:inline-block;margin-top:64px;
  font-size:13px;color:var(--w-gray);
  position:relative;
}
.w-hero__more::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.w-hero__more:hover::after{transform:scaleX(1);transform-origin:left}
/* 페이지네이션 도트 */
.w-hero__dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:28px;z-index:3;
  display:flex;gap:8px;
}
.w-hero__dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.25);cursor:pointer;transition:.3s;
}
.w-hero__dots button.is-on{background:var(--w-ink);width:20px;border-radius:4px}
/* 우측 플로팅 (원본 + / 카톡 버튼) */
.w-hero__float{
  position:absolute;right:24px;bottom:96px;z-index:3;
  display:flex;flex-direction:column;gap:10px;align-items:center;
}
.w-fab{
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:18px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  color:var(--w-ink);
}
.w-fab--kakao{background:var(--w-blue);color:#fff;font-size:10px;font-weight:700;line-height:1.1}

/* ============================================================
   4. 홈 — Best (가로 스와이프 상품 카드)
   ============================================================ */
.w-sec{padding:80px 0}
.w-sec__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--w-gap);margin-bottom:20px;
}
.w-sec__tit{margin:0;font-size:44px;font-weight:800;line-height:1.2;color:var(--w-ink)}
.w-sec__sub{margin:6px 0 0;font-size:14px;color:var(--w-gray)}
.w-navbtns{display:flex;gap:8px}
.w-navbtn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--w-line);
  background:#fff;cursor:pointer;display:grid;place-items:center;
  color:var(--w-ink);transition:.25s;
}
.w-navbtn:hover{background:var(--w-card);border-color:#ddd}
.w-navbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* 레일 — CSS 스크롤 스냅 (⚠️ scrollBy smooth 금지, CLAUDE.md 13번)
   ⚠️ 좌우 여백을 **padding 으로 주지 말 것**. scroll-snap-align:start 와 겹치면 브라우저가
      로드 직후 스크롤을 padding 만큼(60px) 밀어 첫 카드가 화면 왼쪽 끝에 붙는다(실측).
      첫/마지막 아이템의 margin 으로 주면 스냅 위치가 어긋나지 않는다. */
.w-rail{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* ⚠️ 이 줄이 없으면 로드 직후 브라우저가 첫 카드의 스냅 위치(= margin 60px)로 스크롤해
     첫 카드가 화면 왼쪽 끝에 붙어 잘린다. 스냅포트 시작을 여백 안쪽으로 옮겨 준다. */
  scroll-padding-inline:var(--w-gap);
  scroll-behavior:smooth;
  touch-action:pan-x;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.w-rail::-webkit-scrollbar{display:none}
.w-rail > *{scroll-snap-align:start;flex:0 0 auto}
.w-rail > *:first-child{margin-left:var(--w-gap)}
.w-rail > *:last-child{margin-right:var(--w-gap)}
@media (prefers-reduced-motion:reduce){.w-rail{scroll-behavior:auto}}

/* ── 상품 카드 ─────────────────────────────────────────── */
.w-card{
  width:calc((100% - 48px) / 4);
  min-width:240px;
  background:var(--w-card);
  border-radius:var(--w-r-card);
  padding:24px 24px 48px;
  box-sizing:border-box;
  position:relative;
}
/* 레일 카드 4장 = (레일 폭 - 좌우여백 - 갭3개) / 4. 원본 실측 1425px 에서 314px.
   ⚠️ 100vw 를 쓰지 말 것 — 세로 스크롤바 폭(15px)이 포함돼 카드가 4px 씩 넓어지고
      네 번째 카드가 오른쪽으로 밀려 나간다. */
.w-rail .w-card{width:calc((100% - var(--w-gap) * 2 - 48px) / 4)}
.w-card__cate{
  display:flex;align-items:center;gap:6px;
  padding:8px 8px 16px;
  font-size:24px;font-weight:700;color:var(--w-ink);
}
.w-card__cate .w-mark{font-size:22px;color:var(--w-blue)}
.w-card__thumb{
  position:relative;display:block;
  border-radius:var(--w-r-thumb);overflow:hidden;
  aspect-ratio:1/1;background:#fff;
}
.w-card__thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s ease;
}
.w-card__thumb .img2{opacity:0}
.w-card__thumb:hover .img2{opacity:1}
/* ⚠️ 스크롤 중엔 전환을 끈다 — 카드마다 애니메이션이 연달아 시작돼 스크롤이 끊긴다 */
body.is-scrolling .w-card__thumb img{transition:none}

.w-card__badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:6px}
.w-badge{
  padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1;
  background:#fff;color:var(--w-ink);box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.w-badge--new{background:#fff;color:var(--w-ink)}
.w-badge--best{background:#000;color:#fff}
/* 원형 할인 뱃지 (썸네일 우상단) */
.w-dcbadge{
  position:absolute;top:12px;right:12px;z-index:2;
  width:52px;height:52px;border-radius:50%;
  background:var(--w-blue);color:#fff;
  display:grid;place-items:center;text-align:center;
  font-size:15px;font-weight:800;line-height:1;
}
.w-dcbadge span{display:block;font-size:9px;font-weight:600;margin-top:2px;opacity:.9}

.w-card__desc{display:block;padding:38px 4px 0}   /* 원본 .desc-box 실측 */
.w-card__name{
  margin:0;font-size:var(--w-fs-prd-name);font-weight:700;line-height:var(--w-lh-prd-name);color:var(--w-ink);
}
.w-card__note{
  margin:12px 0 0;font-size:12px;font-weight:500;line-height:12px;color:var(--w-gray);
}
/* 가격 3단 — 정가(취소선) · 할인율 · 판매가. 원본은 셋 다 **우측 정렬**이다 */
.w-price{margin-top:20px}
.w-price__og{
  display:block;margin-bottom:5px;text-align:right;
  font-size:16px;font-weight:500;color:var(--w-mute);text-decoration:line-through;
}
.w-price__row{display:flex;align-items:baseline;justify-content:flex-end;gap:8px}
.w-price__dc{font-size:var(--w-fs-price);font-weight:700;color:var(--w-blue)}
.w-price__now{font-size:var(--w-fs-price);font-weight:700;line-height:1;color:var(--w-ink)}
.w-price--ask{font-size:18px;font-weight:700;color:var(--w-ink);text-align:right}

/* ============================================================
   4.5 홈 — 카테고리 (대분류 카드 + 소분류 칩)
   상품이 9,000개 넘는 몰이라 "무엇을 파는지"를 홈에서 한눈에 보여 준다.
   ============================================================ */
.w-sec__more{
  font-size:14px;color:var(--w-gray);white-space:nowrap;position:relative;
}
.w-sec__more::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.w-sec__more:hover::after{transform:scaleX(1);transform-origin:left}

.w-cats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  padding:0 var(--w-gap);
}
.w-cat{
  background:var(--w-card);border-radius:var(--w-r-thumb);
  overflow:hidden;display:flex;flex-direction:column;
}
.w-cat__thumb{
  display:block;position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;
}
.w-cat__thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.w-cat:hover .w-cat__thumb img{transform:scale(1.05)}
/* ⚠️ 스크롤 중엔 전환을 끈다 — 카드가 많아 연쇄 애니메이션이 스크롤을 끊는다 */
body.is-scrolling .w-cat__thumb img{transition:none}
.w-cat__emoji{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:40px;background:var(--w-card);
}
.w-cat__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.w-cat__name{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:15px;font-weight:700;color:var(--w-ink);
}
.w-cat__nm{display:inline-flex;align-items:center;gap:6px;min-width:0}
.w-cat__nm i{font-style:normal;font-size:15px}
.w-cat__name b{font-size:12px;font-weight:600;color:var(--w-mute)}
.w-cat__leaves{display:flex;flex-wrap:wrap;gap:6px}
.w-cat__leaves a{
  padding:5px 10px;border-radius:999px;background:#fff;
  font-size:12px;color:var(--w-gray-2);white-space:nowrap;
  transition:background .2s,color .2s;
}
.w-cat__leaves a:hover{background:var(--w-ink);color:#fff}

@media (max-width:1280px){ .w-cats{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1024px){ .w-cats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:768px){
  .w-cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .w-cat__body{padding:12px}
  .w-cat__name{font-size:14px}
  /* 모바일에선 칩이 두 줄로 넘쳐 카드 높이가 들쭉날쭉해진다 — 두 개까지만 */
  .w-cat__leaves a:nth-child(n+3){display:none}
}

/* ============================================================
   5. 홈 — LOUIBELLE Pick's (sec-theme)
   ============================================================ */
.w-theme{margin:0 var(--w-gap) 42px;position:relative}
.w-theme__inner{
  display:flex;
  background:var(--w-card-2);
  border-radius:var(--w-r-card);
  overflow:hidden;
  min-height:715px;
}
.w-theme__img{flex:0 0 45%;position:relative}
.w-theme__img img{width:100%;height:100%;object-fit:cover}
.w-theme__con{flex:1;padding:50px 56px;display:flex;flex-direction:column;justify-content:center}
.w-theme__tit{margin:0 0 10px;font-size:var(--w-fs-theme);font-weight:700;color:var(--w-ink)}
.w-theme__tit .w-mark{color:var(--w-blue);font-size:1em}
.w-theme__summary{margin:0 0 32px;font-size:14px;font-weight:400;color:var(--w-gray)}
.w-picks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.w-picks li a{
  display:flex;align-items:center;gap:20px;
  background:#fff;border-radius:24px;padding:16px 24px 16px 16px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s;
}
.w-picks li a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.w-picks__thumb{
  flex:0 0 96px;height:96px;border-radius:16px;overflow:hidden;background:var(--w-card);
}
.w-picks__thumb img{width:100%;height:100%;object-fit:cover}
/* ⚠️ 이 안은 <a> 안의 <span> 들이다(a 중첩 금지). ellipsis-1 이 먹으려면 block 이어야 한다 —
   inline 이면 말줄임이 걸리지 않아 모바일에서 상품명이 카드 밖으로 삐져나간다. */
.w-picks__txt{flex:1 1 auto;min-width:0}
.w-picks__name{display:block;margin:0;font-size:15px;font-weight:700;color:var(--w-ink)}
.w-picks__desc{display:block;margin-top:6px;font-size:12px;color:var(--w-gray)}
.w-picks__more{display:block;margin-top:12px;font-size:12px;color:var(--w-gray-2)}
.w-picks__more span{color:var(--w-blue);font-weight:700}

/* 우하단 pill 버튼 (원본 .btn-apple-more) */
.w-pill{
  position:absolute;right:32px;bottom:32px;z-index:3;
  display:inline-flex;align-items:center;gap:14px;
  padding:12px 12px 12px 24px;border-radius:999px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 6px 22px rgba(0,0,0,.1);
  font-size:14px;font-weight:600;color:var(--w-ink);
}
.w-pill div{
  width:32px;height:32px;border-radius:50%;background:var(--w-ink);color:#fff;
  display:grid;place-items:center;font-size:16px;line-height:1;
}

/* ============================================================
   6. 홈 — 브랜드 필름
   ============================================================ */
.w-video{margin:0 var(--w-gap) 42px;border-radius:var(--w-r-card);overflow:hidden}
.w-video__box{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.w-video__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   7. 홈 — Follow Well (인스타)
   ============================================================ */
.w-insta{padding:0 0 80px}
.w-insta__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--w-gap);margin-bottom:20px;
}
.w-insta__head .w-sec__tit{font-size:44px}
.w-insta__at{
  padding:8px 16px;border-radius:999px;background:#000;color:#fff;
  font-size:12px;font-weight:600;
}
.w-insta__grid{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--w-gap);
  scroll-behavior:smooth;touch-action:pan-x;scrollbar-width:none;
}
.w-insta__grid::-webkit-scrollbar{display:none}
.w-insta__grid li:first-child{margin-left:var(--w-gap)}
.w-insta__grid li:last-child{margin-right:var(--w-gap)}
.w-insta__grid li{
  list-style:none;flex:0 0 calc((100% - var(--w-gap) * 2 - 48px) / 4);
  scroll-snap-align:start;border-radius:24px;overflow:hidden;aspect-ratio:1/1;
  background:var(--w-card);
}
.w-insta__grid li img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.w-insta__grid li:hover img{transform:scale(1.04)}

/* ============================================================
   8. 푸터
   ============================================================ */
/* 원본 실측: x=60 · w=1305 · radius 48 · padding 50/60/62 · bg #F8F8F8 ·
   display:flex + space-between (좌 = 정보, 우 = 대형 워터마크) */
.w-foot{
  margin:0 var(--w-gap) var(--w-gap);
  background:var(--w-card);
  border-radius:var(--w-r-card);
  padding:50px 60px 62px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  position:relative;overflow:hidden;
}
.w-foot__info{flex:1 1 auto;min-width:0}
/* ⚠️ 열이 넓으면 워터마크(우측 절반)에 밀려 3열이 2열로 접힌다 — 원본은 한 줄 3열이다 */
.w-foot__grid{display:flex;gap:48px;flex-wrap:wrap}
.w-foot__col{min-width:150px;max-width:220px}
.w-foot__t{
  margin:0 0 16px;font-size:15px;font-weight:700;color:var(--w-ink);
}
.w-foot__col p{margin:0 0 8px;font-size:13px;color:var(--w-gray-2);line-height:1.7}
.w-foot__col a{color:var(--w-gray-2);position:relative}
.w-foot__col a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.w-foot__col a:hover::after{transform:scaleX(1);transform-origin:left}
.w-foot__col small{display:block;font-size:12px;color:var(--w-mute);line-height:1.7}

/* 회사정보 아코디언 */
.w-acn{margin-top:48px;border-top:1px solid rgba(0,0,0,.06);padding-top:24px}
.w-acn__tit{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  margin:0;font-size:13px;font-weight:600;color:var(--w-gray-2);
  background:none;border:0;padding:0;
}
.w-acn__tit i{font-style:normal;transition:transform .3s}
.w-acn.is-open .w-acn__tit i{transform:rotate(180deg)}
.w-acn__body{display:none;margin-top:16px}
.w-acn.is-open .w-acn__body{display:block}
.w-acn__body p{margin:0 0 6px;font-size:12px;color:var(--w-mute)}
.w-acn__body span{color:var(--w-gray-2)}
.w-foot__copy{margin:24px 0 0;font-size:12px;color:var(--w-mute)}

/* 대형 워터마크 — 원본은 푸터 우측 절반을 차지하는 파란 LOUIBELLE 로고다.
   ⚠️ .w-mark 가 color:var(--w-ink) 라 여기서 inherit 로 되돌리지 않으면 검정으로 나온다. */
.w-foot__mark{
  flex:0 0 auto;align-self:flex-end;
  font-size:clamp(64px,9vw,132px);line-height:.78;
  color:var(--w-blue);pointer-events:none;user-select:none;
  margin-bottom:-14px;   /* 원본처럼 글자 아래쪽이 살짝 잘려 보이게 */
}
.w-foot__mark .w-mark{color:inherit}
.w-foot__mark .w-mark b{letter-spacing:-.05em}

/* ============================================================
   9. 서브 페이지 공통 (상품 목록 · 상세)
   ============================================================ */
/* ⚠️ 헤더가 fixed 라 홈이 아닌 모든 페이지는 그 높이만큼 본문을 내려야 한다.
   홈은 히어로가 헤더 밑으로 깔리는 게 의도라 제외한다. */
body:not([data-page="home"]) #main{
  padding-top:calc(var(--w-head-top) + var(--w-head-h) + 32px);
}
.w-page{padding-top:0}
.w-page__head{padding:0 var(--w-gap);margin-bottom:32px}
.w-page__tit{margin:0;font-size:44px;font-weight:800;color:var(--w-ink)}
.w-page__desc{margin:8px 0 0;font-size:14px;color:var(--w-gray)}

.w-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding:0 var(--w-gap);
}
/* 원본 PRODUCTS 목록은 **3열**이다(실측 1305px 폭에 카드 424px × 3 + gap 16) */
.w-grid--3{grid-template-columns:repeat(3,1fr)}
.w-grid .w-card{width:auto;min-width:0}

/* ── LNB 유리 패널 (PRODUCTS 목록 상단) ───────────────── */
.w-lnb{
  margin:0 var(--w-gap) 40px;
  padding:40px 40px 40px 60px;
  border-radius:var(--w-r-head);
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);
  box-shadow:0 5px 20px 0 rgba(0,0,0,.1),
             inset 4px 2px 4px 0 rgba(0,0,0,.1),
             inset -2px -5px 5px 0 rgba(255,255,255,.2);
  display:flex;align-items:flex-start;justify-content:space-between;gap:32px;
}
.w-lnb__left{display:flex;gap:64px;flex-wrap:wrap}
.w-lnb__col{list-style:none;margin:0;padding:0}
.w-lnb__t{font-size:22px;font-weight:700;color:var(--w-ink);margin-bottom:14px}
.w-lnb__col li + li{margin-top:8px}
.w-lnb__col a{font-size:14px;color:var(--w-gray-2);position:relative}
.w-lnb__col a:hover,.w-lnb__col a.is-on{color:var(--w-ink);font-weight:700}
.w-lnb__right{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.w-lnb__search{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.7);border-radius:999px;padding:8px 8px 8px 16px}
.w-lnb__search input{border:0;background:none;outline:none;font-size:13px;width:150px}
.w-lnb__search button{width:28px;height:28px;border:0;border-radius:50%;background:var(--w-ink);color:#fff;display:grid;place-items:center;cursor:pointer}
.w-lnb__search svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.w-lnb__sort select{
  border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:8px 14px;
  background:rgba(255,255,255,.7);font-size:13px;color:var(--w-ink);cursor:pointer;
}

.w-list-head{padding:0 var(--w-gap);margin-bottom:24px}
.w-list-head .w-page__tit{margin:0}

.w-empty{padding:80px var(--w-gap);text-align:center;color:var(--w-gray)}
.w-empty p{margin:0 0 20px;font-size:16px}
.w-empty .w-tab{display:inline-block}

/* ── 페이지네이션 ────────────────────────────────────── */
.w-pager{display:flex;justify-content:center;align-items:center;gap:6px;padding:56px var(--w-gap) 0}
.w-pager a,.w-pager span{
  min-width:36px;height:36px;padding:0 8px;border-radius:999px;
  display:grid;place-items:center;font-size:14px;color:var(--w-gray);
}
.w-pager a:hover{background:var(--w-card)}
.w-pager a.is-on{background:var(--w-ink);color:#fff;font-weight:700}

/* 카테고리 탭 */
.w-tabs{display:flex;gap:10px;padding:0 var(--w-gap);margin-bottom:28px;flex-wrap:wrap}
.w-tab{
  padding:10px 20px;border-radius:999px;border:1px solid var(--w-line);
  background:#fff;font-size:14px;font-weight:600;color:var(--w-gray);transition:.25s;
}
.w-tab:hover{border-color:#ccc}
.w-tab.is-on{background:var(--w-ink);border-color:var(--w-ink);color:#fff}

/* ============================================================
   10. 반응형
   ============================================================ */
@media (max-width:1280px){
  :root{--w-gap:30px}   /* 원본도 이 폭에서 좌우 여백이 절반으로 줄어든다 */
  .w-rail .w-card,.w-insta__grid li{
    width:calc((100% - var(--w-gap) * 2 - 32px) / 3);
    flex-basis:calc((100% - var(--w-gap) * 2 - 32px) / 3);
  }
  .w-grid,.w-grid--3{grid-template-columns:repeat(3,1fr)}
  .w-sec__tit,.w-page__tit,.w-insta__head .w-sec__tit{font-size:36px}
  .w-hero__slides{height:620px}
  .w-hero__txt{left:56px;bottom:80px}
  .w-lnb{padding:32px}
  .w-lnb__left{gap:40px}
}
@media (max-width:1024px){
  .w-theme__inner{flex-direction:column;min-height:0}
  .w-theme__img{flex:none;aspect-ratio:4/3}
  .w-theme__con{padding:40px 32px}
}
@media (max-width:768px){
  /* ⚠️ --w-head-top 은 **공지바 높이보다 커야 한다**. 작으면 유리 헤더가 검정 공지바 위로
     올라타 글자가 겹쳐 읽힌다(실측: 12px 일 때 완전히 겹쳤다). */
  :root{--w-gap:16px;--w-r-card:28px;--w-r-thumb:20px;--w-head-top:44px;--w-head-top-scrolled:8px;--w-head-h:56px}
  .w-head{padding:0 18px}
  .w-head__center{display:none}
  .w-hamb{display:block}
  .w-head__logo{font-size:21px}
  .w-hero__slides{height:520px}
  /* ⚠️ % 로 잡으면 긴 영문 제목이 화면 밖으로 나간다 — 좌우 여백을 뺀 고정폭으로 묶는다 */
  .w-hero__txt{left:24px;right:24px;bottom:64px;max-width:none}
  .w-hero__tit{font-size:26px;line-height:32px;margin:12px 0;word-break:keep-all}
  .w-hero__sub{font-size:14px;line-height:21px}
  .w-hero__more{margin-top:32px}
  .w-sec{padding:48px 0}
  .w-sec__tit,.w-page__tit,.w-insta__head .w-sec__tit{font-size:28px}
  .w-rail .w-card,.w-insta__grid li{width:76vw;flex-basis:76vw}
  .w-grid,.w-grid--3{grid-template-columns:repeat(2,1fr);gap:12px}
  .w-card{padding:16px 16px 28px}
  .w-lnb{padding:24px 20px;flex-direction:column;gap:20px;border-radius:24px}
  .w-lnb__left{gap:24px}
  .w-lnb__t{font-size:17px;margin-bottom:10px}
  .w-lnb__right{align-items:stretch;width:100%}
  .w-lnb__search input{width:100%}
  .w-lnb__sort select{width:100%}
  .w-card__cate{font-size:17px;padding:4px 4px 12px}
  .w-card__name{font-size:16px;line-height:22px}
  .w-price__dc,.w-price__now{font-size:19px}
  .w-foot{padding:40px 24px 32px;flex-direction:column;align-items:stretch;gap:24px}
  .w-foot__grid{gap:32px}
  .w-foot__mark{align-self:flex-end;font-size:clamp(56px,18vw,110px);margin-bottom:-8px}
  .w-pill{right:16px;bottom:16px;padding:10px 10px 10px 18px;font-size:13px}
  .w-page{padding-top:calc(var(--w-head-top) + var(--w-head-h) + 24px)}
}
@media (max-width:480px){
  .w-grid{grid-template-columns:repeat(2,1fr)}
  .w-card__note{font-size:11px}
}

/* ============================================================
   11. 상품 상세 (기존 .pd/.pgal/.pinfo 마크업 위에 루이벨르 톤만 얹는다)
   원본 실측: 본문 max-width 1200 · 좌 이미지 660 · 우 정보 468
   ============================================================ */
body[data-page="product"] .wrap{max-width:1200px;margin-inline:auto}
.pd{display:grid;grid-template-columns:660px 1fr;gap:72px;align-items:start}
.pgal__main{border-radius:var(--w-r-thumb);overflow:hidden;background:var(--w-card)}
.pgal__main img{width:100%;height:auto;display:block}
.pgal__thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.pgal__thumbs::-webkit-scrollbar{display:none}
.pgal__thumbs button{
  flex:0 0 72px;width:72px;height:72px;padding:0;border:0;cursor:pointer;
  border-radius:12px;overflow:hidden;background:var(--w-card);opacity:.6;transition:opacity .25s;
}
.pgal__thumbs button.active,.pgal__thumbs button:hover{opacity:1}
.pgal__thumbs img{width:100%;height:100%;object-fit:cover}

.pinfo .brand{
  font-size:13px;font-weight:700;color:var(--w-blue);letter-spacing:.06em;text-transform:uppercase;
}
.pinfo h1{margin:10px 0 14px;font-size:32px;font-weight:700;line-height:1.3;color:#4E4E4E}
.pinfo .rate{font-size:13px;color:var(--w-gray)}
/* 가격 블록 — 원본은 연한 파랑 배경의 라운드 박스다 */
.pinfo .price{
  display:flex;align-items:baseline;gap:10px;
  margin:20px 0 10px;padding:12px 20px 12px 16px;
  background:#F2F7FF;border-radius:20px;
}
.pinfo .price .sale{font-size:24px;font-weight:800;color:var(--w-blue)}
.pinfo .price .now{font-size:24px;font-weight:800;color:var(--w-ink)}
.pinfo .price .was{font-size:15px;color:var(--w-mute);text-decoration:line-through}
.pinfo .lead{font-size:14px;line-height:1.75;color:var(--w-gray-2)}

/* 옵션·수량·구매 버튼 줄 */
.pinfo .opt{margin-top:20px}
.pinfo .qtyrow{margin-top:16px}
.pinfo .buyrow{display:flex;gap:10px;margin-top:16px}
.pinfo .buyrow .btn{flex:1}

/* 버튼 — 사이트 전역 pill 톤. 원본은 검정 채움 + 흰 테두리 두 종류다 */
.btn{border-radius:999px}
.btn--red,.btn--dark{background:var(--w-ink);border-color:var(--w-ink);color:#fff}
.btn--red:hover,.btn--dark:hover{background:#222;border-color:#222}
.btn--outline{border-color:rgba(0,0,0,.15);color:var(--w-ink);background:#fff}
.btn--outline:hover{border-color:rgba(0,0,0,.35)}

/* 하단 고정 구매바 */
.buybar{
  border-top:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.buybar .btn{border-radius:999px}

@media (max-width:1100px){
  .pd{grid-template-columns:1fr;gap:32px}
  body[data-page="product"] .wrap{max-width:none}
}
@media (max-width:768px){
  .pinfo h1{font-size:24px}
  .pinfo .price .sale,.pinfo .price .now{font-size:20px}
}

/* ── 모바일 드로어 (햄버거) ────────────────────────────── */
.w-drawer{
  position:fixed;inset:0;z-index:80;visibility:hidden;
}
.w-drawer.is-open{visibility:visible}
.w-drawer__dim{
  position:absolute;inset:0;background:rgba(0,0,0,.35);
  opacity:0;transition:opacity .3s;
}
.w-drawer.is-open .w-drawer__dim{opacity:1}
.w-drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);
  background:#fff;padding:28px 24px;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
}
.w-drawer.is-open .w-drawer__panel{transform:none}
.w-drawer__x{position:absolute;top:20px;right:20px;background:none;border:0;font-size:22px;cursor:pointer}
.w-drawer__nav{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.w-drawer__nav a{display:block;padding:14px 0;font-size:20px;font-weight:700;border-bottom:1px solid var(--w-line)}
.w-drawer__sub{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.w-drawer__sub a{font-size:14px;color:var(--w-gray)}