@charset "utf-8";
/* ============================================================================
 * auth_status.css  v1.2.0  (2026-08-06)
 * 상단 헤더 로그인/로그아웃 상태 시각화 — 전 사이트 공용
 *   PC     : 유틸바 맨 우측 토글 스위치 (.hd_c / .hsw)
 *   모바일 : 마이두레 히어로 상단 로그인 상태 + 로그아웃 토글 (.mydz-auth)
 *
 * [설계]
 *  - 목표 : 50~60대 조합원이 "지금 로그인 상태인지"를 헤더에서 즉시 알아보게.
 *           스위치 메타포 = 색(회색/딥그린) + 노브 위치(왼쪽/오른쪽) 두 신호 동시 전달.
 *  - 원칙 : additive 전용. style_v2.css 무수정, 기존 헤더 클래스 재정의 최소.
 *  - 높이 : PC 유틸바는 .header_wrap{height:169px} 고정 총합의 일부(41px)라
 *           41px 를 명시 고정 → 헤더 총높이 불변(레이아웃 무이동).
 *  - 색   : 딥그린 #3D6041(브랜드) / 상태 텍스트 대비 4.5:1 이상 / 본문 14px.
 *  - 로드 : include/comm/commScripts.jsp (전역)
 *  - 마크업 : PC=include/shop/header.jsp / 모바일=WEB-INF/jsp/mobile/my/main_v2_draft.jsp
 *  - 모바일 상단 헤더는 원상(로고·배송일·장바구니) 유지 — 상태 표시는 마이두레로 이동(2026-08-06 지시)
 * ========================================================================== */

/* ─────────────────────────────────────────────
 * 1) PC — 유틸바 (.header_wrap .gnb_wrap.authbar.hd_c)
 * ───────────────────────────────────────────── */
.header_wrap .gnb_wrap.authbar.hd_c{padding:0;height:41px;line-height:normal;}
.header_wrap .gnb_wrap.authbar.hd_c .inner{display:flex;align-items:center;justify-content:flex-end;height:41px;}
/* style_v2 의 .inner:after(clearfix)는 flex 에서 여분 아이템이 되므로 무효화 */
.header_wrap .gnb_wrap.authbar.hd_c .inner:after{content:none;}
.header_wrap .gnb_wrap.authbar.hd_c .inner > a{flex:0 0 auto;font-size:14px;font-weight:500;color:#46514A;letter-spacing:-.02em;}
.header_wrap .gnb_wrap.authbar.hd_c .inner > a:hover{color:#3D6041;text-decoration:underline;}
.header_wrap .gnb_wrap.authbar.hd_c .inner > .gv_line{flex:0 0 auto;margin:0 11px;}

/* 1-1) 토글 스위치 */
.hd_c .hsw{display:flex;align-items:center;flex:0 0 auto;margin-left:20px;}
.hd_c .hsw_lb{
	margin-right:9px;font-size:14px;letter-spacing:-.02em;white-space:nowrap;
	max-width:170px;overflow:hidden;text-overflow:ellipsis;
}
.hd_c .hsw_nm{font-weight:700;}
.hd_c .hsw_tk{
	position:relative;display:block;width:56px;height:28px;border-radius:999px;
	transition:background-color .18s,border-color .18s;flex:0 0 auto;box-sizing:border-box;
}
.hd_c .hsw_kn{
	position:absolute;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.28);transition:left .18s;
}
/* 로그아웃 상태 : 회색 트랙 + 노브 왼쪽. 유일한 로그인 진입점이라 옅은 초록 테두리로 존재감 확보 */
.hd_c .hsw_off .hsw_lb{color:#3D6041;font-weight:600;}
.hd_c .hsw_off .hsw_tk{background:#C8D0C9;border:1.5px solid #A9C3AC;}
.hd_c .hsw_off .hsw_kn{left:2px;}
.hd_c .hsw_off .hsw_tk:hover{background:#B4BEB5;border-color:#6E9673;}
/* 로그인 상태 : 딥그린 트랙 + 노브 오른쪽 */
.hd_c .hsw_on .hsw_lb{color:#234727;}
.hd_c .hsw_on .hsw_tk{background:#3D6041;border:1.5px solid #3D6041;}
.hd_c .hsw_on .hsw_kn{left:29px;}
.hd_c .hsw_on .hsw_tk:hover{background:#31502F;border-color:#31502F;}

/* ─────────────────────────────────────────────
 * 2) 모바일 — 마이두레 히어로 상단 로그인 상태 + 로그아웃 토글 (.mydz-auth)
 *    모바일 헤더는 원상 유지(로고·배송일·장바구니)하고, 상태 표시는 마이두레로 이동(2026-08-06 지시).
 *    마이두레 = 로그인 필수 화면 → 항상 '로그인 중'(ON) 상태. 스위치를 끄면 로그아웃(확인창 1회).
 * ───────────────────────────────────────────── */
.mydz-auth{
	position:relative;z-index:1;
	display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;
}
.mydz-auth-st{display:inline-flex;align-items:center;font-size:14px;font-weight:600;color:#234727;letter-spacing:-.02em;}
.mydz-auth-dot{
	width:8px;height:8px;margin-right:7px;border-radius:50%;background:#2E7D32;
	box-shadow:0 0 0 3px rgba(46,125,50,.16);font-style:normal;flex:0 0 auto;
}
.mydz-auth-bdg{
	margin-left:8px;padding:2px 7px 3px;border-radius:5px;background:#3D6041;
	font-size:11.5px;font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em;
}
.mydz-auth-bdg.is_guest{background:#8C8F8B;}
.mydz-auth .hsw{display:flex;align-items:center;flex:0 0 auto;}
.mydz-auth .hsw_lb{margin-right:8px;font-size:13.5px;font-weight:600;color:#5C6B5E;letter-spacing:-.02em;}
.mydz-auth .hsw_tk{
	position:relative;display:block;width:52px;height:28px;border-radius:999px;
	background:#3D6041;border:1.5px solid #3D6041;box-sizing:border-box;
}
.mydz-auth .hsw_kn{
	position:absolute;top:2px;left:25px;width:21px;height:21px;border-radius:50%;background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.28);
}
/* 터치 타깃 44px (시각 크기는 28px 유지) */
.mydz-auth .hsw_tk:after{
	content:'';position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%);
}
html.font_big .mydz-auth-st{font-size:15px;}
html.font_big .mydz-auth .hsw_lb{font-size:14.5px;}

/* ─────────────────────────────────────────────
 * 3) 돋보기(글자 크게) 모드 대응
 * ───────────────────────────────────────────── */
html.font_big .hd_c .hsw_lb{font-size:15px;}
html.font_big .header_wrap .gnb_wrap.authbar.hd_c .inner > a{font-size:15px;}

/* ─────────────────────────────────────────────
 * 4) 좁은 폭 보호
 * ───────────────────────────────────────────── */
@media screen and (max-width:1279px){
	.header_wrap .gnb_wrap.authbar.hd_c .inner > .gv_line{margin:0 9px;}
	.hd_c .hsw{margin-left:14px;}
}