/* 메인 "하이엔드 브랜드" 모듈 (구구스 module-335 구성 참고) — 전체 폭 브랜드 슬라이드 + 카테고리 탭 + 상품 스트립 */
.he{--serif:Didot,Georgia,serif;--green:#0f2a22;--soft:#f6f4f0;isolation:isolate;margin-top:72px}
.he button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.he a{color:inherit;text-decoration:none}
/* ============ module-335 (High-End Brand) ============ */
.he{position:relative;overflow:hidden;height:496px;background:#fff}
.he-swiper{position:relative;height:400px;overflow:hidden;background:#0d1a15}
.he-slide{position:absolute;inset:0;display:flex;padding:80px max(24px,calc((100% - 1040px)/2));color:#fff;visibility:hidden;z-index:1;will-change:transform}
.he-slide.on{visibility:visible}
.he-photo{position:absolute;inset:0;overflow:hidden;background:var(--he-bg)}
.he-photo::before{z-index:1;content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.he-photo::after{z-index:1;content:"";position:absolute;left:0;right:0;top:50%;height:50%;background:linear-gradient(rgba(0,0,0,0),#000);opacity:.5}
.he-photo .art{position:absolute;left:50%;top:50%;width:640px;max-width:none;transform:translate(-42%,-46%);filter:drop-shadow(0 24px 30px rgba(0,0,0,.5))}
.he-photo .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.he-photo .bgfill{display:none}
.he-photo.hfit{background:#000}
.he-photo.hfit .bgimg{object-fit:contain;object-position:center center;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) calc(50% - var(--iw)/2 + var(--fx)*0),rgba(0,0,0,0.05) calc(50% - var(--iw)/2 + var(--fx)*0.2),rgba(0,0,0,0.2) calc(50% - var(--iw)/2 + var(--fx)*0.4),rgba(0,0,0,0.45) calc(50% - var(--iw)/2 + var(--fx)*0.6),rgba(0,0,0,0.78) calc(50% - var(--iw)/2 + var(--fx)*0.8),rgba(0,0,0,1) calc(50% - var(--iw)/2 + var(--fx)*1),rgba(0,0,0,1) calc(50% + var(--iw)/2 - var(--fx)*1),rgba(0,0,0,0.78) calc(50% + var(--iw)/2 - var(--fx)*0.8),rgba(0,0,0,0.45) calc(50% + var(--iw)/2 - var(--fx)*0.6),rgba(0,0,0,0.2) calc(50% + var(--iw)/2 - var(--fx)*0.4),rgba(0,0,0,0.05) calc(50% + var(--iw)/2 - var(--fx)*0.2),rgba(0,0,0,0) calc(50% + var(--iw)/2 - var(--fx)*0));mask-image:linear-gradient(90deg,rgba(0,0,0,0) calc(50% - var(--iw)/2 + var(--fx)*0),rgba(0,0,0,0.05) calc(50% - var(--iw)/2 + var(--fx)*0.2),rgba(0,0,0,0.2) calc(50% - var(--iw)/2 + var(--fx)*0.4),rgba(0,0,0,0.45) calc(50% - var(--iw)/2 + var(--fx)*0.6),rgba(0,0,0,0.78) calc(50% - var(--iw)/2 + var(--fx)*0.8),rgba(0,0,0,1) calc(50% - var(--iw)/2 + var(--fx)*1),rgba(0,0,0,1) calc(50% + var(--iw)/2 - var(--fx)*1),rgba(0,0,0,0.78) calc(50% + var(--iw)/2 - var(--fx)*0.8),rgba(0,0,0,0.45) calc(50% + var(--iw)/2 - var(--fx)*0.6),rgba(0,0,0,0.2) calc(50% + var(--iw)/2 - var(--fx)*0.4),rgba(0,0,0,0.05) calc(50% + var(--iw)/2 - var(--fx)*0.2),rgba(0,0,0,0) calc(50% + var(--iw)/2 - var(--fx)*0))}   /* 세로에 맞춘 사진의 양옆 가장자리가 검정 배경으로 부드럽게 이어짐 (--iw·--fx는 JS가 계산) */   /* 화면이 사진보다 넓을 때: 세로에 맞춰 정중앙, 양옆은 검정 (그라데이션 없음) */
.he-item .he-img{position:absolute;inset:-1px;transition:transform .5s}   /* 1px 크게 깔아 둥근 모서리 가장자리에 흰 실선이 비치지 않게 */
.he-item:hover .he-img{transform:scale(1.06)}
.he-brand{position:relative;z-index:2}
.he-ctitle{display:flex;flex-direction:column;margin-right:40px;padding-right:20px}
.he-ctitle .he-thumb{width:60px;height:60px;border:1px solid rgba(255,255,255,.2);border-radius:60px;display:flex;align-items:center;justify-content:center;padding:9px;margin-bottom:16px;overflow:hidden}
.he-ctitle .he-thumb span{font:700 17px/1 'Bodoni Moda',var(--serif);letter-spacing:.02em}
.he-stext{font-size:14px;font-weight:300;line-height:21px;letter-spacing:-.01em;margin-bottom:10px;white-space:nowrap}
.he-eng{font:700 26px/29px 'Bodoni Moda','Didot',var(--serif);letter-spacing:-.001em;white-space:nowrap}
.he-pane{position:absolute;inset:0;z-index:4;display:flex;padding:80px max(24px,calc((100% - 1040px)/2));color:#fff;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .45s ease,visibility 0s .45s}
.he-pane.on{visibility:visible;opacity:1;transition:opacity .7s ease .4s,visibility 0s}
.he-slide .bgimg{transform:scale(1.12)}
.he-slide.on .bgimg{animation:heZoom 7.5s cubic-bezier(.22,.6,.2,1) forwards}
@keyframes heZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.he-pane a{pointer-events:auto}
.he-line{position:absolute;z-index:4;left:max(24px,calc((100% - 1040px)/2));right:max(24px,calc((100% - 1040px)/2));top:240px;height:1px;background:rgba(255,255,255,.2);pointer-events:none}
.he-brandlink{position:absolute;z-index:3;right:max(24px,calc((100% - 1040px)/2));top:186px;font-size:14px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:6px}
.he-brandlink span{font-weight:300;color:rgba(255,255,255,.85)}
.he-brandlink svg,.he-pill svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4}
.he-frac{position:absolute;z-index:8;top:30px;right:max(24px,calc((100% - 1040px)/2));background:rgba(0,0,0,.3);color:#fff;font-size:11px;font-weight:300;line-height:15px;padding:5px 10px;border-radius:25px}
.he-arrow{position:absolute;z-index:8;top:50%;width:34px;height:64px;margin-top:-32px;display:grid;place-items:center;opacity:.75;transition:opacity .2s}
.he-arrow:hover{opacity:1}
.he-arrow svg{width:30px;height:60px;fill:none;stroke:#fff;stroke-width:1}
.he-arrow.prev{left:max(8px,calc((100% - 1040px)/2 - 66px))}
.he-arrow.next{right:max(8px,calc((100% - 1040px)/2 - 66px))}
.he-cont{position:relative;z-index:6;margin-top:-160px;padding:0 max(24px,calc((100% - 1040px)/2))}
.he-tabs{display:flex;overflow-x:auto;scrollbar-width:none;margin-bottom:24px}
.he-tabs button{flex:none;display:block;padding:13px 15px 13px 0;font-size:14px;line-height:21px;font-weight:300;letter-spacing:-.01em;color:rgba(255,255,255,.5);transition:color .2s}
.he-tabs button:hover{color:rgba(255,255,255,.85)}
.he-tabs button.on{color:#fff;font-weight:500}
.he-stripwrap{position:relative}
.he-strip{display:flex;gap:10px;padding:8px 6px 22px;margin:-8px -6px -22px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;cursor:grab}
.he-strip::-webkit-scrollbar,.he-tabs::-webkit-scrollbar{display:none}
.he-item{position:relative;flex:none;width:165px;display:block}
.he-item .he-thumb{position:relative;width:100%;padding-top:100%;background:transparent;overflow:hidden;border-radius:var(--r-img);box-shadow:0 6px 18px rgba(0,0,0,.14);transition:box-shadow .3s,transform .3s}
.he-item:hover .he-thumb{box-shadow:0 10px 24px rgba(0,0,0,.2);transform:translateY(-3px)}
.he-wish{position:absolute;top:10px;right:10px;width:20px;height:20px;z-index:2}
.he-wish svg{width:20px;height:20px;fill:#cfcfcf;stroke:none;transition:.2s}
.he-wish:hover svg{fill:#9a9a9a}
.he-wish.is-active svg{fill:#c0392b}
.he-snext,.he-sprev{position:absolute;z-index:5;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.22);display:grid;place-items:center;transition:opacity .2s}
.he-snext{right:-14px}.he-sprev{left:-14px;opacity:0;pointer-events:none}
.he-sprev.show{opacity:1;pointer-events:auto}
.he-snext.hide{opacity:0;pointer-events:none}
.he-snext svg,.he-sprev svg{width:10px;height:10px;fill:none;stroke:#333;stroke-width:1.6}
.he-pill{display:none;align-items:center;justify-content:center;border:1px solid #012e29;border-radius:30px;height:44px;padding:0 24px;font-size:14px;font-weight:500;color:#012e29;width:max-content;margin:40px auto 0}
.he-pill span{font-weight:300;color:#666}
.he-pill svg{margin-left:6px}
.he-pill b{font-weight:500;margin-right:.28em}
@media(max-width:1219px){   /* 모바일·태블릿: 구구스 모바일 수치 (배너 500px, 제목은 아래쪽 고정, 선은 탭 위쪽 선) */
  .he{height:auto;padding-bottom:0}
  .he-swiper{height:500px}
  .he-slide{padding:0}
  .he-pane{padding:0 20px 163px;align-items:flex-end}
  .he-brandlink{display:none}
  .he-frac{top:20px;right:20px}
  .he-line{top:368px;left:20px;right:0}
  .he-cont{margin-top:-132px;padding:0 20px;text-align:center}
  .he-tabs{justify-content:flex-start;margin-bottom:4px}
  .he-tabs button{padding:20px 15px 20px 0}
  .he-strip{gap:4px}
  .he-item{width:100px}
  .he-item .he-thumb{border-radius:var(--r-img)}
  .he-pill{display:flex}
  .he-arrow{display:none}
}
@media(max-width:720px){
  .he-snext,.he-sprev{display:none}
}

/* reduced motion: keep gentle opacity fades, drop the zoom/movement */
@media(prefers-reduced-motion:reduce){.he-slide.on .bgimg{animation:none;transform:none}.he-item:hover .he-thumb{transform:none}.he-item:hover .he-img{transform:none}}
/* 글자 가독성: 기획 배너와 같은 이중 그림자 + 더 진한 하단 어두운 막 (어떤 사진 위에서도 또렷하게) */
.he-stext,.he-eng,.he-ctitle .he-thumb span,.he-brandlink,.he-tabs button{text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.7)}
.he-tabs button{color:rgba(255,255,255,.9)}
.he-photo::after{top:0;height:100%;background:linear-gradient(rgba(0,0,0,0) 12%,rgba(0,0,0,.28) 42%,rgba(0,0,0,.72) 100%);opacity:.9}
.he-ctitle .he-thumb img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}   /* 관리자가 올린 로고(PNG)는 원 안에 비율 그대로 */