/* ============================================================
 * head_dressup.css — GNB 메뉴 · 검색 영역 드레스업 (2026-07-22)
 * 스코프: .head_menu_wrap 만. style_v2.css 무수정 원칙 준수(이 파일이 뒤에 로드되어
 *   동일 특이도로 덮음). PC(shop) 전용 — commScripts에서 mobile eq 'shop' 일 때만 로드.
 *   레이아웃 박스 높이(49px 행)는 유지 → 메가메뉴 위치·hover 동작 무영향.
 *
 * v1.2.0 (2026-08-06) GNB 탭 재정돈
 *   - 활성 탭 = 딥그린 텍스트 + 딥그린 3px 밑줄(사이트 관례 유지, 글자폭에 정렬)
 *   - 호버 = 딥그린 + 밑줄이 가운데서 부드럽게 펼쳐짐(전환 .22s)
 *   - 타이포 16px / 평상시 600 · 활성 700 (기존 17px/700 → 위계 생성, 14px 하한 준수)
 *   - 여백 리듬 = 탭 사이 42px · "전체 생활재 보기" 뒤 62px + 세로 구분선 → 드로어 트리거 분리
 *   - 햄버거 아이콘 = 딥그린 SVG(스프라이트 대체, 박스 26x19 그대로라 레이아웃 불변)
 *   ※ 행 높이 49px + 하단 1px = 50px 총합 불변 → .header_wrap 169px 유지, 스티키 점프 없음
 * ============================================================ */

/* --- 검색창: 알약형 + 흰 배경 + 연한 테두리, 포커스 시 초록 링 --- */
.head_menu_wrap .search_wrap{ top:4px; }
.head_menu_wrap .search_wrap input{
  width:300px; height:38px; background-color:#fff; border:1.5px solid #E4E9E2;
  border-radius:999px; padding-left:18px; padding-right:42px; font-size:14.5px;
  color:#20291F; box-sizing:border-box; transition:border-color .15s, box-shadow .15s;
}
.head_menu_wrap .search_wrap input::placeholder{ color:rgba(29,39,30,0.38); }
.head_menu_wrap .search_wrap input:focus{
  outline:none; border-color:#3D6041; box-shadow:0 0 0 3px rgba(61,96,65,.12);
}
.head_menu_wrap .search_wrap button{
  top:0; right:6px; height:38px; padding:0 10px;
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
 * GNB 탭 (v1.2.0)
 * ============================================================ */

/* --- 메뉴 바 플레이트: 하단 경계선을 아주 살짝 또렷하게(두께 1px 그대로) --- */
.head_menu_wrap{ border-bottom-color:#E6EBE5; }
/* 스크롤 고정(sticky) 상태에서만 얕은 그림자 → 본문 위에 떠 있음을 표시 */
.header_wrap.move .head_menu_wrap{ box-shadow:0 2px 10px rgba(29,39,30,.07); }

/* --- 여백 리듬: 탭 사이 42px, 드로어 트리거 뒤 62px(그룹 분리) --- */
.head_menu_wrap .menu_list > li:first-child{ margin-right:24px; }
.head_menu_wrap .menu_list > li + li{ margin-left:34px; padding:0 4px; }

/* --- 타이포: 16px, 평상시 semibold / 활성 bold --- */
.head_menu_wrap .menu_list > li > a{
  font-size:16px; font-weight:600; color:#2A352B; letter-spacing:-.02em;
  transition:color .18s ease;
}
.head_menu_wrap .menu_list > li > a:hover{ color:#3D6041; }

/* --- 밑줄 인디케이터: 평상시 접혀 있다가(scaleX 0) 호버·활성 시 펼쳐짐 --- */
.head_menu_wrap .menu_list > li > a:not(.btn_all_menu):after{
  content:''; position:absolute; left:4px; right:4px; bottom:0; width:auto; height:3px;
  background-color:#3D6041; border-radius:2px 2px 0 0;
  transform:scaleX(0); transform-origin:50% 100%; opacity:.4;
  transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.head_menu_wrap .menu_list > li > a:not(.btn_all_menu):hover:after{ transform:scaleX(1); }

/* --- 활성 탭: 딥그린 글자 + 진한 밑줄(가장 마지막에 두어 호버 규칙보다 우선) --- */
.head_menu_wrap .menu_list > li > a.on{ color:#3D6041; font-weight:700; }
.head_menu_wrap .menu_list > li > a.on:after{ transform:scaleX(1); opacity:1; }

/* --- "전체 생활재 보기" (드로어 트리거) : 딥그린 햄버거 + 세로 구분선으로 메뉴군과 분리 --- */
/* (연녹색 pill 배경은 넣지 않음 — 2026-07-22 사용자 피드백 유지) */
.head_menu_wrap .menu_list > li > a.btn_all_menu .icon{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Cg stroke='%233D6041' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M1.2 2h17.6'/%3E%3Cpath d='M1.2 7h17.6'/%3E%3Cpath d='M1.2 12h17.6'/%3E%3C/g%3E%3C/svg%3E");
  background-position:50% 50%; background-size:20px 14px; background-repeat:no-repeat;
  margin-right:10px;
}
.head_menu_wrap .menu_list > li.li_btn_all_menu:after{
  content:''; position:absolute; right:-31px; top:50%; margin-top:-8px;
  width:1px; height:16px; background-color:#DCE3DA;
}

/* --- 키보드 접근성: 마우스 사용 시엔 보이지 않고 탭 이동 시에만 초록 링 --- */
.head_menu_wrap .menu_list > li > a:focus-visible{
  outline:2px solid #3D6041; outline-offset:-4px; border-radius:4px;
}