/* =====================================================================
   곤지암렌탈샵 브라더스 · 홈 리디자인 v4
   - gonjiam_main.css 다음에 불러옵니다. 기존 색·글꼴 변수를 새 팔레트로 바꾸고, 새 영역(gv-*)만 추가합니다.
   - 예약·견적 게시판, 통합요금 연동, 채널톡에는 영향을 주지 않는 겉모습 전용 파일입니다.
   - 팔레트: 의류 사진의 라일락·핑크·민트·샴페인을 채도를 낮춰 사용, 포인트는 장비의 연두(#c9f23a) — 버튼·태그·밑줄 전용
   ===================================================================== */
.lpm{
  --lime:#c9f23a; --ink:#10151c;
  --i:#10151c; --i2:#1c232d; --iv:#faf8fb; --oat:#f2f0f5; --sand:#e4e0ea; --ln:#ddd8e4; --lnd:rgba(228,224,234,.16);
  --tp:#6b6577; --st:#4a4556; --cm:#6b5aa0; --cmd:#54458a; --cml:#e4dcf2;
  --lilac:#e8e3ef; --blush:#f2e7e2; --mint:#e0e9e3; --butter:#efe6cf; --sky:#e1e8f0;
  --serif:'Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --it:'Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --sans:'Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-family:var(--sans);
}

/* ---------- 공통 : 이탈리아어 장식 숨김(남은 곳 안전망) · 제목 굵기 · 버튼 ---------- */
.lpm .k{display:none !important}
.lpm .rule{display:none}
.lpm-hd{grid-template-columns:1fr;gap:0;margin-bottom:40px}
.lpm-hd .no{display:none}
.lpm-hd h2,.lpm-sc h2,.lpm-vis h2,.lpm-band h2,.lpm-faq h2{font-weight:800;letter-spacing:-.04em}
.lpm blockquote{font-weight:800;letter-spacing:-.04em}
.lpm-white{background:#fbfafc}
.lpm-btn{border-radius:8px;letter-spacing:0;font-weight:700}
.lpm-btn.m{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.lpm-btn.m:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.lpm-btn.g{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.lpm-btn.g:hover{background:#fff;color:var(--ink);border-color:#fff}
.lpm-btn i{font-family:inherit}
.lpm-link{border-bottom-color:var(--lime);border-bottom-width:2px}

/* 상단 메뉴 위의 이탈리아어 작은 글씨 제거 (gonjiam_chrome.css 의 ::before 라벨) */
html body #header #mainNav > li > a::before{content:none !important;display:none !important}

/* ---------- 새 영역 공통 ---------- */
.gv-w{max-width:1240px;margin:0 auto;padding:0 40px}
.gv-tag{display:inline-block;align-self:flex-start;background:var(--ink);color:#fff;font-size:12px;font-weight:800;line-height:1;padding:7px 11px 7px 9px;border-radius:2px}
.gv-tag:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:7px;vertical-align:1px}
.lpm mark{background:linear-gradient(transparent 62%,var(--lime) 62%);color:inherit;padding:0 3px}

/* ---------- 히어로 ---------- */
.gv-hero{position:relative;min-height:560px;overflow:hidden;background:linear-gradient(120deg,#ece8f3 0%,#f3e9e4 55%,#e1e8f0 100%)}
.gv-media{position:absolute;top:0;right:0;bottom:0;width:min(56%,1080px);z-index:1;background:#0a0d12;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 14%,rgba(0,0,0,.85) 30%,#000 44%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 14%,rgba(0,0,0,.85) 30%,#000 44%);
  animation:gvReveal .9s cubic-bezier(.2,.7,.2,1) both}
.gv-s{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0}
.gv-s:first-child{opacity:1}
.gv-s:nth-child(1){object-position:50% 38%}
.gv-s:nth-child(2){object-position:50% 52%}
.gv-s:nth-child(3){object-position:50% 58%}
.gv-s:nth-child(4){object-position:50% 45%}
.gv-s:nth-child(5){object-position:50% 50%}
.gv-fade{display:none}
@keyframes gvReveal{from{opacity:.45;transform:scale(1.04)}to{opacity:1;transform:none}}
/* 5장 · 장당 6초 · 한 바퀴 30초 · 겹치며 전환 (JS가 사진을 모두 불러온 뒤 .run 을 붙입니다) */
.gv-media.run .gv-s{animation:gvSlide 30s linear infinite}
.gv-media.run .gv-s:nth-child(1){animation-delay:-1.2s}
.gv-media.run .gv-s:nth-child(2){animation-delay:4.8s}
.gv-media.run .gv-s:nth-child(3){animation-delay:10.8s}
.gv-media.run .gv-s:nth-child(4){animation-delay:16.8s}
.gv-media.run .gv-s:nth-child(5){animation-delay:22.8s}
@keyframes gvSlide{0%{opacity:0;transform:scale(1.035)}4%{opacity:1}20%{opacity:1}24%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.gv-dots{position:absolute;right:26px;top:22px;z-index:5;display:flex;gap:6px}
.gv-dots b{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.5)}
.gv-dots.run b{animation:gvDot 30s linear infinite}
.gv-dots.run b:nth-child(1){animation-delay:-1.2s}.gv-dots.run b:nth-child(2){animation-delay:4.8s}.gv-dots.run b:nth-child(3){animation-delay:10.8s}.gv-dots.run b:nth-child(4){animation-delay:16.8s}.gv-dots.run b:nth-child(5){animation-delay:22.8s}
@keyframes gvDot{0%{background:rgba(255,255,255,.5)}4%{background:var(--lime)}20%{background:var(--lime)}24%{background:rgba(255,255,255,.5)}100%{background:rgba(255,255,255,.5)}}
.gv-dots:not(.run) b:first-child{background:var(--lime)}

/* 눈 내리는 효과 */
.gv-snow{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.gv-snow i{position:absolute;top:-12px;border-radius:50%;background:#fff;animation:gvFall linear infinite}
@keyframes gvFall{0%{transform:translate3d(0,-12px,0)}50%{transform:translate3d(14px,50%,0)}100%{transform:translate3d(-8px,var(--h,560px),0)}}

.gv-copy{position:relative;z-index:4;width:48%;min-height:560px;box-sizing:border-box;padding:56px 36px 80px max(40px,calc((100vw - 1240px)/2 + 40px));display:flex;flex-direction:column;justify-content:center}
.gv-copy h1{font-size:56px;line-height:1.1;font-weight:800;letter-spacing:-.05em;margin:14px 0 14px;color:var(--ink)}
.gv-copy h1 .kw{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--st);margin-bottom:10px}
.gv-copy .lead{font-size:17px;line-height:1.6;color:var(--st);max-width:36ch;margin:0}
.gv-copy .kw2{font-size:13px;color:var(--tp);margin:8px 0 0;font-weight:600}
.gv-lineup{margin:18px 0 0;border-top:2px solid var(--ink);max-width:min(380px,34vw)}
.gv-lineup li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--ln)}
.gv-lineup b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.gv-lineup span{margin-left:auto;font-size:13px;color:var(--st);font-weight:600}
.gv-note{font-size:12.5px;color:var(--tp);font-weight:700;margin:8px 0 0}
.gv-cta{display:flex;gap:10px;margin-top:18px}
.gv-cta .lpm-btn{flex:0 0 auto;min-width:150px;height:52px}

/* 브랜드 이름 띠 */
.gv-tick{overflow:hidden;background:var(--ink);color:#fff;padding:13px 0;font-size:12.5px;font-weight:700;letter-spacing:.2em}
.gv-tk{display:flex;width:max-content;will-change:transform;animation:gvTk 60s linear infinite}
.gv-tk span{white-space:nowrap;flex:none}
.gv-tick i{font-style:normal;color:var(--lime);margin:0 14px}
@keyframes gvTk{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* 가치 문구 · 제품 타일 · 숫자 · 가견적 안내 */
.gv-sec{background:var(--oat);padding:72px 0 80px}
.gv-value{background:linear-gradient(90deg,#e8e3ef,#f2e7e2 60%,#e1e8f0);border-radius:10px;padding:34px 24px;text-align:center}
.gv-kicker{font-size:13px;font-weight:800;color:var(--tp);margin:0 0 10px}
.gv-value h2{font-size:30px;line-height:1.45;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.gv-value h2 b{font-size:40px;font-weight:900;letter-spacing:-.05em}
.gv-head{margin:48px 0 20px}
.gv-head h2{font-size:34px;line-height:1.25;font-weight:900;letter-spacing:-.04em}
.gv-head p{margin:8px 0 0;font-size:15px;color:var(--tp)}
.gv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.gv-t{position:relative;display:block;height:320px;border-radius:10px;overflow:hidden;background:#fff}
.gv-t img{position:absolute;left:0;width:100%;height:auto;max-height:none;object-fit:contain;mix-blend-mode:multiply;top:14px;bottom:56px;height:calc(100% - 70px)}
.gv-t-nitro{background:#e4dcee}
.gv-t-elan{background:#e6edc9}
.gv-t-step{background:#d9e6de}
.gv-t-boa{background:#dbe4ee}
.gv-t-nitro img{top:30px;bottom:64px;height:calc(100% - 94px)}
.gv-t-wear img{mix-blend-mode:normal;top:0;bottom:0;height:100%;object-fit:cover}
.gv-t-wear:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,21,28,.82),rgba(16,21,28,0) 62%)}
.gv-t .nm{position:absolute;left:14px;right:12px;bottom:12px;z-index:2;color:var(--ink);line-height:1.3}
.gv-t .nm b{display:block;font-size:16px;font-weight:900;letter-spacing:.01em}
.gv-t .nm span{font-size:12.5px;font-weight:700;color:var(--tp)}
.gv-t-wear .nm,.gv-t-wear .nm b,.gv-t-wear .nm span{color:#fff}

.gv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.gv-stats div{padding:20px 4px;border-top:1px solid rgba(16,21,28,.28);border-bottom:1px solid rgba(16,21,28,.28)}
.gv-stats b{display:block;font-size:56px;font-weight:300;letter-spacing:-.05em;line-height:1}
.gv-stats b small{font-size:15px;font-weight:700;margin-left:3px;letter-spacing:0}
.gv-stats span{display:block;margin-top:8px;font-size:14px;font-weight:700;color:var(--st)}

.gv-pt{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding:30px 36px;background:#fff;border:2px solid var(--ink);border-radius:10px}
.gv-pt h2{font-size:34px;font-weight:900;letter-spacing:-.04em;line-height:1.25}
.gv-pt .lpm-btn{flex:none;height:56px;padding:0 34px}

/* ---------- 모바일 ---------- */
@media (max-width:900px){
  .gv-w{padding:0 16px}
  .gv-hero{display:flex;flex-direction:column;min-height:0;background:#faf8fb}
  .gv-media{position:relative;width:100%;height:240px;overflow:hidden;background:#faf8fb;-webkit-mask-image:none;mask-image:none;animation:none}
  .gv-fade{display:block;position:absolute;left:0;right:0;bottom:0;height:56px;z-index:2;background:linear-gradient(to bottom,rgba(250,248,251,0),#faf8fb)}
  .gv-dots{left:16px;right:auto;top:222px;bottom:auto}
  .gv-snow{height:240px;bottom:auto}
  .gv-copy{width:auto;min-height:0;padding:18px 16px 28px}
  .gv-copy h1{font-size:36px;margin:8px 0 6px}
  .gv-copy h1 .kw{font-size:13px;margin-bottom:2px}
  .gv-copy .lead{font-size:14.5px;max-width:none}
  .gv-lineup{max-width:none;margin-top:12px}
  .gv-lineup li{padding:7px 0}
  .gv-lineup b{font-size:16.5px}
  .gv-cta{padding-right:68px}
  .gv-cta .lpm-btn{flex:1;min-width:0}
  .gv-tick{padding:10px 0;font-size:11.5px}
  .gv-sec{padding:40px 0 48px}
  .gv-value{padding:22px 18px;text-align:left}
  .gv-value h2{font-size:22px}
  .gv-value h2 b{font-size:29px}
  .gv-head{margin:34px 0 16px}
  .gv-head h2{font-size:26px}
  .gv-grid{grid-template-columns:1fr 1fr;grid-template-rows:300px 150px;gap:6px}
  .gv-t{height:auto}
  .gv-t-nitro{grid-column:1;grid-row:1}
  .gv-t-elan{grid-column:2;grid-row:1}
  .gv-t-step{grid-column:1;grid-row:2}
  .gv-t-boa{grid-column:2;grid-row:2}
  .gv-t-wear{grid-column:1 / span 2;grid-row:auto;height:200px}
  .gv-t-step img,.gv-t-boa img{top:8px;bottom:44px;height:calc(100% - 52px)}
  .gv-t-nitro img{top:26px;bottom:56px;height:calc(100% - 82px)}
  .gv-t-elan img{top:10px;bottom:50px;height:calc(100% - 60px)}
  .gv-stats{gap:12px;margin-top:22px}
  .gv-stats b{font-size:36px}
  .gv-stats b small{font-size:13px}
  .gv-stats span{font-size:11.5px}
  .gv-pt{flex-direction:column;align-items:stretch;gap:16px;padding:22px 16px}
  .gv-pt h2{font-size:27px}
  .gv-pt .lpm-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .gv-media{animation:none}.gv-snow{display:none}
  .gv-media.run .gv-s,.gv-dots.run b{animation:none}
}

/* 소식 · 예약 현황: 세 칸을 같은 너비·같은 줄 높이로 */
.lpm-news{grid-template-columns:repeat(3,minmax(0,1fr))}
.lpm-news > div{padding:30px 30px 14px 0}
.lpm-news > div + div{padding-left:30px}
.lpm-news > div:last-child{padding-right:0}
.lpm-news .hh{align-items:center;min-height:36px;margin-bottom:8px}
.lpm-news .hh h3{font-size:18px;font-weight:800;letter-spacing:-.03em}
.lpm-news .hh a{letter-spacing:.04em}
.lpm-lst a,.lpm-lst .r{min-height:58px;padding:0}
.lpm-lst .d{font-family:inherit;font-size:13.5px;font-variant-numeric:tabular-nums}
.lpm-lst .s{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:2px}
.lpm-lst .nt{letter-spacing:.04em}
.lpm-lst .empty{display:flex;align-items:center;min-height:58px;padding:0}
@media (max-width:900px){.lpm-news > div,.lpm-news > div + div,.lpm-news > div:last-child{padding:26px 0 8px}}

/* 화면 확대·축소에 따라 사진 잘림이 바뀌지 않도록: 사진 영역의 가로세로 비율을 거의 고정(약 1.55:1) */
@media (min-width:901px){
  .gv-hero{--hh:clamp(560px,calc(min(56vw,1080px) / 1.55),700px);min-height:var(--hh)}
  .gv-copy{min-height:var(--hh)}
}

/* 모바일: 소식·예약 현황은 한 칸씩 세로로 (위 3열 규칙이 모바일 1열 규칙을 덮지 않도록) */
@media (max-width:900px){
  .lpm-news{grid-template-columns:1fr}
  .lpm-news > div + div{border-left:0;border-top:1px solid var(--ln)}
  .lpm-news .hh h3{font-size:19px}
}

/* 갤러리 탭 (의류·장비·강습): 크고 누르기 쉬운 버튼형 */
.lpm-tabs{gap:10px;border-bottom:0;margin-bottom:26px;overflow:visible;flex-wrap:wrap}
.lpm-tabs button{flex:none;height:54px;padding:0 28px;border:1.5px solid var(--ln);border-radius:999px;background:#fff;font-size:16px;font-weight:700;color:var(--st);letter-spacing:-.02em;transition:background .2s,color .2s,border-color .2s}
.lpm-tabs button:hover{border-color:var(--ink);color:var(--ink)}
.lpm-tabs button::after{display:none}
.lpm-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:900px){
  .lpm-tabs{flex-wrap:nowrap;gap:8px;overflow:visible}
  .lpm-tabs button{flex:1 1 0;min-width:0;height:52px;padding:0 6px;font-size:15.5px}
}

/* 모바일 요금표: 옆으로 잘리지 않고 화면 폭에 맞게 (리프트권 시간권 · 단품 렌탈 · 강습 요금표) */
@media (max-width:640px){
  html body .lp-table-wrap{overflow:visible !important;border-radius:0}
  html body .lp-table{min-width:0 !important;width:100%;table-layout:fixed}
  html body .lp-table th,html body .lp-table td{padding:12px 3px;font-size:12px}
  html body .lp-table thead th{font-size:12px;letter-spacing:0;padding:10px 2px}
  html body .lp-table thead th small{font-size:10px;line-height:1.3}
  html body .lp-table tbody th{white-space:normal !important;width:27%;font-size:13px;line-height:1.35;padding-left:8px;word-break:keep-all}
  html body .lp-table tbody th small{font-size:10.5px;line-height:1.35}
  html body .lp-table .lp-p b{font-size:15.5px;letter-spacing:-.02em}
  html body .lp-table .lp-p del{font-size:11px}
  html body .lp-table .lp-p em{font-size:10px;letter-spacing:0}
}

/* 태블릿(600~900px): 홈 첫 사진 영역을 조금 더 크게 */
@media (min-width:600px) and (max-width:900px){
  .gv-media{height:340px}
  .gv-snow{height:340px}
  .gv-dots{top:322px}
}