/* 메인 페이지 */

.main__hero__section{
	--hero-h:calc(100vh - var(--header-h));
	--hero-h:calc(var(--app-svh) - var(--header-h));
	--hero-s:min(1, calc(100vw / 1920px), calc(var(--hero-h) / 980px));
	--hero-img-w:calc(734px * var(--hero-s));
	--hero-img-h:calc(413px * var(--hero-s));
	--hero-gap:calc(40px * var(--hero-s));
	--hero-img-cover:1;
	--hero-img-scale:1;
	--hero-title-x:0px;
	--hero-studio-x:0px;
	--hero-desc-o:1;
	position:relative;
	margin-top:calc(var(--header-h) * -1);
	height:calc(var(--app-svh) + 140vh);
	min-height:var(--app-svh);
	padding:0;
	background:#fff;
	overflow:visible;
	box-sizing:border-box;
}
.main__hero__section.main__hero__section--static{
	margin-top:0;
	height:var(--hero-h);
	min-height:var(--hero-h);
}
.main__hero__pin{
	position:sticky;
	top:0;
	z-index:1;
	height:100vh;
	height:var(--app-svh);
	overflow:hidden;
	background:#fff;
}
.main__hero__section .inner__cen1840{
	height:100%;
	position:relative;
}

.main__hero__img__wr{
	position:absolute;
	left:50%;
	top:var(--hero-img-center-y, 50%);
	z-index:3;
	width:var(--hero-img-layout-w, var(--hero-img-w));
	height:var(--hero-img-layout-h, var(--hero-img-h));
	margin:0;
	transform:translate3d(-50%, calc(-50% + var(--hero-img-shift-y, 0px)), 0) scale(var(--hero-img-scale));
	transform-origin:center center;
	overflow:hidden;
	will-change:transform;
	backface-visibility:hidden;
}
.main__hero__img__list{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}
.main__hero__img{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
	opacity:0;
}
.main__hero__img--active{
	opacity:1;
	z-index:1;
}

.main__hero__title{
	position:absolute;
	left:0;
	top:50%;
	z-index:1;
	margin:0;
	padding:0;
	width:max-content;
	max-width:none;
	font-size:calc(200px * var(--hero-s));
	font-weight:500;
	line-height:1.1;
	letter-spacing:-0.025em;
	text-align:left;
	text-transform:uppercase;
	color:#000;
	white-space:nowrap;
	text-box-trim:trim-both;
	text-box-edge:cap alphabetic;
	transform:translate3d(var(--hero-title-x), calc(-100% - (var(--hero-img-h) / 2) - var(--hero-gap)), 0);
	will-change:transform;
}
.main__hero__title--studio{
	position:relative;
	left:auto;
	top:auto;
	width:auto;
	margin:0;
	text-align:right;
	transform:translate3d(var(--hero-studio-x), 0, 0);
}

.main__hero__bottom{
	position:absolute;
	left:0;
	right:0;
	top:50%;
	z-index:1;
	display:flex;
	flex-direction:row;
	align-items:flex-end;
	justify-content:space-between;
	gap:24px;
	transform:translateY(calc((var(--hero-img-h) / 2) + var(--hero-gap)));
}
.main__hero__desc{
	flex-shrink:0;
	font-size:max(12px, calc(16px * var(--hero-s)));
	font-weight:500;
	line-height:1.5;
	letter-spacing:-0.4px;
	color:#000;
	opacity:var(--hero-desc-o);
}

@media screen and (max-width:767px){
	.main__hero__section{
		--hero-m:min(100vw / 375px, 100vh / 812px);
		--hero-m:min(100vw / 375px, var(--app-svh) / 812px);
		--hero-pad:calc(16px * var(--hero-m));
		--hero-img-w:calc(343px * var(--hero-m));
		--hero-img-h:calc(193px * var(--hero-m));
		--hero-gap:calc(24px * var(--hero-m));
	}
    .main__hero__img__wr{
        top:var(--hero-img-center-y, calc(408px * var(--hero-m)));
    }
	.main__hero__pin{
		touch-action:pan-y;
	}
	.main__hero__section .inner__cen1840{
		width:100%;
		max-width:none;
		padding:0;
	}
	.main__hero__title{
		left:var(--hero-pad);
		top:calc(171px * var(--hero-m));
		font-size:calc(64px * var(--hero-m));
		letter-spacing:calc(-1.6px * var(--hero-m));
		white-space:normal;
		transform:translate3d(var(--hero-title-x), 0, 0);
	}
	.main__hero__title__break{
		display:block;
	}
	.main__hero__bottom{
		top:0;
		bottom:0;
		left:0;
		right:0;
		display:block;
		transform:none;
	}
	.main__hero__title--studio{
		position:absolute;
		top:calc(527px * var(--hero-m));
		right:var(--hero-pad);
		left:auto;
		margin:0;
		transform:translate3d(var(--hero-studio-x), 0, 0);
	}
	.main__hero__desc{
		position:absolute;
		left:var(--hero-pad);
		top:calc(736px * var(--hero-m));
		width:calc(241px * var(--hero-m));
		font-size:calc(12px * var(--hero-m));
		letter-spacing:calc(-0.3px * var(--hero-m));
		line-height:1.5;
		white-space:normal;
	}

	.main__archive__content__wr,
	.main__works__content__wr{
		overflow:visible;
	}
}

/* About — Figma 1582:876 (좌표는 inner__cen1840 기준, 피그마 x − 40) */
.main__about__section{
	--about-h:calc(100vh - var(--header-h));
	--about-h:calc(var(--app-svh) - var(--header-h));
	--about-s:min(1, calc(100vw / 1920px), calc(var(--about-h) / 980px));
	position:relative;
	height:calc(var(--about-h) + 320px);
	min-height:calc(var(--about-h) + 320px);
	padding:160px 0;
	background:#fff;
	overflow:hidden;
	box-sizing:border-box;
}
.main__about__section .inner__cen1840{
	height:100%;
	position:relative;
}
.main__about__img__wr{
	position:absolute;
	left:calc(759px * var(--about-s));
	top:0;
	z-index:1;
	width:calc(810px * var(--about-s));
	height:calc(940px * var(--about-s));
	background:#ebebeb;
	overflow:hidden;
}
.main__about__img{
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
}

.main__about__title{
	position:absolute;
	left:0;
	top:calc(40px * var(--about-s));
	z-index:2;
	margin:0;
	padding:0;
	font-size:calc(140px * var(--about-s));
	font-weight:500;
	line-height:1.1;
	letter-spacing:calc(-3.5px * var(--about-s));
	text-transform:uppercase;
	color:#000;
}
.main__about__title__item{
	position:relative;
	display:block;
	white-space:nowrap;
}
.main__about__title__item:first-child{
	overflow:hidden;
}
.main__about__title__roll{
	display:block;
	transform:translate3d(0, 110%, 0);
	transition:transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.main__about__section.is-in .main__about__title__item:nth-child(1) .main__about__title__roll{
	transform:none;
	transition-delay:0.06s;
}
.main__about__section.is-in .main__about__title__item--products .main__about__title__roll{
	transform:none;
	transition-delay:0.18s;
}
.main__about__section.is-in .main__about__title__item--quiet .main__about__title__roll{
	transform:none;
	transition-delay:0.3s;
}
.main__about__title__item--products{
	margin-left:calc(200px * var(--about-s));
}
.main__about__title__fill{
	display:block;
	overflow:hidden;
	color:#000;
	white-space:nowrap;
}
.main__about__title__stroke{
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	color:transparent;
	-webkit-text-fill-color:transparent;
	-webkit-text-stroke:1px #000;
	white-space:nowrap;
	pointer-events:none;
}
.main__about__title__item--products .main__about__title__fill{
	width:calc(559px * var(--about-s));
}
.main__about__title__item--quiet .main__about__title__fill{
	width:calc(759px * var(--about-s));
}

.main__about__desc{
	position:absolute;
	left:0;
	top:calc(542px * var(--about-s));
	z-index:2;
	margin:0;
	width:calc(450px * var(--about-s));
	font-size:max(12px, calc(16px * var(--about-s)));
	font-weight:400;
	line-height:1.5;
	letter-spacing:-0.4px;
	color:#000;
}

.main__about__more__btn{
	position:absolute;
	left:0;
	top:calc(916px * var(--about-s));
	z-index:2;
}
.main__about__more__btn a{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:calc(8px * var(--about-s));
	text-decoration:none;
	color:#000;
	font-size:max(12px, calc(16px * var(--about-s)));
	font-weight:500;
	line-height:1.5;
	letter-spacing:-0.4px;
	text-transform:uppercase;
	white-space:nowrap;
}
.main__about__more__btn img{
	display:block;
	width:calc(24px * var(--about-s));
	height:calc(24px * var(--about-s));
	flex-shrink:0;
}
@media (pointer:fine){
	.main__about__more__btn a:hover{opacity:0.5;}
}

.main__about__list{
	position:absolute;
	right:0;
	top:calc(901px * var(--about-s));
	z-index:2;
	text-align:right;
}
.main__about__list__label{
	font-size:max(11px, calc(14px * var(--about-s)));
	font-weight:600;
	line-height:1.5;
	letter-spacing:-0.35px;
	color:#000;
	white-space:nowrap;
}
.main__about__list__value{
	font-size:max(12px, calc(16px * var(--about-s)));
	font-weight:300;
	line-height:1.5;
	letter-spacing:-0.4px;
	color:#000;
	white-space:nowrap;
}

.main__about__img__wr,
.main__about__desc,
.main__about__more__btn,
.main__about__list{
	opacity:0;
	transform:translate3d(0, 28px, 0);
	transition:opacity 0.75s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.main__about__section.is-in .main__about__img__wr,
.main__about__section.is-in .main__about__desc,
.main__about__section.is-in .main__about__more__btn,
.main__about__section.is-in .main__about__list{
	opacity:1;
	transform:none;
}
.main__about__section.is-in .main__about__img__wr{transition-delay:0.22s;}
.main__about__section.is-in .main__about__desc{transition-delay:0.42s;}
.main__about__section.is-in .main__about__more__btn{transition-delay:0.54s;}
.main__about__section.is-in .main__about__list{transition-delay:0.58s;}

@media (prefers-reduced-motion: reduce){
	.main__about__title__roll,
	.main__about__img__wr,
	.main__about__desc,
	.main__about__more__btn,
	.main__about__list{
		transform:none;
		opacity:1;
		transition:none;
	}
}

@media screen and (max-width:767px){
	.main__about__section{
		--about-m:min(100vw / 375px, 100vh / 812px);
		--about-m:min(100vw / 375px, var(--app-svh) / 812px);
		--about-pad:calc(16px * var(--about-m));
		height:var(--app-svh);
		min-height:var(--app-svh);
		padding:0;
		overflow:hidden;
	}
	.main__about__section .inner__cen1840{
		width:100%;
		max-width:none;
		height:100%;
	}
	.main__about__title{
		left:var(--about-pad);
		top:calc(88px * var(--about-m));
		width:calc(343px * var(--about-m));
		font-size:calc(40px * var(--about-m));
		letter-spacing:calc(-1px * var(--about-m));
	}
	.main__about__title__item{
		white-space:normal;
	}
	.main__about__title__item:first-child,
	.main__about__title__item--products{
		white-space:nowrap;
	}
	.main__about__title__item--products{
		margin-left:0;
	}
	.main__about__title__stroke{
		display:none;
	}
	.main__about__title__fill,
	.main__about__title__item--products .main__about__title__fill,
	.main__about__title__item--quiet .main__about__title__fill{
		width:auto;
		overflow:visible;
	}
	.main__about__title__break{
		display:block;
	}
	.main__about__desc{
		left:var(--about-pad);
		top:calc(288px * var(--about-m));
		width:calc(343px * var(--about-m));
		font-size:calc(12px * var(--about-m));
		letter-spacing:calc(-0.3px * var(--about-m));
	}
	.main__about__more__btn{
		left:var(--about-pad);
		top:calc(366px * var(--about-m));
	}
	.main__about__more__btn a{
		gap:calc(8px * var(--about-m));
		font-size:calc(16px * var(--about-m));
	}
	.main__about__more__btn img{
		width:calc(24px * var(--about-m));
		height:calc(24px * var(--about-m));
	}
	.main__about__img__wr{
		left:0;
		top:calc(422px * var(--about-m));
		width:100%;
		height:calc(390px * var(--about-m));
	}
	.main__about__list{
		right:var(--about-pad);
		top:calc(763px * var(--about-m));
		bottom:auto;
		width:calc(116px * var(--about-m));
	}
	.main__about__list__label{
		font-size:calc(10px * var(--about-m));
		letter-spacing:calc(-0.25px * var(--about-m));
	}
	.main__about__list__value{
		font-size:calc(12px * var(--about-m));
		letter-spacing:calc(-0.3px * var(--about-m));
		white-space:normal;
	}
}

/* Services — Figma 1582:918 / 1582:943 */
.main__services__section{
	--svc-h:calc(100vh - var(--header-h));
	--svc-h:calc(var(--app-svh) - var(--header-h));
	--svc-s:min(1, calc(100vw / 1920px), calc(var(--svc-h) / 980px));
	position:relative;
	height:calc(var(--svc-h) + 400px);
	min-height:calc(var(--svc-h) + 400px);
	padding:200px 0;
	background:#fff;
	overflow:hidden;
	box-sizing:border-box;
}
.main__services__section .inner__cen1840{
	height:100%;
	position:relative;
}
.main__services__desc{
	position:absolute;
	left:50%;
	top:calc(40px * var(--svc-s));
	z-index:1;
	margin:0;
	width:calc(743px * var(--svc-s));
	transform:translateX(-50%);
	font-size:calc(60px * var(--svc-s));
	font-weight:500;
	line-height:1.2;
	letter-spacing:calc(-1.5px * var(--svc-s));
	text-align:center;
	color:rgba(0,0,0,0.18);
}
.main__services__desc__word{
	display:inline-block;
	white-space:nowrap;
}
.main__services__desc__ch{
	color:rgb(0 0 0 / calc(0.18 + 0.82 * var(--fill, 0)));
}

.main__services__content__wr{
	position:absolute;
	left:50%;
	top:calc(768px * var(--svc-s));
	z-index:1;
	transform:translateX(-50%);
	font-size:calc(80px * var(--svc-s));
	font-weight:500;
	line-height:1.2;
	letter-spacing:calc(-2px * var(--svc-s));
	text-align:center;
	color:#000;
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
}
.main__services__content__item{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:calc(16px * var(--svc-s));
}
.main__services__content__item__number{
	display:inline-flex;
	align-items:flex-start;
	height:1.2em;
	overflow:hidden;
}
.main__services__content__item__number__digit{
	display:block;
	position:relative;
	height:1.2em;
	min-width:0.62em;
	overflow:hidden;
	text-align:center;
}
.main__services__content__item__number__digit__list{
	display:flex;
	flex-direction:column;
	will-change:transform;
}
.main__services__content__item__number__digit__n{
	display:block;
	height:1.2em;
	line-height:1.2;
}
.main__services__content__item__number__suffix{
	display:block;
	line-height:1.2;
}

@media screen and (max-width:767px){
	.main__services__section{
		--svc-m:min(100vw / 375px, 100vh / 708px);
		--svc-m:min(100vw / 375px, var(--app-svh) / 708px);
		height:auto;
		min-height:calc(708px * var(--svc-m));
		padding:calc(120px * var(--svc-m)) calc(16px * var(--svc-m));
		overflow:visible;
	}
	.main__services__section .inner__cen1840{
		display:flex;
		flex-direction:column;
		align-items:center;
		width:100%;
		max-width:none;
		height:auto;
	}
	.main__services__desc{
		position:static;
		left:auto;
		top:auto;
		width:calc(343px * var(--svc-m));
		max-width:100%;
		transform:none;
		font-size:calc(32px * var(--svc-m));
		letter-spacing:calc(-0.8px * var(--svc-m));
		color:rgba(0,0,0,0.4);
	}
	.main__services__desc__ch{
		color:rgb(0 0 0 / calc(0.4 + 0.6 * var(--fill, 0)));
	}
	.main__services__content__wr{
		position:static;
		left:auto;
		top:auto;
		transform:none;
		margin-top:calc(40px * var(--svc-m));
		font-size:calc(40px * var(--svc-m));
		letter-spacing:calc(-1px * var(--svc-m));
	}
	.main__services__content__item{
		gap:calc(16px * var(--svc-m));
	}
}

/* Archive / Category — Figma 1605:428 / mobile 1663:6718 · overlap 1663:6626 */
.main__archive__section{
	--archive-s:min(1, calc(100vw / 1920px), calc((var(--app-svh) - var(--header-h) - 80px) / 890px));
	--archive-img-w:calc(818px * var(--archive-s));
	--archive-img-h:calc(890px * var(--archive-s));
	--archive-scale-min:0.855745721;
	--archive-peek:calc(40px * var(--archive-s));
	--archive-cards:5;
	position:relative;
	height:calc(100vh + var(--archive-cards) * 52vh);
	height:calc(var(--app-svh) + var(--archive-cards) * 52vh);
	padding:0;
	background:#fff;
}
.main__archive__content__wr{
	position:sticky;
	top:var(--header-h);
	height:calc(100vh - var(--header-h));
	height:calc(var(--app-svh) - var(--header-h));
	overflow:hidden;
	box-sizing:border-box;
}
.main__archive__title{
	position:absolute;
	left:0;
	top:0.06em;
	z-index:0;
	margin:0;
	padding:0;
	width:100%;
	font-size:calc(470px * var(--archive-s));
	font-weight:500;
	line-height:1.2;
	letter-spacing:calc(-11.75px * var(--archive-s));
	text-align:center;
	color:#000;
	white-space:nowrap;
	pointer-events:none;
	text-box-trim:trim-both;
	text-box-edge:cap alphabetic;
}
.main__archive__img__wr{
	position:absolute;
	left:50%;
	top:calc(80px * var(--archive-s));
	z-index:1;
	width:var(--archive-img-w);
	height:var(--archive-img-h);
	transform:translateX(-50%);
}
.main__archive__content__item{
	position:absolute;
	inset:0;
	background:#e5e5e5;
	overflow:hidden;
	transform-origin:top center;
	transform:translate3d(0,100%,0);
	will-change:transform;
}
.main__archive__content__item__img{
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
}
.main__archive__left,
.main__archive__right{
	position:absolute;
	top:calc(478px * var(--archive-s));
	z-index:2;
	width:calc(248px * var(--archive-s));
	opacity:0;
	pointer-events:none;
	transition:opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.main__archive__left--on,
.main__archive__right--on{
	opacity:1;
}
.main__archive__left{
	right:calc(50% + (var(--archive-img-w) / 2) + (40px * var(--archive-s)));
	width:calc(223px * var(--archive-s));
}
.main__archive__right{
	left:calc(50% + (var(--archive-img-w) / 2) + (40px * var(--archive-s)));
}
.main__archive__left__wr,
.main__archive__right__wr{
	position:relative;
	height:calc(93px * var(--archive-s));
}
.main__archive__left__list,
.main__archive__right__list{
	position:relative;
	height:100%;
}
.main__archive__left__item,
.main__archive__right__item{
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:calc(24px * var(--archive-s));
	box-sizing:border-box;
	opacity:0;
	transition:opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 26.10.02. 수정: 짧은 콘텐츠의 오른쪽 빈 공간을 줄여 이미지와의 간격 유지 */
.main__archive__left__item{
	left:auto;
	right:0;
	width:max-content;
	max-width:100%;
}
.main__archive__left__item--on,
.main__archive__right__item--on{
	opacity:1;
}
.main__archive__left__item__title,
.main__archive__right__item__title{
	font-size:max(12px, calc(14px * var(--archive-s)));
	font-weight:600;
	line-height:1.5;
	letter-spacing:-0.35px;
	color:#000;
	white-space:nowrap;
}
.main__archive__left__item__desc,
.main__archive__right__item__desc{
	font-size:max(12px, calc(16px * var(--archive-s)));
	font-weight:400;
	line-height:1.5;
	letter-spacing:-0.4px;
	color:rgba(0,0,0,0.4);
}
.main__archive__copy{
	display:none;
}

@media screen and (max-width:767px){
	.main__archive__section{
		--archive-m:min(100vw / 375px, 100vh / 812px);
		--archive-m:min(100vw / 375px, var(--app-svh) / 812px);
		--archive-pad:calc(16px * var(--archive-m));
		--archive-img-w:calc(343px * var(--archive-m));
		--archive-img-h:calc(429px * var(--archive-m));
		--archive-scale-min:0.854227405;
		--archive-peek:calc(24px * var(--archive-m));
	}
	.main__archive__content__wr{
		touch-action:pan-y;
		background:#fff;
	}
	.main__archive__title{
		left:50%;
		top:calc(77px * var(--archive-m));
		width:auto;
		font-size:calc(74px * var(--archive-m));
		line-height:1.1;
		letter-spacing:calc(-1.85px * var(--archive-m));
		text-transform:uppercase;
		white-space:nowrap;
		transform:translateX(-50%);
	}
	.main__archive__img__wr{
		top:calc(141px * var(--archive-m));
	}
	.main__archive__left,
	.main__archive__right{
		display:none;
	}
	.main__archive__copy{
		display:block;
		position:absolute;
		left:var(--archive-pad);
		top:calc(594px * var(--archive-m));
		z-index:2;
		width:auto;
		max-width:calc(343px * var(--archive-m));
		mix-blend-mode:difference;
		pointer-events:none;
	}
	.main__archive__copy__title__wr,
	.main__archive__copy__desc__wr{
		overflow:hidden;
		clip-path:inset(0);
		transform:translateZ(0);
	}
	.main__archive__copy__title__wr{
		height:calc(35.2px * var(--archive-m));
	}
	.main__archive__copy__desc__wr{
		margin-top:calc(16px * var(--archive-m));
		height:calc(18px * var(--archive-m));
	}
	.main__archive__copy__title__list,
	.main__archive__copy__desc__list{
		will-change:transform;
	}
	.main__archive__copy__title,
	.main__archive__copy__desc{
		display:flex;
		align-items:center;
		box-sizing:border-box;
		white-space:nowrap;
	}
	.main__archive__copy__title{
		height:calc(35.2px * var(--archive-m));
		font-size:calc(32px * var(--archive-m));
		font-weight:600;
		line-height:1.1;
		letter-spacing:calc(-0.8px * var(--archive-m));
		color:#fff;
		-webkit-text-fill-color:#fff;
	}
	.main__archive__copy__desc{
		height:calc(18px * var(--archive-m));
		font-size:calc(12px * var(--archive-m));
		font-weight:400;
		line-height:1.5;
		letter-spacing:calc(-0.3px * var(--archive-m));
		color:#fff;
		-webkit-text-fill-color:#fff;
	}
	.main__archive__copy__desc br{
		display:none;
	}
}

/* Works intro — Figma 1663:6741 (mobile 100vh) */
.main__works__intro{
	display:none;
}

/* Works / Inside the Studio — Figma 1673:29 / mobile pin 1863:10 */
.main__works__section{
	--works-h:calc(100vh - var(--header-h));
	--works-h:calc(var(--app-svh) - var(--header-h));
	--works-s:min(1, calc(100vw / 1920px), calc(var(--works-h) / 980px));
	--works-lead:0;
	--works-copy:0;
	--works-n:var(--works-d-n, 7);
	--works-step:125vh;
	position:relative;
	height:calc(100vh + (var(--works-n) - 1) * var(--works-step));
	height:calc(var(--app-svh) + (var(--works-n) - 1) * var(--works-step));
	padding:0;
	background:#fff;
}
.main__works__content__wr{
	position:sticky;
	top:var(--header-h);
	height:var(--works-h);
	overflow:hidden;
	box-sizing:border-box;
	background:#fff;
}
.main__works__left{
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	width:calc(1040 / 1920 * 100%);
	height:100%;
	overflow:hidden;
}
.main__works__img__wr,
.main__works__img{
	display:block;
	width:100%;
	height:100%;
}
.main__works__img{
	max-width:none;
	object-fit:cover;
	object-position:center;
}
.main__works__title__wr{
	position:absolute;
	top:0;
	right:calc(35 / 1040 * 100%);
	bottom:0;
	left:calc(35 / 1040 * 100%);
	z-index:2;
	color:#000;
	text-align:center;
	pointer-events:none;
}
.main__works__title__item--lead{
	position:absolute;
	left:50%;
	top:calc(446 / 980 * 100%);
	z-index:2;
	margin:0;
	max-width:100%;
	transform:translateX(-50%);
	font-size:calc(80px * var(--works-s));
	font-weight:400;
	line-height:1.1;
	letter-spacing:calc(-2px * var(--works-s));
	text-transform:uppercase;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	transition:
		top 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
		font-size 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
		line-height 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
		letter-spacing 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.main__works__section.is-lead .main__works__title__item--lead{
	top:calc(398 / 980 * 100%);
	font-size:calc(16px * var(--works-s));
	line-height:1.5;
	letter-spacing:calc(-0.4px * var(--works-s));
	transition:
		top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		font-size 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		line-height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		letter-spacing 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.main__works__title__list__wr{
	position:absolute;
	left:0;
	top:calc(446 / 980 * 100%);
	width:100%;
	height:1.1em;
	overflow:hidden;
	clip-path:inset(0);
	font-size:calc(80px * var(--works-s));
	line-height:1.1;
	letter-spacing:calc(-2px * var(--works-s));
	opacity:0;
	transform:translate3d(0, 110%, 0);
	pointer-events:none;
	transition:
		opacity 0.32s cubic-bezier(0.4, 0, 1, 1),
		transform 0.32s cubic-bezier(0.4, 0, 1, 1);
}
.main__works__section.is-lead .main__works__title__list__wr{
	opacity:1;
	transform:translate3d(0, 0, 0);
	transition:
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.main__works__title__list,
.main__works__desc__list,
.main__works__list__value__list,
.main__works__right__desc__list{
	display:block;
	will-change:transform;
	transition:transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.main__works__title{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
	gap:0.28em;
	height:1.1em;
	overflow:hidden;
	font-size:inherit;
	font-weight:500;
	line-height:inherit;
	letter-spacing:inherit;
	text-transform:uppercase;
	white-space:nowrap;
}
.main__works__title__line{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:center;
}
.main__works__letter{
	display:inline-block;
	height:auto;
	line-height:inherit;
}
.main__works__letter--space{
	width:0.28em;
}
.main__works__letter__ch{
	display:block;
}
.main__works__desc__wr{
	position:absolute;
	left:0;
	top:calc(558 / 980 * 100%);
	width:100%;
	height:1.5em;
	overflow:hidden;
	clip-path:inset(0);
	transform:translateZ(0);
	font-size:max(12px, calc(16px * var(--works-s)));
	line-height:1.5;
	letter-spacing:calc(-0.4px * var(--works-s));
}
.main__works__desc{
	display:block;
	box-sizing:border-box;
	width:100%;
	max-width:100%;
	height:1.5em;
	overflow:hidden;
	padding:0 2%;
	font-size:inherit;
	font-weight:400;
	line-height:inherit;
	letter-spacing:inherit;
	white-space:nowrap;
	text-overflow:ellipsis;
	text-align:center;
}

.main__works__right{
	display:contents;
}
.main__works__list{
	position:absolute;
	left:calc(1080 / 1920 * 100%);
	top:calc(40 / 980 * 100%);
	z-index:2;
	opacity:0;
	transform:translate3d(0, 10px, 0);
	text-align:left;
	color:#000;
	pointer-events:none;
	transition:
		opacity 0.32s cubic-bezier(0.4, 0, 1, 1),
		transform 0.32s cubic-bezier(0.4, 0, 1, 1);
}
.main__works__section.is-lead .main__works__list{
	opacity:1;
	transform:none;
	transition:
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.main__works__list--end{
	left:auto;
	right:calc(40 / 1920 * 100%);
	top:calc(892 / 980 * 100%);
	bottom:auto;
	text-align:right;
}
.main__works__list--end .main__works__list__value{
	display:block;
	text-align:right;
	justify-content:flex-end;
	text-overflow:ellipsis;
}
.main__works__list__label{
	font-size:max(11px, calc(14px * var(--works-s)));
	font-weight:600;
	line-height:1.5;
	letter-spacing:calc(-0.35px * var(--works-s));
	white-space:nowrap;
}
.main__works__list__value__wr{
	height:1.5em;
	overflow:hidden;
	clip-path:inset(0);
	transform:translateZ(0);
	font-size:max(12px, calc(16px * var(--works-s)));
	line-height:1.5;
	letter-spacing:calc(-0.4px * var(--works-s));
}
.main__works__list__value{
	display:flex;
	align-items:center;
	height:1.5em;
	overflow:hidden;
	font-size:inherit;
	font-weight:400;
	line-height:inherit;
	letter-spacing:inherit;
	white-space:nowrap;
}

/* 26.10.02. 수정: 헤더 높이를 보정해 stage 전체를 뷰포트 세로 중앙에 정렬 */
.main__works__right__stage{
    position: absolute;
    display: flex;
    left: calc(1230 / 1920 * 100%);
    top: calc(50% - var(--header-h) / 2);
    transform: translateY(-50%);
    z-index: 3;
    width: calc(500 / 1920 * 100%);
    flex-direction: column;
    align-items: center;
}
.main__works__right__img__wr{
	position:relative;
	width:100%;
	max-width: 352px;
    max-height: 428px;
	aspect-ratio:352 / 428;
	overflow:hidden;
	background:#cecece;
}
.main__works__content__item{
	position:absolute;
	inset:0;
	overflow:hidden;
	transform:translate3d(0,100%,0);
	will-change:transform;
	transition:transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.main__works__content__item--on,
.main__works__right__img__wr .main__works__content__item:first-child{
	transform:none;
}
.main__works__content__item__link{
	display:block;
	width:100%;
	height:100%;
	cursor:pointer;
}
.main__works__content__item__img{
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
}

.main__works__right__desc__wr{
	position:relative;
	width:100%;
	max-width:352px;
	height:1.5em;
	margin-top:calc(16 / 980 * var(--works-h));
	overflow:hidden;
	clip-path:inset(0);
	opacity:0;
	transform:translate3d(0, 10px, 0);
	font-size:max(12px, calc(16px * var(--works-s)));
	line-height:1.5;
	letter-spacing:calc(-0.4px * var(--works-s));
	color:#000;
	pointer-events:none;
	transition:
		opacity 0.32s cubic-bezier(0.4, 0, 1, 1),
		transform 0.32s cubic-bezier(0.4, 0, 1, 1);
}
.main__works__section.is-lead .main__works__right__desc__wr{
	opacity:1;
	transform:none;
	transition:
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.main__works__right__desc{
	display:flex;
	align-items:center;
	height:1.5em;
	overflow:hidden;
	font-size:inherit;
	font-weight:400;
	line-height:inherit;
	letter-spacing:inherit;
	white-space:nowrap;
}

/* Tablet / Mobile - 1024px · 26.10.02. 수정: Works 모바일 배치를 태블릿까지 확장 */
@media screen and (max-width:1024px){
	.main__works__content__wr{
		overflow:visible;
	}
	.main__works__intro{
		--works-m:min(100vw / 375px, 100vh / 812px);
		--works-m:min(100vw / 375px, var(--app-svh) / 812px);
		display:block;
		position:relative;
		height:100vh;
		height:var(--app-svh);
		padding:0;
		overflow:hidden;
		background:#050505;
		box-sizing:border-box;
	}
	.main__works__intro.main__contents__wr{
		padding:0;
	}
	.main__works__intro__img__wr{
		position:absolute;
		inset:0;
		overflow:hidden;
	}
	.main__works__intro__img{
		position:absolute;
		left:0;
		top:0;
		width:210.17%;
		height:100%;
		max-width:none;
		object-fit:cover;
		object-position:left center;
	}
	.main__works__intro__overlay{
		position:absolute;
		inset:0;
		background:rgba(0,0,0,0.4);
		pointer-events:none;
	}
	.main__works__intro__copy{
		position:absolute;
		left:50%;
		top:50%;
		z-index:1;
		width:calc(334px * var(--works-m));
		transform:translate(-50%, -50%);
		text-align:center;
		color:#fff;
		pointer-events:none;
	}
	.main__works__intro__title{
		margin:0;
		font-size:calc(32px * var(--works-m));
		font-weight:700;
		line-height:1.3;
		letter-spacing:calc(-0.8px * var(--works-m));
		text-transform:uppercase;
	}
	.main__works__intro__title__word{
		display:inline-block;
		transform-origin:50% 90%;
	}
	.main__works__intro__desc{
		margin:calc(16px * var(--works-m)) 0 0;
		font-size:calc(12px * var(--works-m));
		font-weight:400;
		line-height:1.5;
		letter-spacing:calc(-0.3px * var(--works-m));
	}

	.main__works__section{
		--works-m:min(100vw / 375px, 100vh / 812px);
		--works-m:min(100vw / 375px, var(--app-svh) / 812px);
		--works-pad:calc(16px * var(--works-m));
		--works-n:var(--works-m-n, 5);
		--works-step:100vh;
		--works-letter-dur:0.52s;
		--works-letter-stagger:0.026s;
		--works-letter-gap:0.2s;
		height:calc(100vh + (var(--works-n) - 1) * var(--works-step));
		height:calc(var(--app-svh) + (var(--works-n) - 1) * var(--works-step));
	}
	.main__works__left{
		width:100%;
		height:100%;
		overflow:visible;
		pointer-events:none;
	}
	.main__works__img__wr{
		display:none;
	}
	.main__works__title__wr{
		left:var(--works-pad);
		right:var(--works-pad);
		text-align:left;
		color:#000;
	}
	.main__works__title__item--lead{
		display:none;
	}
	.main__works__title__list__wr{
		top:calc(68px * var(--works-m));
		left:0;
		z-index:3;
		width:100%;
		max-width:calc(343px * var(--works-m));
		height:calc(88px * var(--works-m));
		font-size:calc(40px * var(--works-m));
		line-height:1.1;
		letter-spacing:calc(-1px * var(--works-m));
		opacity:1;
		transform:none;
		text-align:left;
	}
	.main__works__title__list{
		position:relative;
		height:100%;
		transform:none !important;
		transition:none;
		will-change:auto;
	}
	.main__works__title{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:calc(88px * var(--works-m));
		flex-direction:column;
		align-items:flex-start;
		justify-content:flex-start;
		gap:0;
		overflow:visible;
		white-space:normal;
		text-align:left;
	}
	.main__works__title__line{
		height:1.1em;
		overflow:hidden;
	}
	.main__works__title.is-on{
		z-index:3;
	}
	.main__works__title.is-out,
	.main__works__title.is-wait{
		z-index:2;
	}
	.main__works__section.is-swap .main__works__title.is-out{
		z-index:4;
	}
	.main__works__title.is-wait .main__works__letter__ch{
		transform:translate3d(0, 110%, 0);
	}
	.main__works__letter__ch{
		transform:translate3d(0, 110%, 0);
		transition:transform var(--works-letter-dur) cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay:calc(var(--i, 0) * var(--works-letter-stagger));
	}
	.main__works__section.is-dir-up .main__works__letter__ch{
		transition-delay:calc((var(--n, 12) - var(--i, 0) - 1) * var(--works-letter-stagger));
	}
	.main__works__section.is-swap .main__works__title.is-on .main__works__letter__ch{
		transition-delay:calc(var(--works-letter-gap) + var(--i, 0) * var(--works-letter-stagger));
	}
	.main__works__section.is-swap.is-dir-up .main__works__title.is-on .main__works__letter__ch{
		transition-delay:calc(var(--works-letter-gap) + (var(--n, 12) - var(--i, 0) - 1) * var(--works-letter-stagger));
	}
	.main__works__title.is-on .main__works__letter__ch{
		transform:none;
	}
	.main__works__title.is-out .main__works__letter__ch{
		transform:translate3d(0, -110%, 0);
	}
	.main__works__desc__wr{
		top:calc(172px * var(--works-m));
		left:0;
		width:100%;
		max-width:calc(343px * var(--works-m));
		height:1.5em;
		font-size:calc(12px * var(--works-m));
		letter-spacing:calc(-0.3px * var(--works-m));
		text-align:left;
		padding:0;
	}
	.main__works__desc{
		height:1.5em;
		justify-content:flex-start;
		align-items:center;
		text-align:left;
		white-space:nowrap;
	}
	.main__works__list,
	.main__works__right__desc__wr{
		opacity:1;
		transform:none;
	}
	.main__works__list{
		left:var(--works-pad);
		top:calc(19px * var(--works-m));
		min-width:calc(180px * var(--works-m));
	}
	.main__works__list--end{
		left:auto;
		right:var(--works-pad);
		top:calc(689px * var(--works-m));
		bottom:auto;
		min-width:calc(140px * var(--works-m));
	}
	.main__works__list__value__wr{
		width:100%;
	}
	.main__works__list__label{
		font-size:calc(10px * var(--works-m));
		letter-spacing:calc(-0.25px * var(--works-m));
	}
	.main__works__list__value__wr,
	.main__works__right__desc__wr{
		font-size:calc(12px * var(--works-m));
		letter-spacing:calc(-0.3px * var(--works-m));
	}
	/* 26.10.02. 수정: 태블릿·모바일은 기존 stage 위치 유지 */
	.main__works__right__stage{
		left:50%;
		top:calc(222px * var(--works-m));
		width:calc(343px * var(--works-m));
		transform:translateX(-50%);
	}
	.main__works__right__img__wr{
		aspect-ratio:343 / 417;
	}
	.main__works__right__desc__wr{
		height:1.5em;
		margin-top:calc(16px * var(--works-m));
	}
	.main__works__right__desc{
		height:1.5em;
		justify-content:flex-start;
		white-space:nowrap;
		align-items:center;
	}
}

@media (prefers-reduced-motion: reduce){
	.main__works__title__item--lead,
	.main__works__title__list__wr,
	.main__works__title__list,
	.main__works__desc__list,
	.main__works__list,
	.main__works__list__value__list,
	.main__works__right__desc__wr,
	.main__works__right__desc__list,
	.main__works__content__item,
	.main__works__letter__ch{
		transition:none;
	}
}

/* Projects — Figma 1582:974 / 1605:489 / 1605:458 + mathieulevesque blend */
@property --proj-reveal {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 72%;
}
@property --proj-shift {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}
.main__projects__section{
	--proj-pin-h:100vh;
	--proj-pin-h:var(--app-svh);
	--proj-s:min(1, calc(100vw / 1920px), calc(var(--proj-pin-h) / 1080px));
	--proj-x:max(0px, calc((100vw - 1920px * var(--proj-s)) / 2));
	position:relative;
	z-index:2;
	isolation:isolate;
	height:var(--proj-pin-h);
	padding:0;
	margin-bottom:200px;
	background:#fff;
}
.main__projects__content__wr{
	position:sticky;
	top:0;
	z-index:1;
	height:var(--proj-pin-h);
	overflow:hidden;
	box-sizing:border-box;
	background:#fff;
}
.main__projects__list{
	position:relative;
	z-index:1;
	will-change:transform;
}
.main__projects__titles,
.main__projects__hud{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:5;
	overflow:visible;
	pointer-events:none;
}
.main__projects__titles{
	z-index:5;
}
.main__projects__hud{
	z-index:6;
	color:#000;
	-webkit-text-fill-color:#000;
}
.main__projects__copy{
	position:absolute;
	left:calc(var(--proj-x) + 40px * var(--proj-s));
	top:calc(624px * var(--proj-s));
	z-index:8;
	width:max-content;
	max-width:calc(1237px * var(--proj-s));
	overflow:visible;
	color:#000;
	-webkit-text-fill-color:#000;
}
.main__projects__kicker__wr{
	display:grid;
	grid-template-columns:max-content;
	position:relative;
	width:max-content;
	max-width:100%;
	height:1.5em;
	overflow:hidden;
	font-size:max(12px, calc(16px * var(--proj-s)));
	font-weight:400;
	line-height:1.5;
	letter-spacing:calc(-0.4px * var(--proj-s));
	color:#000;
	-webkit-text-fill-color:#000;
}
.main__projects__kicker{
	grid-area:1 / 1;
	position:relative;
	left:auto;
	top:auto;
	width:max-content;
	white-space:nowrap;
	opacity:0;
	visibility:hidden;
	color:#000;
	-webkit-text-fill-color:#000;
	transform:translate3d(0, 110%, 0);
	transition:transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, visibility 0.45s ease;
}
.main__projects__kicker--on{
	opacity:1;
	visibility:visible;
	transform:none;
}
.main__projects__title__stage{
	position:absolute;
	left:calc(var(--proj-x) + 30px * var(--proj-s));
	top:calc(654px * var(--proj-s));
	width:calc(1237px * var(--proj-s));
	height:calc(174px * var(--proj-s));
	color:#000;
}
.main__projects__title__item{
	position:absolute;
	left:0;
	top:0;
	height:100%;
}
.main__projects__title{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	box-sizing:border-box;
	height:calc(174px * var(--proj-s));
	padding:calc(10px * var(--proj-s));
	overflow:hidden;
	font-size:calc(140px * var(--proj-s));
	font-weight:500;
	line-height:1.1;
	letter-spacing:calc(-3.5px * var(--proj-s));
	text-transform:uppercase;
	white-space:nowrap;
	color:#000;
}
.main__projects__title__word{
	display:flex;
	flex-wrap:nowrap;
	align-items:inherit;
}
.main__projects__title--fill{
	position:relative;
	z-index:1;
	min-width:0;
	width:100%;
	color:#000;
	-webkit-text-fill-color:#000;
}
.main__projects__title--stroke{
	position:absolute;
	left:0;
	top:0;
	z-index:0;
	width:auto;
	color:transparent;
	-webkit-text-fill-color:transparent;
	-webkit-text-stroke:1.4px #000;
	pointer-events:none;
}
.main__projects__letter{
	display:inline-block;
	flex-shrink:0;
	transform:translate3d(0, 110%, 0);
	transition:transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.main__projects__letter--space{
	width:0.33em;
}
.main__projects__title__item--on .main__projects__letter{
	transform:translate3d(0, 0, 0);
}
.main__projects__title__item--out .main__projects__letter{
	transform:translate3d(0, -110%, 0);
}

.main__projects__rail{
	position:absolute;
	left:auto;
	right:max(16px, calc(var(--proj-x) + 33px * var(--proj-s)));
	top:calc(var(--header-h) + 40px);
	bottom:24px;
	z-index:4;
	width:120px;
	pointer-events:none;
	color:#000;
	-webkit-text-fill-color:#000;
	border-left:1px solid #000;
}
.main__projects__line{
	display:none;
}
.main__projects__meta__wr,
.main__projects__tags__wr{
	position:absolute;
	left:16px;
	top:0;
	bottom:0;
	color:#000;
	-webkit-text-fill-color:#000;
}
.main__projects__meta,
.main__projects__tags{
	position:absolute;
	left:0;
	opacity:0;
	visibility:hidden;
	color:#000;
	-webkit-text-fill-color:#000;
	transition:opacity 0.55s ease, visibility 0.55s ease;
}
.main__projects__meta{
	top:0;
}
.main__projects__tags{
	top:auto;
	bottom:0;
}
.main__projects__meta--on,
.main__projects__tags--on{
	opacity:1;
	visibility:visible;
}
.main__projects__meta{
	display:flex;
	flex-direction:row;
	align-items:flex-end;
}
.main__projects__meta span{
	display:block;
	width:24px;
	font-size:max(12px, calc(16px * var(--proj-s)));
	font-weight:400;
	line-height:1.5;
	letter-spacing:-0.4px;
	white-space:nowrap;
	color:#000;
	-webkit-text-fill-color:#000;
	writing-mode:vertical-rl;
	transform:rotate(180deg);
}
.main__projects__tags{
	display:flex;
	flex-direction:column;
	gap:max(12px, calc(24px * var(--proj-s)));
	align-items:flex-start;
}
.main__projects__tag{
	display:block;
	width:24px;
	font-size:max(12px, calc(16px * var(--proj-s)));
	font-weight:300;
	line-height:1.5;
	letter-spacing:calc(-0.4px * var(--proj-s));
	text-transform:uppercase;
	white-space:nowrap;
	color:#000;
	-webkit-text-fill-color:#000;
	writing-mode:vertical-rl;
	transform:rotate(180deg);
}

.main__projects__content__item{
	position:relative;
	padding-top:28vh;
	padding-bottom:18vh;
}
.main__projects__content__item:first-child{
	padding-top:min(44vh, max(0px, calc(var(--proj-pin-h) - (1040px * var(--proj-s)))));
}
.main__projects__content__item:last-child{
	padding-bottom:max(0px, calc(var(--proj-pin-h) - (1040px * var(--proj-s))));
}
.main__projects__visual{
	position:relative;
	width:100%;
	height:calc(1040px * var(--proj-s));
	overflow:hidden;
}
.main__projects__img{
	--proj-shift:0px;
	--proj-reveal:72%;
	position:absolute;
	overflow:hidden;
	background:transparent;
	transform:translate3d(0, calc(var(--proj-reveal) + var(--proj-shift)), 0);
	transition:--proj-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change:transform;
}
.main__projects__img--main{
	left:calc(var(--proj-x) + 407px * var(--proj-s));
	top:0;
	z-index:1;
	width:calc(960px * var(--proj-s));
	height:calc(680px * var(--proj-s));
	--proj-reveal:88%;
}
.main__projects__img--second,
.main__projects__img--third{
	z-index:2;
}
.main__projects__content__item--from-top .main__projects__img{
	--proj-reveal:-72%;
}
.main__projects__content__item--from-top .main__projects__img--main{
	--proj-reveal:-88%;
}
.main__projects__content__item--show .main__projects__img,
.main__projects__content__item--show .main__projects__img--main{
	--proj-reveal:0%;
	transition:--proj-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.main__projects__content__item--show .main__projects__img--main{
	transition-delay:0.05s;
}
.main__projects__content__item--show .main__projects__img--second{
	transition-delay:0.16s;
}
.main__projects__content__item--show .main__projects__img--third{
	transition-delay:0.28s;
}
.main__projects__content__item--a .main__projects__img--second{
	left:calc(var(--proj-x) + 1247px * var(--proj-s));
	top:calc(520px * var(--proj-s));
	width:calc(240px * var(--proj-s));
	height:calc(320px * var(--proj-s));
}
.main__projects__content__item--a .main__projects__img--third{
	left:calc(var(--proj-x) + 167px * var(--proj-s));
	top:calc(720px * var(--proj-s));
	width:calc(240px * var(--proj-s));
	height:calc(320px * var(--proj-s));
}
.main__projects__content__item--b .main__projects__img--second{
	left:calc(var(--proj-x) + 287px * var(--proj-s));
	top:calc(520px * var(--proj-s));
	width:calc(240px * var(--proj-s));
	height:calc(320px * var(--proj-s));
}
.main__projects__content__item--b .main__projects__img--third{
	left:calc(var(--proj-x) + 1247px * var(--proj-s));
	top:calc(720px * var(--proj-s));
	width:calc(240px * var(--proj-s));
	height:calc(320px * var(--proj-s));
}
.main__projects__img__clip{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	background:transparent;
}
.main__projects__img__photo{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
	object-position:center;
	background:transparent;
}

@media screen and (max-width:767px){
	/* Projects mobile — Figma 1663:6550 · 가로는 100vw, 세로는 var(--app-svh)에 독립 스케일 */
	.main__projects__section{
		--proj-pin-h:100vh;
		--proj-pin-h:var(--app-svh);
		--proj-mw:calc(100vw / 375px);
		--proj-mh:calc(100vh / 812px);
		--proj-mh:calc(var(--proj-pin-h) / 812px);
		--proj-fs:min(var(--proj-mw), calc(var(--proj-mh) * 2.2));
		--proj-ui:min(var(--proj-mw), calc(var(--proj-mh) * 1.35));
		--proj-n:3;
		height:var(--proj-pin-h);
		margin-bottom:0;
		padding:0;
	}
	.main__projects__section.main__contents__wr{
		padding:0;
	}
	.main__projects__content__wr{
		top:0;
		overflow:hidden;
		touch-action:pan-y;
		background:#fff;
	}
	.main__projects__list{
		position:relative;
		overflow:visible;
		will-change:transform;
		z-index:1;
		background:transparent;
	}
	.main__projects__content__item,
	.main__projects__content__item:first-child,
	.main__projects__content__item:last-child{
		position:relative;
		height:auto;
		padding-top:28vh;
		padding-bottom:18vh;
		overflow:visible;
	}
	.main__projects__content__item:first-child{
		padding-top:calc(306px * var(--proj-mh));
	}
	.main__projects__content__item:last-child{
		padding-bottom:max(0px, calc(var(--proj-pin-h) - (639px * var(--proj-mh))));
	}
	.main__projects__visual{
		position:relative;
		width:100%;
		height:calc(333px * var(--proj-mh));
		overflow:hidden;
		padding:0;
	}
	.main__projects__img--main{
		left:calc(31px * var(--proj-mw));
		top:0;
		width:calc(312px * var(--proj-mw));
		height:calc(223px * var(--proj-mh));
		z-index:1;
	}
	.main__projects__content__item--a .main__projects__img--second{
		left:calc(263px * var(--proj-mw));
		top:calc(150px * var(--proj-mh));
		width:calc(96px * var(--proj-mw));
		height:calc(128px * var(--proj-mh));
		z-index:2;
	}
	.main__projects__content__item--a .main__projects__img--third{
		left:calc(16px * var(--proj-mw));
		top:calc(204px * var(--proj-mh));
		width:calc(96px * var(--proj-mw));
		height:calc(129px * var(--proj-mh));
		z-index:2;
	}
	.main__projects__content__item--b .main__projects__img--second{
		left:calc(16px * var(--proj-mw));
		top:calc(150px * var(--proj-mh));
		width:calc(96px * var(--proj-mw));
		height:calc(128px * var(--proj-mh));
		z-index:2;
	}
	.main__projects__content__item--b .main__projects__img--third{
		left:calc(263px * var(--proj-mw));
		top:calc(204px * var(--proj-mh));
		width:calc(96px * var(--proj-mw));
		height:calc(129px * var(--proj-mh));
		z-index:2;
	}
	.main__projects__copy{
		left:calc(16px * var(--proj-mw));
		top:calc(100px * var(--proj-mh));
		bottom:auto;
		width:max-content;
		max-width:calc(343px * var(--proj-mw));
		z-index:8;
	}
	.main__projects__kicker__wr{
		height:calc(18px * var(--proj-ui));
		font-size:calc(12px * var(--proj-ui));
		font-weight:400;
		line-height:1.5;
		letter-spacing:calc(-0.3px * var(--proj-mw));
	}
	.main__projects__titles{
		overflow:visible;
		z-index:5;
	}
	.main__projects__title__stage{
		left:calc(16px * var(--proj-mw));
		top:calc(134px * var(--proj-mh));
		bottom:auto;
		width:calc(343px * var(--proj-mw));
		height:calc(140px * var(--proj-fs));
		overflow:hidden;
	}
	.main__projects__title__item{
		width:100%;
		visibility:hidden;
		pointer-events:none;
	}
	.main__projects__title__item--on,
	.main__projects__title__item--out{
		visibility:visible;
	}
	.main__projects__title__item--on{
		z-index:2;
	}
	.main__projects__title__item--out{
		z-index:1;
	}
	.main__projects__title{
		flex-direction:column;
		flex-wrap:nowrap;
		align-items:flex-start;
		justify-content:flex-start;
		width:100%;
		height:calc(140px * var(--proj-fs));
		min-height:0;
		padding:0;
		overflow:hidden;
		font-size:calc(64px * var(--proj-fs));
		font-weight:500;
		line-height:1.1;
		letter-spacing:calc(-1.6px * var(--proj-mw));
		white-space:nowrap;
	}
	.main__projects__title--fill{
		width:100%;
	}
	.main__projects__title--stroke{
		display:flex;
		width:100%;
		-webkit-text-stroke:1px #000;
	}
	.main__projects__title__word{
		display:flex;
		height:calc(70px * var(--proj-fs));
		overflow:hidden;
	}
	.main__projects__letter--space{
		display:none;
	}
	.main__projects__hud{
		z-index:6;
	}
	.main__projects__rail{
		display:block;
		left:0;
		right:0;
		top:calc(679px * var(--proj-mh));
		bottom:0;
		width:auto;
		padding:0;
		box-sizing:border-box;
		border-left:none;
		background:#fff;
		z-index:6;
	}
	.main__projects__line{
		display:block;
		margin:0 0 0 calc(16px * var(--proj-mw));
		width:calc(343px * var(--proj-mw));
		height:1px;
		background:#000;
	}
	.main__projects__meta__wr,
	.main__projects__tags__wr{
		left:calc(16px * var(--proj-mw));
		right:calc(16px * var(--proj-mw));
		bottom:auto;
	}
	.main__projects__tags__wr{
		top:calc(9px * var(--proj-mh));
	}
	.main__projects__meta__wr{
		top:calc(40px * var(--proj-mh));
	}
	.main__projects__tags{
		display:flex;
		flex-direction:row-reverse;
		flex-wrap:nowrap;
		justify-content:flex-end;
		align-items:flex-start;
		gap:calc(8px * var(--proj-mw));
		top:0;
		bottom:auto;
		margin:0;
		padding:0;
	}
	.main__projects__tag{
		width:auto;
		margin:0;
		padding:0;
		font-size:calc(10px * var(--proj-ui));
		font-weight:300;
		line-height:1.5;
		letter-spacing:calc(-0.25px * var(--proj-mw));
		text-align:left;
		white-space:nowrap;
		writing-mode:horizontal-tb;
		text-orientation:mixed;
		transform:none;
	}
	.main__projects__meta{
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		justify-content:flex-start;
		gap:0;
		top:0;
		margin:0;
		padding:0;
	}
	.main__projects__meta span{
		display:block;
		width:auto;
		max-width:100%;
		height:calc(18px * var(--proj-ui));
		margin:0;
		padding:0;
		font-size:calc(12px * var(--proj-ui));
		font-weight:400;
		line-height:1.5;
		letter-spacing:calc(-0.3px * var(--proj-mw));
		text-align:left;
		white-space:nowrap;
		writing-mode:horizontal-tb;
		text-orientation:mixed;
		transform:none;
	}
}

/* Connect — Figma 1692:1556 + urbanblue life_style */
.main__connect__section{
	--connect-h:100vh;
	--connect-h:var(--app-svh);
	--connect-tile:calc(1334 / 1080 * var(--connect-h));
	position:relative;
	z-index:1;
	height:var(--connect-h);
	padding:0;
	overflow:hidden;
	background:#111;
	color:#fff;
	box-sizing:border-box;
}
.main__connect__content__wr{
	position:relative;
	display:grid;
	place-items:center;
	isolation:isolate;
	height:var(--connect-h);
}
.main__connect__img__wr{
	position:absolute;
	inset:0 auto auto 0;
	z-index:1;
	width:100%;
	height:calc(var(--connect-tile) * 3);
	pointer-events:none;
	animation:main__connect__drift 42s linear infinite;
}
.main__connect__img__box{
	position:absolute;
	left:0;
	width:100%;
	height:var(--connect-tile);
}
.main__connect__img__box--2{
	top:var(--connect-tile);
}
.main__connect__img__box--3{
	top:calc(var(--connect-tile) * 2);
}
.main__connect__img{
	position:absolute;
	overflow:hidden;
	opacity:0.6;
}
.main__connect__img__photo{
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
}
.main__connect__img--01{
	left:calc(246 / 1920 * 100%);
	top:calc(720 / 1334 * 100%);
	width:calc(236 / 1920 * 100%);
	aspect-ratio:236 / 312;
}
.main__connect__img--02{
	left:calc(415 / 1920 * 100%);
	top:0;
	width:calc(247 / 1920 * 100%);
	aspect-ratio:247 / 309;
}
.main__connect__img--03{
	left:calc(622 / 1920 * 100%);
	top:calc(518 / 1334 * 100%);
	width:calc(247 / 1920 * 100%);
	aspect-ratio:247 / 309;
}
.main__connect__img--04{
	left:calc(1107 / 1920 * 100%);
	top:calc(285 / 1334 * 100%);
	width:calc(244 / 1920 * 100%);
	aspect-ratio:244 / 297;
}
.main__connect__img--05{
	left:calc(1107 / 1920 * 100%);
	top:calc(1032 / 1334 * 100%);
	width:calc(234 / 1920 * 100%);
	aspect-ratio:234 / 302;
}
.main__connect__img--06{
	left:calc(1494 / 1920 * 100%);
	top:calc(488 / 1334 * 100%);
	width:calc(231 / 1920 * 100%);
	aspect-ratio:231 / 312;
}
.main__connect__copy{
	position:absolute;
	inset:0;
	z-index:3;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	width:100%;
	padding:0 24px;
	text-align:center;
	pointer-events:none;
}
.main__connect__title{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100%;
	margin:0 0 24px;
	font-size:80px;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-2px;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
}
.main__connect__title__line{
	display:block;
	width:100%;
	text-align:center;
}
.main__connect__title__word{
	display:inline-block;
	transform-origin:50% 90%;
}
.main__connect__desc{
	margin:0 0 40px;
	width:100%;
	font-size:16px;
	font-weight:400;
	line-height:1.5;
	letter-spacing:-0.4px;
	text-align:center;
	word-break:keep-all;
	overflow-wrap:normal;
	color:#8b8b8b;
}
.main__connect__btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:4px;
	margin:0;
	padding:2px 0 8px;
	border:0;
	background:transparent;
	color:#fff;
	cursor:pointer;
	pointer-events:auto;
	font-family:inherit;
	text-align:center;
}
.main__connect__btn::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:1px;
	background:currentColor;
	transform:scaleX(0);
	transform-origin:100% 50%;
	transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events:none;
}
.main__connect__btn:focus-visible{
	outline:2px solid #fff;
	outline-offset:4px;
}
.main__connect__btn__label{
	font-size:16px;
	font-weight:500;
	line-height:1.5;
	letter-spacing:-0.4px;
	text-transform:uppercase;
	white-space:nowrap;
}
.main__connect__btn__icon{
	display:block;
	width:16px;
	height:16px;
	flex-shrink:0;
	transform-origin:center;
	filter:invert(1);
	transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (pointer: fine) {
	.main__connect__btn:hover::after,
	.main__connect__btn:focus-visible::after{
		transform:scaleX(1);
		transform-origin:0 50%;
	}
	.main__connect__btn:hover .main__connect__btn__icon,
	.main__connect__btn:focus-visible .main__connect__btn__icon{
		transform:rotate(-45deg);
	}
}

@keyframes main__connect__drift{
	to{transform:translate3d(0, calc(var(--connect-tile) * -2), 0);}
}

@media (prefers-reduced-motion: reduce){
	.main__connect__img__wr{
		animation:none;
	}
	.main__connect__btn::after{
		transition:none;
	}
}

@media screen and (max-width:1199px){
	.main__connect__title{
		font-size:clamp(40px, 5.2vw, 64px);
		letter-spacing:-1.2px;
		margin-bottom:20px;
	}
	.main__connect__desc{
		font-size:14px;
		margin-bottom:32px;
		padding:0 16px;
	}
}

@media screen and (max-width:767px){
	.main__connect__section{
		--connect-tile:calc(1176 / 812 * var(--connect-h));
		background:#000;
	}
	.main__connect__copy{
		padding:0 16px;
	}
	.main__connect__title{
		font-size:32px;
		letter-spacing:-0.8px;
		margin-bottom:16px;
	}
	.main__connect__desc{
		padding:0;
		margin-bottom:24px;
		font-size:12px;
		letter-spacing:-0.3px;
		line-height:1.5;
	}
	.main__connect__btn{
		gap:8px;
		padding:12px;
	}
	.main__connect__btn::after{
		transform:scaleX(1);
		transform-origin:0 50%;
	}
	.main__connect__btn__label{
		font-size:12px;
		letter-spacing:-0.3px;
	}
	.main__connect__img--01,
	.main__connect__img--02,
	.main__connect__img--03,
	.main__connect__img--04,
	.main__connect__img--05,
	.main__connect__img--06{
		display:block;
		width:calc(120 / 375 * 100%);
		aspect-ratio:120 / 160;
	}
	.main__connect__img--01{
		left:calc(-12 / 375 * 100%);
		top:calc(760 / 812 * var(--connect-h));
	}
	.main__connect__img--02{
		left:calc(-12 / 375 * 100%);
		top:calc(-24 / 812 * var(--connect-h));
	}
	.main__connect__img--03{
		left:0;
		top:calc(368 / 812 * var(--connect-h));
	}
	.main__connect__img--04{
		left:calc(186 / 375 * 100%);
		top:calc(168 / 812 * var(--connect-h));
	}
	.main__connect__img--05{
		left:calc(226 / 375 * 100%);
		top:calc(808 / 812 * var(--connect-h));
		aspect-ratio:120 / 154;
	}
	.main__connect__img--06{
		left:calc(267 / 375 * 100%);
		top:calc(588 / 812 * var(--connect-h));
	}
}