@charset "UTF-8";
/* ============================================================
   dure_perf.css — 체감속도(스켈레톤 · 인라인 로딩) 공용 문법
   v1.0 (2026-08-17)

   [1] 카드 썸네일 스켈레톤
       상품 카드의 이미지 자리(썸네일 컨테이너)에 로드 전 크림색 바탕 + 은은한 shimmer 를 깔아
       "빈 흰칸"이 아니라 "곧 채워질 자리"로 보이게 한다.
       · 이미지가 로드되면 img 가 컨테이너를 덮으므로 자동으로 사라진다(해제용 JS 0건).
       · shimmer 는 5회(약 6.5초)만 돌고 멈춘다 — 이미지가 끝내 안 와도 계속 번쩍이지 않는다.
       · prefers-reduced-motion 이면 애니메이션 정지(크림 바탕만).

       ★ 스코프 원칙: "정사각 자리를 미리 확보한 상품 카드 썸네일"에만 적용한다.
         장바구니·주문서의 작은 행 썸네일(.ckcart/.cartz2/.cartz, 36~76px)은 대상 제외 —
         스켈레톤이 오히려 잡음이 되고, 이미 즉시 로드되는 소수 이미지라 이득이 없다.
       ★ 선택자에 body 를 붙여 (0,3,1) 이상으로 만든 이유:
         기존 화면별 CSS(goods_list_card_v2.css 등)가 같은 컨테이너에 background 단축속성을
         (0,3,0) 으로 지정해 두어, 로드 순서에 따라 shimmer(background-image)가 지워질 수 있다.
         인라인 스타일·!important 없이 특정도만 1 올려 안정적으로 이긴다.

   [2] 인라인 버튼 로딩(.dzbusy)
       "더보기"·정렬/필터 적용처럼 응답이 눈에 띄게 걸리는 AJAX 버튼에만 붙인다.
       전역 오버레이(dz_page_loading)는 "페이지가 바뀔 때"만 쓰고, 화면이 그대로인 AJAX 는
       버튼 자리에서 조용히 알린다(원칙: 이동 없는 클릭에 전체 스피너 금지).
   ============================================================ */

/* ---------- [1] 카드 썸네일 스켈레톤 ---------- */

/* 크림 바탕 + 대각 shimmer. background 단축속성을 쓰지 않아 기존 border-radius/overflow 등 무영향. */
body .product_list_wrap .product_type1 .img_wrap,
body .main_section5.ngv2 .product_type1 .img_wrap,
body .product_type1 .img_wrap,
body .dcz .img_wrap,
body .category_prod_list .product_slider_type1 .img_wrap,
body .mrdz #bigBenefit .img_wrap,
body .gnbp .pcimg,
body .dcz .pcimg,
body .rvdz .pcimg,
body .rc2 .rc_card .pcimg,
body .mrdz .mzr_card .pcimg,
body .dzskel {
	background-color: #f3f0e8;
	background-image: linear-gradient(100deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, .62) 48%,
		rgba(255, 255, 255, 0) 66%);
	background-repeat: no-repeat;
	background-size: 220% 100%;
	background-position: -110% 0;
	animation: dzSkelShimmer 1.3s ease-in-out 5;
}

@keyframes dzSkelShimmer {
	from { background-position: -110% 0; }
	to   { background-position:  210% 0; }
}

/* 움직임 최소화 설정이면 shimmer 정지 — 크림 자리표시만 남는다. */
@media (prefers-reduced-motion: reduce) {
	body .product_list_wrap .product_type1 .img_wrap,
	body .main_section5.ngv2 .product_type1 .img_wrap,
	body .product_type1 .img_wrap,
	body .dcz .img_wrap,
	body .category_prod_list .product_slider_type1 .img_wrap,
	body .mrdz #bigBenefit .img_wrap,
	body .gnbp .pcimg,
	body .dcz .pcimg,
	body .rvdz .pcimg,
	body .rc2 .rc_card .pcimg,
	body .mrdz .mzr_card .pcimg,
	body .dzskel {
		background-image: none;
		animation: none;
	}
}

/* 이미지가 실제로 뜬 뒤에는 바탕을 지워, 투명 PNG·여백 있는 이미지에서 크림이 비치지 않게 한다.
   (dure_perf.js 가 img load 시 컨테이너에 .dzskel-done 부착. JS 실패해도 위 규칙만 남아 무해)
   클래스명을 3번 반복해 특정도를 위 스켈레톤 규칙의 최댓값(0,3,1)과 맞춘다 —
   같은 특정도면 나중에 선언된 이 규칙이 이긴다. !important·인라인 스타일 없이 해제 보장. */
body .dzskel-done.dzskel-done.dzskel-done {
	background-image: none;
	animation: none;
}

/* ---------- [2] 인라인 버튼 로딩 ---------- */

.dzbusy {
	position: relative;
	pointer-events: none;
	opacity: .72;
}
.dzbusy > .dzbusy-spin,
.dzbusy .dzbusy-spin {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	vertical-align: -2px;
	border-radius: 50%;
	border: 2px solid rgba(61, 96, 65, .25);
	border-top-color: #3d6041;
	animation: dzBtnSpin .6s linear infinite;
}
@keyframes dzBtnSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.dzbusy .dzbusy-spin { animation-duration: 1.6s; }
}

/* ===== 2026-08-18 PC 풋터 링크줄 겹침 방지 =====
   footer_link에 요리조리·두레이야기 2링크 추가로 줄이 길어져, 우측 absolute 패밀리사이트
   버튼(250px)에 '생활재 안내책자'·'사업자 정보'가 깔리던 회귀 차단. 버튼 폭+여백만큼
   내용 영역을 줄여 자연 줄바꿈. (.footer_wrap 프리픽스 = style_v2 로드순서 무관 우선) */
.footer_wrap .footer_link .inner { box-sizing: border-box; padding-right: 270px; }