@charset "utf-8";
/* ********************************************************************
 * name : CodeBee CG LAB
 * filename : layout.css
 * author : JBieN 제이비엔
 * update : 2026-05-20
********************************************************************* */
:root {
      --bg: #09090c;
      --muted: rgba(255,255,255,0.68);
      --dim: rgba(255,255,255,0.42);
      --accent: #b85dff;
      --accent-2: #ff4f85;
      --max: 1780px;
      --nav-h: 120px;
      --container-padding: 60px;
      --container-mobile: 16px;
	  --pad: 40px;
   	  --foot-h: 620px;
	  --point: #ff5841;
	  --dark: #0e0e0e;
	  --light: #f4f4f4;
      --black: #050505;
      --text: #f5f5f5;
      --muted: rgba(255, 255, 255, 0.58);
      --line: rgba(255, 255, 255, 0.16);
      --con: min(100% - 80px, 1760px);

      /* ── 애니메이션 y 값 CSS 변수 ── */
      --anim-service-item-from-y: 120px;
      --anim-service-left-from-y: 72px;
      --anim-service-left-to-y: -44px;
      --anim-service-right-from-y: 180px;
      --anim-service-right-to-y: -24px;

      --anim-workflow-left-from-y: 70px;
      --anim-workflow-left-to-y: -26px;
      --anim-workflow-right-from-y: 120px;
      --anim-workflow-right-to-y: -16px;
      --anim-workflow-cards-from-y: 96px;
      --anim-workflow-cards-to-y: -20px;

      --anim-engineered-lines-from-y: 120px;
      --anim-engineered-caption-from-y: 40px;
    }

    html.lenis,
	html.lenis body {height: auto;}
	.lenis.lenis-smooth {scroll-behavior: auto !important;}
	.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
	.lenis.lenis-stopped {overflow: hidden;}
	.lenis.lenis-smooth iframe {pointer-events: none;}

    body {margin: 0;background: var(--bg);color: var(--white-color);}

	.skipL {position: absolute;left: 12px;top: -50px;z-index: 9999;padding: 10px 14px;border-radius: 8px;background: #fff;color: #000;}
    .skipL:focus { top: 12px; }


    /*
    |--------------------------------------------------------------------------
    | JS 상태 클래스: .is-visible / .is-hidden / .is-scrolled
    |-------------------------------------------------------------------------- 
    */
    /* Header */
	.siteHd {position: fixed;inset: 0 0 auto 0;z-index: 100;height: var(--nav-h);background: linear-gradient(to bottom, rgba(9,9,12,0.78), rgba(9,9,12,0));pointer-events: none;transform: translateY(-100%);opacity: 0;transition:transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),opacity 0.45s ease,background 0.35s ease,backdrop-filter 0.35s ease;will-change: transform, opacity;}
	img.svgW{filter: brightness(0) invert(1);}
	.siteHd.is-visible {transform: translateY(0);opacity: 1;transition: all 0.5s;}
	.siteHd.is-hidden {transform: translateY(-100%);opacity: 0;transition: all 0.5s;}
	.siteHd.is-scrolled {background: linear-gradient(to bottom, rgb(9 9 12 / 17%), rgb(9 9 12 / 0%));backdrop-filter: blur(14px);height: 60px;transition: all 0.5s;}
	.siteHdIn {width: min(calc(100% - (var(--container-padding) * 2)), var(--max));height: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: 24px;pointer-events: auto;}

	.is-qv-open .siteHd{display: none;}

    .brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
    .brandSb {width: 142px;height: auto;flex: 0 0 auto;transition: all 0.5s;}
	.is-scrolled .brandSb{width: 80px;}

	.brandTxtW {position: relative;width: clamp(140px, 15vw, 220px);height: clamp(22px, 2.6vw, 34px);overflow: hidden;opacity: 0;transform: translateY(8px);will-change: transform, opacity;}
	.brandTxt {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: contain;object-position: left center;filter: brightness(1.08);transition: all 0.5s;}
	.is-scrolled .brandTxt{width: 180px;}
	.is-sub .brandTxtW {opacity: 1 !important; visibility: visible !important; transform: none !important;}

    .nav {display: flex;align-items: center;gap: clamp(16px, 2vw, 34px);margin-top: 1em;transition: all 0.5s;}
    .navLs {display: flex;align-items: center;gap: clamp(16px, 8vw, 70px);list-style: none;margin: 0;padding: 0;}
	.is-scrolled .nav{margin-top: -5px;}

	.navLk {position: relative;font-size: 1.25rem;letter-spacing: 0.06em;text-transform: uppercase;color: rgba(255,255,255,0.88);transition: all 0.5s;}
	.navLk::after {content: "";position: absolute;left: 0;bottom: -7px;width: 100%;height: 1px;background: rgba(255,255,255,0.8);transform: scaleX(0);transform-origin: left center;transition: transform 0.25s ease;}
    .navLk:hover::after, .navLk:focus-visible::after { transform: scaleX(1); }
	.is-scrolled .navLk{font-size: 1rem;}

	.navCta {display: inline-flex;align-items: center;justify-content: center;min-width: 144px;height: 63px;padding: 0 20px;border-radius: 7px;background: #ff5841;color: #fff;font-size: 1.25rem;font-weight: 600;box-shadow: 0 12px 30px rgba(255,94,71,0.24);transition: transform 0.25s ease, box-shadow 0.25s ease;transition: all 0.5s;}
    .navCta:hover, .navCta:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(255,94,71,0.34); }
	.is-scrolled .navCta{font-size: 1rem;height: 40px;}

    /* Mobile Burger Navigation */
	.navTg {display: none;position: relative;z-index: 120;width: 46px;height: 46px;border: 1px solid rgba(255,255,255,0.18);border-radius: 12px;background: rgba(255,255,255,0.06);cursor: pointer;backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
	.navTgLn {position: absolute;left: 12px;right: 12px;height: 2px;border-radius: 999px;background: rgba(255,255,255,0.94);transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, top 0.28s cubic-bezier(0.22, 1, 0.36, 1);}

    .navTgLn:nth-child(1) { top: 15px; }
    .navTgLn:nth-child(2) { top: 22px; }
    .navTgLn:nth-child(3) { top: 29px; }

	.navTg.is-active .navTgLn:nth-child(1) {top: 22px;transform: rotate(45deg);}
	.navTg.is-active .navTgLn:nth-child(2) {opacity: 0;}
	.navTg.is-active .navTgLn:nth-child(3) {top: 22px;transform: rotate(-45deg);}
	.navPn {display: flex;align-items: center;gap: clamp(16px, 8vw, 70px);}

    @media (max-width: 1100px) {
		.nav {margin-left: auto;}
		.navTg {display: inline-flex;align-items: center;justify-content: center;}
		.navPn {position: fixed;left: 0;top: 0;z-index: 110;width: 100%;height: 100vh;height: 100dvh;display: flex;flex-direction: column;align-items: stretch;justify-content: center;gap: 32px;padding: 96px 24px 40px;background:radial-gradient(circle at 70% 18%, rgba(255,79,196,0.16), transparent 30%),radial-gradient(circle at 18% 80%, rgba(112,44,239,0.18), transparent 34%),rgba(9,9,12,0.96);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);opacity: 0;visibility: hidden;transform: translateY(-14px);pointer-events: none;overflow-y: auto;transition:opacity 0.32s ease,visibility 0.32s ease,transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);}
		.navPn.is-open {opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;}
		.navPn .navLs {display: grid;gap: 0;width: min(100%, 520px);margin: 0 auto;padding: 0;}
		.navLs li {border-bottom: 1px solid rgba(255,255,255,0.11);}
		.navLs li:first-child {border-top: 1px solid rgba(255,255,255,0.11);}
		.navLk {display: flex;align-items: center;min-height: 68px;font-size: clamp(28px, 9vw, 46px);line-height: 1;letter-spacing: -0.055em;font-weight: 800;text-transform: none;color: rgba(255,255,255,0.96);}
		.navLk::after {display: none;}
		.navPn .navCta {width: min(100%, 520px);height: 58px;margin: 0 auto;border-radius: 14px;font-size: 15px;}
		body.is-mobile-menu-open {overflow: hidden;touch-action: none;overscroll-behavior: none;}

		body.is-mobile-menu-open,
		body.is-mobile-menu-open html {height: 100%;}
		body.is-mobile-menu-open .siteHd {background: rgba(9,9,12,0.92);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);}
	}

    @media (max-width: 767px) {
		.navTg {width: 42px;height: 42px;border-radius: 11px;}
		.navTgLn {left: 11px;right: 11px;}

		  .navTgLn:nth-child(1) { top: 14px; }
		  .navTgLn:nth-child(2) { top: 20px; }
		  .navTgLn:nth-child(3) { top: 26px; }

		  .navTg.is-active .navTgLn:nth-child(1),
		.navTg.is-active .navTgLn:nth-child(3) {top: 20px;}
		.navPn {padding: 84px 18px 32px;}
    }

.subPage{position: relative;z-index: 10;padding-bottom: 730px;background: transparent;}
.subHero {position: sticky;top: 0;z-index: 1;min-height: 60vh;padding: 22em 4.5vw 5em;display: flex;flex-direction: column;justify-content: flex-end;overflow: hidden;background:radial-gradient(circle at 82% 24%, rgba(255, 88, 65, 0.2), transparent 28%),linear-gradient(180deg, #050505 0%, #000 100%);}
.subHero::before {content: "";position: absolute;inset: 0;background: var(--sub-bg, none) center / cover no-repeat;opacity: var(--sub-bg-opacity, 0.28);transform: scale(1.04);pointer-events: none;}
.subHeroIn {position: relative;z-index: 2;}
.subEye {margin: 0 0 26px;color: rgba(255, 255, 255, 0.94);font-size: 26px;font-weight: 400;line-height: 1.45;letter-spacing: -0.03em;}
.subTit {margin: 0;overflow: hidden;color: #fff;font-size: clamp(72px, 12vw, 180px);line-height: 0.88;letter-spacing: -0.065em;font-weight: 500;margin-left: -13px;}
.subTit > span {display: flex;align-items: flex-end;overflow: hidden;}
.subTit em {display: inline-block;font-style: normal;transform: translateY(115%);opacity: 0;will-change: transform, opacity;}
.subDesc {max-width: 780px;margin: 34px 0 0;color: rgb(255 255 255 / 60%);font-size: 20px;line-height: 1.72;letter-spacing: -0.025em;}
.subTabs {display: flex;gap: 10em;margin: clamp(50px, 6vw, 95px) 0 0;padding: 0;overflow-x: auto;white-space: nowrap;list-style: none;}
.subTabs a {display: block;color: #fff;font-size: 22px;font-weight: 500;transition: color .3s ease;text-transform: uppercase;}
.subTabs a:hover {color: rgba(255,255,255,.7);}
.subTabs a.is-active {color: #ff5841;}
.subEye,.subDesc,.subTabs {opacity: 0;transform: translateY(40px);will-change: transform, opacity;}
.subHero.is-on .subEye {animation: subFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.subHero.is-on .subDesc {animation: subFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.34s forwards;}
.subHero.is-on .subTabs {animation: subFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.46s forwards;}
.subHero.is-on .subTit em {animation: subLetterUp 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;animation-delay: calc(var(--i) * 0.08s + 0.16s);}

@keyframes subLetterUp {
	0% {opacity: 0;transform: translateY(115%) scaleY(0.94);}
	100% {opacity: 1;transform: translateY(0) scaleY(1);}
}

@keyframes subFadeUp {
	to {opacity: 1;transform: translateY(0);}
}

/* Content */
.subContent {position: relative;z-index: 10;min-height: 110vh;padding: 90px 4.2vw 150px;border-radius: 58px 0 0 0;background: var(--white-color);color: #111;}

@media (max-width: 1024px) {
	.hd {padding: 0 24px;}
	.nav {gap: 26px;}
}

@media (max-width: 640px) {
	.hd {height: 68px;padding: 0 22px;}
	.nav a:not(:last-child) {display: none;}
	.subHero {min-height: 60vh;padding: 110px 24px 34px;}
	.subEye {font-size: 17px;}
	.subTabs {margin-top: 52px;gap: 24px;}
	.subTabs button {font-size: 14px;}
	.subContent {padding: 50px 24px 110px;border-radius: 38px 0 0 0;}
}

    /* Footer */
	.foot {position: relative;z-index: 12;background: #0e0e0e;color: #ff5841;margin-top: -5em;}
	.is-sub .foot{height:730px;position: fixed;left: 0;bottom: 0;z-index: 1;width: 100%;overflow: hidden;}
	.portfolioView .foot{position: relative;}
	.footIn {width: min(calc(100% - (var(--container-padding) * 2)), 1780px);margin: 0 auto;padding: clamp(42px, 4vw, 64px) 0;}
	.footTop {padding-bottom: clamp(38px, 4vw, 52px);display: flex;justify-content: space-between;width: 100%;}
	.footAddr {margin: 0 0 22px;color: rgba(255,255,255,0.82);font-size: 18px;line-height: 1.7;letter-spacing: -0.02em;}
	.footCall{font-size: 3.5rem;display: flex;flex-direction: column;letter-spacing: .05em;line-height: 1.2;margin-top: 0.5em;}
	.footMeta {display: flex;flex-wrap: wrap;gap: 18px;flex-direction: column;}
	.footMeta span {color: rgba(255,255,255,0.58);font-size: 17px;}
	.footMeta strong {margin-right: 10px;color: rgba(255,255,255,0.92);font-weight: 400;}
	.footBot {display: flex;align-items: center;justify-content: space-between;gap: 24px;padding-top: clamp(24px, 2.8vw, 34px);}
	.footCopy {margin: 0;color: #fff;font-size: 15px;}
	.footLinks {display: flex;align-items: center;gap: clamp(18px, 2vw, 36px);margin-right: 20px;}
	.footLinks a {position: relative;color: rgba(255,255,255,0.58);font-size: 15px;line-height: 1.6;letter-spacing: -0.02em;transition: color 0.25s ease;}
	.footLinks a::after {content: "";position: absolute;left: 0;bottom: -4px;width: 100%;height: 1px;background: rgba(255,255,255,0.88);transform: scaleX(0);transform-origin: left center;transition: transform 0.25s ease;}
	.footLinks a:hover,
	.footLinks a:focus-visible {color: rgba(255,255,255,0.92);}
	.footLinks a:hover::after,.footLinks a:focus-visible::after {transform: scaleX(1);}
	.footLogo {width: 1780px;filter: invert(52%) sepia(93%) saturate(2876%) hue-rotate(336deg) brightness(102%) contrast(101%);margin-top: 15vh;clip-path: inset(130% 0 0 0);will-change: clip-path, transform;}

	.topB {position: fixed;bottom: 24px;right: 24px;width: 52px;height: 52px;display: flex;align-items: center;justify-content: center;z-index: 999;border: 1px solid rgba(255,255,255,0.16);backdrop-filter: blur(12px);box-sizing: border-box;cursor: pointer;opacity: 0;visibility: hidden;transform: translateY(40px);transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s ease;box-shadow: 3px 4px 12px rgba(0,0,0,0.18);}
	.topB.is-show {opacity: 1;visibility: visible;transform: translateY(0);}
	.topB i {font-size: 18px;color: #ff5841;transition: transform 0.3s ease;}
	.topB:hover i {transform: translateY(-3px);}

    @media (max-width: 900px) {
		.footIn {width: min(calc(100% - (var(--container-mobile) * 2)), 1720px);}
		.footMeta {flex-direction: column;gap: 10px;}
		.footBot {flex-direction: column;align-items: flex-start;}
		.footLinks {flex-wrap: wrap;gap: 14px 22px;}
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }