/* 첫 화면 (inc/home.php) — 상아·샴페인 골드 · 가는 선 · 세리프 */
:root{--lx-ivory:#f7f3ec;--lx-sand:#efe7da;--lx-ink:#1c1a17;--lx-gold:#a88a56;--lx-gold2:#c9ad7a;--lx-line:#e4dccd;--lx-mute:#7d7468}
.lux{background:#fff}
.lux .sf,.lx-hero h2,.lx-intro h2,.lx-h h2,.lx-cats .tx b,.lx-biz h2,.lx-svc b{font-family:'Cormorant Garamond','Noto Serif KR',serif;font-weight:500;letter-spacing:0}
.lx-h h2,.lx-hero .k,.lx-intro .k,.lx-biz p{font-family:'Noto Serif KR','Cormorant Garamond',serif}
.lx-hero i,.lx-intro i,.lx-h i,.lx-biz i{font-style:italic;font-family:'Cormorant Garamond',serif;font-weight:400}
.lux .e,.lx-hero .e{font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:var(--lx-gold);font-weight:600;margin:0 0 18px}

/* 화보: 겹쳐 바뀌며 아주 천천히 다가옴 */
.lx-hero{position:relative;height:min(82vh,820px);min-height:520px;overflow:hidden;background:var(--lx-sand)}
.lx-hero .sl{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.lx-hero .sl.on{opacity:1;pointer-events:auto}
.lx-hero picture,.lx-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.lx-hero .sl img{transform:scale(1.06);transition:transform 9s ease-out}
.lx-hero .sl.on img{transform:scale(1)}
.lx-hero .cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 9%;background:linear-gradient(90deg,rgba(247,243,236,.78) 0%,rgba(247,243,236,.35) 38%,rgba(247,243,236,0) 60%)}
.lx-hero .cap>*{opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s ease}
.lx-hero .sl.on .cap>*{opacity:1;transform:none}
.lx-hero .sl.on .cap>*:nth-child(2){transition-delay:.25s}
.lx-hero .sl.on .cap>*:nth-child(3){transition-delay:.45s}
.lx-hero .sl.on .cap>*:nth-child(4){transition-delay:.65s}
.lx-hero h2{font-size:clamp(52px,6.4vw,96px);line-height:.98;color:var(--lx-ink);margin:0 0 26px}
.lx-hero .k{font-size:18px;font-weight:300;color:#4a4237;margin:0 0 40px;letter-spacing:.02em}
.lk,.lx-more{display:inline-flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--lx-ink);font-weight:600;padding:0 0 8px;border-bottom:1px solid var(--lx-ink);align-self:flex-start}
.lk span,.lx-more span{display:inline-block;width:34px;height:1px;background:currentColor;position:relative;transition:width .4s ease}
.lk span:after,.lx-more span:after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.lk:hover span,.lx-more:hover span{width:52px}
.lx-hero .ctl{position:absolute;left:9%;bottom:44px;display:flex;align-items:center;gap:14px;font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--lx-ink);z-index:2}
.lx-hero .ctl .bar{width:120px;height:1px;background:rgba(28,26,23,.2);position:relative;overflow:hidden}
.lx-hero .ctl .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--lx-ink);transition:width 6.5s linear}
.lx-hero .ctl button{width:38px;height:38px;border:1px solid rgba(28,26,23,.25);border-radius:50%;background:rgba(255,255,255,.4);font-size:20px;line-height:1;color:var(--lx-ink);cursor:pointer;margin-left:4px;transition:background .3s}
.lx-hero .ctl button:hover{background:#fff}

/* 흐르는 띠 */
.lx-strip{background:var(--lx-ink);color:var(--lx-gold2);overflow:hidden;white-space:nowrap;border-bottom:1px solid #000}
.lx-strip .mq{display:inline-flex;align-items:center;gap:34px;padding:15px 0;animation:lxmq 42s linear infinite;font-family:'Cormorant Garamond',serif;font-size:15px;letter-spacing:.26em;text-transform:uppercase}
.lx-strip i{width:5px;height:5px;transform:rotate(45deg);background:var(--lx-gold);display:inline-block}
@keyframes lxmq{to{transform:translateX(-50%)}}

/* 브랜드 한 줄 */
.lx-intro{text-align:center;padding:130px 24px 120px;max-width:900px;margin:0 auto}
.lx-intro h2{font-size:clamp(40px,4.6vw,66px);line-height:1.12;color:var(--lx-ink);margin:0 0 34px}
.lx-intro .k{font-size:16px;line-height:2;color:var(--lx-mute);font-weight:300;margin:0}
.lx-intro:after{content:'';display:block;width:1px;height:70px;background:var(--lx-gold);margin:60px auto 0;opacity:.6}

/* 카테고리 화보 4칸 */
.lx-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 14px;margin:0 0 140px}
.lx-cats .tile{position:relative;display:block;overflow:hidden;background:var(--lx-sand)}
.lx-cats .ph{display:block;aspect-ratio:3/4.3;overflow:hidden}
.lx-cats .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.lx-cats .tile:hover .ph img{transform:scale(1.06)}
.lx-cats .tx{position:absolute;left:0;right:0;bottom:0;padding:90px 28px 28px;background:linear-gradient(0deg,rgba(28,22,14,.55),rgba(28,22,14,0));color:#fff;display:flex;flex-direction:column}
.lx-cats .tx b{font-size:40px;line-height:1}
.lx-cats .tx small{font-size:12.5px;letter-spacing:.14em;opacity:.85;margin-top:10px}
.lx-cats .tx em{font-style:normal;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.45);width:max-content;opacity:.9}

/* 섹션 머리 */
.lx-h{text-align:center;margin:0 0 46px}
.lx-h h2{font-size:clamp(28px,2.8vw,38px);font-weight:400;color:var(--lx-ink);margin:0;letter-spacing:-.01em}
.lx-h i{font-size:1.18em}

/* The Edit */
.lx-edit,.lx-new{max-width:1340px;margin:0 auto 150px;padding:0 36px;text-align:center}
.lx-edit .tabs{display:flex;justify-content:center;gap:8px 30px;flex-wrap:wrap;margin:-10px 0 46px;border-bottom:1px solid var(--lx-line)}
.lx-edit .tabs button{background:none;border:0;padding:0 2px 16px;font-size:14.5px;color:var(--lx-mute);cursor:pointer;position:relative;letter-spacing:.02em}
.lx-edit .tabs button.on{color:var(--lx-ink);font-weight:600}
.lx-edit .tabs button.on:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--lx-ink)}
.lx-edit .pane{display:none}
.lx-edit .pane.on{display:block;animation:lxfade .7s ease}
@keyframes lxfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 22px;text-align:left;margin:0 0 54px}
.lx-new .lx-grid{gap:54px 22px}

/* 상품 카드: 상아 사진칸 · 올리면 두 번째 사진 */
.lx-card{display:block}
.lx-card .ph{display:block;position:relative;aspect-ratio:1/1.12;background:var(--lx-ivory);overflow:hidden;margin:0 0 18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);transition:box-shadow .35s ease,transform .35s ease}
@media(hover:hover) and (min-width:769px){.lx-card:hover .ph{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.10),0 4px 10px rgba(0,0,0,.05)}}
.lx-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease,transform 1.2s ease}
.lx-card .ph img.b{opacity:0}
.lx-card:hover .ph img.b{opacity:1}
.lx-card:hover .ph img{transform:scale(1.03)}
.lx-card .nm{display:block;font-size:14px;line-height:1.55;color:#2b2722;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0 0 7px}
.lx-card .pr{font-size:14.5px;font-weight:600;color:var(--lx-ink);letter-spacing:.01em}
.lx-card .wtag{background:var(--lx-gold)}

/* 도매 */
.lx-biz{display:grid;grid-template-columns:1fr 1fr;background:var(--lx-ink);color:#e9e2d4;margin:0 0 0}
.lx-biz .ph{overflow:hidden;min-height:560px}
.lx-biz .ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.lx-biz .tx{display:flex;flex-direction:column;justify-content:center;padding:80px 9%}
.lx-biz h2{font-size:clamp(46px,5vw,72px);line-height:1;color:#f4eee3;margin:0 0 30px}
.lx-biz p{font-size:15.5px;line-height:2;font-weight:300;color:#bdb3a3;max-width:440px;margin:0 0 44px}
.btn-o{display:inline-block;align-self:flex-start;border:1px solid var(--lx-gold2);color:var(--lx-gold2);padding:16px 34px;font-size:13px;letter-spacing:.2em;font-weight:600;transition:background .3s,color .3s}
.btn-o:hover{background:var(--lx-gold2);color:var(--lx-ink)}

/* 서비스 */
.lx-svc{display:grid;grid-template-columns:repeat(4,1fr);max-width:1340px;margin:0 auto;padding:70px 36px;text-align:center}
.lx-svc div{padding:0 20px;border-left:1px solid var(--lx-line)}
.lx-svc div:first-child{border-left:0}
.lx-svc b{display:block;font-size:22px;color:var(--lx-ink);margin:0 0 8px}
.lx-svc span{font-size:13px;color:var(--lx-mute)}

/* 내려올 때 떠오름 */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.1s ease}
.rv.in{opacity:1;transform:none}
.lx-cats .tile.rv:nth-child(2),.lx-grid .lx-card.rv:nth-child(4n+2){transition-delay:.12s}
.lx-cats .tile.rv:nth-child(3),.lx-grid .lx-card.rv:nth-child(4n+3){transition-delay:.24s}
.lx-cats .tile.rv:nth-child(4),.lx-grid .lx-card.rv:nth-child(4n+4){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.rv,.lx-hero .sl img,.lx-hero .cap>*{transition:none;transform:none;opacity:1}.lx-strip .mq{animation:none}}

/* 휴대폰 */
@media (max-width:768px){
  .lx-hero{height:auto;min-height:0}
  .lx-hero .sl{position:relative;display:none}
  .lx-hero .sl.on{display:block}
  .lx-hero picture{aspect-ratio:4/5;height:auto}
  .lx-hero .cap{position:relative;inset:auto;background:var(--lx-ivory);padding:36px 24px 84px;text-align:center;align-items:center}
  .lx-hero .lk{align-self:center}
  .lx-hero h2{font-size:46px;margin:0 0 18px}
  .lx-hero .k{font-size:15px;margin:0 0 28px}
  .lx-hero .ctl{left:0;right:0;bottom:28px;justify-content:center}
  .lx-hero .ctl .bar{width:80px}
  .lx-strip .mq{font-size:13px;padding:12px 0;gap:24px}
  .lx-intro{padding:84px 24px 76px}
  .lx-intro h2{font-size:38px}
  .lx-intro .k{font-size:14.5px}
  .lx-intro:after{height:48px;margin-top:44px}
  .lx-cats{grid-template-columns:1fr 1fr;gap:8px;padding:0 8px;margin:0 0 96px}
  .lx-cats .tx{padding:60px 16px 16px}
  .lx-cats .tx b{font-size:28px}
  .lx-cats .tx em{display:none}
  .lx-edit,.lx-new{padding:0 16px;margin-bottom:96px}
  .lx-edit .tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;gap:24px;margin:-10px -16px 30px;padding:0 16px}
  .lx-edit .tabs::-webkit-scrollbar{display:none}
  .lx-edit .tabs button{white-space:nowrap}
  .lx-grid{grid-template-columns:1fr 1fr;gap:30px 10px;margin-bottom:40px}
  .lx-new .lx-grid{gap:30px 10px}
  .lx-card .nm{font-size:13px}
  .lx-card .ph{margin-bottom:12px}
  .lx-biz{grid-template-columns:1fr}
  .lx-biz .ph{min-height:0;aspect-ratio:4/3}
  .lx-biz .tx{padding:56px 24px 64px;text-align:center;align-items:center}
  .lx-biz .btn-o{align-self:center}
  .lx-svc{grid-template-columns:1fr 1fr;gap:30px 0;padding:56px 16px}
  .lx-svc div:nth-child(3){border-left:0}
  .lx-svc b{font-size:19px}
}