/* =====================================================================
   밸롭(ballop) 자사몰 리뉴얼 — 전역 디자인 시스템 + 공통(헤더/푸터/컴포넌트)
   - 브랜드 토큰은 기존 _kd/css/renewal.css 계승 (accent blue #1a55e5)
   - 레퍼런스 DNA: 아키클래식/젝시믹스/시선EBM (무채색 베이스 + 포인트 1색)
   - 이 파일은 모든 페이지 공통. 페이지별 CSS는 main/list/detail.css 참고
   ===================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;letter-spacing:-0.02em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{list-style:none;}
input,select{font:inherit;color:inherit;}
svg{display:block;}

/* ---------- Design tokens ---------- */
:root{
  --accent:#1a55e5;        /* 밸롭 브랜드 블루 */
  --accent-dark:#1444c4;
  --accent-soft:#eef3ff;
  --ink:#15171a;           /* 기본 텍스트 */
  --muted:#6b7078;         /* 보조 텍스트 */
  --sub:#9aa0a8;           /* 약한 텍스트 */
  --line:#e8e9ec;          /* 구분선 */
  --line-strong:#d4d6da;
  --soft:#f5f6f8;          /* 연한 배경 */
  --soft-2:#fafbfc;
  --sale:#ff2d2d;          /* 세일 강조 */
  --bg:#ffffff;
  --ink-rgb:21,23,26;

  --maxw:1680px;           /* 콘텐츠 최대폭 */
  --pad:max(20px,4vw);     /* 좌우 여백 */
  --radius:8px;
  --radius-lg:16px;
  --ease:cubic-bezier(.4,.9,.3,1);
  --shadow:0 4px 24px rgba(21,23,26,.07);
  --shadow-lg:0 12px 40px rgba(21,23,26,.12);

  --h-benefit:38px;        /* 혜택 띠배너 높이 */
  --h-nav:74px;            /* 메인 네비 높이 */
}

/* ---------- Layout helpers ---------- */
.inner{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.section{padding-block:clamp(48px,7vw,96px);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* 섹션 헤딩 */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,3vw,40px);}
.sec-head .tt{font-size:clamp(24px,2.9vw,40px);font-weight:900;letter-spacing:-0.045em;line-height:1.05;}
.sec-head .tt em{font-style:normal;color:var(--accent);}
.sec-head .desc{margin-top:10px;font-size:14px;color:var(--muted);}
/* 브랜드 컬러 키커(작은 라벨) — 헤딩 위 액센트 */
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;letter-spacing:0.06em;
  color:var(--accent);text-transform:uppercase;margin-bottom:12px;}
.kicker::before{content:"";width:18px;height:2px;background:var(--accent);}
.sec-head.center{justify-content:center;text-align:center;flex-direction:column;align-items:center;}
.sec-head.center .kicker::after{content:"";width:18px;height:2px;background:var(--accent);}

/* 플로팅 멤버십 팝업 */
.popup-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(21,23,26,.5);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;}
.popup-overlay.on{opacity:1;visibility:visible;}
.popup{width:min(380px,92vw);background:#fff;border-radius:16px;overflow:hidden;position:relative;
  transform:translateY(14px) scale(.98);transition:transform .3s var(--ease);box-shadow:0 24px 64px rgba(0,0,0,.32);}
.popup-overlay.on .popup{transform:none;}
.popup-close{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.88);backdrop-filter:blur(4px);font-size:19px;line-height:1;color:var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.popup-img{display:block;height:clamp(280px,44vh,420px);overflow:hidden;}
.popup-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
.popup-body{padding:20px 22px 4px;}
.popup-body .pk{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--accent);}
.popup-body h3{font-size:19px;font-weight:800;letter-spacing:-0.03em;margin-top:8px;}
.pbenefits{margin:14px 0 16px;display:flex;flex-direction:column;gap:9px;}
.pbenefits li{font-size:13.5px;color:var(--muted);padding-left:20px;position:relative;line-height:1.4;}
.pbenefits li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800;}
.pbenefits b{color:var(--ink);font-weight:700;}
.popup-body .btn-block{margin-bottom:4px;}
.popup-foot{display:flex;border-top:1px solid var(--line);}
.popup-foot button{flex:1;padding:13px;font-size:13px;color:var(--muted);font-weight:600;transition:all .15s var(--ease);}
.popup-foot button:hover{color:var(--ink);background:var(--soft);}
.popup-foot .popup-today{border-right:1px solid var(--line);}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(10px);
  background:rgba(21,23,26,.92);color:#fff;padding:12px 22px;border-radius:999px;
  font-size:13.5px;font-weight:600;opacity:0;visibility:hidden;transition:all .25s var(--ease);z-index:200;}
.toast.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* 마퀴(움직이는 키워드 띠) */
.marquee{background:var(--accent);color:#fff;overflow:hidden;}
.marquee .track{display:flex;align-items:center;gap:46px;width:max-content;padding-block:13px;
  animation:marq 28s linear infinite;}
.marquee .it{display:inline-flex;align-items:center;gap:46px;font-size:14px;font-weight:800;letter-spacing:0.02em;white-space:nowrap;}
.marquee .it::after{content:"✦";opacity:.7;}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none;}}
.sec-head .more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--muted);
  transition:color .2s var(--ease);white-space:nowrap;}
.sec-head .more:hover{color:var(--ink);}
.sec-head .more svg{width:14px;height:14px;}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 30px;
  font-size:15px;font-weight:700;border-radius:var(--radius);transition:all .2s var(--ease);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#000;}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong);}
.btn-line:hover{border-color:var(--ink);}
.btn-block{width:100%;}

/* =====================================================================
   HEADER  — 혜택 띠배너 + 메인 네비(센터 로고 좌측 메뉴/우측 유틸) + 검색
   <!-- CAFE24 CONVERT: 이 헤더 전체는 업로드 시 /mheader.html + @import 로 분리.
        로고/카테고리/유틸 링크는 카페24 모듈(Layout_LogoTop, ProductCategory 등)로 교체 -->
   ===================================================================== */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);}

/* 1) 혜택 띠배너 */
.benefit-bar{background:var(--ink);color:#fff;}
.benefit-bar .inner{display:flex;align-items:center;justify-content:center;gap:36px;height:var(--h-benefit);}
.benefit-bar .bi{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;letter-spacing:-0.01em;color:#e9eaee;}
.benefit-bar .bi strong{color:#fff;font-weight:700;}
.benefit-bar .bi .dot{width:3px;height:3px;border-radius:50%;background:var(--accent);}
@media(max-width:900px){.benefit-bar .bi:nth-child(n+3){display:none;}}

/* 2) 메인 네비 */
.nav-row{position:relative;}
.nav-row .inner{display:flex;align-items:center;height:var(--h-nav);gap:28px;}
.logo{flex-shrink:0;display:flex;align-items:center;}
.logo img{height:26px;width:auto;display:block;}
.gnb{display:flex;align-items:center;gap:4px;height:100%;}
.gnb > li{height:100%;}
.gnb > li > a{display:flex;align-items:center;height:100%;padding:0 16px;font-size:16px;font-weight:600;
  letter-spacing:-0.03em;position:relative;transition:color .2s var(--ease);}
.gnb > li > a::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:center;transition:transform .25s var(--ease);}
.gnb > li:hover > a,.gnb > li.on > a{color:var(--accent);}
.gnb > li:hover > a::after{transform:scaleX(1);}
.gnb > li.is-sale > a{color:var(--sale);font-weight:700;}
.gnb > li.is-new > a{color:var(--accent);font-weight:700;}

/* 풀폭 메가메뉴 — 헤더 아래 가로 전체로 펼쳐짐 (.nav-row 기준 left:0/right:0) */
.gnb .mega{position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 24px 44px rgba(21,23,26,.1);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:50;}
/* 호버 끊김 방지: 메뉴와 패널 사이 투명 브릿지 */
.gnb .mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.gnb > li:hover .mega{opacity:1;visibility:visible;transform:translateY(0);}
/* 내부 콘텐츠는 .inner(중앙 정렬 컨테이너) 안에서 좌측 컬럼 + 우측 피처 */
/* 컨테이너 속성을 직접 부여 (.inner 클래스를 쓰면 .nav-row .inner 규칙에 걸려 높이가 깨짐) */
.mega-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:56px;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding:38px var(--pad) 46px;}
.mega-cols{display:flex;gap:72px;}
.mega .mcol h4{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:18px;letter-spacing:-0.01em;}
.mega .mcol a{display:block;font-size:14.5px;color:var(--muted);padding:8px 0;transition:color .15s var(--ease),transform .15s var(--ease);}
.mega .mcol a:hover{color:var(--accent);transform:translateX(3px);}
/* 우측 피처 이미지 카드 */
/* align-self:stretch 로 컬럼 높이에 맞춤 (aspect-ratio 는 flex 컨테이너 높이를 붕괴시켜 사용 금지) */
.mega-feat{position:relative;align-self:stretch;width:min(440px,40%);min-height:230px;border-radius:14px;overflow:hidden;flex-shrink:0;}
.mega-feat img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease);}
.mega-feat:hover img{transform:scale(1.05);}
.mega-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 58%);}
.mega-feat .mf-cap{position:absolute;left:24px;bottom:22px;z-index:2;color:#fff;}
.mega-feat .mf-cap .k{display:block;font-size:12px;font-weight:700;opacity:.92;letter-spacing:.04em;margin-bottom:7px;}
.mega-feat .mf-cap .t{display:block;font-size:21px;font-weight:800;letter-spacing:-0.03em;}
.mega-feat .mf-cap .d{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:600;color:#fff;}

.util{display:flex;align-items:center;gap:18px;margin-left:auto;flex-shrink:0;}
.util button,.util a{position:relative;display:flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--ink);}
.util svg{width:22px;height:22px;}
.util .badge{position:absolute;top:-5px;right:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* 3) 검색 오버레이 */
.search-panel{display:none;border-top:1px solid var(--line);background:#fff;}
.search-panel.open{display:block;}
.search-panel .inner{padding-block:18px;}
.search-box{display:flex;align-items:center;gap:12px;height:56px;border:2px solid var(--ink);border-radius:999px;padding:0 22px;}
.search-box input{flex:1;border:0;height:100%;font-size:16px;background:transparent;outline:none;}
.search-box svg{width:22px;height:22px;color:var(--ink);}
.search-keys{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.search-keys a{font-size:13px;color:var(--muted);padding:7px 14px;border:1px solid var(--line);border-radius:999px;transition:all .15s var(--ease);}
.search-keys a:hover{border-color:var(--ink);color:var(--ink);}

/* 모바일 햄버거 (기본 숨김) */
.hamburger{display:none;}

/* =====================================================================
   PRODUCT CARD  — 공통 상품 카드 (메인/목록 공용)
   <!-- CAFE24 CONVERT: .prod-card 한 장 = 상품 모듈 1 iteration.
        이 마크업을 <div module="product_listmore"> 루프 안에 넣고
        썸네일→{$image_medium}, 이름→{$name}, 가격→{$price}/{$product_price} 로 치환 -->
   ===================================================================== */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px;}
.prod-card{position:relative;}
.prod-card .thumb{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--soft);aspect-ratio:1/1;}
.prod-card .thumb img{width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease);}
/* 호버 시 실제 대체컷으로 부드럽게 크로스페이드 (alt 없으면 base 유지) */
.prod-card .thumb img.alt{position:absolute;inset:0;opacity:0;}
.prod-card:hover .thumb img.base{opacity:0;}
.prod-card:hover .thumb img.alt{opacity:1;}
/* 제품 모션 썸네일(영상) */
.prod-card .thumb video.base{width:100%;height:100%;object-fit:cover;display:block;}
.prod-card .motion-badge{position:absolute;right:10px;bottom:10px;z-index:3;font-size:10px;font-weight:700;
  color:#fff;background:rgba(21,23,26,.62);backdrop-filter:blur(4px);padding:4px 9px;border-radius:999px;letter-spacing:.04em;}
.prod-card .rank{position:absolute;top:10px;left:10px;z-index:4;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;}
/* 찜: 상시 노출, 절제된 톤 (팝업 X) */
.prod-card .wish{position:absolute;top:10px;right:10px;z-index:4;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(21,23,26,.1);
  display:flex;align-items:center;justify-content:center;transition:transform .18s var(--ease),background .18s var(--ease);}
.prod-card .wish:hover{transform:scale(1.1);background:#fff;}
.prod-card .wish svg{width:18px;height:18px;color:var(--ink);}
.prod-card .wish.on svg{color:var(--sale);fill:var(--sale);}
.prod-card .flags{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;gap:5px;}
.prod-card .flag{font-size:11px;font-weight:700;padding:4px 8px;border-radius:4px;color:#fff;letter-spacing:-0.02em;}
.flag.new{background:var(--accent);}
.flag.best{background:var(--ink);}
.flag.sale{background:var(--sale);}
.flag.guarantee{background:var(--accent);display:inline-flex;align-items:center;gap:3px;}
.flag.guarantee svg{width:11px;height:11px;}

.prod-card .info{padding:14px 2px 0;}
.prod-card .brand{font-size:12px;font-weight:700;color:var(--sub);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.02em;}
.prod-card .name{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.prod-card .pdesc{margin-top:5px;font-size:12.5px;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.prod-card .price{display:flex;align-items:baseline;gap:8px;margin-top:9px;flex-wrap:wrap;}
.prod-card .price .rate{font-size:17px;font-weight:800;color:var(--sale);}
.prod-card .price .now{font-size:17px;font-weight:800;color:var(--ink);}
.prod-card .price .was{font-size:13px;color:var(--sub);text-decoration:line-through;}
/* 멤버십 8% 적용 최저가보장가 */
.prod-card .mem-price{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 9px;border-radius:6px;
  background:var(--accent-soft);font-size:12px;font-weight:600;color:var(--accent);}
.prod-card .mem-price svg{width:12px;height:12px;flex-shrink:0;}
.prod-card .mem-price b{font-size:13px;font-weight:800;}
.prod-card .mem-price .mp-tag{font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--accent);
  padding:2px 6px;border-radius:4px;}
.prod-card .colors{display:flex;gap:5px;margin-top:11px;}
.prod-card .colors i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.12);}
.prod-card .meta{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:12px;color:var(--muted);}
.prod-card .meta .star{color:#ffb300;}

/* =====================================================================
   FOOTER
   <!-- CAFE24 CONVERT: 업로드 시 /layout/.../footer 로 분리, 사업자정보는
        {$company_*} 치환변수 / Layout_FooterCompanyInfo 모듈로 교체 -->
   ===================================================================== */
.site-footer{background:var(--soft-2);border-top:1px solid var(--line);margin-top:40px;}
.footer-cta{border-bottom:1px solid var(--line);}
.footer-cta .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:36px;flex-wrap:wrap;}
.footer-cta .ct-tt{font-size:22px;font-weight:800;letter-spacing:-0.04em;}
.footer-cta .ct-tt span{color:var(--accent);}
.footer-cta .sns{display:flex;gap:12px;}
.footer-cta .sns a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);}
.footer-cta .sns a:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.footer-cta .sns svg{width:20px;height:20px;}

.footer-main .inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-block:50px;}
.footer-main h5{font-size:14px;font-weight:800;margin-bottom:16px;}
.footer-main a,.footer-main li{font-size:13px;color:var(--muted);line-height:2;}
.footer-main a:hover{color:var(--ink);}
.footer-cs .tel{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;margin-bottom:6px;}
.footer-cs .hours{font-size:12.5px;color:var(--muted);line-height:1.7;}
.footer-cs .kakao{margin-top:14px;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 18px;
  background:#fae100;color:#3a1d1d;border-radius:var(--radius);font-size:13px;font-weight:700;white-space:nowrap;}
.footer-cs .kakao svg{width:18px;height:18px;flex-shrink:0;}

.footer-info{border-top:1px solid var(--line);}
.footer-info .inner{padding-block:26px 60px;}
.footer-info .biz{font-size:12px;color:var(--sub);line-height:1.9;}
.footer-info .biz b{color:var(--muted);font-weight:600;}
.footer-info .copy{margin-top:14px;font-size:12px;color:var(--sub);font-weight:600;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1280px){
  .prod-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:980px){
  :root{--h-nav:62px;}
  .gnb,.search-panel,.mega{display:none;}
  .hamburger{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;}
  .hamburger svg{width:26px;height:26px;}
  .nav-row .inner{gap:8px;}
  /* 로고: 절대정렬 대신 flex 중앙 (겹침 방지) */
  .logo{flex:1;justify-content:center;margin:0;position:static;transform:none;}
  .logo img{height:23px;}
  .util{gap:16px;margin-left:0;flex-shrink:0;}
  /* 모바일에선 찜/마이 아이콘 숨김(햄버거 메뉴로 접근) → 검색+장바구니만 노출 */
  .util > *:nth-child(2),.util > *:nth-child(3){display:none;}
  .footer-main .inner{grid-template-columns:1fr 1fr;gap:30px;}
}
@media(max-width:680px){
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:10px 12px;}
  .prod-card .name{font-size:13.5px;}
  .prod-card .price .rate,.prod-card .price .now{font-size:15px;}
  .footer-main .inner{grid-template-columns:1fr 1fr;}
  .footer-cta .inner{flex-direction:column;align-items:flex-start;}
}