@charset "utf-8";
/*
 * ingredient-stage.css — 성분 모션 스테이지 (js/ingredient-stage.js 와 한 쌍)
 * html.ing-stage-on 일 때만 겹침 레이아웃이 된다. (데스크탑 1025px 이상 + 모션 허용)
 * 클래스가 없으면 원래 style.css 레이아웃 그대로 — 입자 레이어만 숨긴다.
 *
 * vw 변환 (2026-10-21, style.css·common_all.css 와 같은 규칙)
 *   PC·공통 규칙 = min(px, px÷1920×100vw) · 음수 max(-px, -vw) / 모바일 규칙(.ing-stage-mob · max-width:1024px) = px÷360×100vw
 *   px 로 둔 것: filter·box-shadow 효과, perspective, 미디어쿼리, 화면 높이 예산(100vh - 160px · 100svh - 330px),
 *   배경 층 160px(js/ing-section-bg.js EXT 와 한 쌍), 쓰지 않는 옛 마스크 값(--ring·--sx)
 */

/* 기본: 입자 레이어 숨김 (display:none 이면 model-embed 가 로드를 시작하지 않는다) */
#main_con .ing_particle {display:none;}

/* ===== 스테이지 모드 ===== */
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] {height:100vh; position:relative; top:0; left:0; overflow:hidden;}

/* 1) 잎 단락 — 화면 중앙에 고정 */
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info01_con {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; display:flex; align-items:center;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info01_con > .contents_con {width:100%;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info01_con > .contents_con > .contents_con > .img_con {width:min(863px, 44.95vw, calc((100vh - 160px) * 1.2486));}

/* 2) 입자 레이어 — 스테이지 전체를 덮는 투명 캔버스. 스크롤·클릭을 막지 않게 pointer-events 해제 */
html.ing-stage-on #main_con .ing_particle {display:block; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; pointer-events:none; opacity:0;}
html.ing-stage-on #main_con .ing_particle > model-embed {position:absolute; top:0; left:0;}
/* 모델 로드 전 자리 채움 (같은 입자 나무 정적 이미지) */
html.ing-stage-on #main_con .ing_particle > .ing_particle_poster {position:absolute; top:50%; left:50%; width:auto; height:72%; transform:translate(-50%, -50%); opacity:0.9; transition:opacity 0.6s ease;}
html.ing-stage-on #main_con .ing_particle.is-ready > .ing_particle_poster {opacity:0;}

/* 3) 오브제 단락 — 스테이지에 겹쳐 두고 화면 높이에 맞춰 축소(--ing-fit) */
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con {position:absolute; top:0; left:0; z-index:3; width:100%; height:100%; margin:0;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(var(--ing-fit, 1));}
/* 정적 입자 이미지는 실시간 입자로 대체 — WebGL 이 없으면(ing-no-gl) 다시 보인다 */
html.ing-stage-on:not(.ing-no-gl) #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con > .img {visibility:hidden;}
html.ing-stage-on.ing-no-gl #main_con .ing_particle {display:none;}

/* 4) 살아 있는 레이어 — 빛무리(입자 뒤) · 세포망 캔버스(네트워크 뒤) · 연결점 맥박 */
html.ing-stage-on #main_con .ing_glow {position:absolute; top:50%; left:50%; z-index:2; width:78vh; height:78vh; margin:-39vh 0 0 -39vh; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(255,228,168,0.55) 0%, rgba(255,228,168,0.22) 42%, rgba(255,228,168,0) 70%);}
html.ing-stage-on #main_con .info02_con .img_con > .ing_plexus {position:absolute; top:-10%; left:-12%; z-index:5; width:124%; height:120%; pointer-events:none;}
html.ing-stage-on #main_con [data-ing-stage].ing-alive .info02_con .text_div > .dot .line .dot {animation:ingPulse 2.6s ease-out infinite;}
html.ing-stage-on #main_con [data-ing-stage].ing-alive .info02_con .text_div > .dot .line02 .dot {animation-delay:0.6s;}
html.ing-stage-on #main_con [data-ing-stage].ing-alive .info02_con .text_div > .dot .line03 .dot {animation-delay:1.2s;}
@keyframes ingPulse {
	0% {box-shadow:0 0 0 0 rgba(27,27,23,0.45);}
	70% {box-shadow:0 0 0 9px rgba(27,27,23,0);}
	100% {box-shadow:0 0 0 0 rgba(27,27,23,0);}
}

/* 5) 네트워크 빛 레이어 — 네트워크 png(z20) 바로 위. 밝게 복제한 png 를 마스크로 일부만 드러낸다 */
html.ing-stage-on #main_con .info02_con .img_con > .ing_net_light {position:absolute; top:0; left:0; z-index:21; width:100%; height:100%; pointer-events:none; opacity:0;}
html.ing-stage-on #main_con .info02_con .img_con > .ing_net_light img {display:block; width:100%; filter:saturate(2.6) brightness(0.9) drop-shadow(0 0 5px rgba(255,180,60,0.95)) drop-shadow(0 0 14px rgba(255,196,110,0.7));}
/* 맥박 링: --ring 반경의 띠만 보인다 */
html.ing-stage-on #main_con .info02_con .img_con > .ing_net_light.is-pulse {--ring:0px;
	-webkit-mask-image:radial-gradient(circle at 50% 52%, transparent calc(var(--ring) - 90px), #000 calc(var(--ring) - 20px), #000 var(--ring), transparent calc(var(--ring) + 40px));
	        mask-image:radial-gradient(circle at 50% 52%, transparent calc(var(--ring) - 90px), #000 calc(var(--ring) - 20px), #000 var(--ring), transparent calc(var(--ring) + 40px));}
/* 신호 빛: (--sx, --sy) 주변만 보인다 */
html.ing-stage-on #main_con .info02_con .img_con > .ing_net_light.is-signal {--sx:487px; --sy:437px;
	-webkit-mask-image:radial-gradient(circle 170px at var(--sx) var(--sy), #000 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
	        mask-image:radial-gradient(circle 170px at var(--sx) var(--sy), #000 0%, rgba(0,0,0,0.5) 45%, transparent 100%);}

/* 6) 네트워크 3D — img_con 에 원근을 주고, 잔상 2장은 네트워크(z20) 뒤에 깐다 */
html.ing-stage-on #main_con .info02_con .img_con {perspective:1400px;}
html.ing-stage-on #main_con .info02_con .img_con > .ing_net_ghost {position:absolute; top:0; left:0; z-index:19; width:100%; height:100%; pointer-events:none;}
html.ing-stage-on #main_con .info02_con .img_con > .ing_net_ghost img {display:block; width:100%;}
html.ing-stage-on #main_con .info02_con .img_con > .ing_net_ghost.is-in img {filter:saturate(1.6);}

/* 7) 모바일 스테이지 (~1024px, 360px 기준) — html.ing-stage-mob 는 JS 가 붙인다 */
/* 2026-10-22 가로 스크롤: 탭 썸네일·원료 그림이 화면 오른쪽을 2~6px 넘어 새로고침하면 옆으로 밀렸다 → 단락을 가로로만 자른다(clip — 세로·고정된 스테이지는 그대로) */
html.ing-stage-on #main_con > .info05_con {overflow-x:clip;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] {height:100vh; height:100svh;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info01_con {flex-direction:column; justify-content:flex-start; padding:25vw 5.56vw 0; box-sizing:border-box;}   /* 2026-10-22 담당자 "모바일 사이 간격이 너무 많다": 화면 세로 가운데 정렬(center) → 헤더(16.67vw) 바로 아래 8.33vw 에서 시작. 키 큰 폰일수록 위 빈 띠가 커지던 문제 */
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info01_con > .contents_con > .title_con {width:100%; max-width:88.89vw; margin:0 auto 7.78vw;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info01_con > .contents_con > .contents_con > .img_con {width:min(125%, 144.44vw, calc((100svh - 330px) * 1.2486)); margin:0 0 0 50%; translate:-50% 0;}   /* 2026-10-22 위로 붙인 만큼 아래가 비어 — 세로 여유가 있으면 성분 그림을 글 폭보다 넓게(최대 125%) 키워 채운다. 가로 가운데는 translate(개별 속성 — GSAP transform 과 안 겹침) */
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con {top:calc(50% + 7.78vw); width:100%;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .bg02 {top:calc(50% + 19.44vw); left:-1.94vw;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .bg04 {top:calc(50% - 69.44vw); right:-8.89vw;}
html.ing-stage-on.ing-stage-mob #main_con .ing_glow {width:92vw; height:92vw; margin:-46vw 0 0 -46vw;}

/* 8) 제품 단락 노출 — contents_div 를 둘로 나눠서 style.css 의 :first-child 초기 노출이
      첫째(스테이지)에만 걸린다. 바로 뒤 제품 단락도 같이 보이게 한다 (모션 on/off 무관).
      탭 클릭 시에는 jQuery 인라인 display 가 이 규칙보다 우선한다. */
#main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div[data-ing-spacer]:first-child + .contents_div {display:block;}

/* 9) 제품 레이어 — 성분명(text_div) 가운데에 겹친다. 스테이지 모드에서만 보인다.
      style.css 의 ".img_con img {width:100%}" 를 이기려고 같은 경로를 길게 쓴다 */
#main_con .info02_con .text_div > .ing_prod {display:none;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div > .ing_prod {display:block; position:absolute; top:50%; left:50%; z-index:5; pointer-events:none; line-height:0;}  /* 가운데 정렬(xPercent/yPercent -50)은 JS 가 건다 */
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div > .ing_prod img {display:block; width:auto; max-width:none;}
/* 데스크탑 (스테이지 축소 --ing-fit 전 크기) — 병·샴푸는 png 여백 때문에 img 365px = 보이는 높이 300/235px */
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div.text01 > .ing_prod img {width:min(230px, 11.98vw); height:auto;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div.text02 > .ing_prod img {height:min(365px, 19.01vw);}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div.text03 > .ing_prod img {height:min(365px, 19.01vw);}
/* 모바일 */
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div.text01 > .ing_prod img {width:31.11vw;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div.text02 > .ing_prod img {height:41.67vw;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div.text03 > .ing_prod img {height:44.44vw;}

/* 10) 아웃트로 — 제품 단락이 스테이지(z6)에 겹쳐 나타난다 (data-ing-outro 페이지만, JS 가 .ing_outro 로 옮긴다)
       데스크탑 실높이 = 병 805 + 라인업 아래 넘침 155. 넘침 절반만큼 위로, 헤더 절반만큼 아래로 보정 */
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .ing_outro {display:block; position:absolute; top:0; left:0; z-index:6; width:100%; height:100%;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .ing_outro > .product_con {position:absolute; top:calc(50% + min(35px, 1.82vw)); left:50%; width:100%; margin:0; transform:translate(-50%, -50%) scale(var(--ing-pfit, 1)) translateY(max(-77px, -4.01vw));}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .ing_outro > .product_con {top:calc(50% + 8.33vw); transform:translate(-50%, -50%) scale(var(--ing-pfit, 1));}   /* 2026-10-22 이미지 위·글 아래 배치 → 헤더(16.67vw) 아래 남는 공간의 가운데 */
/* 2026-10-22 2차 "실기기에서 내려오면 헤더와 병이 겹친다" → 글·버튼은 그대로 두고 이미지 묶음(병 + 라인업)만 0.8배.
   common_all.css 모바일 값(병 100% · 라인업 78.61vw / 아래로 -22.78vw · 제목 위 38.34vw = 넘침 22.78 + 간격 15.56)을 같은 비율로 */
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .ing_outro > .product_con > .contents_con > .contents_con > .img_con {width:80%; margin:0 auto;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .ing_outro > .product_con > .contents_con > .contents_con > .img_con > .img02_con {width:62.89vw; bottom:-18.22vw;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .ing_outro > .product_con > .contents_con > .title_con {margin-top:33.78vw;}

/* 11) 2D 이미지 입자 스테이지 (data-ing-particle-src — 쌀·배 탭) — WebGL 이 없어도 그린다.
       네트워크 가운데 정적 입자 이미지(병풀)는 이 스테이지에서 쓰지 않는다 */
html.ing-stage-on.ing-no-gl #main_con .ing_particle.is-2d {display:block;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-particle-src] > .info02_con > .contents_con > .img_con > .img {visibility:hidden;}

/* 12) 탭 이미지 → 스테이지 비행 (data-ing-fly) — 헤더(z100) 아래로 지나간다 */
.ing_fly {position:fixed; top:0; left:0; z-index:90; pointer-events:none; visibility:hidden; transform-origin:0 0; will-change:transform;}   /* 2026-10-14 transform 으로만 움직인다 */
.ing_fly img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain;}
.ing-fly-hide {visibility:hidden !important;}


/* 5-1) 네트워크 빛 캔버스 (2026-10-13) — 위 5) 의 png+필터+마스크 2장을 대체. 불투명도는 캔버스 안에서 그린다 */
html.ing-stage-on #main_con .info02_con .img_con > .ing_net_light.ing_net_light_cv {opacity:1;}

/* 12-2) 비행 안착 전 — 스테이지가 탭 메뉴 밑으로 끌어올려져 겹쳐 있으므로 터치·클릭을 통과시킨다 (JS 가 .ing-pass) */
html.ing-stage-on #main_con .ing-pass,
html.ing-stage-on #main_con .ing-pass * {pointer-events:none !important;}


/* 14) 성분·제품 단락 뒷배경 모션 (js/ing-section-bg.js) — 원래 배경을 레이어로 옮기고 원래 배경은 끈다 */
#main_con > .info05_con.ing-bg-live {background-image:none !important;}
/* 2026-10-15 경계 틈: 시차로 배경이 위로 밀린 채(스크롤이 빠르면 늦게 따라온다) 단락 끝이 보이면 그림 아래가 비어 흰 띠가 보였다
   (크롬 최대 10px · 엣지 33px 실측) → 배경 층을 단락 아래로 160px 더 길게(단락 밖은 잘림) + 그림 아래에 그림 맨 아래 줄 색을 이어 붙인다 */
#main_con > .info05_con > .ing_sec_bg {position:absolute; left:0; right:0; bottom:-160px; top:0; z-index:0; pointer-events:none; overflow:hidden;}
#main_con > .info05_con > .ing_sec_bg > .ing_sec_bg_plate {position:absolute; left:50%; bottom:160px; background-repeat:no-repeat; background-size:100% auto; background-position:bottom center; transform-origin:50% 100%; will-change:transform;}
/* 2026-10-14 성능: mix-blend-mode(soft-light) 는 아래 전체를 매 프레임 다시 합성한다 → 반투명 흰 띠로 같은 인상 */
#main_con > .info05_con > .ing_sec_bg > .ing_sec_sheen {position:absolute; left:0; bottom:0; width:100%; height:45%; pointer-events:none;
	background:linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 68%);}
#main_con > .info05_con > .ing_sec_bg > .ing_sec_bg_plate::after {content:""; position:absolute; left:0; right:0; top:100%; height:200px; margin-top:-2px; background:#F0EADE;}   /* 그림 맨 아래 줄 평균색 */
@media all and (max-width: 1024px) { #main_con > .info05_con > .ing_sec_bg > .ing_sec_bg_plate::after {background:#EDE6DC;} }
#main_con > .info05_con > .ing_sec_bg > .ing_sec_drop {position:absolute; border-radius:50%; will-change:transform, opacity;
	background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0 18%, rgba(255,255,255,0.35) 40%, rgba(236,225,205,0.25) 70%, rgba(236,225,205,0) 72%);
	box-shadow:inset -1px -2px 3px rgba(190,170,140,0.25);}

/* 12-1) 모바일 탭 메뉴 가로 한 줄 (비행 페이지만 — JS 가 .ing-nav-row 를 건다, 2026-10-13 담당자 요청) */
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row {max-width:none; padding:0 3.33vw; box-sizing:border-box;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con {display:block;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul {display:flex; justify-content:center; align-items:flex-start;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li {float:none; flex:1 1 0; min-width:0; margin:0 0 0 2.78vw;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li:first-child {margin:0;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li .list_div > .img_con.img01 img,
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li .list_div > .img_con.img02 img,
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li .list_div > .img_con.img03 img {height:26.67vw;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li .list_div > .contents_con {margin:3.33vw 0 0 0;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li .list_div > .contents_con > .text_con span {font-size:3.06vw; letter-spacing:-0.08vw; white-space:nowrap;}   /* 2026-10-29 "Korean Pear │ 돌배" 가 한 칸(약 29vw)에 들어가게 3.89 → 3.06vw */
/* 2026-10-27 탭 이름이 "Rice │ 쌀" 로 바뀜 — 위 규칙(3.89vw)이 구분선까지 키운다 → common_all.css 비율(글자 5.56 : 선 2.78 · 간격 1.39)을 이 크기에 맞춰 */
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li .list_div > .contents_con > .text_con .bar {margin:0 0.56vw; font-size:1.67vw;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li .list_div > .contents_con > .bar_con {margin:2.22vw 0 0 0;}
html.ing-stage-on.ing-stage-mob #main_con > .info05_con > .contents_con > .contents_con > .nav.ing-nav-row > .list_con > ul > li .list_div > .contents_con > .bar_con div {width:16.67vw; height:2.22vw;}

/* 15) 성분 상자 안 제품 이미지(.text_div > .img_con)를 흐름에서 뺀다 (2026-10-13)
       흐름 안에 있으면 성분 상자가 이미지 높이(460px)만큼 길어져, 아래 기준(bottom)으로 놓인 연결선 묶음(.dot)과
       Hyaluronic Acid(text03) 위치가 위로 밀려 선이 꼬인다. 모션 페이지에서만 absolute 로 성분명 자리에 겹쳐 둔다 */
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .info02_con > .contents_con > .img_con .text_div > .img_con {position:absolute; top:0; left:0; right:0; margin:0 auto; z-index:5; pointer-events:none;}

/* 16) 제품 단락 등장 임팩트·나온 뒤 움직임 (아웃트로 페이지) */
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .ing_outro > .product_con > .contents_con > .contents_con > .img_con > .ing_prod_flash {position:absolute; left:8%; top:8%; width:70%; aspect-ratio:1; z-index:15; pointer-events:none; opacity:0; border-radius:50%;
	background:radial-gradient(circle, rgba(255,250,235,0.95) 0%, rgba(255,232,190,0.55) 35%, rgba(255,232,190,0) 70%);}
html.ing-stage-on #main_con > .info05_con > .contents_con > .contents_con > .contents_con .contents_div > .ingredient_con[data-ing-stage] > .ing_outro > .product_con > .contents_con > .contents_con > .img_con > .img02_con {overflow:hidden;}

/* 12-3) 비행 페이지 이중 안전장치 — 안착(.ing-landed) 전에는 스테이지 큰 이미지를 숨긴다
         (비행 클래스 토글이 늦거나 빠져도 탭 썸네일과 큰 이미지가 동시에 보이지 않게) */
html.ing-stage-on #main_con [data-ing-stage].ing-flying:not(.ing-landed) > .info01_con .img_con {visibility:hidden !important;}

/* 15) 성분명 타이핑 (data-ing-label="type", js 가 .ing-type 을 붙인다) — 디코드 kit 의 블록 커서(.55em 사각형)를
       얇은 캐럿으로 바꿔 '터미널'이 아니라 '타이핑' 느낌으로 (2026-10-14) */
.ing-type .hdg-scr-c.is-cur::before,
.ing-type .hdg-scr-c.is-cure::before {width:min(2px, 0.1vw); height:.95em; background:#1b1b17; opacity:.8; margin-left:.06em;}

/* 16) 성분·제품 단락 배경 WebP (2026-10-14 이미지 최적화) — style.css·common_all.css 의 PNG(1.5MB·584KB)를
       같은 그림의 WebP(43KB·18KB)로 덮는다. 공통 css 는 건드리지 않는다. 배경 모션(ing-section-bg.js)은 이 값을 읽어 간다 */
#main_con > .info05_con {background-image:url("/en/img/main/main_info05_con_bg.webp");}
@media all and (max-width: 1024px) {
	#main_con > .info05_con {background-image:url("/en/img/main/m_main_info05_con_bg.webp");}
}

/* 17) 타이틀 글자 모션 (data-ing-title, js 가 쪼갠다) — 줄 마스크 안에서 글자가 올라오고, 퇴장 때 흩어진다 */
.ing-tl {display:block; overflow:clip; overflow-clip-margin:.25em; padding:.06em 0 .12em; margin:-.06em 0 -.12em;}
.ing-tc {display:inline-block; white-space:pre; will-change:transform, opacity, filter;}
.ing-tci {display:inline-block; white-space:pre; will-change:transform, opacity;}
.ing-dl {display:block; overflow:clip;}
.ing-dlo {display:block;}
.ing-dli {display:block;}
.ing-t-open .ing-tl, .ing-t-open .ing-dl {overflow:visible;}

/* 18) 가벼운 모드 (html.ing-lite — js/perf-lite.js 가 엣지이거나 실제로 버벅일 때 켠다)
       움직이는 흐림(blur)은 GPU 에서 가장 비싼 효과 — 페이드·이동만 남긴다. 배경 물방울·빛 띠 숨김 */
/* 모션 코드가 인라인으로 거는 흐림만 끈다(style 속성에 filter 가 있는 요소). 디자인에 고정된 필터(빛무리 blur 250px, 고스트 saturate)는 그대로 */
html.ing-lite #main_con [style*="filter"] {filter:none !important;}
html.ing-lite .ing_sec_drop, html.ing-lite .ing_sec_sheen {display:none !important;}
html.ing-lite .ing_sec_bg_plate {will-change:auto;}
/* 2026-10-15 엣지 버벅임 2차 — 가벼운 모드에서 매 프레임 비싼 효과 두 가지를 같은 인상의 싼 것으로 바꾼다(공통 css 는 그대로)
   ① 헤더 유리 효과(backdrop-filter:blur 15px): 고정 헤더 아래로 지나가는 화면(고정된 성분 스테이지 포함)을 프레임마다 다시 흐린다
      → 흐림 없이 거의 불투명한 흰 바탕
   ② 성분 단락 뒤 큰 빛무리 2개(1596px 원에 blur 250px) → 같은 색의 원형 그라디언트(필터 없음) */
html.ing-lite #header.scroll {-webkit-backdrop-filter:none; backdrop-filter:none; background-color:rgba(255,255,255,.9);}
html.ing-lite #main_con > .info05_con > .bg {filter:none; background-color:transparent;
	background-image:radial-gradient(closest-side, rgba(244,233,218,1) 0%, rgba(244,233,218,.9) 38%, rgba(244,233,218,.5) 68%, rgba(244,233,218,.15) 88%, rgba(244,233,218,0) 100%); transform:translateX(-50%) scale(1.25);}
html.ing-lite #main_con > .info05_con > .bg02 {transform:scale(1.25);}

/* 19) 스크롤 안내 (js 가 단락 설명 .text02_con 안에 만든다, 비행 페이지만) — 설명 아래 빈 공간에 띄워 자리를 차지하지 않는다
       2026-10-14 2차: 칩 박스·마우스 아이콘이 디자인과 겉돈다 → 사이트의 텍스트 링크(4번 단락 See More: #1B1B17·500·밑줄)와
       Learn More 의 얇은 화살표(0.75 선)를 그대로 쓴다. 화살표가 천천히 아래로 까딱이고, 밑줄이 옅게 숨쉰다 */
html.ing-stage-on #main_con > .info05_con > .contents_con > .title_con > .text02_con {position:relative;}
.ing_scroll_cue {position:absolute; left:50%; top:100%; margin-top:min(14px, 0.73vw); transform:translateX(-50%); pointer-events:none; white-space:nowrap; line-height:1;}
.ing_scroll_cue .ing_sc_in {display:inline-flex; align-items:center; gap:min(7px, 0.36vw); color:#1B1B17;}
html.ing-stage-on #main_con > .info05_con > .contents_con > .title_con > .text02_con > .ing_scroll_cue span {font-size:min(15px, 0.78vw); color:#1B1B17; font-weight:500; line-height:1.3; letter-spacing:-.02em;}
.ing_scroll_cue .ing_sc_txt {position:relative; padding-bottom:min(3px, 0.16vw);}
.ing_scroll_cue .ing_sc_txt::after {content:""; position:absolute; left:0; right:0; bottom:0; height:min(1px, 0.05vw); background:#1B1B17;}
.ing_scroll_cue .ing_sc_arw {display:block; width:min(13px, 0.68vw); height:min(13px, 0.68vw); flex:none;}
.ing_scroll_cue .ing_sc_arw svg {display:block; width:100%; height:100%;}
/* 2026-10-21 등장 + 둥둥: 아래 16px 에서 0.8s power2.out 으로 떠오른 뒤(theyoung 등장 값), 위아래 6px 를 2.8s 마다 천천히 오간다.
   transform 은 가운데 정렬(translateX)·탭 이름 퇴장 트윈(.ing_sc_in)이 쓰므로 여기서는 개별 속성 translate 만 쓴다(충돌 없음) */
.ing_scroll_cue {opacity:0; --ing-sc-y:min(16px, 0.83vw); --ing-sc-f:max(-6px, -0.31vw);}
.ing_scroll_cue.is-in {animation:ingScIn .8s cubic-bezier(.5,1,.89,1) both, ingScFloat 2.8s ease-in-out .8s infinite alternate;}
@keyframes ingScIn { from {opacity:0; translate:0 var(--ing-sc-y);} to {opacity:1; translate:0 0;} }
@keyframes ingScFloat { from {opacity:1; translate:0 0;} to {opacity:1; translate:0 var(--ing-sc-f);} }
@media (prefers-reduced-motion: reduce) { .ing_scroll_cue {opacity:1;} .ing_scroll_cue.is-in {animation:none;} }
/* 2026-10-15 담당자: 안내 문구 모션은 일단 뺀다(전체 모션 작업 때 다시) — 화살표 까딱임·밑줄 숨쉬기 제거, 글·화살표·밑줄은 고정 */
@media all and (max-width: 1024px) {
	.ing_scroll_cue {margin-top:6.11vw;}
	.ing_scroll_cue .ing_sc_in {gap:1.94vw;}
	html.ing-stage-on #main_con > .info05_con > .contents_con > .title_con > .text02_con > .ing_scroll_cue span {font-size:3.61vw;}
	.ing_scroll_cue .ing_sc_txt {padding-bottom:0.83vw;}
	.ing_scroll_cue .ing_sc_txt::after {height:0.28vw;}
	.ing_scroll_cue .ing_sc_arw {width:3.06vw; height:3.06vw;}
	.ing_scroll_cue {--ing-sc-y:4.44vw; --ing-sc-f:-1.67vw;}
	.ing-type .hdg-scr-c.is-cur::before,
	.ing-type .hdg-scr-c.is-cure::before {width:0.56vw;}
}