charset "utf-8";
/* main.css는 메인 페이지 전용 스타일 정의 — (주)퓨어앤케이 */
/* 이 파일은 자체 @media 블록을 두지 않는다 — 반응형은 responsive.css 「main : responsive」 구간으로 이관한다. */

/* [ 확정(나) · 재작업 2회차] #header가 다시 position:fixed로 화면에 떠 있어 문서
 흐름에서 빠졌다 — 보정 없으면 히어로(.m-visual) 맨 위가 고정 헤더 뒤로 가려진다.
 sub.css의 #sub{padding-top:var(--h-header);}(골격 표준 패턴)과 동일하게 맞춘다.
 헤더가 스크롤에 따라 숨어도(#header.scrolled) 이 여백은 그대로 유지된다 — 문서
 흐름상 항상 필요한 예약 공간이고, 숨김은 시각 효과일 뿐 레이아웃 재배치가 아니다. */
#main{/* padding-top:var(--h-header); */}

/* ─────────────────────────────────────────────
 버튼 컴포넌트 'Btn' : S [· node 21:792 get_design_context 실측]
 Figma 'Btn' 컴포넌트(node 21:792, Btn-Off 변형) 정밀 조회 — pl-26 pr-28 py-10,
 gap 12, radius 100(pill), border/text #0036aa 계열, 텍스트 Pretendard SemiBold 16.
 화살표는 실제 노드(21:791 "Arrow 1 (Stroke)")를 export 한 벡터(images/common/
 ico_arrow_right.svg, 26×10)다 — CSS 로 그린 도형이 아니라 실자산.
 hover 시 화살표만 +8px 평행 이동(작업 문서 실측과 일치),
 글자·버튼 폭은 고정. 전환 시간은 시안 미지정이라 규칙 기본값(all .2s linear).
───────────────────────────────────────────── */
.btn-line,
.btn-fill{
	display:inline-flex;align-items:center;gap:12px;
	padding:10px 28px 10px 26px;border-radius:var(--r-pill);
	font-size:var(--fs-btn);line-height:var(--lh-btn);font-weight:600;letter-spacing:-.48px;
	white-space:nowrap;
}
/* .btn-line__ico,
.btn-fill__ico{width:26px;height:10px;transition:transform .2s linear;}   시안 미지정 — 규칙 기본값
.btn-line:hover .btn-line__ico,
.btn-fill:hover .btn-fill__ico{transform:translateX(8px);}   [ 실측] +8px 고정 — 글자·버튼은 이동하지 않음 */

.btn-line:hover .btn-line__ico,
.btn-fill:hover .btn-fill__ico{animation:btn-ico-bounce 1.3s cubic-bezier(.25,.46,.45,.94) infinite;;}

@keyframes btn-ico-bounce{
	0%{transform:translateX(0);}
	40%{transform:translateX(7px);}
	60%{transform:translateX(4px);}
	78%{transform:translateX(6px);}
	100%{transform:translateX(0);}
}


.btn-line{border:1px solid var(--c-primary);background:transparent;color:var(--c-primary-dark);}
.btn-fill{border:1px solid var(--c-primary);background:var(--c-primary);color:#fff;}

/* [node 53:303 실측] 흰 배경 위 파란 글자·테두리 — Contact us 'Board' 카드 버튼 */
.btn-fill-invert{
	display:inline-flex;align-items:center;gap:12px;
	padding:10px 28px 10px 26px;border-radius:var(--r-pill);
	font-size:var(--fs-btn);line-height:var(--lh-btn);font-weight:600;letter-spacing:-.48px;white-space:nowrap;
	border:1px solid #fff;background:#fff;color:var(--c-primary-dark);
}
.btn-fill-invert__ico{width:26px;height:10px;transition:transform .2s linear;}
.btn-fill-invert:hover .btn-fill-invert__ico{transform:translateX(8px);}

/* [node 43:271 실측] 사진 위 반투명 흰 테두리 — SOLUTION 이미지 오버레이 'View More' */
.btn-outline-white{
	display:inline-flex;align-items:center;gap:12px;
	padding:10px 28px 10px 26px;border-radius:var(--r-pill);
	font-size:var(--fs-btn);line-height:var(--lh-btn);font-weight:600;letter-spacing:-.48px;white-space:nowrap;
	border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;
}
/* .btn-outline-white__ico{width:26px;height:10px;transition:transform .2s linear;}
.btn-outline-white:hover .btn-outline-white__ico{transform:translateX(8px);} */
/* 버튼 컴포넌트 : E */

/* .btn-outline-white__ico{width:26px;height:10px;transition:transform .2s linear;}
.btn-outline-white:hover .btn-outline-white__ico{transform:translateX(8px);} */

.btn-outline-white__ico{width:26px;height:10px;animation:none;}
.btn-outline-white:hover .btn-outline-white__ico{animation:btn-ico-bounce 1.3s cubic-bezier(.25,.46,.45,.94) infinite;}

@keyframes btn-ico-bounce{
	0%{transform:translateX(0);}
	40%{transform:translateX(7px);}
	60%{transform:translateX(4px);}
	78%{transform:translateX(6px);}
	100%{transform:translateX(0);}
}

main{max-width:100%; overflow-x: hidden;}
/* ─────────────────────────────────────────────
 sec1 · main-hero (m-visual) : S [분리 레이어 · Figma M_visual 1067:133]
 Mv-01~05 = 배경/제품(이미지) + 슬로건·본문·CTA·캡션(HTML). 기준 캔버스 1920×960(비율 2:1).
 줌아웃 = .main-hero__bg 만(1.05 → 1). 텍스트·단계·제품은 활성 슬라이드에서 페이드업.
───────────────────────────────────────────── */
.m-visual{position:relative;width:100%;overflow:hidden; z-index: 10;}
.m-visual .visual{/* aspect-ratio:2/1;  */width: 100%; height: 960px;}
.m-visual .swiper-slide{position:relative;height:100%;overflow:hidden;background:#f5f7fa;}

/* 배경만 줌. 기본 1.05 → 활성 시 4.5s 동안 1.
   슬라이드 페이드(800ms) 동안은 배율을 유지하고, 그 뒤 1.05로 되돌려 다음에 다시 줌아웃된다.
   제품·다이어그램은 이 레이어에 포함하지 않는다. */
.main-hero__pic{
	position:absolute;inset:0;z-index:0;overflow:hidden;
}
/* 640px 이하 전용 시안 레이어. 넓은 화면에서는 기존 히어로를 유지한다. */
.hero-m{display:none;}


.main-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.main-hero__bg-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; display: none; }
.main-hero__bg--b{z-index:1;}
/* Mv-01 Figma 크롭 — bg-a/b 가 캔버스보다 크게 들어와 좌상단 오프셋으로 맞춤 */
.main-hero__slide--01 .main-hero__bg--a{
	
}
/* .main-hero__slide--01 .main-hero__bg--b{
	width:129.56%;height:125.67%;left:-13.75%;top:-14.08%;right:auto;bottom:auto;object-fit:fill;
} */
.main-hero__slide--05 .main-hero__bg--a{
	width:114.01%;height:118.31%;left:-7.1%;top:-11.34%;right:auto;bottom:auto;object-fit:fill;
}
.main-hero__scrim{
	position:absolute;inset:0;z-index:2;pointer-events:none;
	background:
		linear-gradient(180deg,rgba(33,21,9,0) 70.2%,rgba(33,21,9,.4) 100%),
		linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,.1));
}
.main-hero__scrim--soft{
	background:linear-gradient(180deg,rgba(33,21,9,0) 70.2%,rgba(33,21,9,.5) 100%);
}

/* 텍스트·캡션 레이어 */
.main-hero__content{position:absolute;inset:0;z-index:1;pointer-events:none;}
.main-hero__content a,
.main-hero__content button{pointer-events:auto;}

.main-hero__slogan{position:absolute;left:12.5%;display:flex;flex-direction:column;align-items:flex-start;gap:28px;}
.main-hero__slogan--01 .main-hero__desc{margin-top: 13px;}

.main-hero__slogan--01{top:16.875%; gap:13px; }   /* y162 */
.main-hero__slogan--02{top:21.46%;}    /* y206 */
.main-hero__slogan--03{top:22.29%;}    /* y214 */
.main-hero__slogan--04{top:22.29%;}
.main-hero__slogan--05{top:23.65%;gap:10px;} /* y227 */

.main-hero__eyebrow{
	margin:0;font-family:'Pretendard',sans-serif;font-weight:500;font-size:23px;line-height:34px;
	letter-spacing:-.69px;color:#687380;
}
.main-hero__eyebrow--lg{font-size:28px;letter-spacing:-.84px;color:#72808d;}
.main-hero__tit{
	margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
	font-family:'Poppins','Pretendard',sans-serif;font-weight:600;font-size:54px;line-height:62px;
	letter-spacing:-1.62px;color:#2f435d;
}
.main-hero__tit--42{font-size:42px;line-height:50px;letter-spacing:-1.26px;gap:0;}
.main-hero__tit--50{font-size:50px;line-height:50px;letter-spacing:-1.5px;gap:0;}
.main-hero__tit-line{display:block;}
.main-hero__tit-row{display:flex;flex-wrap:wrap;gap:16px;}
.main-hero__tit-line--grad01{
	background:linear-gradient(90deg,#4eaa7a 0%,#488eb8 50%,#6c6ab8 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
}
.main-hero__tit-line--grad02{
	background:linear-gradient(90deg,#994c9c 0%,#7f65ae 50%,#4285b9 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
}
.main-hero__tit-line--grad05{
	font-size:65px;line-height:62px;letter-spacing:-1.95px;
	background:linear-gradient(90deg,#293861 0%,#349493 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
}
.main-hero__tit-line--accent03{color:#4388b5;}
.main-hero__tit-line--teal{color:#50a7a0;}
.main-hero__tit-line--green{color:#75a94c;}
.main-hero__desc{
	margin:0;font-family:'Pretendard',sans-serif;font-weight:400;font-size:20px;line-height:32px;
	letter-spacing:-.6px;color:#555;
}

/* CTA — Mv-01 only · x240 y492 */
.main-hero__cta{position:absolute;top:51.25%;left:12.5%;width:253px;padding:9px 32px;gap:20px;justify-content:center;}
.swiper-initialized .swiper-slide:not(.swiper-slide-active) .main-hero__cta{visibility:hidden;transition:visibility 0s linear .8s;}
.swiper-initialized .swiper-slide:not(.swiper-slide-active) .main-hero__content{visibility:hidden;transition:visibility 0s linear .8s;}
.swiper-initialized .swiper-slide-active .main-hero__content{visibility:visible;}

/* 히어로 노출 — .is-hero-motion 은 main.js 가 모션 허용일 때만 붙인다.
   비활성으로 빠지면 애니메이션이 풀리고, 글·요소는 보인 채로 슬라이드 페이드에 실린다. */
@keyframes hero-zoom-out{
	from{transform:scale(1.05);}
	to{transform:scale(1);}
}
@keyframes hero-fade-up{
	from{opacity:0;transform:translateY(32px);}
	to{opacity:1;transform:translateY(0);}
}
@keyframes hero-fade-up-sm{
	from{opacity:0;transform:translateY(16px);}
	to{opacity:1;transform:translateY(0);}
}
@keyframes hero-line-in{
	from{opacity:0;}
	to{opacity:.45;}
}

.visual.is-hero-motion .main-hero__bg{transform-origin:center center;}
.visual.is-hero-motion .swiper-slide:not(.swiper-slide-active) .main-hero__bg{
	transform:scale(1.05);
	transition:transform 0s linear .8s;
}
.visual.is-hero-motion .swiper-slide-active .main-hero__bg{
	animation:hero-zoom-out 4.5s ease both;
}

.visual.is-hero-motion .swiper-slide-active .main-hero__eyebrow{
	animation:hero-fade-up .8s cubic-bezier(.22,.61,.36,1) .05s both;
}
.visual.is-hero-motion .swiper-slide-active .main-hero__tit{
	animation:hero-fade-up .85s cubic-bezier(.22,.61,.36,1) .14s both;
}
.visual.is-hero-motion .swiper-slide-active .main-hero__desc{
	animation:hero-fade-up .8s cubic-bezier(.22,.61,.36,1) .26s both;
}
.visual.is-hero-motion .swiper-slide-active .main-hero__cta{
	animation:hero-fade-up .75s cubic-bezier(.22,.61,.36,1) .38s both;
}

/* Mv-01 단계 */
.visual.is-hero-motion .swiper-slide-active .hero-steps:before{
	animation:hero-line-in .6s ease .42s both;
}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item{
	animation:hero-fade-up-sm .65s cubic-bezier(.22,.61,.36,1) both;
}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item:nth-child(1){animation-delay:.34s;}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item:nth-child(2){animation-delay:.4s;}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item:nth-child(3){animation-delay:.46s;}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item:nth-child(4){animation-delay:.52s;}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item:nth-child(5){animation-delay:.58s;}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item:nth-child(6){animation-delay:.64s;}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item:nth-child(7){animation-delay:.7s;}
.visual.is-hero-motion .swiper-slide-active .hero-steps__item:nth-child(8){animation-delay:.76s;}




/* Mv-02 제품 */
.visual.is-hero-motion .swiper-slide-active .hero-media--ob01{
	animation:hero-fade-up .95s cubic-bezier(.22,.61,.36,1) .16s both;
}
.visual.is-hero-motion .swiper-slide-active .hero-media--ob02{
	animation:hero-fade-up 1s cubic-bezier(.22,.61,.36,1) .28s both;
}

/* Mv-03 로고·기능 */
.visual.is-hero-motion .swiper-slide-active .hero-brand{
	animation:hero-fade-up-sm .75s cubic-bezier(.22,.61,.36,1) .34s both;
}
.visual.is-hero-motion .swiper-slide-active .hero-feats__item{
	animation:hero-fade-up-sm .7s cubic-bezier(.22,.61,.36,1) both;
}
.visual.is-hero-motion .swiper-slide-active .hero-feats__item:nth-child(1){animation-delay:.42s;}
.visual.is-hero-motion .swiper-slide-active .hero-feats__item:nth-child(2){animation-delay:.52s;}
.visual.is-hero-motion .swiper-slide-active .hero-feats__item:nth-child(3){animation-delay:.62s;}

/* Mv-05 다이어그램·파트너. Mv-04는 슬로건만 있다. */
.visual.is-hero-motion .swiper-slide-active .hero-flow{
	animation:hero-fade-up .85s cubic-bezier(.22,.61,.36,1) .18s both;
}
.visual.is-hero-motion .swiper-slide-active .hero-card{
	animation:hero-fade-up-sm .75s cubic-bezier(.22,.61,.36,1) both;
}
.visual.is-hero-motion .swiper-slide-active .hero-card:nth-child(1){animation-delay:.36s;}
.visual.is-hero-motion .swiper-slide-active .hero-card:nth-child(2){animation-delay:.48s;}

/* Mv-01 8단계 — Figma Diagram 1068:456 (x287~ 폭 1331) */
.hero-steps{
	position:absolute;left:14.95%;top:63.54%;width:69.32%;
	display:flex;justify-content:space-between;align-items:flex-start;gap:0;
	margin:0;padding:0;list-style:none;
	display: none;
}

.hero-steps-pc{position:absolute;left:14.95%;top:63.54%;}


.hero-steps:before{
	content:'';position:absolute;left:4%;right:4%;top:46px;height:2px;z-index:0;
	background:linear-gradient(90deg,#00b800,#00b57e,#00a996,#008fff,#087dff,#4d51ff,#860fff,#9808ff);
	opacity:.45;pointer-events:none;
}
.hero-steps__item{
	position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
	flex:1 1 0;min-width:0;max-width:120px;text-align:center;
}
.hero-steps__icon{
	display:flex;align-items:center;justify-content:center;width:102px;height:106px;/* max-width:100%;aspect-ratio:1;
	border-radius:50%;border:1.5px solid var(--step-color);background:rgba(255,255,255,.72);
	box-sizing:border-box;box-shadow:0 0 0 6px rgba(255,255,255,.35); */
}
.hero-steps__icon img{display:block;width:auto;height:auto;}
.hero-steps__num{
	margin-top:8px;font-family:'Pretendard',sans-serif;font-weight:500;font-size:20px;line-height:30px;
	letter-spacing:-.6px;color:var(--step-color);
}
.hero-steps__label{
	font-family:'Pretendard',sans-serif;font-weight:400;font-size:clamp(13px,1vw,18px);line-height:1.25;
	letter-spacing:-.54px;color:#595959;
}

/* 제품 미디어 (줌 레이어 안) */
.hero-media{position:absolute;z-index:3;}
.hero-media img{display:block;width:100%;height:auto;}
.hero-media--ob01{left:10.4%;top:51.15%; width: 806px; }
.hero-media--ob01 img{width: auto; height: auto; }
.hero-media--ob01 .hero-media__badge{position:absolute;left:41.4%;top:32.9%;width:12%;}
.hero-media--ob02{left: 52%; top: 25%; width:507px; height: 545px;}
.hero-media--su{left:42.34%;top:14.48%;width:44.74%;opacity:.87;}
.hero-media--resins{left:9.17%;top:47.71%;width:19.9%;}
.hero-media--column{left:36.56%;top:35%;width:4.53%;opacity:.8;}
.hero-media--skid{left:44.17%;top:29.79%;width:38.85%;}

/* 캡션 카드 */
.hero-card{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;; width: 308px;}
.hero-card--welkin{width: 289px;}
.hero-card__logo{display:block;width:auto;height:auto;}
.hero-card__tit{display:block;font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;line-height:32px;letter-spacing:-.54px;}
.hero-card__desc{margin:6px 0 0;font-family:'Pretendard',sans-serif;font-weight:400;font-size:15px;line-height:20px;letter-spacing:-.45px;color:#5c6d7d;}
.hero-card--cqrex{left:10.36%;top:52.6%;}
.hero-card--lepure02{left:67.92%;top:26.15%;}
.hero-card--biozeen,.hero-card--welkin{position:relative;left:auto;top:auto;}

.hero-brand{position:absolute;display:block;object-fit:contain;}
.hero-brand--lepure03{left:13.18%;top:63.54%;width:122px;height:41px;}

.hero-feats{
	position:absolute;left:12.55%;top:72.3%;right:12%;
	display:flex;gap:0px;margin:0;padding:0;list-style:none;
}
.hero-feats__item{display:flex;align-items:flex-start;gap:26px;flex:1;min-width:0; align-items:center; flex:none;}
.hero-feats__item1{width:313px;}
.hero-feats__item2{width:376px;}

.hero-feats__ico{flex:0 0 84px;width:84px;height:84px;}
.hero-feats__txt{flex:1; }

.hero-feats__tit{
	display:block;font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;line-height:32px;
	letter-spacing:-.54px;color:#0186b5;
}
.hero-feats__badge{font-weight:500;font-size:12px;letter-spacing:-.36px;}
.hero-feats__desc{margin:8px 0 0;font-family:'Pretendard',sans-serif;font-weight:400;font-size:15px;line-height:22px;letter-spacing:-.45px;color:#5c6d7d;}

.hero-bubble{
	position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;
	padding:24px 28px 20px;border-radius:20px;background:rgba(255,255,255,.82);
	box-shadow:0 8px 28px rgba(47,67,93,.1);backdrop-filter:blur(6px);
}
.hero-bubble__logo{display:block;width:auto;max-width:154px;height:auto;margin-bottom:8px;object-fit:contain;}
.hero-bubble__tit{font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;line-height:32px;letter-spacing:-.48px;}
.hero-bubble__desc{margin:0;font-family:'Pretendard',sans-serif;font-weight:400;font-size:12px;line-height:16px;letter-spacing:-.36px;color:#78858e;}
.hero-bubble--nano{left:21.93%;top:52%;width:301px;}
.hero-bubble--lisure{left:67.08%;top:20.5%;width:276px;}

.hero-flow{
	position:absolute;left:11.76%;top:37.71%;
	display:flex;align-items:flex-start;gap:0;margin:0;padding:0;list-style:none;
}
.hero-flow__item{display:flex;flex-direction:column;align-items:center;text-align:center;width:110px;}
.hero-flow__item--conn{width:auto;align-self:flex-start;padding-top:36px;}
.hero-flow__ico{display:block;width:78px;height:78px;margin-bottom:14px;}
.hero-flow__conn{display:block;width:62px;height:8px;}
.hero-flow__tit{font-family:'Pretendard',sans-serif;font-weight:600;font-size:13px;letter-spacing:-.39px;}
.hero-flow__desc{margin-top:6px;font-family:'Pretendard',sans-serif;font-weight:400;font-size:12px;line-height:1.25;letter-spacing:-.36px;color:#78858e;}

.hero-partners{
	position:absolute;left: 12%; top: 62.5%;
	display:flex;gap:42px;align-items:center;
}

.main-hero__ui{position:absolute;inset:0;z-index:2;pointer-events:none;}
.main-hero__controls{
	position:absolute;left:0;right:0;bottom:30px;
	display:flex;align-items:center;justify-content:center;gap:16px;pointer-events:auto;
}
.visual-pagination{display:flex;align-items:center;gap:8px;}
.visual-pagination__item{
	position:relative;display:block;width:6px;height:6px;padding:0;border:0;border-radius:3px;
	background:rgba(255,255,255,.6);cursor:pointer;
	transition:width .3s linear;   /* 활성 이동 시 폭 애니메이션 — 규칙 기본값 · 모션 */
}
.visual-pagination__item.is-active{width:80px;background:#fff;}
.visual-pagination__item:before{content:'';position:absolute;inset:-9px -4px;}
.visual-nav{display:flex;gap:0;}
.visual-nav__btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;}
.visual-nav__btn img{display:block;width:100%;height:100%;}
.visual-nav__btn.swiper-button-disabled{opacity:.35;pointer-events:none;}
.main-hero__scroll{
	position:absolute;right:calc(100% * 76 / 1920);bottom:calc(100% * 60 / 960);
	display:flex;flex-direction:column;align-items:center;gap:16px;
	padding:0;border:0;background:none;color:#fff;cursor:pointer;pointer-events:auto;
	animation:hero-scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-bounce{
	0%,100%{transform:translateY(0);}
	50%{transform:translateY(10px);}
}
.main-hero__scroll-tit{
	writing-mode:vertical-rl;transform:rotate(180deg);
	font-family:'Poppins','Pretendard',sans-serif;font-size:var(--fs-scroll);line-height:var(--lh-scroll);font-weight:600;letter-spacing:.7px;color:#fff;
}
.main-hero__scroll-bullet{display:block;}

/* ─────────────────────────────────────────────
 sec2 · main-about : S [node 15:252 get_design_context 정밀 조회 — 2026-09-23]
 텍스트 3개(라벨·대제목·본문)+이미지 6개(스크린샷 실측 5개는 오류 — 좌하단 블러 랩실
 1장 누락이었다. 정밀 조회로 6장 확정). 좌표는 노드가 준 절대 px(1920 기준 캔버스,
 about 섹션 top=960) 를 섹션 기준으로 환산 — left 는 1920 대비 %, top·width·height 는
 px 리터럴 그대로(결정 피그마 값 우선). 이 절대배치는 ≥1025px 전용이며 ≤1024px 는
 `responsive.css` 에서 흐름형 그리드로 재배치한다(예외: 새 요소 없는 반응형 재배치).
 진입 애니메이션 시작값(opacity 0 / translateY / scale)은 여기 두지 않는다 — GSAP
 ScrollTrigger 타임라인(모션)이 인라인 스타일로 제어한다(transform 단일 소유).
───────────────────────────────────────────── */
/* [QA-RWD] --4·--6 은 Figma 원본이 1920 프레임 밖으로 살짝 번지는 의도된 풀블리드다
 (node 15:259 left:-72px · 21:801 우측 초과). overflow-x 만 clip 해 가로 스크롤을
 막고, --6 가 히어로 쪽으로 번지는 세로 방향(top:-155px)은 그대로 살린다 — hidden 은
 반대쪽 축을 auto 로 강제해(스펙) 세로 번짐까지 잘리므로 clip 을 쓴다(BRW-01 A등급
 최신 2브라우저 전제 — Chrome/Edge/Firefox/Safari 전부 overflow:clip 지원). */
.main-about{position:relative;min-height:1025px;padding:0;overflow-x:clip;overflow-y:visible; z-index: 2;}
/* [결정] 시안 본문 줄 폭 655px(node 15:262 "Txt" 프레임·21:797 본문 실측) — 590px 였을 때
 2줄이 3줄로 말려 View More 가 30px 아래로 밀렸다. */
.main-about__text{position:relative;z-index:1;max-width:655px;margin:0 auto;padding-top:283px;text-align:center;}
.main-about__label{font-size:var(--fs-about-label);line-height:var(--lh-about-label);font-weight:600;color:var(--c-primary);letter-spacing:-.66px;}
.main-about__tit{margin-top:40px;font-size:var(--fs-about-tit);line-height:var(--lh-about-tit);font-weight:600;color:var(--c-text);letter-spacing:-1.62px;}
.main-about__desc{margin-top:20px;font-size:var(--fs-about-desc);line-height:var(--lh-about-desc);color:var(--c-text-sub);letter-spacing:-.6px;}
.main-about__more{margin-top:70px;}

/* 6개 이미지 — node 15:254 "img" 그룹 절대좌표(15:256·15:257·15:258·15:259·15:260·21:801).
 C·E 는 시안 자체가 blur(10px)+opacity .6 인 배경 장식(— 렌더가 정본, 흐림은 결함이
 아니라 디자인이다). F·C 는 원본을 좌우 반전(mirror)해 쓴다(rotate180+scaleY-100 = 수평반전). */
.main-about__img{position:absolute;border-radius:30px;overflow:hidden;}
.main-about__img img{display:block;width:100%;height:100%;object-fit:cover;}
.main-about__img--1{left:8.28%;top:80px;width:316px;height:240px;}                 /* 15:258 분자 */
.main-about__img--2{left:18.85%;top:582px;width:145px;height:110px;}               /* 15:256 현미경 */
.main-about__img--3{left:90.57%;top:425px;width:188px;height:143px;}               /* 15:257 바이알 */
.main-about__img--4{left:-3.75%;top:740px;width:344px;height:262px;filter:blur(10px);opacity:.6;} /* 15:259 블러 랩실 */
.main-about__img--5{left:63.85%;top:699px;width:430px;height:326px;}               /* 15:260 방호복 2인(반전) */
.main-about__img--6{left:69.4%;top:-155px;width:612px;height:464px;filter:blur(10px);opacity:.6;z-index:-1;} /* 21:801 큰 블러(반전) — 히어로 위로 번짐 */
/* sec2 · main-about : E */

/* ─────────────────────────────────────────────
 sec3 · main-solution : S [node 15:266 get_design_context 정밀 조회 — 2026-09-23]
 모양은 피그마(766×580 이미지+View More 오버레이, 우측 탭 5개) · 동작은 지정 참고사이트
 실측(hover 트리거, 탭 배경 전환 .3s, 이미지 200ms 아웃→교체→400ms 인 — 결정).
 탭 타이포는 About us 와 동일 라벨/제목/본문 토큰(둘 다 22/54/20 — 우연이 아니라
 이 프로젝트의 섹션 헤더 공통 스케일이다).
───────────────────────────────────────────── */
/* [결정 실측] 배경색 시안 픽셀 샘플 4점 전부 #fff — 토큰 --c-bg-weak(#f8f8f8)를 써서
 달라졌다. 장식 2종(bg01·bg02)은 get_metadata(15:266) 정밀 조회 좌표 그대로 배치 —
 장식용 빈 요소를 만들지 않고 섹션 자체의 ::before/::after 가상요소로 그린다(HTM-07).
 자산은 Figma 벡터를 그대로 export 했다(그룹 자체 opacity:.04 포함). */
.main-solution{position:relative;padding:200px 0;background:#fff; z-index: 1;}
.main-solution:before{ z-index: -1;
	/* bg02 — node 43:253. [작업 문서 재작업 · 2026-09-24]
 2회차의 "배치 방식이 문제" 정정은 절반만 맞았다 — `background-size:100% 100%` 로
 자산(443.604×369.041, 비율 1.202)을 `get_metadata` 선언 박스(542.82×569.38, 비율
 0.953)에 강제로 늘리자 원이 세로로 긴 타원이 됐다(3회차 지적). `get_metadata` 의
 542.85×569.41 은 이 노드의 실제 렌더 크기가 아니다 — `get_screenshot(43:253)` 로
 직접 재렌더링하면 **450×570**(두 번 다른 maxDimension 으로 재확인, 값 고정)이 나온다.
 이 PNG 를 새 자산(`bg_sec302.png`)으로 그대로 쓰고 박스를 그 실제 렌더 크기(450×570)에
 맞춰 background-size 를 1:1(무왜곡)로 둔다 — Figma 가 이미 그린 픽셀이 정본이라
 더 이상 비율을 추정할 필요가 없다("효과 속성이 렌더와 다르면 렌더가 정본이다").
 렌더가 불투명 흰 배경(alpha 255 전역, opacity:.04 블루가 흰 위에 얹혀 있음)이라
 `.main-solution{background:#fff}` 과 겹치는 이 자리에서는 시각 차이가 없다(PIL 픽셀
 전수 확인 — 코너 4점·중심점 전부 (255,255,255,255)). 옛 `bg_sec302.svg`(443.604×369.041)
 는 이 노드의 언스케일드 마스터 형상이라 폐기하지 않고 남겨둔다(참고용, 미참조). */
	/* [작업 문서 · 2026-09-24 — 직접 수정, 회차 상한 소진 후
 1행 확정 수정] get_metadata(43:253) 의 x1687 은 이 노드만 렌더와 어긋난다(형제 bg01은
 일치). 시안 SOLUTION 렌더을 랜드마크로 배율 검산해 자산 잉크 x32..449 = 시안 잉크
 x1401..1818(섹션 상대) 대응을 확인 — 자산 x0 위치는 페이지 좌표 1470. */
	content:'';position:absolute;left:1470px;top:-200px;width:450px;height:570px;
	background:url('../img/common/bg_sec302.png') no-repeat left top/100% 100%;pointer-events:none;
	/* [고도화 2차 · 댓글 2안 — 패럴랙스] 스크롤에 따라 ±10px 따라오는 움직임.
 이 가상요소는 GSAP 이 직접 못 잡으므로 부모 .main-solution 의 CSS 변수 --bg02-y 를 js/main.js(initSolutionParallax)가
 움직이고, 여기서 translateY 로 받는다. — 이 ::before 의 transform 소유자는 이 한 줄뿐이다.
 변수가 없을 때(모션 끔 · JS 불가 · 1470 이하 폭)는 0px = 시안 좌표 그대로. */
	transform:translateY(var(--bg02-y,0px));will-change:transform;
}
.main-solution:after{
	/* bg01 — node 46:277, 섹션 기준 left:0·bottom:0·212×195(좌하단) */
	content:'';position:absolute;    bottom: 117px; left: 95px;
    width: 212px; width:212px;height:195px;
	background:url('../img/common/bg_sec301.svg') no-repeat center/contain;pointer-events:none;
}
/* [결정 실측 · node 15:266] 이미지 766×580 고정폭 · 간격 278px(텍스트 컬럼 x1284 −
 이미지 우측단 x1006) — 이전 값(50%·gap100)은 컨테이너 폭에 따라 흔들리는 비율값이었다. */
.main-solution__inner{position:relative;z-index:1;display:flex;align-items:center;gap:278px;}
.main-solution__media{position:relative;flex:0 0 766px;}
.main-solution__pic{position:relative;aspect-ratio:766/580;overflow:hidden;border-radius:30px;}
/* [모션 · 작업 문서③ 지정 참고사이트 실측] 2단 크로스페이드 —
 200ms 페이드아웃 → (불투명도 0인 순간) src 교체 → 400ms 페이드인, 합계 약 600ms.
 .is-swapping 은 인터랙션가 만든 훅(main.js initSolutionTabs) — 페이드아웃 지속시간과
 맞춰 200ms간 유지되도록 그 안의 src 교체 지연값을 조정했다(인터랙션 인계 메모
 "실제 타이밍은 모션 담당" 반영, §10 참조). — opacity 는 이 두 규칙만 소유. */
 
 .main-solution__pic{position:relative;overflow:hidden;border-radius:30px;}
.main-solution__pic img{width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .4s ease;}
.main-solution__pic.is-swapping img{opacity:0;}





/* [고도화 2차 · 2026-10-02] 이미지 하단 그라디언트 스크림(투명 76% → 검정 60%)과 장별 덮개(20/0/15/10%)는 Figma 노드(Img_Sol_01~05)의
 채움이라 노드 렌더(img_sec301~305.jpg)에 이미 합성돼 있다 — 여기서 CSS 스크림을 또 얹으면 하단이 두 번 어두워져서 걷었다
 (렌더 하단 20px 평균 밝기 0x28 · 원본 사진 0x71 — 실측). 이전 USP 이미지는 원본 사진이라 CSS 스크림이 필요했고, 같은 노드 렌더로 교체했다. */
/* [실측] 이미지 우측단(1006) − 버튼 우측단(789+167=956) = 50px */
.main-solution__more{position:absolute;right:50px;bottom:32px;}

.main-solution__copy{width:1%;flex:1 1 auto;}
.main-solution__label{font-size:var(--fs-about-label);line-height:var(--lh-about-label);font-weight:600;color:var(--c-primary);letter-spacing:-.66px;}
.main-solution__tit{margin-top:12px;font-size:var(--fs-about-tit);line-height:var(--lh-about-tit);font-weight:600;color:var(--c-text);letter-spacing:-1.62px;}
.main-solution__desc{margin-top:20px;font-size:var(--fs-about-desc);line-height:var(--lh-about-desc);color:var(--c-text-sub);letter-spacing:-.6px;}

.main-solution__tab-wrap{position:relative;margin-top:48px;}
/* [실측 218×6 SVG] 이미지 우측 끝 → 활성 탭을 잇는 커넥터. --connector-top 은 js/main.js
 initSolutionTabs 가 활성 탭의 실제 세로 중심을 측정해 주입한다(JSR-03 커스텀 프로퍼티
 예외). 16px 는 마크업 초기값(USP, 첫 번째 탭)과 같은 값의 폴백이다. 이동 시 transition
 은 여기서 걸지 않는다 — 시간·이징은 모션 담당(경계). */
/* [모션 · 확인 필요] 지정 참고사이트는 커넥터 자체가 없어 전환 곡선
 지정이 없다 — 규칙 기본값(all .2s linear, 프로젝트 관례 var(--t-base) linear)을
 쓴다(지어낸 값). top 대신 transform:translateY 로 움직여 레이아웃
 리플로우 없이 같은 결과를 낸다(top 은 --connector-top 이 담당하는 값이지만 여기서는
 고정 anchor 16px + 델타를 transform 으로 옮겼다) — Success Criteria "transform·opacity만". */
.main-solution__connector{
	position:absolute;left:-248px;top:16px;width:218px;height:6px;
	transform:translateY(calc(var(--connector-top,16px) - 16px));
	transition:transform var(--t-base) linear;
}
/* [실측 확정] 세로 리듬 = font-size 28 · line-height 38 + gap 24 = 62px */
.main-solution__tabs{display:flex;flex-direction:column;gap:24px;}
.main-solution__tab{
	font-size:var(--fs-tab);line-height:var(--lh-tab);font-weight:500;
	color:var(--c-line);cursor:pointer;letter-spacing:-.84px;
	transition:color var(--t-base) linear;
}
.main-solution__tab.is-active,
.main-solution__tab:hover{color:var(--c-primary);font-weight:600;}

/* [검수 작업 문서] AOS fade-up 진행 중(.main-solution__copy 가
 translateY 로 움직이는 동안) 마우스가 탭 위를 지나가면 실제로는 그 순간 화면 좌표에
 걸린 "한 칸 옆" 탭이 mouseenter 를 받아 엉뚱한 탭이 활성화됐다(main.js
 initSolutionTabs — hover 트리거). 탭 자체의 시간·이징은 건드리지 않고(모션 값은
 모션 소유, 경계), AOS 애니메이션이 끝나기 전까지만 탭이 포인터 이벤트를
 받지 않도록 막는다 — 키보드 조작(Tab/Enter/화살표)은 pointer-events 의 영향을 받지
 않으므로 그대로 동작한다.
 [실측 · 규칙 13 "될 것 같다"≠"된다"] 처음에는 `.aos-animate` 부착과 동시에
 `transition:pointer-events 0s .8s`(지연 후 전환)로 막으려 했으나, 최소 재현 3회로
 확인한 결과 이 환경에서 discrete 값인 pointer-events 는 transition-delay 를 무시하고
 클래스 부착과 같은 프레임에 즉시 바뀐다(visibility 의 "끝에서만 바뀐다"는 스펙 예외가
 pointer-events 에는 없다 — CSS만으로는 막을 수 없어 js/main.js 에 실제 트랜지션 종료
 이벤트 감시를 추가했다, 아래 .is-tabs-unlocked 참조). */
.main-solution__copy[data-aos] .main-solution__tabs{pointer-events:none;}
.main-solution__copy.is-tabs-unlocked .main-solution__tabs{pointer-events:auto;}
/* sec3 · main-solution : E */

/* ─────────────────────────────────────────────
 sec4 · main-contact : S [node 15:314 get_design_context 정밀 조회 — 2026-09-23]
 배경은 CSS 그라디언트가 아니라 디자인이 export 한 실제 그라디언트 PNG다(—
 렌더가 정본. 근사 CSS linear-gradient 로 대체하면 곡선 하이라이트가 사라진다).
 지도 연동(사이트맵 "Contact Us") — 정적 자산은 Kakao 지도 연동 전 임시(인터랙션 인계).
───────────────────────────────────────────── */
/* [작업 문서] 섹션 높이 982(측정)→942(시안) — 하단 여백만
 −40(200→160)으로 줄이면 상단 콘텐츠 흐름은 그대로 두고 높이만 시안값에 맞는다. */
.main-contact{position:relative;padding:160px 0 160px;color:#fff;overflow:hidden;}
.main-contact:before{
	content:'';position:absolute;inset:0;z-index:-2;
	background:url('../img/main/bg_sec401.jpg') center bottom/cover no-repeat;
}
/* [작업 문서] 8지점 전수 픽셀 대조 — 구현이 시안보다 전부
 밝았다(예 좌상 시안(0,111,207)↔구현(0,131,224) · 좌중 시안(0,81,189)↔구현(0,124,222) ·
 우하 시안(0,73,172)↔구현(0,84,195)). 3개 샘플 지점의 채널별 감쇠비(G·B 평균 약 0.79~0.89)를
 역산하면 10%(.1) 오버레이가 아니라 약 25%(.25) 여야 시안 밝기에 가까워진다 — 배경 JPG
 원본 자체를 재추출하는 근본 대응 전 임시 보정(±수 단위 잔차는 남을 수 있음, 보고 등급). */
/* .main-contact:after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.25);} */

.main-contact__label{font-size:var(--fs-about-label);line-height:var(--lh-about-label);font-weight:600;color:rgba(255,255,255,.6);letter-spacing:-.66px;}
.main-contact__tit{margin-top:12px;font-size:var(--fs-about-tit);line-height:var(--lh-about-tit);font-weight:600;color:#fff;letter-spacing:-1.62px;}

/* [결정 실측 · node 15:314] 지도 766×370(main-solution 이미지와 같은 폭 우연 아님 —
 이 프로젝트 2단 섹션 공통폭) · 배너 644 고정폭, 간격 30px(카드 시작 1036 − 지도 우측단
 1006). 카드 시작(1036)+폭(644)=1680=컨테이너 우측단과 정확히 맞아떨어진다. */
/* [고도화 2차 · 폭별 점검] 열 폭을 766px/644px 고정값에서 같은 비율의 fr 로 바꿨다 — 1920 에서는 컨테이너 안쪽 폭(1440)−gap 30 = 1410 이 그대로 766:644 로
 나뉘어 시안 값과 같다(766 / 644 실측 동일). 컨테이너가 1470 아래로 좁아지는 폭(작성 폭 1400·1280 포함)에서는 고정 px 열이 컨테이너를 넘어 우측 카드·View More 가
 화면 밖으로 밀리고 .main-contact{overflow:hidden} 에 잘렸다(1440 에서 카드 우측 15px · 1300 에서 View More 전체가 잘림). */
.main-contact__body{margin-top:60px;display:grid;grid-template-columns:minmax(0,766fr) minmax(0,644fr);gap:30px;}
.main-contact__map{grid-column:1;aspect-ratio:766/370;overflow:hidden;border-radius:30px;}
/* [댓글 · Google 지도 iframe] 원문 속성 width="600" height="450" style="border:0;" 는 시안 박스(node 53:280 766×370 r30)에 맞춰 여기서 덮는다 */
.main-contact__map iframe{display:block;width:100%;height:100%;border:0;}
/* 주소 줄 y 752(측정)→732(시안) → 지도-주소 사이 margin-top 을 20→0 으로 줄이면
 정확히 −20 이 된다. */
.main-contact__addr{grid-column:1;margin-top:0;font-size:var(--fs-about-desc);line-height:var(--lh-about-desc);font-weight:500;color:#fff;letter-spacing:-.6px;text-align:center;}

/* 카드2(Board) y 531(측정)→527(시안) → 카드 사이 gap 24→20 으로 −4. */
.main-contact__links{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:20px;}
/* [실측] 카드 높이 175px 고정(구현은 콘텐츠 높이만큼만 늘어나 있었다 — 약 120px) ·
 좌우 padding 50px(justify-content:space-between 로 View More 가 우측 끝에서 50px). */
.main-contact__link{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	height:175px;padding:0 50px;border-radius:30px;
}

.main-contact__link:hover .btn-fill__ico,
.main-contact__link:hover .btn-fill-invert__ico,
.main-contact__link:focus-visible .btn-fill__ico,
.main-contact__link:focus-visible .btn-fill-invert__ico{transform:translateX(8px);}
.main-contact__link-head{display:flex;align-items:center;gap:20px;}

.main-contact__link{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	height:175px;padding:0 50px;border-radius:30px;
}

.main-contact__link:hover .btn-fill__ico,
.main-contact__link:hover .btn-fill-invert__ico,
.main-contact__link:focus-visible .btn-fill__ico,
.main-contact__link:focus-visible .btn-fill-invert__ico{animation:btn-ico-bounce 1.3s cubic-bezier(.25,.46,.45,.94) infinite;}

/* [실측] Download = 흰 카드 + 파란 아이콘·글자 / Board = 반투명 흰 카드(10%) + 흰 테두리(20%) + 흰 아이콘·글자 */
.main-contact__link--download{background:#fff;}
.main-contact__link--download .main-contact__link-tit{color:var(--c-primary);}
.main-contact__link--board{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);}
.main-contact__link--board .main-contact__link-tit{color:#fff;}
/* [실측] Download/Board 라벨은 Poppins(영문 전용 스택) SemiBold 28 */
.main-contact__link-tit{font-family:'Poppins','Pretendard',sans-serif;font-size:var(--fs-tab);line-height:var(--lh-tab);font-weight:600;letter-spacing:-.84px;}
.main-contact__link-btn{pointer-events:none;}
/* sec4 · main-contact : E */

/* main 반응형(1400·1280·1024·768·480)은 css/responsive.css 「main : responsive」로 이관한다.
 이 파일에서는 데스크톱(1920 작성) 기준값만 정의한다. */