/* ===========================================
   Header
=========================================== */

/* -------------------------------------------
   1. Base
------------------------------------------- */
header {
	position: sticky;
	top: 0;
	width: 100%;
	height: 5.4rem;
	min-height: 5.4rem;
	z-index: 100;
	background-color: #fff;
	transition: transform 0.2s ease;
	will-change: transform;
}

header.is-hidden {
	transform: translateY(-100%);
}

body.main:is(.bb, .bc, .bs) header {
	margin-bottom: 2.4rem;
}

body.main:is(.hb, .gb, .sb) header {
	margin-bottom: 1.5rem;
}


/* -------------------------------------------
   2. Layout
------------------------------------------- */
header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	height: 100%;
	margin: 0 auto;
	padding-inline: 1.6rem;
}

header .container .left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.6rem;
}

header .container .right {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.4rem;
}

header .header_left_grp {
	display: flex;
	justify-content: flex-start;
	gap: 6px;
}

header .header_button_group,
body.bs.detail header .header_button_group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

header .container.pc {
	display: none;
}

/* -------------------------------------------
   3. Components
------------------------------------------- */
/* Logo */
header .logo img {
	width: 2.8rem;
	height: 2.8rem;
}

/* Title */
header .header_title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.4;
}

/* Back / Home icons */
header .header_back,
header .header_home {
	width: 2.4rem;
	height: 2.4rem;
}

header .btn_header_back,
header .btn_header_home {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	padding: 0.9rem;
	background: #fff;
	border-radius: 3rem;
	box-shadow: 0rem 0rem 1.2rem rgba(0, 0, 0, 0.2);
}

header .btn_header_home,
header .btn_input_search_round {
	padding: 1.05rem;
}

/* Header action buttons */
header .btn_header_search,
header .btn_header_my,
header .btn_header_bookmark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
}

header .btn_header_search,
header .btn_header_wish,
header .btn_header_cart,
header .btn_header_my {
	width: 2.4rem;
	height: 2.4rem;
}

header .btn_header_search,
header .btn_header_my {
	position: relative;
}

/* Nav button (hamburger) */
header .btn_nav {
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
}

header .btn_nav .btn_line {
	position: absolute;
	left: 0.2rem;
	height: 0.2rem;
	background-color: #000;
}

header .btn_nav .btn_line.top {
	top: 0.325rem;
	width: 2rem;
}

header .btn_nav .btn_line.center {
	top: 50%;
	width: 1rem;
	transform: translateY(-50%);
}

header .btn_nav .btn_line.bottom {
	top: 1.925rem;
	width: 1.5rem;
}

/* Search input */
header .input {
	width: 100%;
	height: 4rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: #000;
}

header .input_grp.type_round {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: stretch;
	height: 4rem;
	padding: 0rem 1.4rem;
	border: 1px solid #e1e3e1;
	border-radius: 4rem;
}

header .input_grp.type_round .btn_search {
	width: 2.2rem;
	margin-top: 0.4rem;
}

/* Fixed search form */
.search_form_container.active.fix .header_button_group a {
	padding: 0.6rem 0.2rem;
}

.search_form_container.active.fix .header_button_group a img {
	width: 2.4rem;
	height: 2.4rem;
}


/* -------------------------------------------
   4. Visibility States
------------------------------------------- */
/* Default: hide all header elements */
body header :is(.logo,
	.btn_nav,
	.header_back,
	.header_home,
	.btn_header_back,
	.btn_header_home,
	.header_title,
	.input_grp.type_round,
	.btn_header_search,
	.btn_header_wish,
	.btn_header_cart,
	.btn_header_my,
	.btn_close,
	.btn_input_search_round),
body.bs.detail header.is_bombom .btn_header_search {
	display: none;
}

/* Index */
body.index header :is(.logo, .btn_header_wish, .btn_header_my, .btn_header_search) {
	display: block;
}

/* Main (bb, bc, bs) */
body.main:is(.bb, .bc, .bs) header :is(.btn_nav, .btn_header_wish, .btn_header_my, .btn_header_search) {
	display: inline-flex !important;
}

/* Detail (bc, bs) */
body.detail:is(.bc, .bs) header :is(.btn_header_back, .btn_header_home, .btn_header_search) {
	display: inline-flex !important;
}

/* hb, gb, sb */
body:is(.hb, .gb, .sb) header :is(.btn_nav, .input_grp.type_round, .btn_header_cart, .btn_header_my) {
	display: inline-flex !important;
}

body:is(.hb, .gb, .sb) header .right,
body.shop_detail header .right {
	flex-grow: 1;
}

/* Mypage */
body.mypage header :is(.btn_nav, .header_title, .btn_header_cart, .btn_header_search) {
	display: block;
}

body.mypage .lnb_aside {
	display: block;
}

body.mypage header.is_mypage :is(.btn_nav, .header_button_group) {
	display: block !important;
}

body.mypage header.is_mypage :is(.header_button_group) {
	display: inline-flex !important;
}

body.mypage header.is_mypage :is(.header_back) {
	display: none !important;
}

/* Mypage subpages: hide nav/buttons, show back */
body.mypage:not(.shop_detail):has(.subpage_wrap, .bbb_empty_container, .resp_login_wrap, .resp_member_join_wrap, .bbb_cart_container, .tos_privacy_container, .register_ok_container) header :is(.btn_nav, .header_button_group) {
	display: none;
}

body.mypage:has(.subpage_wrap, .bbb_empty_container, .resp_login_wrap, .resp_member_join_wrap, .bbb_cart_container, .tos_privacy_container, .register_ok_container) header .header_back {
	display: block;
}

/* Login */
body.login header :is(.btn_nav, .header_back, .header_title, .btn_header_cart, .btn_header_search) {
	display: none;
}

body.login header .btn_close {
	display: block;
}

/* Title + close pattern */
body.title_close :is(.header_title, .btn_close),
header.is_all :is(.header_title, .btn_close) {
	display: block;
}

/* Back state */
header.is_back :is(.header_back, .header_title) {
	display: block !important;
}

header.is_back :is(.btn_nav, .btn_header_cart, .btn_header_search) {
	display: none !important;
}

/* Shop detail */
body.shop_detail header :is(.header_back, .input_grp.type_round, .btn_header_cart, .btn_header_my) {
	display: flex !important;
}

/* Review / Inquiry list: hide mypage defaults, show title + close */
body:is(.review_list, .inquiry_list) header :is(.btn_nav, .btn_header_search, .btn_header_cart) {
	display: none;
}

body:is(.review_list, .inquiry_list) header :is(.header_title, .btn_close) {
	display: block;
}

/* error page */
body.error-class header .container.pc .btn_header_wish,
body.error-class header .container.pc .btn_header_search {
	display: flex !important;
}

body.error-class header .container.pc.my {
	border: none;
}

body.error-class header :is(.btn_nav, .input_grp.type_round,
	.btn_header_wish, .btn_header_my) {
	display: flex;
}


/* -------------------------------------------
   5. Misc
------------------------------------------- */
.notice_marker {
	width: auto;
	min-width: 16px;
	left: 52%;
	right: auto;
	padding: 3px 5px;
	border-radius: 40px;
}

/* ===========================================
   6.1 PC (min-width: 1001px)
=========================================== */
@media (min-width: 1001px) {

	/* --- 6.1.1 Base --- */
	header {
		height: 127px;
		max-width: 100% !important;
		position: fixed;
		left: 0;
		right: 0;
		transform: none;
		transition: 0.2s ease;
	}

	header.is_bombom_detail {
		height: 127px;
	}

	body header.floating {
		height: 80px;
	}

	header.no-transition {
		transition: none !important;
		background-color: #fff !important;
	}

	body.main:is(.bb, .bc, .bs) header {
		margin-bottom: 0;
	}

	body.bc.detail header.floating,
	body.bs.detail header.floating,
	header.is_bombom_detail.floating {
		background: #fff;
	}


	/* --- 6.1.2 Layout --- */
	header .container {
		display: none;
	}

	header .container.pc {
		display: block;
		align-items: center;
		width: 100%;
		max-width: 100%;
		padding-inline: 0;
	}

	header .container.pc .wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
		max-width: 1432px;
		margin: 0 auto;
		padding-inline: 16px;
	}

	header .container.pc .left {
		gap: 70.5px;
	}

	header .container.pc .right {
		gap: 25px;
	}

	body:is(.hb, .gb, .sb, .shop_detail) header .right {
		flex-grow: unset;
	}

	body.bs.detail header .container {
		padding: 0;
	}

	body.bc.detail header .container.pc {
		padding-top: 0;
	}

	header.is_bombom_detail.floating .container.pc {
		padding: 0;
	}

	header .container.pc.my {
		height: 100%;
		border-bottom: 1px solid #e1e3e1;
	}


	/* --- 6.1.3 Components --- */
	/* Logo */
	header .container.pc .wrap a.logo {
		width: auto;
		height: auto;
		flex: 0 0 auto;
	}

	header .container.pc .wrap a.logo img {
		width: auto;
		height: 38px;
		transition: 0.2s ease;
	}

	header.floating .container.pc .wrap a.logo img {
		height: 28px;
	}

	/* Logo - black/white default */
	header .container.pc .wrap a.logo img.black {
		display: block;
	}

	header .container.pc .wrap a.logo img.white {
		display: none;
	}

	header.is_bombom_detail .container.pc .wrap a.logo img.black,
	body.floating header .container.pc .wrap a.logo img.white {
		display: none;
	}

	header.is_bombom_detail .container.pc .wrap a.logo img.white,
	body.detail.bs header .container.pc .wrap a.logo img.white,
	body.floating header.is_bombom_detail .container.pc .wrap a.logo img.black {
		display: block;
	}

	body.detail.bs header .container.pc .wrap a.logo img.black,
	body.floating header.is_bombom_detail .logo img.black {
		display: none;
	}

	body:is(.bc, .bs).detail header:not(.floating) .container.pc .wrap>a.logo img.white {
		display: inline-block;
	}

	body:is(.bc, .bs).detail header:not(.floating) .container.pc .wrap>a.logo img.black {
		display: none;
	}

	body:is(.bc, .bs).detail header.floating .container.pc .wrap .logo img.white {
		display: none;
	}

	body:is(.bc, .bs).detail header.floating .container.pc .wrap .logo img.black {
		display: block;
	}

	/* Nav */
	header .container.pc .wrap nav {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		gap: 48px;
	}

	header .container.pc .wrap nav a {
		flex-shrink: 0;
		width: auto;
		height: auto;
		font-size: 22px;
		font-weight: 700;
		color: #8e918f;
	}

	header .container.pc .wrap nav a.on {
		color: #000;
	}

	body:is(.bc, .bs).detail header .container.pc .wrap nav a {
		color: rgba(255, 255, 255, 0.5);
	}

	body:is(.bc, .bs).detail header .container.pc .wrap nav a.on {
		color: #fff;
	}

	body:is(.bc, .bs).detail header.floating .container.pc .wrap nav a {
		color: #8e918f;
	}

	body:is(.bc, .bs).detail header.floating .container.pc .wrap nav a.on {
		color: #000;
	}

	/* Util */
	header .container.pc .wrap .util {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		margin-left: auto;
		gap: 32px;
	}

	body:is(.bc, .bs).detail .container.pc .wrap .util .icon {
		filter: brightness(1) invert(1);
	}

	body:is(.bc, .bs).detail header.floating .container.pc .wrap .util .icon {
		filter: none;
	}

	body:is(.bc, .bs).detail header:not(.floating) .container.pc .wrap .util img {
		filter: brightness(1) invert(1);
	}

	/* Search input */
	header .input_grp.type_round {
		position: relative;
		height: 48px;
		min-width: 400px;
		padding: 4px 24px;
	}

	.input_grp.type_round input::placeholder {
		font-size: 18px;
	}

	header .container.pc .wrap .input {
		font-size: 16px;
	}

	header .btn_input_search .icon_search {
		width: 27.6px;
		height: 27.5px;
		margin-top: 7px;
	}

	header .container.pc .wrap .btn_search {
		width: 27px;
		height: 27px;
	}

	header .delete_btn {
		display: none;
		width: 22.4px;
		height: 22.4px;
		margin: 0 13px 0 11px;
	}

	header .delete_btn.is_show {
		display: block;
	}

	header .container.pc .wrap .btn_delete {
		width: 24px;
		height: 24px;
		margin-right: 15.2px;
	}

	/* 레이어팝업 - 닫기 버튼 */
	header .container.pc .input_grp.is_close .delete_btn {
		display: block;
	}

	/* Icons */
	header .icon_wish,
	header .icon_cart {
		width: 30px;
		height: 30px;
	}

	/* Buttons */
	header .btn_header_search,
	header .btn_header_wish,
	header .btn_header_cart,
	header .btn_header_my {
		width: 30px;
		height: 30px;
	}

	/* --- 6.1.4 Visibility States --- */
	/* Default visibility */
	header .container.pc .logo,
	header .container.pc .btn_header_my {
		display: block;
	}

	header .container.pc .input_grp.type_round,
	header .container.pc .btn_header_search,
	header .container.pc .btn_header_wish,
	header .container.pc .btn_header_cart {
		display: none;
	}

	/* Index / Main bb */
	body:is(.index, .main.bb) header .container.pc :is(.btn_header_wish, .btn_header_my, .btn_header_search) {
		display: block;
	}

	/* Detail (bc, bs) */
	body:is(.bc, .bs).detail .container.pc :is(.btn_header_wish, .btn_header_search, .btn_header_my) {
		display: block;
	}

	/* hb / gb / sb */
	body:is(.hb, .gb, .sb) .container.pc :is(.input_grp.type_round, .btn_header_cart, .btn_header_my) {
		display: inline-flex;
	}

	/* Mypage */
	body.mypage .container.pc :is(.input_grp.type_round, .btn_header_cart, .btn_header_my) {
		display: flex;
	}

	/* Back state */
	header.is_back:not(.search) .container.pc :is(.header_back, .input_grp.type_round, .btn_header_cart, .btn_header_my) {
		display: flex !important;
	}

	/* Shop detail */
	body.shop_detail .container.pc :is(.header_back, .input_grp.type_round, .btn_header_cart, .btn_header_my) {
		display: flex;
	}

	/* search */
	body header.search .container.pc :is(.btn_header_wish, .btn_header_search) {
		display: flex !important;
	}
}


/* ===========================================
   6.2 Tablet GNB (1001px ~ 1160px)
=========================================== */
@media all and (min-width: 1001px) and (max-width: 1160px) {
	header .container.pc .left {
		gap: 50px;
	}

	header .container.pc .wrap nav {
		gap: 40px;
	}

	header .input_grp.type_round {
		min-width: 360px;
	}
}


/* ===========================================
   6.3 Tablet (max-width: 1150px)
=========================================== */
@media (max-width: 1150px) {
	.header .input_grp.type_round {
		min-width: 255px;
	}
}


/* ===========================================
   6.4 Mobile (max-width: 393px)
=========================================== */
@media (max-width: 393px) {
	body:is(.hb, .gb, .sb, .shop_detail) header .right {
		flex-grow: unset;
	}

	header .input_grp.type_round {
		/* width: 216px; */
		min-width: unset !important;
	}
}


/* ===========================================
   6.5 Short Height PC (min-width: 1001px) and (max-height: 850px)
=========================================== */
@media (min-width: 1001px) and (max-height: 850px) {
	header {
		height: 80px;
	}
}