/* BASIC css start */
/* =====================================================================
  [붙여넣는 곳] 상단 편집기 상단의 "CSS" 탭 (header,1,css)
  [내용]       NOMADE 헤더 + 모바일 햄버거 메뉴 전용 CSS
  [주의]       이 내용만 CSS 탭에 붙여넣고 저장하세요. (HTML은 디자인 편집 탭)
===================================================================== */

@import url("https://cdn1-aka.makeshop.co.kr/css/xeicon-2.3.3/xeicon.min.css");

/* 헤더 검색창 */
.h-search{display:flex;align-items:center;border:1px solid #E8DDD0;border-radius:30px;background:#fff;padding:4px 6px 4px 14px;}
.h-search input{border:none;outline:none;font-family:inherit;font-size:13px;width:130px;background:transparent;color:#1A1F1B;}
.h-search .h-search-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#1A1F1B;color:#fff;font-size:14px;}
.h-search .h-search-btn:hover{background:#C7613C;}

.header-inner{position:relative;}

/* 메가메뉴: 메뉴 시작점(왼쪽)에 맞춰 펼침 (왼쪽 넘침 방지) */
.has-mega .mega{left:0;transform:none;}

/* 아이콘 숫자 배지 (장바구니 수량) */
/* ↓ 공통 .nav-right a 의 padding(16px) 제거 → 박스를 아이콘에 딱 맞춤 */
.nav-right .icons a{position:relative;display:inline-flex;align-items:center;padding:0;}
.icons a{position:relative;display:inline-flex;align-items:center;}
.icons .ico-num{position:absolute;top:-2px;right:-3px;min-width:15px;height:15px;padding:0 3px;background:#C7613C;color:#fff;font-size:9.5px;font-weight:700;line-height:15px;border-radius:8px;text-align:center;box-sizing:border-box;}

/* 커스텀 툴팁 (호버 즉시 표시) */
.icons a[data-tip]::after{
  content:attr(data-tip);
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);
  background:#1A1F1B;color:#fff;font-size:11px;letter-spacing:.5px;font-weight:400;
  padding:5px 11px;border-radius:4px;white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;z-index:400;
}
.icons a[data-tip]::before{
  content:'';position:absolute;top:calc(100% - 5px);left:50%;transform:translateX(-50%) translateY(4px);
  border:5px solid transparent;border-bottom-color:#1A1F1B;
  opacity:0;visibility:hidden;transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;z-index:400;
}
.icons a[data-tip]:hover::after,
.icons a[data-tip]:hover::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* 햄버거 버튼 (a 링크, 기본 숨김) */
.m-menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:44px;cursor:pointer;position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:5;}
.m-menu-btn span{display:block;width:24px;height:2px;background:#1A1F1B;}

/* 드로어 + 오버레이 (target 방식) */
.m-drawer{position:fixed;top:0;left:0;width:300px;max-width:84%;height:100%;background:#fff;z-index:301;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto;box-shadow:2px 0 20px rgba(0,0,0,.12);}
.m-drawer:target{transform:translateX(0);}
.m-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.3s;z-index:300;}
.m-drawer:target ~ .m-ov{opacity:1;visibility:visible;}
.m-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #E8DDD0;}
.m-drawer-head .ttl{font-family:'Cormorant Garamond',serif;letter-spacing:3px;font-size:17px;color:#1A1F1B;}
.m-drawer-head .m-logo{height:22px;width:auto;display:block;}
.m-drawer-head .m-close{font-size:22px;line-height:1;color:#1A1F1B;cursor:pointer;}
.m-drawer-body{padding:6px 0 50px;}
.m-sec{padding:16px 20px;border-bottom:1px solid #F1EBE1;}
.m-sec h6{font-size:12px;letter-spacing:3px;color:#C7613C;margin-bottom:10px;text-transform:uppercase;font-weight:700;}
.m-sec.garden h6{color:#2A3F2D;}
.m-sec a{display:block;padding:8px 0;font-size:14px;color:#1A1F1B;}
.m-sec a:hover{color:#C7613C;}
.m-util{display:flex;flex-wrap:wrap;gap:8px 16px;}
.m-util a{padding:6px 0;font-size:13px;color:#5A5F58;}
.m-util a.bt{background:#2A3F2D;color:#fff;padding:8px 16px;border-radius:2px;}

@media (max-width:980px){
  /* 헤더를 블록 레이아웃으로: 1행(햄버거/로고/장바구니) + 2행(검색창) */
  header .header-inner{display:block;position:relative;padding:14px 16px;}
  .nav-left{display:none;}
  /* 햄버거: 왼쪽 */
  .m-menu-btn{display:flex;position:absolute;left:16px;top:13px;transform:none;height:auto;}
  /* 로고: 가운데 */
  .logo{position:absolute;left:50%;top:10px;transform:translateX(-50%);}
  .logo img{height:26px;}
  /* 오른쪽 아이콘: 관심상품(하트) + 장바구니 표시, B2B만 숨김 */
  .nav-right{display:block;}
  .nav-right .b2b{display:none;}
  .nav-right .icons{position:absolute;right:16px;top:13px;margin:0;gap:14px;}
  /* 검색창: 아래 한 줄 전체폭 */
  .nav-right .h-search{display:flex;width:100%;margin-top:46px;}
  .nav-right .h-search input{flex:1;width:auto;}
  /* 상단바 정리 */
  .top-bar .inner{justify-content:flex-end;padding:8px 14px;}
  .top-bar .inner > span{display:none;}
  .top-bar a{margin-left:12px;font-size:11px;}
}

/* BASIC css end */