@charset "utf-8";
/* ============================================================================
 * header_clean.css — 상단 헤더(PC·모바일) 정돈  v1.2.3 (2026-09-05)
 *   v1.2.3 : 모바일 우측 액션(배송일·장바구니) 자립 우측정렬(margin-left:auto). gnb_page.css 를 안 쓰는
 *            페이지(reservation.do·sanjii.do = main_home4 계열)에서 헤더 아이콘이 로고 옆으로 쏠리던 버그 수정.
 *            + 달력↔장바구니 간격 8→5px 축소. §7-3
 *   v1.2.2 : 모바일 배송일 = [날짜][달력] 순 · 달력·장바구니 오른쪽 끝 44px 나란히. §7-8
 *   v1.2.1 : 모바일 상단 검색 아이콘 숨김(하단 탭바가 동일 함수로 담당). §7-7
 *   v1.2.0 : 모바일 상단바 재정돈 — 로고 34→26px · 우측 3종 44px 터치/8px 간격/같은 기준선 · 아이콘 검정(#2A352B) · 배송일 짧은 날짜 병기. §7
 *   v1.1.0 : PC 검색창을 오아시스 구도로(로고 줄 정중앙 · 흰 알약 · 초록 1.5px · 아이콘형 돋보기)
 *            + 우상단 배송일·장바구니 = 아이콘만·검정 계열(라벨은 시각적 숨김). §5·§6
 *
 * [무엇] 08-30 "오아시스 정돈 U1~U4"(흰 크롬·헤더검색·Pretendard)를 잇는 상단 정돈 단위.
 *        요소를 더하지 않는다 — 여백을 줄이고, 정렬을 맞추고, 색을 절제한다.
 *        로그인·장바구니·배송일·검색·카테고리 진입은 전부 그대로 남는다(배치만 정돈).
 *
 * [범위] 선택자는 헤더 스코프(.header_wrap / .head_def / .sub_head_def / .sub_head_search_def)
 *        안에서만 쓴다. style_v2.css·gnb_page.css 무수정 — 이 파일이 뒤에 로드되어 덮는다.
 *        PC/모바일 공용 1파일(선택자가 서로 배타적이라 상호 간섭 없음).
 *
 * [높이] PC   169px → 148px  (유틸바 41→34 · 로고띠 79→64 · 메뉴바 50 유지)
 *        모바일 99px →  92px  (상단바 59→52 · GNB 40 유지)
 *        ※ 헤더는 PC=정상흐름 / 모바일=fixed. 모바일 본문 오프셋은 기존 padding-top
 *          (100~110px 계열)이 새 높이보다 커서 겹침이 생기지 않는다(줄이기만 한다).
 *
 * [색]   두레 진초록 #3D6041 + 흰/크림. 그라디언트 0, 그림자는 스티키 1곳만.
 *        노란 말풍선(배송일 안내)은 크림+진초록으로 톤다운(정보는 유지).
 *
 * [인라인 스타일 회수] header.jsp·head_type1_main.jsp 안에 있던 <style> 3블록을
 *        이 파일로 옮겼다(코딩 규칙: 인라인 스타일 금지).
 * ========================================================================== */

/* ==========================================================================
 * 0) 공통 토큰 — 헤더 안에서만 쓰는 값
 * ========================================================================== */
:root{
  --hdz-green:#3D6041;      /* 두레 진초록 */
  --hdz-ink:#2A352B;        /* 본문 먹색 */
  --hdz-sub:#6B7566;        /* 보조 텍스트 */
  --hdz-line:#EAE7DE;       /* 크림 계열 헤어라인 (단 하나의 경계선 색) */
  --hdz-cream:#FBF8F0;      /* 안내 말풍선 바탕 */
  --hdz-accent:#F8A31E;     /* 액센트 토큰 자체는 유지(다른 곳에서 쓰일 수 있음) */
  /* [2026-09-06 검수 L07] 장바구니 수량 배지 — 금색 면 채움 폐기.
     규율(FEEDBACK_GUIDE §0) = 금색은 별점 1색(#E3A91F)에만. 배지·아이콘의 금색 채움은 쓰지 않는다.
     연녹 바탕 + 딥그린 글자 + 딥그린 헤어라인. 대비 6.83:1(10px 숫자라 대비를 넉넉히 잡는다). */
  --hdz-cartnum-bg:#E6EFE6;
  --hdz-cartnum-tx:#2B5A34;
  --hdz-cartnum-bd:rgba(61,96,65,.30);
}

/* ==========================================================================
 * 1) PC — 헤더 전체 골격
 *    (구 header.jsp 인라인 <style> 2블록 = 흰 헤더 반전 + GNB Pretendard 통합)
 * ========================================================================== */
.header_wrap{ height:148px; }

/* --- 흰 크롬(08-30 U1 계승) : 로고띠를 흰색으로, 경계선은 한 줄만 --- */
.header_wrap .head_visual{
  background-color:#fff;
  border-bottom:none;            /* 메뉴바가 이미 하단선을 가진다 → 이중선 제거 */
  padding:12px 0; height:64px;
}

/* --- 유틸바 : 41 → 34px, 12.5px 보조 위계로 낮춤(타이포 3단계 중 3단) --- */
.header_wrap .gnb_wrap.authbar.hd_c{ height:34px; }
.header_wrap .gnb_wrap.authbar.hd_c .inner{ height:34px; }
.header_wrap .gnb_wrap.authbar.hd_c .inner > a{
  font-size:12.5px; font-weight:500; color:var(--hdz-sub); letter-spacing:-.01em;
}
.header_wrap .gnb_wrap.authbar.hd_c .inner > a:hover{
  color:var(--hdz-green); text-decoration:none;
}
/* 구분선 : 세로줄을 옅게 + 간격 일정하게(리듬 통일) */
.header_wrap .gnb_wrap.authbar.hd_c .inner > .gv_line{
  margin:0 12px; height:10px; background-color:#DCD9CF;
}
/* 로그인 토글 : 라벨을 유틸바 위계(12.5px)에 맞춰 낮춘다 — 토글 자체는 무수정 */
.header_wrap .gnb_wrap.authbar.hd_c .hsw_lb{ font-size:12.5px; }
.header_wrap .gnb_wrap.authbar.hd_c .hsw{ margin-left:16px; }

/* --- 로고 : 띠 안에서 수직 중앙 정렬(기존 margin-top:3px 어림값 제거) --- */
.header_wrap .head_visual .inner{ position:relative; }
.header_wrap .head_visual .home{ margin-top:0; display:flex; align-items:center; height:40px; }
.header_wrap .head_visual .home img{ display:block; height:34px; width:auto; }

/* --- 우측 액션(배송일·장바구니) : 로고와 같은 40px 광학 축에 정렬 --- */
.header_wrap .head_visual .h_link{ display:flex; align-items:center; height:40px; gap:30px; }
.header_wrap .head_visual .h_link a{
  float:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:44px;                              /* 클릭 타깃 하한 */
}
.header_wrap .head_visual .h_link .set_date{ margin-right:0; }   /* 구 33px 하드코딩 해제 → gap 으로 일원화 */
.header_wrap .head_visual .h_link .icon_wrap{
  width:24px; height:24px; margin:0; display:flex; align-items:center; justify-content:center;
}
/* 인라인 SVG 아이콘(스프라이트 filter 해킹 대체) — 3개 아이콘 한 가족 */
.header_wrap .head_visual .h_link .hdz_svg{ display:block; width:24px; height:24px; }
.header_wrap .head_visual .h_link .tt{
  font-size:11.5px; font-weight:500; color:var(--hdz-sub); letter-spacing:-.02em;
  line-height:1; margin-top:5px;
}
.header_wrap .head_visual .h_link a:hover .tt{ color:var(--hdz-green); }
/* 장바구니 수량 배지 — 아이콘 우상단으로(기존 좌상단 겹침 정리) */
.header_wrap .head_visual .h_link .cart{ position:relative; }
.header_wrap .head_visual .h_link .cart .num{
  left:auto; right:6px; top:-3px;
  width:16px; height:16px; line-height:16px; padding:0;
  background-color:var(--hdz-cartnum-bg); border-radius:50%;
  box-shadow:0 0 0 1px var(--hdz-cartnum-bd);
  font-size:10.5px; font-weight:700; color:var(--hdz-cartnum-tx); text-align:center;
}
.header_wrap .head_visual .h_link .cart .tt{ padding-right:0; }

/* --- 헤더 기획배너(로고 우측) : 새 로고띠 높이에 맞춰 되잡기 --- */
.header_wrap .head_visual .icon_banner{ margin:0 0 0 14px; display:flex; align-items:center; height:40px; }
.header_wrap .head_visual .icon_banner img{ height:40px !important; width:auto; display:block; }

/* --- 메뉴바 : 하단 경계선을 크림 헤어라인 하나로 통일 --- */
.head_menu_wrap{ border-bottom:1px solid var(--hdz-line); }
/* GNB 주메뉴 폰트 = 모바일과 동일 Pretendard (구 header.jsp 인라인 <style> 회수) */
.head_menu_wrap .menu_list li a{
  font-family:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  letter-spacing:-.02em;
}

/* --- 배송일 안내 말풍선 : 노랑 → 크림 + 진초록(색 절제, 정보 유지) --- */
.header_wrap .head_visual .set_date .tool{
  right:58px; top:6px;                         /* 아이콘·라벨과 검색창을 가리지 않게 로고띠의 빈 공간(아이콘 왼쪽)으로 */
  background-color:var(--hdz-cream); color:var(--hdz-green);
  border:1px solid #E8DFC4; box-shadow:none; border-radius:8px;
  font-weight:600; font-size:12.5px;
}
.header_wrap .head_visual .set_date .tool:before{ display:none; }
.header_wrap .gnb_wrap a.link_mydure .tool{
  background-color:var(--hdz-cream); color:var(--hdz-green);
  border:1px solid #E8DFC4; box-shadow:none; border-radius:8px; font-weight:600;
}
.header_wrap .gnb_wrap a.link_mydure .tool:before{ border-bottom-color:#E8DFC4; }

/* --- 최상단 띠배너가 있을 때도 경계는 헤어라인 하나 --- */
.htop_banner{ border-bottom:1px solid var(--hdz-line); }

/* ==========================================================================
 * 2) 모바일 — 상단바(.head_def) 정돈
 *    (구 head_type1_main.jsp 인라인 <style> 회수)
 * ========================================================================== */
/* ⚠ 특이도 메모 : gnb_page.css 는 페이지 JSP 에서 commScripts 보다 **뒤에** 로드되고
 *   .head_def .head_top{...!important} 를 쓴다. 그래서 이 파일의 모바일 헤더 규칙은
 *   element+class(header.head_def)로 한 단계 올려 순서와 무관하게 이기게 한다. */
header.head_def .head_top{
  background-color:#fff !important;             /* 흰 크롬(08-30 U1 계승) */
  padding:8px 16px !important;                  /* 상하 대칭 → 로고 광학 중앙 */
  min-height:52px;
  border-bottom:none;                           /* GNB 줄이 경계선을 가진다 */
}
/* 로고 높이는 34px 유지 — 로고 폭이 줄면 그 오른쪽 "한가위 선물" 필(.icon_banner .inner,
   한가위 단위 소유)이 왼쪽으로 딸려와 로고에 붙는다. 폭 관계를 건드리지 않는다. */
header.head_def .head_top .h_logo img{ height:34px !important; }

/* --- 우측 아이콘 3종(검색·배송일·장바구니) : 24px 라인 아이콘 한 가족 --- */
header.head_def .gnb_r{ gap:2px; }
header.head_def .gnb_r li{ margin-left:0 !important; }
header.head_def .gnb_r li > a{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:36px;                      /* 균일한 탭 타깃(스와이프 줄 포함 44px 이상 확보) */
}
header.head_def .gnb_r li .hdz_svg{ display:block; width:24px; height:24px; }
header.head_def .gnb_r li img{ height:24px !important; width:auto; }
/* 장바구니 수량 배지 — 아이콘 우상단 고정(아이콘 크기와 무관하게 같은 자리) */
header.head_def .gnb_r .h_cart a{ padding-left:0; position:relative; }
header.head_def .gnb_r .h_cart .num{
  left:auto; right:4px; top:2px;
  width:15px; height:15px; line-height:15px; padding:0;
  font-size:10px; font-weight:700; color:var(--hdz-cartnum-tx);
  background-color:var(--hdz-cartnum-bg); border-radius:50%; text-align:center;
  box-shadow:0 0 0 1px var(--hdz-cartnum-bd);
}

/* --- GNB 탭 줄 : 경계선 색 통일 + 활성 위계 2단계로 (높이 39+1=40px 총합 불변) --- */
header.head_def .gnb_wrap{ border-bottom:1px solid var(--hdz-line); background-color:#fff; }
header.head_def .gnb_wrap .swiper-slide{
  padding:0 11px; height:39px; line-height:39px;
  font-size:0.938rem; font-weight:500; color:var(--hdz-ink); letter-spacing:-.02em;
}
header.head_def .gnb_wrap .swiper-slide.on{ color:var(--hdz-green); font-weight:700; }
header.head_def .gnb_wrap .swiper-slide.on:after{ height:2.5px; border-radius:2px 2px 0 0; }

/* --- 배송일 안내 말풍선(모바일) : 크림 톤다운 + 새 헤더 높이에 맞춰 위로 --- */
header.head_def .gnb_r li .tool{
  top:104px;
  background-color:var(--hdz-cream); color:var(--hdz-green);
  border:1px solid #E8DFC4; box-shadow:none; border-radius:8px;
  font-weight:600;
}
header.head_def .gnb_r li .tool:before{ border-bottom-color:#E8DFC4; }
header.head_def .gnb_r li .tool .tool_x{ color:var(--hdz-green); }

/* ==========================================================================
 * 3) 모바일 서브헤더(.sub_head_def / .sub_head_search_def) — 경계·타이포만 통일
 *    구조 무변경(뒤로·제목·장바구니 그대로). 100여 화면 공용이라 최소 침습.
 * ========================================================================== */
.sub_head_def, .sub_head_search_def{ border-bottom:1px solid var(--hdz-line); }
.sub_head_def .s_head_title{
  font-size:1.0rem; font-weight:600; color:var(--hdz-ink); letter-spacing:-.02em;
}
.sub_head_def .cart .num, .sub_head_search_def .cart .num{
  background-color:var(--hdz-cartnum-bg); color:var(--hdz-cartnum-tx); font-weight:700;
  box-shadow:0 0 0 1px var(--hdz-cartnum-bd);
}

/* ==========================================================================
 * 4) 접근성 — 헤더 안 키보드 포커스 링(마우스 사용 시 비노출)
 * ========================================================================== */
.header_wrap a:focus-visible,
.head_def a:focus-visible,
.sub_head_def a:focus-visible{
  outline:2px solid var(--hdz-green); outline-offset:-3px; border-radius:6px;
}

/* ==========================================================================
 * 5) PC 검색창 = 오아시스 구도 (v1.1.0 / 2026-09-03 팀장 지시)
 *
 * [실측] oasis.co.kr/main PC 1440 :
 *   .searchBox 440x50 · x500(콘텐츠열 1200의 정중앙) · 흰 바탕 · 1px solid rgb(107,164,58)
 *   · border-radius 25px(알약) · padding 0 20px
 *   input 398x48 · 15px/400 · #333 · placeholder rgb(117,117,117)
 *   돋보기 button 48x48 · 배경 transparent(원형 채움 없음) · 필드 오른쪽 안쪽
 *   로고 x120 y57 132x30(좌) / 우측 아이콘 = 44x44 타깃 안 28px 아이콘 · 라벨 텍스트 없음
 *
 * [적용] 두레 콘텐츠열 = 1140(x150~1290) → 검색창 440px 을 정중앙(720)에.
 *   위치는 GNB 줄이 아니라 "로고 줄(.head_visual, y34~98)" 광학 중앙.
 *   ⚠ DOM 무이동 — .search_wrap 은 .head_menu_wrap .inner(position:relative) 안에 그대로 두고
 *     음수 top 으로 로고 줄까지 끌어올린다. 마크업을 옮기면 발견패널(.spanel)·자동완성(.sacz_auto)
 *     ·기능툴팁(feature_tips #searchGoodsKeyword)·검색 JS 선택자가 전부 회귀한다.
 *     세 부속은 모두 입력창 기하(getBoundingClientRect)로 스스로 따라붙으므로 무접촉으로 따라온다.
 *   ⚠ 스크롤 고정(.header_wrap.move:not(.cancle)) 시 .head_menu_wrap 만 화면 상단에 fixed 되므로
 *     로고 줄이 사라진다 → 그때만 메뉴바 안 우측(fb0815 right:122px 규약)으로 되돌린다.
 * ========================================================================== */

/* --- 5-1) 위치 : 로고 줄 정중앙 --- */
/* ⚠ search_panel.css 는 include/shop/search_panel_inc.jsp 에서 이 파일보다 **뒤에** 한 번 더 로드된다
   (commScripts 94행 + inc 6행 = 2회). 같은 특이도(0,2,0)면 뒤가 이겨 top:3px 로 되돌아간다
   → .header_wrap 을 앞에 붙여 (0,3,0) 으로 올려 순서와 무관하게 이긴다. */
.header_wrap .head_menu_wrap .search_wrap{
  top:-55px;                       /* 메뉴바 inner(y98) 기준 → y43 = 로고 줄(34~98) 안 46px 박스의 광학 중앙 */
  left:50%; right:auto; transform:translateX(-50%);
}

/* --- 5-2) 필드 : 흰 바탕 · 딥그린 1.5px 알약 (오아시스 문법, 두레 색) --- */
/* ID 결합(1,3,1) = 메인 전용 크림 덮개(main_recom_mz .header_wrap …input, 0,3,1 · 뒤 로드)를 이긴다 */
.header_wrap .head_menu_wrap .search_wrap input#searchGoodsKeyword{
  box-sizing:border-box; width:440px; height:46px;
  background:#fff; border:1.5px solid var(--hdz-green); border-radius:999px;
  padding:0 50px 0 20px;
  font-size:15.5px; font-weight:500; color:#1d271e; letter-spacing:-.01em;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.header_wrap .head_menu_wrap .search_wrap input#searchGoodsKeyword::placeholder{ color:#8b917f; font-weight:400; }
.header_wrap .head_menu_wrap .search_wrap input#searchGoodsKeyword:hover{ border-color:#2f5233; }
/* 포커스 = 테두리 진하게 + 소프트 링(발견 패널이 아래로 이어지는 그림자는 유지) */
.header_wrap .head_menu_wrap .search_wrap input#searchGoodsKeyword:focus,
.header_wrap .head_menu_wrap .search_wrap.sp_active input#searchGoodsKeyword{
  outline:none; background:#fff; border-color:#2f5233;
  box-shadow:0 0 0 3px rgba(61,96,65,.13), 0 10px 24px -16px rgba(20,30,20,.45);
}

/* --- 5-3) 돋보기 : 원형 초록 채움 폐지, 초록 아이콘만(오아시스 = 투명 버튼) --- */
.header_wrap .head_menu_wrap .search_wrap button{
  position:absolute; top:50%; right:5px; bottom:auto; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; padding:0;
  background:transparent; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.header_wrap .head_menu_wrap .search_wrap button:hover{ background:rgba(61,96,65,.07); }
.header_wrap .head_menu_wrap .search_wrap button .icon{
  width:20px; height:20px; margin-top:0; filter:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d6041' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.2 20.2l-4.4-4.4'/%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size:20px 20px;
}

/* --- 5-4) 스크롤 고정 : 로고 줄이 없으므로 메뉴바 안 우측으로 복귀(폭도 GNB 탭과 안 겹치게 축소) --- */
.header_wrap.move:not(.cancle) .head_menu_wrap .search_wrap{
  top:2px; left:auto; right:122px; transform:none;
}
.header_wrap.move:not(.cancle) .head_menu_wrap .search_wrap input#searchGoodsKeyword{
  width:320px; height:44px;
}
.header_wrap.move:not(.cancle) .head_menu_wrap .search_wrap button{ right:3px; width:38px; height:38px; }

/* ==========================================================================
 * 6) 우상단 액션(배송일·장바구니) = 아이콘만 · 검정 계열 (2026-09-03 팀장 지시)
 *    오아시스 실측 = 44x44 타깃 안 28px 아이콘, 아래 텍스트 라벨 없음.
 *    라벨 <p class="tt"> 는 지우지 않고 시각적으로만 숨긴다(스크린리더 접근명 유지)
 *    → JSP 무수정, 접근성 회귀 0.
 * ========================================================================== */
.header_wrap .head_visual .h_link{ gap:4px; }              /* 44 + 4 = 48px 피치(오아시스와 동일) */
.header_wrap .head_visual .h_link a{ position:relative; width:44px; min-width:44px; height:44px; }
.header_wrap .head_visual .h_link .icon_wrap{ width:26px; height:26px; }
.header_wrap .head_visual .h_link .hdz_svg{
  width:26px; height:26px;
  stroke:var(--hdz-ink);                                   /* 딥그린 → 검정 계열(인라인 stroke 속성보다 CSS 우선) */
}
.header_wrap .head_visual .h_link a:hover .hdz_svg{ stroke:var(--hdz-green); }
/* 라벨 = 시각적 숨김(접근성 텍스트는 남긴다) */
.header_wrap .head_visual .h_link .tt{
  position:absolute; width:1px; height:1px; margin:0; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* 장바구니 수량 배지 = 유지하되 작게, 44px 박스 우상단 고정 */
.header_wrap .head_visual .h_link .cart .num{
  right:1px; top:2px; width:15px; height:15px; line-height:15px; font-size:10px;
}

/* [v1.1.1 2026-09-03] 팀장: "배송일을 선택해 주셔요 팁 삭제" — commFunctions.jsp 가 .show() 로 띄우는 말풍선을 CSS 로 상시 숨김(JS 무수정) */
.header_wrap .head_visual .set_date .tool { display: none !important; }

/* [v1.1.2 2026-09-03] 오아시스형 검색 확장 — 패널이 열리면(.sp_active) 알약 아랫모서리를 펴고 아랫선을 지워 패널(search_panel.css v1.11)과 한 상자로 이어붙인다. 포커스 링 제거 */
.header_wrap .head_menu_wrap .search_wrap.sp_active input#searchGoodsKeyword{ border-radius:23px 23px 0 0; border-bottom-color:transparent; box-shadow:none; }
.header_wrap.move:not(.cancle) .head_menu_wrap .search_wrap.sp_active input#searchGoodsKeyword{ border-radius:22px 22px 0 0; }

/* [v1.1.3 2026-09-03] 자동완성(.sac_active, searchAcPcComm.jsp)이 떠 있을 때도 알약 아랫모서리를 펴서 한 상자로 이어붙임 — 발견 패널(.sp_active)과 동일 */
.header_wrap .head_menu_wrap .search_wrap.sac_active input#searchGoodsKeyword{ border-radius:23px 23px 0 0; border-bottom-color:transparent; box-shadow:none; }
.header_wrap.move:not(.cancle) .head_menu_wrap .search_wrap.sac_active input#searchGoodsKeyword{ border-radius:22px 22px 0 0; }

/* [v1.1.4 2026-09-03] 팀장: "상단 검색창 원래 위치에서, 상단 고정 기능 없이" — 스크롤 고정(.move) 상태에서 검색창을 메뉴바로 끌어오지 않고 숨긴다.
   검색창은 로고 줄(원래 위치)에만 있고, 페이지를 내리면 함께 스크롤되어 사라진다. GNB 고정 바는 그대로. 열려 있던 발견 패널/자동완성도 함께 숨김 */
.header_wrap.move:not(.cancle) .head_menu_wrap .search_wrap{ display:none; }
.header_wrap.move:not(.cancle) ~ .spanel, .header_wrap.move:not(.cancle) ~ .spanel_backdrop, .header_wrap.move:not(.cancle) ~ .sacz_auto{ display:none !important; }


/* ==========================================================================
 * 7) 모바일 상단바 재정돈 — 로고·배송일·장바구니  v1.2.0 (2026-09-03 팀장 지시)
 *    "모바일 상단 아이콘 정리 — 로고 및 배송일, 장바구니. 높이 및 위치 다시 정리"
 *
 * [실측 — 손대기 전 @390px iPhone13]
 *   .head_top            52px (padding 8/16, min-height 52)
 *   로고 img             147x34, x16 y9      ← 화면 폭의 38% 를 로고가 먹는다
 *   .gnb_r               x250 w124 h36, gap 2px, 항목 40x36 3개
 *   검색 svg  24x24  y14~38 (중심 26)   ← 세로 중앙
 *   배송일 svg 24x24  y14~38 (중심 26)   ← 세로 중앙
 *   장바구니 svg 24x24 y8~32 (중심 20)   ← ★6px 위로 어긋남
 *   수량배지 15x15 x355 y10
 *
 * [원인 — 장바구니만 기준선이 다른 이유]
 *   style_v2.css:35  .head_def .gnb_r .h_cart a{display:block;padding-left:5px}  → (0,3,1)
 *   v1.0.0 의 정렬 규칙  header.head_def .gnb_r li > a{display:flex;...}         → (0,2,3)
 *   클래스 수가 이겨 장바구니만 flex 가 풀렸다(= 세로중앙 정렬 실패, block 흐름 상단 붙음).
 *   → 이 절은 클래스 3개(head_def·gnb_r·h_cart)로 맞춰 (0,3,3) 로 되찾는다.
 *
 * [정돈 후 확정값]
 *   .head_top            52px 유지 (padding 4/16 → 안쪽 44px = 터치 하한 그대로 한 줄에)
 *     ⚠ 52px 유지 = 헤더 총합 92px 불변 = main_top.css --mtz-head-h 92px 와 계속 한 쌍.
 *       (높이를 바꿨다면 그 파일도 같이 고쳐야 한다 — 안 바꿨으므로 무접촉.)
 *   로고 img             26px (구 34px)  좌측 16px
 *   우측 3종 항목        44x44 터치 · gap 8px · 아이콘 24px · 전부 같은 기준선(세로 중앙)
 *   아이콘 색            #3D6041 → #2A352B (오늘 PC 헤더 문법 = 아이콘만 검정)
 *   배송일               달력 24px + 짧은 날짜 13px 한 덩어리(로그인·배송일 있을 때만)
 *   수량 배지            16px, 44px 박스 우상단
 *   하단 경계            1px #E9E4D8 한 줄 (색 배경 띠·그림자 0)
 * ========================================================================== */

/* --- 7-1) 상단바 골격 : 52px 안에 44px 터치 한 줄 --- */
header.head_def .head_top{
  display:flex; align-items:center;              /* 로고·아이콘 한 기준선 */
  padding:4px 16px !important;                   /* 4 + 44 + 4 = 52 (구 8/16 + 36) */
  min-height:52px;
  box-shadow:none;                               /* 색 띠·그림자 없음 */
}

/* --- 7-2) 로고 : 24~26px 대(구 34px). 화면 폭 점유를 줄여 우측 액션에 자리를 준다 --- */
header.head_def .head_top .h_logo{ display:flex; align-items:center; height:44px; }
header.head_def .head_top .h_logo img{ height:26px !important; width:auto; display:block; }

/* --- 7-3) 우측 액션 3종(검색·배송일·장바구니) : 44px 터치 · 5px 간격 · 같은 기준선 --- */
/* margin-left:auto = gnb_r 을 head_top(플렉스) 오른쪽 끝으로 "자립" 정렬(2026-09-05 v1.2.3).
   gnb_page.css 를 로드하는 페이지는 .head_def .head_top{justify-content:space-between}(gnb_page:212)
   + 클리어픽스 ::after 숨김(gnb_page:213)으로 우측정렬됐지만, gnb_page.css 를 안 쓰는 페이지
   (reservation.do·sanjii.do = main_home4 계열)엔 그 둘이 없어 아이콘이 로고 옆으로 쏠렸다.
   (원인: style_v2 .head_top:after 클리어픽스가 플렉스 안에서 폭0 팬텀 플렉스 아이템이 되어
    space-between 여백을 갈라 gnb_r 을 가운데로 밀어냄.)
   margin-left:auto 는 그 ::after 유무·space-between 유무와 무관하게 gnb_r 을 우측 끝으로 보낸다
   → 두 계열 모두 정상, 이미 우측인 페이지(홈·두레추천·더큰혜택·신규)엔 무영향.
   gap:5px = 달력↔장바구니 간격 3px 축소(팀장 지시, 구 8px). */
header.head_def .gnb_r{ display:flex; align-items:center; gap:5px; margin-left:auto; }
header.head_def .gnb_r > li{ margin-left:0 !important; float:none; position:relative; }
/* 장바구니 a 는 style_v2(0,3,1)가 display:block 으로 덮으므로 같은 클래스 수(0,3,3)로 되찾는다 */
header.head_def .gnb_r > li > a,
header.head_def .gnb_r > li.h_cart > a{
  display:flex; align-items:center; justify-content:center;
  width:auto; min-width:44px; height:44px; padding:0 !important;
  border-radius:10px;
}
header.head_def .gnb_r li .hdz_svg{
  display:block; width:24px; height:24px; flex:0 0 24px;
  stroke:var(--hdz-ink);                         /* 딥그린 → 검정 계열(PC 헤더와 같은 문법) */
}
header.head_def .gnb_r li > a:active .hdz_svg{ stroke:var(--hdz-green); }
header.head_def .gnb_r li img{ height:24px !important; width:auto; }

/* --- 7-4) 배송일 = 달력 + 짧은 날짜 한 덩어리 --- */
header.head_def .gnb_r .hdz_dl > a{ gap:4px; padding:0 8px !important; }
header.head_def .gnb_r .hdz_dtxt{
  font-size:13px; font-weight:600; color:var(--hdz-ink);
  letter-spacing:-.03em; line-height:1; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* --- 7-5) 장바구니 수량 배지 : 44px 박스 우상단 16px --- */
header.head_def .gnb_r .h_cart .num{
  left:auto; right:2px; top:4px;
  width:16px; height:16px; line-height:16px; padding:0 !important;
  font-size:10px; font-weight:700; color:var(--hdz-cartnum-tx);
  background-color:var(--hdz-cartnum-bg); border-radius:50%; text-align:center;
  box-shadow:0 0 0 1px var(--hdz-cartnum-bd);
}

/* --- 7-6) 하단 경계 : 헤어라인 한 줄만(팀장 지정색) --- */
header.head_def .gnb_wrap{ border-bottom:1px solid #E9E4D8; box-shadow:none; }
header.head_def{ box-shadow:none; }

/* --- 7-7) 상단 검색 아이콘 제거  v1.2.1 (2026-09-04 팀장: "모바일 상단에 검색 삭제") ------
   검색 진입은 하단 고정 탭바가 이미 같은 함수로 담당한다
     footer_category.jsp:19 / footer_share.jsp:17  goPageSubmit('N','prod/goodsSearchListV3.do','search','','')
   = 상단 아이콘과 완전히 동일한 호출 → 진입점 손실 0, 중복만 사라진다.
   마크업은 지우지 않고 감춘다(JSP 의 onclick·aria-label 그대로 남음) → 복구 = 이 규칙 1줄 삭제.
   선택자는 순서(:first-child)가 아니라 li.hdz_srch 로 고정 — 08-30 에 이 자리에 끼워 넣은 항목이라
   순서 기반으로 감추면 다음에 항목이 하나만 바뀌어도 엉뚱한 아이콘이 사라진다.
   ⚠ 상세·목록의 sub_head_def / sub_head_search_def 검색은 이번 범위 밖 = 무접촉(§3 그대로).
   남는 2종(배송일·장바구니)은 §7-3 의 44px·gap 8px·같은 기준선 규칙을 그대로 물려받아
   우측 정렬을 유지한다(별도 규칙 불필요 — .gnb_r 이 flex 라 항목이 빠지면 자동으로 오른쪽에 붙는다). */
header.head_def .gnb_r > li.hdz_srch{ display:none; }

/* --- 7-8) 배송일 = [날짜][달력] 순 · 달력·장바구니는 오른쪽 끝 44px 나란히
       v1.2.2 (2026-09-04 팀장: "달력과 장바구니 옆으로 이동하고, 날짜는 달력 앞으로 텍스트 표시") ----

   [구조] a.hdz_dl 하나가 [날짜 텍스트][달력 24px] 을 함께 안는다(= 한 덩어리 터치, 배송일 레이어).
   [정렬] "달력과 장바구니가 오른쪽 끝에 44px 로 나란히" 를 만드는 방법 :
          a 의 좌우 패딩을 0 으로 두고 달력 svg 에 margin:0 10px 을 준다 →
          10 + 24 + 10 = 44px 상자가 a 의 오른쪽 끝에 생긴다. a 의 오른쪽 = li 의 오른쪽이고,
          .gnb_r 의 gap 8px 이 그대로 장바구니 44px 상자와의 간격이 된다.
          결과: 달력 중심 = a.right-22, 장바구니 중심 = cart.right-22 → 두 아이콘이 같은 규격·같은 기준선.
          날짜 텍스트는 그 44px 상자 왼쪽에 자연스럽게 붙는다(글자↔달력 사이 10px = svg 왼쪽 마진).
   [폭 안전장치] 로고(112.5px, 우측 끝 128.5)와 부딪히지 않게 텍스트 최대 폭을 88px 로 잠근다.
          390폭 실측 여유는 90px 이상이라 평소엔 닿지 않지만, 시스템 글자 확대·좁은 기기(320)에서는
          @media 로 요일 조각(.hdz_ddw)만 떼어 "9/11" 로 줄인다(잘림·말줄임 대신 의미 단위로 축약).
   [비로그인] 날짜 span 자체가 렌더되지 않으므로(JSP c:if) a 는 44px 아이콘만 = 구 화면과 동일. */
header.head_def .gnb_r .hdz_dl > a{
  padding:0 !important;                 /* 구 0 8px — 44px 상자를 svg 마진으로 만든다 */
  gap:0;                                /* 간격은 svg 의 margin 이 담당(중복 방지) */
  justify-content:flex-end;
}
header.head_def .gnb_r .hdz_dl .hdz_svg{ margin:0 10px; }   /* 10+24+10 = 44px */
header.head_def .gnb_r .hdz_dtxt{
  max-width:88px; overflow:hidden; white-space:nowrap;
  display:inline-flex; align-items:baseline;
}
@media (max-width:359px){
  header.head_def .gnb_r .hdz_ddw{ display:none; }          /* 좁은 화면 = "9/11" 만 */
}