@charset "utf-8";
/*
 * site-motion.css — 텍스트 등장 모션 + 상품 카드 호버 (메인 · 제품 리스트)   js/site-motion.js 와 한 쌍
 * 수치 근거는 js 머리 주석(레퍼런스 실측). html.rv-on 은 JS 가 붙인다 — JS 가 없거나 reduce 면 원래 화면 그대로.
 */

/* ===== 텍스트 등장 ===== */
/* 어절 마스크 — 아래로 내려간 글자를 가린다. 위아래 여유(.08/.16em)는 꼬리 글자(g·y·ㄱ)가 잘리지 않게, 음수 margin 으로 자리는 그대로 */
html.rv-on [data-rv] .rv-box {display:inline;}
/* 2026-10-29 글자를 쪼갠 안쪽 span(.rv-w/.rv-i/.rv-c)에 퍼블리싱의 "제목 span" 규칙(예: .text02_con span {font-size:40px})이 바로 걸려
   부모 span 의 크기(예: .bar │ 22px)를 덮어썼다 → 쪼갠 span 은 글자 모양을 항상 부모에게서 그대로 받는다 */
html.rv-on [data-rv] .rv-box, html.rv-on [data-rv] .rv-w, html.rv-on [data-rv] .rv-i, html.rv-on [data-rv] .rv-c {font-size:inherit !important; font-weight:inherit !important; letter-spacing:inherit !important; color:inherit !important; line-height:inherit !important;}
html.rv-on [data-rv] .rv-w {display:inline-block; white-space:nowrap; vertical-align:top; overflow:clip; padding:.08em .05em .16em; margin:-.08em -.05em -.16em;}
html.rv-on [data-rv] .rv-i,
html.rv-on [data-rv] .rv-c {display:inline-block; white-space:pre; transform:translateY(112%) rotate(8deg); transform-origin:0 100%; will-change:transform;}
/* lines — 줄마다 0.08s (zymocosmetics) · 시간·곡선은 theyoung 0.8s power2.out */
html.rv-on [data-rv="lines"] .rv-i {transition:transform .8s cubic-bezier(.5,1,.89,1); transition-delay:calc(var(--rv-line, 0) * 80ms);}
/* chars — 글자마다 0.025s, 0.75s (akemicosmetics). 긴 제목도 0.9s 안에 다 출발 */
html.rv-on [data-rv="chars"] .rv-c {transition:transform .8s cubic-bezier(.5,1,.89,1); transition-delay:min(calc(var(--rv-ci, 0) * 25ms), 900ms);}
html.rv-on [data-rv].rv-in .rv-i,
html.rv-on [data-rv].rv-in .rv-c {transform:none;}
/* fade — 아래 20px 에서 (zymocosmetics fadein) */
/* 2026-10-21 속도감 = theyoung(jm/theyoung) 기준: GSAP from {autoAlpha:0, y:50, duration:.8, ease:"power2.out"} → CSS 로 같은 값.
   power2.out = cubic-bezier(.5,1,.89,1). 이동 50px(PC, 1920 기준 vw 축소) · 모바일 30px */
html.rv-on [data-rv="fade"] {opacity:0; transform:translateY(min(50px, 2.6vw)); transition:opacity .8s cubic-bezier(.5,1,.89,1), transform .8s cubic-bezier(.5,1,.89,1); transition-delay:var(--rv-d, 0ms);}
@media all and (max-width: 1024px) { html.rv-on [data-rv="fade"] {transform:translateY(30px);} }
/* img — 사진·배경(2026-10-21): 1.1배에서 1배로 가라앉으며 페이드 1.2s power2.out. 개별 속성 scale 을 써서
   원래 transform(가운데 정렬 translate·호버 확대 scale)과 겹치지 않게 */
html.rv-on [data-rv="img"] {opacity:0; scale:1.1; transition:opacity 1s cubic-bezier(.5,1,.89,1), scale 1.2s cubic-bezier(.5,1,.89,1), transform 1s cubic-bezier(.11,.82,.39,.92); transition-delay:var(--rv-d, 0ms), var(--rv-d, 0ms), 0ms;}
html.rv-on [data-rv="img"].rv-in {opacity:1; scale:1;}
/* 2026-10-22 1.1배로 시작하는 사진이 모바일에서 타일 밖으로 넘쳐 가로 스크롤이 생겼다 → 감싸는 칸을 자른다(PC 는 호버 규칙에 이미 있음) */
html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a > .list_div {overflow:clip;}
/* rv-now — 위에서 들어온 요소는 등장 모션 없이 바로 (JS 가 두 프레임 뒤 뗀다) */
html.rv-on [data-rv].rv-now, html.rv-on [data-rv].rv-now * {transition:none !important;}
/* rv-init — 시작 상태를 붙이는 순간(JS 가 두 프레임 뒤 뗀다). 이미 보이던 첫 화면 요소가 사라지는 모습을 보이지 않게 (2026-10-30) */
html.rv-init [data-rv], html.rv-init [data-rv] * {transition:none !important;}
/* zoom — 사진 (2026-10-29, imfrom.co.kr 상세 실측: scale 1.2 → 1, 1.5s) — 감싸는 칸(.img_con)이 overflow:hidden 이라 커진 부분은 잘린다 */
/* 2026-10-29 2차: 레퍼런스 실측대로 — 사진은 처음부터 보이고(페이드 없음) 1.2배로 확대돼 있다가, 칸이 화면 80% 선에 들어오면 1.5s ease 로 1배 */
html.rv-on [data-rv="zoom"] {scale:1.2; transition:scale 1.5s ease;}
html.rv-on [data-rv="zoom"].rv-in {scale:1;}
/* 2026-10-30 제품 상세 info03 — 배경 사진 칸(.img_con)을 키우므로 감싸는 칸을 자른다(info01·02·04 는 원래 overflow:hidden) */
html.rv-on .product_view_con > .info03_con > .contents_con {overflow:hidden;}
/* fadeo — 투명도만 0.8s (위치를 다른 스크립트가 재는 요소) */
html.rv-on [data-rv="fadeo"] {opacity:0; transition:opacity .8s cubic-bezier(.5,1,.89,1); transition-delay:var(--rv-d, 0ms);}
html.rv-on [data-rv="fadeo"].rv-in {opacity:1;}
html.rv-on [data-rv="fade"].rv-in {opacity:1; transform:none;}

/* ===== 상품 카드 호버 (2026-10-21 v4) =====
   레이아웃은 원래 퍼블리싱 그대로(회색 덮개·로고·하단 More View), 나타나는 방식만.
   v3 의 버튼 글자 굴림 → "별로" 로 뺌. 덮개는 빠르게 튀어나오는 감속 곡선(.11,.82,…) 대신 고르게 스며드는 ease-in-out 0.6s
   ① 덮개: opacity 0.6s cubic-bezier(.45,0,.25,1) — 시작과 끝이 둘 다 부드럽다
   ② 로고(두 번째 사진 자리): 1.06배 → 1배, 0.8s power2.out (넘치는 부분은 담당자가 li/div 에 overflow:hidden 추가)
   ③ 버튼: 아래 10px 에서 0.1s 늦게 올라온다 0.6s power2.out
   마우스를 뗄 때는 지연 없이 같은 곡선으로 사라진다 */
@media all and (min-width: 1025px) {
	html.rv-on .product_list_con > ul > li > a > .list_div > .over_con {transition:opacity .6s cubic-bezier(.45,0,.25,1);}
	html.rv-on .product_list_con > ul > li > a > .list_div > .over_con > .img_con {transform:scale(1.06); transition:transform .8s cubic-bezier(.5,1,.89,1);}
	html.rv-on .product_list_con > ul > li > a:hover > .list_div > .over_con > .img_con {transform:none;}
	html.rv-on .product_list_con > ul > li > a > .list_div > .over_con > .btn_con {transform:translateY(min(10px, .52vw)); transition:transform .6s cubic-bezier(.5,1,.89,1);}
	html.rv-on .product_list_con > ul > li > a:hover > .list_div > .over_con > .btn_con {transform:none; transition-delay:.1s;}

	/* 메인 Best Items 카드 — 사진이 천천히 살짝 커진다 */
	html.rv-on #main_con > .info04_con > .contents_con > .contents_con > .list_con > ul > li > a > .list_div > .img_con {overflow:hidden;}
	html.rv-on #main_con > .info04_con > .contents_con > .contents_con > .list_con > ul > li > a > .list_div > .img_con > .img {transition:transform .8s cubic-bezier(.11,.82,.39,.92);}
	html.rv-on #main_con > .info04_con > .contents_con > .contents_con > .list_con > ul > li > a:hover > .list_div > .img_con > .img {transform:translate(-50%, -50%) scale(1.06);}
}

/* ===== 헤더 (2026-10-21) ===== */
/* 페이지가 열릴 때 위에서 내려온다 — JS 가 .rv-hd-in → .rv-hd-go 를 차례로 붙였다가 끝나면 뗀다 */
html.rv-on #header.rv-hd-in {transform:translateY(-100%); opacity:0;}
html.rv-on #header.rv-hd-in.rv-hd-go {transform:none; opacity:1; transition:transform .8s cubic-bezier(.5,1,.89,1), opacity .8s cubic-bezier(.5,1,.89,1);}

/* 글자 롤링 (헤더 메뉴·언어, 푸터 메뉴) — 칸 높이 --rl-h 는 JS 가 실제 줄 높이로 넣는다 */
html.rv-on .rl {display:inline-block; white-space:nowrap; vertical-align:top;}
html.rv-on .rl-c {display:inline-block; overflow:clip; height:var(--rl-h, 1.4em); vertical-align:top;}
html.rv-on .rl-in {display:flex; flex-direction:column; transition:transform .5s cubic-bezier(.65,0,.35,1); transition-delay:calc(var(--rl-i, 0) * 18ms);}
html.rv-on .rl-in > span {display:block; height:var(--rl-h, 1.4em); line-height:var(--rl-h, 1.4em); white-space:pre;}   /* 2026-10-28 공통 * {line-height:normal} 때문에 글자가 칸 위로 붙었다 → 칸 높이와 같은 줄 높이로 가운데 */
/* 2026-10-29 현재 메뉴(a.on {text-decoration:underline})의 밑줄이 안 보였다 — 글자 롤링이 글자를 inline-block 칸으로 나누면
   밑줄은 inline-block 안으로 이어지지 않는다(CSS 규칙). 같은 위치(글자 아래)에 1px 선을 배경으로 다시 그린다 */
html.rv-on a.on > .rl {background:linear-gradient(currentColor, currentColor) no-repeat 0 1.2em / 100% max(1px, .07em);}
@media all and (min-width: 1025px) {
	html.rv-on a:hover > .rl .rl-in,
	html.rv-on a:focus-visible > .rl .rl-in {transform:translateY(-50%);}
}

/* ===== 푸터 (2026-10-21) ===== */
/* 2026-10-28 담당자 "푸터 모션 때 아래 여백이 생긴다" — 아래에서 올라오는 요소(transform)가 페이지 맨 끝 아래로 50px 튀어나와
   스크롤 영역이 그만큼 늘었고, 그 자리에 푸터 배경 없는 빈 띠가 보였다 → 푸터 밖으로 나간 부분은 잘라 낸다(레이아웃 변화 없음) */
html.rv-on #footer {overflow:clip;}
@media all and (min-width: 1025px) {
	/* 하단 링크 — 밑줄이 왼쪽에서 그어진다 */
	html.rv-on #footer > .info02_con > .contents_con > .nav span a {background:linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition:background-size .5s cubic-bezier(.65,0,.35,1);}
	html.rv-on #footer > .info02_con > .contents_con > .nav span a:hover {background-size:100% 1px;}
	/* SNS · 맨 위로 — 살짝 떠오른다 */
	html.rv-on #footer > .info01_con > .contents_con > .sns_con > .list_con > ul > li > a,
	html.rv-on #footer > .info01_con > .contents_con > .top_btn .a_btn {transition:transform .5s cubic-bezier(.26,1,.48,1);}
	html.rv-on #footer > .info01_con > .contents_con > .sns_con > .list_con > ul > li > a:hover {transform:translateY(-3px);}
	html.rv-on #footer > .info01_con > .contents_con > .top_btn .a_btn:hover {transform:translateY(-6px);}
}

/* ===== 메인 2번째 단락 타일 호버 (2026-10-21 v4) =====
   사진 줌 인 + 원래 그라데이션·Learn More. 그라데이션은 0.5s 로 스며들고, 글자는 아래 14px 에서 떠오르며(0.1s 뒤),
   화살표는 왼쪽 12px 에서 따라 들어온다(0.18s 뒤) — 마스크 없이 opacity + 짧은 이동만 (v1 의 기울어진 마스크 등장이 과했음) */
@media all and (min-width: 1025px) {
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a > .list_div {overflow:hidden;}
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a > .list_div > .bg {transition:opacity 1s cubic-bezier(.5,1,.89,1), scale 1.2s cubic-bezier(.5,1,.89,1), transform 1s cubic-bezier(.11,.82,.39,.92); transition-delay:var(--rv-d, 0ms), var(--rv-d, 0ms), 0ms;}   /* 등장(img)과 호버 줌을 같이 */
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a:hover > .list_div > .bg {transform:scale(1.06);}
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a > .list_div > .over_con {display:block; opacity:0; transition:opacity .5s ease;}
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a:hover > .list_div > .over_con {opacity:1;}
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a > .list_div > .contents_con > .view_more_con {display:block;}
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a > .list_div > .contents_con > .view_more_con .text_td span {display:inline-block; opacity:0; transform:translateY(min(14px, .73vw)); transition:opacity .3s ease, transform .4s ease;}
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a > .list_div > .contents_con > .view_more_con .arrow_td img {opacity:0; transform:translateX(max(-12px, -.63vw)); transition:opacity .3s ease, transform .4s ease;}
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a:hover > .list_div > .contents_con > .view_more_con .text_td span {opacity:1; transform:none; transition:opacity .6s ease .1s, transform .8s cubic-bezier(.22,1,.36,1) .1s;}
	html.rv-on #main_con > .info02_con > .contents_con > .list_con > ul > li > a:hover > .list_div > .contents_con > .view_more_con .arrow_td img {opacity:1; transform:none; transition:opacity .6s ease .18s, transform .8s cubic-bezier(.22,1,.36,1) .18s;}
}

/* ===== INNOCENCE X INNOVATION 목록 타일 호버 (2026-10-29, imfrom.co.kr 컬렉션 참고) =====
   원래(style.css): 이름이 사라지고 어두운 막이 0.5s 로 덮인다 — 그대로 두고, 막 안의 글·버튼이 아래에서 차례로 떠오르고
   배경 사진은 천천히 1.06배로 확대(사진은 ::before 로 한 장 더 깔아 키운다 — 원래 배경은 타일 자체에 있어 따로 키울 수 없다) */
@media all and (min-width: 1025px) {
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a > .list_div::before {content:''; position:absolute; inset:0; z-index:0; background:inherit; background-size:cover; background-position:center; transition:transform 1.2s cubic-bezier(.22,1,.36,1);}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a:hover > .list_div::before {transform:scale(1.06);}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a > .list_div > .text_con {transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a:hover > .list_div > .text_con {transform:translateY(min(12px, .63vw));}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a > .list_div > .over_con > .contents_con > .text_con > div,
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a > .list_div > .over_con > .contents_con > .btn_con {opacity:0; transform:translateY(min(20px, 1.04vw)); transition:opacity .4s ease, transform .4s ease;}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a:hover > .list_div > .over_con > .contents_con > .text_con > div,
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a:hover > .list_div > .over_con > .contents_con > .btn_con {opacity:1; transform:none; transition:opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1);}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a:hover > .list_div > .over_con > .contents_con > .text_con > .text01_con {transition-delay:.1s;}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a:hover > .list_div > .over_con > .contents_con > .text_con > .text02_con {transition-delay:.18s;}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a:hover > .list_div > .over_con > .contents_con > .btn_con {transition-delay:.26s;}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a > .list_div > .over_con > .contents_con > .btn_con .div_btn > img {transition:transform .5s cubic-bezier(.22,1,.36,1);}
	html.rv-on .ixi_sub01_con > .contents_con > .list_con li a:hover > .list_div > .over_con > .contents_con > .btn_con .div_btn > img {transform:translateX(min(4px, .21vw));}
}