@charset "utf-8";
/* [Dev] (Modified After Development) */
/* Description: 개발 이후 */

/* [Main] - 메인 수정 */

/* [Sub] - 서브 수정 */


/*
 * Matter.js DOM drop — standalone stylesheet
 * Required markup only: .test > .section.matters > .matter-area > .matter-wrap > .matter-box
 * The former project utility classes (fs-*, fc-*, pack-down, gap-*) are intentionally not required.
 */

.test .section.matters {
	--matter-bg: #f7f5f1;
	--matter-ink: #121212;
	--matter-orange: #ff5a1f;
	--matter-orange-hover: #171717;
	--matter-text-size: clamp(132px, 21.5vw, 420px);
	--matter-image-size: clamp(78px, 11vw, 210px);
	--matter-viewport-h: 100dvh;

	position: relative;
	isolation: isolate;
	z-index: 1;
	width: 100%;
	height: min(100dvh, var(--matter-viewport-h));
	min-height: 360px;
	max-height: 100dvh;
	background: var(--matter-bg);
}

.test .section.matters .matter-area {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}

.test .section.matters .matter-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	isolation: isolate;
}

/*
 * Matter.js가 left/top이 아닌 transform을 통해 좌표를 제어한다.
 * 따라서 각 요소의 원래 document flow는 발생하지 않는다.
 */
.test .section.matters .matter-box {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	will-change: transform, opacity;
	transform-origin: 50% 50%;
	opacity: 0;
}

.test .section.matters .matter-box.is-spawned {
	opacity: 1;
}

.test .section.matters .matter-box.is-dragging {
	z-index: 10;
	cursor: grabbing;
}

/* Text-based shapes */
.test .section.matters .matter-text {
	overflow: hidden;
	position: relative;
	display: grid;
	place-items: center;
	width: var(--matter-text-size);
	aspect-ratio: 1;
	background: var(--matter-orange);
	color: #fff;
	box-shadow: 0 12px 30px rgb(18 18 18 / 12%);
	transition: background-color 240ms ease, box-shadow 240ms ease;
}

.test .section.matters .matter-text:hover,
.test .section.matters .matter-text:focus-within {
	background: var(--matter-orange-hover);
	box-shadow: 0 16px 42px rgb(18 18 18 / 22%);
}

.test .section.matters .matter-text .text-wrap {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: clamp(20px, 3.1vw, 54px);
	text-align: center;
}

/* Old utility classes may remain in the HTML but are not needed for layout. */
.test .section.matters .matter-text .title,
.test .section.matters .matter-text .text {
	margin: 0;
	color: inherit;
}

.test .section.matters .matter-text .title {
	font-family: inherit;
	font-size: clamp(16px, 1.75vw, 28px);
	font-weight: 700;
	
}

.test .section.matters .matter-text .text {
	margin-top: clamp(10px, 1.5vw, 22px);
	font-family: inherit;
	font-size: clamp(10px, 1.1vw, 17px);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: -0.035em;
	word-break: keep-all;
}

.test .section.matters .matter-01 {
	border-radius: 50%;
	clip-path: circle(50% at 50% 50%);
}

.test .section.matters .matter-02 {
	/* Matter.js의 triangle 바디 방향과 일치 */
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.test .section.matters .matter-02 .text-wrap {
	padding: clamp(54px, 8vw, 124px) clamp(20px, 3vw, 50px) clamp(20px, 3vw, 48px);
}

.test .section.matters .matter-03 {
	clip-path: inset(0);
}

/* SVG image-based boxes */
.test .section.matters .matter-img {
	width: var(--matter-image-size);
	aspect-ratio: 1;
	filter: drop-shadow(0 10px 16px rgb(18 18 18 / 10%));
}

.test .section.matters .matter-img .img-wrap,
.test .section.matters .matter-img img {
	display: block;
	width: 100%;
	height: 100%;
}

.test .section.matters .matter-img img {
	object-fit: contain;
	pointer-events: none;
}

@media (max-width: 767px) {
	.test .section.matters {
		--matter-text-size: clamp(132px, 47vw, 260px);
		--matter-image-size: clamp(68px, 25vw, 130px);
		min-height: 320px;
	}

	.test .section.matters .matter-text .text-wrap {
		padding: 24px;
	}

	.test .section.matters .matter-text .title {
		font-size: clamp(15px, 4.3vw, 20px);
	}

	.test .section.matters .matter-text .text {
		margin-top: 10px;
		font-size: clamp(9px, 2.8vw, 12px);
		line-height: 1.45;
	}

	.test .section.matters .matter-02 .text-wrap {
		padding: 58px 22px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.test .section.matters .matter-text {
		transition: none;
	}
}


/* // [Dev] 개발 이후 종료 */


/* {Section Service} - 섹션 서비스 */
.main .section.matters{
	height: calc(var(--vh100) * 2);
	background-color: var(--white); isolation: isolate;

	.matter-area	{
		overflow: hidden; position: relative;
		width: 100%; height: var(--vh100); 
	}
	.matter-wrap	{ position: absolute; inset: 0 0 0 0; isolation: isolate; }
	.matter-wrap canvas{ width: 100%; height: 100%; }

	.matter-box {
		position: absolute !important; top: 0 !important; left: 0 !important;
		z-index: 1;
		cursor: grab; touch-action: none;
		will-change: transform, opacity; transform-origin: 50% 50%;
		opacity: 0;

		&.is-spawned	{ opacity: 1; }
		&.is-dragging	{ z-index: 3; cursor: grabbing; }
	}

	.matter-text {
		z-index: 2;
		overflow: hidden; position: relative;
		display: grid; place-items: center;
		width: 40rem;
		aspect-ratio: 1;
		background-color: var(--orange); color: var(--white);
		transition: background-color 1s ease;

		&:hover{ background-color: var(--ntr-700); }

		.text-wrap{
			width: 100%; height: 100%;
			align-items: center;
			text-align: center; justify-content: center;
		}

		.title	{ 
			font-size: var(--fs-24-16); font-weight: var(--fw-700);
			line-height: 1.2; letter-spacing: -0.04em;
		}
		.text	{
			font-family: inherit;
			font-size: var(--fs-16);
			font-weight: 400;
			line-height: 1.55;
			letter-spacing: -0.035em;
			word-break: keep-all;
		}
	}
}

.main .section.matters .matter-01 {
	border-radius: 50%;
	clip-path: circle(50% at 50% 50%);
}

.main .section.matters .matter-02 {
	/* Matter.js의 triangle 바디 방향과 일치 */
	width: 50rem; aspect-ratio: 500/400;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.main .section.matters .matter-02 .text-wrap {
	position: relative; top: 5.5rem;
}

.main .section.matters .matter-03 {
	clip-path: inset(0);
}

/* SVG image-based boxes */
.main .section.matters .matter-img {
	width: 16rem;
	aspect-ratio: 1;
}
.main .section.matters .matter-img:nth-of-type(odd){
	width: 12rem;
}


.main .section.matters .matter-img .img-wrap,
.main .section.matters .matter-img img {
	display: block;
	width: 100%;
	height: 100%;
}

.main .section.matters .matter-img img {
	object-fit: contain;
	pointer-events: none;
}

/* Mobile reading and physics sections: keep words together, wrap long input. */
@media (max-width:767px) {
 .main .shape-wrap :is(.text,.desc), .sub.about :is(.text,.desc), .main .collab-inner :is(.text,.sub-title) {
  word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty; line-height:1.6;
 }
 .main .shape-wrap .text-wrap, .sub.about .thought-wrap .text-wrap {max-width:100%;min-width:0;}
 .main .section.matters .text-wrap {padding-inline:14px;}
 .main .section.matters .text-area.is-hover {background-color:var(--ntr-700);}
 .sub.about .section.thought .thought-wrap .text-wrap .text span {display:inline;white-space:pre-line;}
 .sub.about .section.thought .thought-wrap .text-wrap .text span + span::before {content:' ';}
 .sub.about .section.thought .thought-wrap .text-wrap {padding-inline:8px;}
 .main .section.matters, .sub.about .section.thought {padding-bottom:0;margin-bottom:0;}
}
/* Continue each page's background into its footer. */
#footer.footer-main {background-color:var(--ntr-700);}
#footer.footer-light {background-color:#fff;color:var(--ntr-700);}
#footer.footer-light :is(.fc-white,.fc-white-40) {color:var(--ntr-700);}
#footer.footer-light .logo-area img {filter:brightness(0);}
#footer.footer-light .mask-instagram {background-color:var(--ntr-700);}
/* Edge-to-edge gallery tiles, including Flip's measured expanded layout. */
.main .section.gallery .gallery-area {--gap-16:0px;gap:0;}
.main .section.gallery .gallery-wrap {gap:0;}

/* Keep short content pages clear of the animated footer. */
#content.sub:not(.about){min-height:100svh;padding-bottom:clamp(96px,12vh,160px);box-sizing:border-box;}
@media(max-width:767px){
 .sub.about .section.ours{background-color:#fff;}
 .sub.about .section.ours .img-area{height:calc(var(--vh100) + 2px);}
 .main .section.achieve.achievement-grid-section .title-area{width:100%;left:0;right:0;padding-inline:12px;box-sizing:border-box;overflow:visible;}
 .main .section.achieve.achievement-grid-section .title-area .title{font-size:clamp(32px,9vw,52px);line-height:1.15;}
}
/* Footer occupies its own document-flow box on every page. */
#footer{position:relative;clear:both;overflow:hidden;isolation:isolate;}
#footer .footer-inner,#footer .logo-area .img-wrap{transform:none!important;will-change:auto;}



/* Approved compact footer: company at left, contact / official Instagram at right. */
@font-face{font-family:WeekendsFooter;src:url('../fonts/Pretendard/web/variable/woff2/PretendardVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
#footer .footer-inner{padding-bottom:80px}
#footer .footer-inner>.gutter{gap:32px}
#footer .footer-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;font-family:WeekendsFooter,sans-serif;font-size:14px;line-height:1.6;color:#fff}
#footer.footer-light .footer-meta{color:#333}
#footer .footer-company strong{font:700 1em/1.6 WeekendsFooter,sans-serif}
#footer .footer-company p{margin:0;font:400 1em/1.6 WeekendsFooter,sans-serif}
#footer .footer-links{display:flex;align-items:center;gap:8px;flex-shrink:0}
#footer .footer-links a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:inherit}
#footer .footer-links a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
#footer .footer-icon{display:block;width:28px;height:28px;background:currentColor;mask:center/contain no-repeat;-webkit-mask:center/contain no-repeat}
#footer .footer-icon.phone{mask-image:url('/@resource/images/@common/phone-call.svg');-webkit-mask-image:url('/@resource/images/@common/phone-call.svg')}
#footer .footer-icon.instagram{mask-image:url('/@resource/images/@common/instagram-official.svg');-webkit-mask-image:url('/@resource/images/@common/instagram-official.svg')}
.company-contact{font-size:20px;line-height:1.6}
.company-contact h3{font-size:28px;font-weight:700;line-height:1.4;margin:0 0 8px}
.company-contact p{margin:0}
.company-contact p strong{font-weight:700}
.company-contact-links{display:flex;flex-direction:column;align-items:flex-start;margin-top:12px}
.sub.detail .detail-header{margin-bottom:64px;padding-bottom:0}
.sub.detail .detail-header .title-area,.sub.project.detail .title-wrap{display:flex;flex-direction:column;gap:24px}
.sub.detail .detail-header .title{font-size:48px;line-height:1.3;margin:0;font-weight:700}
.sub.project.detail .project-client{font-size:24px;font-weight:600;line-height:1.5;margin:0}
.sub.project.detail .title-wrap .text{font-size:18px;line-height:1.7;margin:8px 0 0}
.project-editor-body{width:100%;font-size:18px;line-height:1.8;overflow-wrap:anywhere}
.project-editor-body>p,.project-editor-body>h2,.project-editor-body>h3,.project-editor-body>ul,.project-editor-body>ol,.project-editor-body>blockquote{max-width:1100px;margin:24px auto;padding:0 var(--gutter)}
.project-editor-body>p:has(img){max-width:none;padding:0;margin:0 0 32px}
.detail-layout.projects .detail-content .project-editor-body img{width:auto;max-width:100%!important;max-width:min(100%,1920px)!important;height:auto!important;display:block;margin:auto}
.project-editor-body table{max-width:100%;border-collapse:collapse}
.project-editor-body td,.project-editor-body th{padding:8px;border:1px solid #ddd}
@media(max-width:767px){
 #footer .footer-inner{padding-bottom:80px}
 #footer .footer-inner>.gutter{gap:24px}
 #footer .footer-meta{font-size:14px;gap:12px}
 #footer .footer-links{gap:0}
 #footer .footer-icon{width:26px;height:26px}
 .company-contact{font-size:16px}.company-contact h3{font-size:24px}
 .sub.detail .detail-header{margin-bottom:40px}
 .sub.detail .detail-header .title-area,.sub.project.detail .title-wrap{gap:16px}
 .sub.detail .detail-header .title{font-size:28px}
 .sub.project.detail .project-client{font-size:18px}
 .sub.project.detail .title-wrap .text,.project-editor-body{font-size:16px}
 .project-editor-body>p:has(img){margin-bottom:16px}
}

.sub.detail .detail-layout{gap:0}
.sub.project.detail .tag-wrap:empty{display:none}
@media(max-width:767px){#content.sub.project.detail{padding-top:calc(var(--header) + 64px)}}

/* Mobile collaboration: reserve header space throughout the pinned reading interval. */
@media(max-width:767px){
 .main .section.collab .collab-wrap{height:auto;min-height:100svh}
 .main .section.collab .max-wrap{position:relative;padding-top:calc(var(--header) + 24px + env(safe-area-inset-top,0px));padding-bottom:32px;min-height:100svh;box-sizing:border-box}
}
.sub.contact .page-content .maps-wrap{position:relative;height:clamp(320px,42vw,480px);margin-bottom:44px;}
.sub.contact .naver-map-link{position:absolute;left:0;bottom:-36px;font-size:14px;text-decoration:underline;color:#353535;}
#weekends-naver-map[data-map-state="error"]{display:flex;align-items:center;justify-content:center;background:#f5f5f5;padding:24px;box-sizing:border-box;}