@charset "utf-8";
/* =====================================================================
 * immart.kr 모션/인터랙션 (PC + 모바일 공통)
 * ---------------------------------------------------------------------
 * 짝: /js/immart-motion.js   로드: /include/headHtml.jsp (관리자 /manage 제외)
 *
 * 구성
 *   1) 공통 변수
 *   2) 검색창 움직임 (포커스 글로우 + 인기검색어 롤링)
 *   3) 스크롤 리빌 (가벼운 fade-up) + 상품 캐러셀 시간차 스태거
 *   4) 버튼/링크 hover (오렌지 = #F4791F, 무채색 보조)
 *   5) 우측 하단 장바구니 펫(봇)
 *
 * 원칙
 *   - JS 없이도 페이지는 그대로 보인다. 숨김 초기상태는 전부 html.im-anim 하위에만 건다.
 *     (im-anim 은 IntersectionObserver 지원 + prefers-reduced-motion 아님 일 때만 붙는다)
 *   - hover / 펫은 게이트 없이 항상 동작.
 * ===================================================================== */

:root {
	--im-orange: #F4791F;
	--im-orange-dark: #E0670F;
	--im-orange-soft: #FFF4EA;
	--im-gray: #767676;
	--im-ease: cubic-bezier(.22, .61, .36, 1);
}

/* =====================================================================
 * 2) 검색창
 * ===================================================================== */
.header_search_box input {
	transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.header_search_box input:hover {
	border-color: #9a9a9a;
}

.header_search_box input:focus {
	border-color: var(--im-orange);
	box-shadow: 0 0 0 3px rgba(244, 121, 31, .14);
}

/* 돋보기 아이콘 : 이미 transform:translateY(-50%) 이 걸려 있으므로 반드시 유지 */
.header_search_box img {
	transition: transform .25s var(--im-ease), opacity .2s ease;
}

.header_search_box:focus-within img {
	transform: translateY(-50%) scale(1.08);
}

.header_search_box img:hover {
	transform: translateY(-50%) scale(1.18);
}

.header_search_box img:active {
	transform: translateY(-50%) scale(.96);
}

/* 인기검색어 롤링 (JS 가 주입 / input 이 비어있고 포커스 아닐 때만 노출) */
.im-search-hint {
	position: absolute;
	left: 21px;
	right: 50px;
	top: 0;
	bottom: 0;
	display: none;
	align-items: center;
	overflow: hidden;
	pointer-events: none;
	color: #a0a0a0;
	font-size: 14px;
	line-height: 1;
}

.header_search_box.is-hinting .im-search-hint {
	display: flex;
}

/* 롤링 중에는 원래 placeholder 를 숨긴다 (blur/입력 시 자동 복귀) */
.header_search_box.is-hinting input::placeholder {
	color: transparent;
}

.header_search_box.is-hinting input::-webkit-input-placeholder {
	color: transparent;
}

.im-search-hint__item {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	animation: im-hint-in .45s var(--im-ease) both;
}

.im-search-hint__item.is-out {
	animation: im-hint-out .32s var(--im-ease) both;
}

@keyframes im-hint-in {
	from { opacity: 0; transform: translateY(95%); }
	to   { opacity: 1; transform: none; }
}

@keyframes im-hint-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(-95%); }
}

/* =====================================================================
 * 3) 스크롤 리빌 + PC 줄 캐러셀 레이아웃
 *    html.im-anim 이 없으면(구형 브라우저 / 모션 최소화) 전부 기본 노출
 * ===================================================================== */

/* 3-1. 섹션 타이틀 · 배너 · 캐러셀 · 더보기 · 단하루특가 카드 : 가벼운 fade-up
 *      캐러셀은 통째로 떠오른다. 카드 개별 애니메이션은 걸지 않는다 —
 *      회전(자동 슬라이드)이 카드의 움직임을 담당하고, loop 복제 슬라이드에는
 *      transition-delay 를 심을 수 없어 어긋난다. */
html.im-anim .best_shop_list_wrapper01 > .inner,
html.im-anim .main_prd_carousel,
html.im-anim .more_btn_yo,
html.im-anim .daily_deal_wrapper .daily_deal_card,
html.im-anim [data-im-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--im-ease), transform .6s var(--im-ease);
}

html.im-anim .best_shop_list_wrapper01 > .inner.is-in,
html.im-anim .main_prd_carousel.is-in,
html.im-anim .more_btn_yo.is-in,
html.im-anim .daily_deal_wrapper .daily_deal_card.is-in,
html.im-anim [data-im-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* 3-2. PC 줄 캐러셀 (index.jsp 가 .main_prd_swiper 를 숨기고 줄마다 생성)
 *      기존 그리드의 row-gap 28px / column-gap 20px 을 그대로 재현한다.
 *      (column-gap 은 Swiper 의 spaceBetween: 20 이 담당) */
.main_prd_rows {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.main_prd_row {
	width: 100%;
}

/* 줄 안에서 카드 높이를 맞춘다 (Swiper 는 기본이 height:auto 가 아님) */
.main_prd_row .swiper-wrapper {
	align-items: stretch;
}

.main_prd_row .swiper-slide {
	height: auto;
}

/* =====================================================================
 * 4) hover
 * ===================================================================== */

/* 상단 유틸 / 지점탭 */
.header_mem_box a p,
.header_mall_tab a,
.header_branch_mobile a {
	transition: color .2s ease;
}

.header_mem_box a:hover p,
.header_mall_tab a:hover,
.header_branch_mobile a:hover {
	color: var(--im-orange);
}

/* 상단 안내바 닫기 */
.x_btn_yo {
	transition: transform .25s var(--im-ease), opacity .2s ease;
}

.x_btn_yo:hover {
	transform: translateY(-50%) rotate(90deg);
	opacity: .7;
}

/* 카테고리 버튼 · GNB */
.cate_box {
	transition: color .2s ease;
}

.cate_box:hover {
	color: var(--im-orange);
}

.gnb > ul > li > a {
	transition: color .2s ease;
}

.gnb > ul > li > a:hover {
	color: var(--im-orange);
}

/* 전체 카테고리 드롭다운 */
.category_dropdown .cate_column a {
	transition: color .18s ease, padding-left .18s var(--im-ease);
}

.category_dropdown .cate_column a:hover {
	color: var(--im-orange);
	padding-left: 4px;
}

/* 헤더 우측 아이콘 (마이페이지 / 찜 / 장바구니)
 * display 는 절대 건드리지 않는다 — layout.css 의 flex(아이콘+글자 가로배치)를 덮어쓰면
 * <p> 가 아래로 떨어져 글자가 커 보인다. flex 라 transform 은 그대로 먹는다. */
.header_menu_yo a {
	transition: transform .22s var(--im-ease);
}

.header_menu_yo a:hover {
	transform: translateY(-3px);
}

.header_menu_yo a:hover p {
	color: var(--im-orange);
}

.header_menu_yo a p {
	transition: color .2s ease;
}

/* 캐러셀 좌우 화살표 */
.main_product .main_prd_arw {
	transition: opacity .2s ease, transform .2s var(--im-ease), border-color .2s ease,
		background-color .2s ease, box-shadow .2s ease;
}

.main_product .main_prd_arw:hover {
	border-color: var(--im-orange);
	background-color: var(--im-orange-soft);
	box-shadow: 0 6px 18px rgba(244, 121, 31, .28);
	transform: scale(1.08);
}

.main_product .main_prd_arw:active {
	transform: scale(.95);
}

/* 더보기 버튼 */
.more_btn_yo a {
	transition: border-color .22s ease, background-color .22s ease, transform .22s var(--im-ease);
}

.more_btn_yo a:hover {
	border-color: var(--im-orange);
	background-color: var(--im-orange-soft);
	transform: translateY(-2px);
}

.more_btn_yo a p {
	transition: color .2s ease;
}

.more_btn_yo a:hover p {
	color: var(--im-orange);
}

/* 상품 카드 : 썸네일 확대 + 상품명 오렌지 */
.shop_list_item01 .img {
	overflow: hidden;
}

.shop_list_item01 .img > img {
	transition: transform .45s var(--im-ease);
}

.shop_list_item01:hover .img > img {
	transform: scale(1.06);
}

.shop_list_item01 .prd_name {
	transition: color .2s ease;
}

.shop_list_item01:hover .prd_name {
	color: var(--im-orange);
}

/* 품절 카드는 확대하지 않는다 */
.shop_list_item01.soldOut:hover .img > img {
	transform: none;
}

/* 푸터 약관 버튼 (무채색 → 오렌지) */
#footer .btn-primary {
	transition: color .2s ease, opacity .2s ease;
}

#footer .btn-primary:hover {
	color: var(--im-orange);
}

/* =====================================================================
 * 5) 장바구니 펫 (우측 하단)
 *    마크업은 /js/immart-motion.js 가 body 끝에 주입한다.
 *    z-index 990 : 부트스트랩 모달(1050+) · 모바일 카테고리 드롭다운(9999) 아래.
 * ===================================================================== */
#im-pet {
	--pet-size: 104px;
	--pet-right: 18px;
	--pet-bottom: 16px;

	position: fixed;
	right: var(--pet-right);
	bottom: calc(var(--pet-bottom) + env(safe-area-inset-bottom, 0px));
	z-index: 990;
	width: var(--pet-size);
	height: var(--pet-size);
	pointer-events: none;
}

#im-pet-btn {
	pointer-events: auto;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	filter: drop-shadow(0 8px 5px rgba(122, 62, 21, .16));
	transform-origin: 50% 86%;
	animation: im-pet-idle 2.8s ease-in-out infinite;
}

#im-pet-btn:focus-visible {
	outline: 3px solid rgba(244, 121, 31, .35);
	outline-offset: 3px;
	border-radius: 50%;
}

#im-pet .pet-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

#im-pet .cart-body {
	transform-box: fill-box;
	transform-origin: center;
	animation: im-body-bob 1.4s ease-in-out infinite;
}

#im-pet .wheel {
	transform-box: fill-box;
	transform-origin: center;
	animation: im-wheel-squish 1.4s ease-in-out infinite;
}

#im-pet .eye,
#im-pet .wink,
#im-pet .heart-eye,
#im-pet .star-eye {
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity 120ms ease, transform 160ms ease;
}

#im-pet .wink,
#im-pet .heart-eye,
#im-pet .star-eye {
	opacity: 0;
}

#im-pet-btn[data-face="wink"] .eye-right { opacity: 0; }
#im-pet-btn[data-face="wink"] .wink-right {
	opacity: 1;
	animation: im-wink-pop 420ms ease both;
}

#im-pet-btn[data-face="heart"] .eye { opacity: 0; }
#im-pet-btn[data-face="heart"] .heart-eye {
	opacity: 1;
	animation: im-eye-pop 680ms cubic-bezier(.2, .9, .2, 1) both;
}

#im-pet-btn[data-face="star"] .eye { opacity: 0; }
#im-pet-btn[data-face="star"] .star-eye {
	opacity: 1;
	animation: im-star-twinkle 700ms ease-in-out both;
}

#im-pet-btn.is-jumping {
	animation: im-pet-jump 920ms cubic-bezier(.3, .1, .25, 1) both;
}

#im-pet-btn.is-jumping .wheel {
	animation: im-wheel-jump 920ms ease both;
}

#im-pet-btn.is-excited .cart-body {
	animation: im-excited-wiggle 560ms ease both;
}

/* 말풍선 : hover / focus 시 노출 */
#im-pet-bubble {
	position: absolute;
	right: 6px;
	bottom: calc(100% - 12px);
	padding: 9px 14px;
	border-radius: 14px;
	border: 1px solid rgba(244, 121, 31, .28);
	background: #fff;
	color: #3a2a1e;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(122, 62, 21, .16);
	opacity: 0;
	transform: translateY(6px) scale(.94);
	transform-origin: 85% 100%;
	transition: opacity .22s var(--im-ease), transform .22s var(--im-ease);
	pointer-events: none;
}

#im-pet-bubble::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: -6px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-right: 1px solid rgba(244, 121, 31, .28);
	border-bottom: 1px solid rgba(244, 121, 31, .28);
	transform: rotate(45deg);
}

#im-pet.is-hint #im-pet-bubble {
	opacity: 1;
	transform: none;
}

/* 파티클 */
#im-pet .pet-particle {
	position: absolute;
	left: 43%;
	top: 6%;
	color: var(--im-orange);
	font-size: calc(var(--pet-size) * .16);
	line-height: 1;
	pointer-events: none;
	animation: im-particle-fly 900ms ease-out forwards;
}

@keyframes im-pet-idle {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50%      { transform: translateY(-4px) rotate(1deg); }
}

@keyframes im-body-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}

@keyframes im-wheel-squish {
	0%, 100% { transform: scale(1.04, .96); }
	50%      { transform: scale(.96, 1.04); }
}

@keyframes im-pet-jump {
	0%, 100% { transform: translateY(0) scale(1); }
	12%      { transform: translateY(3px) scale(1.04, .94); }
	48%      { transform: translateY(-48px) rotate(-5deg) scale(.98, 1.02); }
	68%      { transform: translateY(-38px) rotate(4deg); }
	88%      { transform: translateY(4px) scale(1.06, .92); }
}

@keyframes im-wheel-jump {
	0%, 12%, 88%, 100% { transform: scale(1.08, .9); }
	45%, 70%           { transform: scale(.88, 1.12) translateY(-2px); }
}

@keyframes im-excited-wiggle {
	0%, 100% { transform: rotate(0); }
	25%      { transform: rotate(-5deg) scale(1.04); }
	50%      { transform: rotate(5deg) scale(1.04); }
	75%      { transform: rotate(-3deg); }
}

@keyframes im-wink-pop {
	0%   { transform: scaleX(.3); }
	45%  { transform: scaleX(1.2); }
	100% { transform: scaleX(1); }
}

@keyframes im-eye-pop {
	0%   { transform: scale(0) rotate(-18deg); }
	60%  { transform: scale(1.22) rotate(8deg); }
	100% { transform: scale(1) rotate(0); }
}

@keyframes im-star-twinkle {
	0%   { transform: scale(0) rotate(-25deg); }
	55%  { transform: scale(1.28) rotate(16deg); }
	100% { transform: scale(1) rotate(0); }
}

@keyframes im-particle-fly {
	0%   { opacity: 0; transform: translate(0, 5px) scale(.4) rotate(0); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx), -70px) scale(1.2) rotate(var(--spin)); }
}

/* 모바일 : 펫을 줄이고 말풍선 글자도 축소 */
@media all and (max-width: 768px) {
	#im-pet {
		--pet-size: 82px;
		--pet-right: 12px;
		--pet-bottom: 12px;
	}

	#im-pet-bubble {
		font-size: 13px;
		padding: 8px 12px;
	}
}

@media all and (max-width: 360px) {
	#im-pet {
		--pet-size: 70px;
	}
}

@media print {
	#im-pet { display: none !important; }
}

/* =====================================================================
 * 모션 최소화 설정 존중
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {

	#im-pet-btn,
	#im-pet .cart-body,
	#im-pet .wheel {
		animation: none !important;
	}

	#im-pet .pet-particle {
		display: none !important;
	}

	.header_search_box img:hover,
	.header_search_box:focus-within img {
		transform: translateY(-50%);
	}

	.header_menu_yo a:hover,
	.more_btn_yo a:hover,
	.main_product .main_prd_arw:hover,
	.shop_list_item01:hover .img > img {
		transform: none;
	}

	.x_btn_yo:hover {
		transform: translateY(-50%);
	}
}