@charset "utf-8";


/*head.sub.php로 셋팅하는 값 = full-h, full-w*/
:root,
html.dark {
--primary: #3267B1;
--seconday: #666;
--ca-color: #333;

--full-h: calc(var(--vh, 1vh) * 100);
--full-w: calc(var(--vw, 1vw) * 100);

--color-accent: #3267B1;
--color-accent-dark: #214A82;
--color-accent-bright: #3267B1;
--color-accent-rgb: 50 103 177;
    --brand-50: 247 247 248;
    --brand-100: 237 237 239;
    --brand-200: 216 216 220;
    --brand-300: 176 176 182;
    --brand-400: 128 128 136;
    --brand-500: 91 91 98;
    --brand-600: 62 62 68;
    --brand-700: 42 42 47;
    --brand-800: 22 22 26;
    --brand-900: 10 10 12;
    --color-brand-200: #d8d8dc;
    --color-brand-300: #b0b0b6;
    --color-brand-400: #808088;
    --color-brand-500: #5b5b62;
    --color-brand-600: #3e3e44;
    --color-brand-700: #2a2a2f;
    --color-brand-800: #16161a;
    --color-brand-900: #0a0a0c;
    --main-bg: #0a0a0c;
    --color-steel: 207 207 213;
    --color-steel-bright: 240 240 243;

    color-scheme: dark;
}

html.light {
 --primary: #3478D4;

--color-accent: #3478D4;
--color-accent-dark: #235AA6;
--color-accent-bright: #3478D4;
--color-accent-rgb: 52 120 212;
    --brand-50: 10 10 12;
    --brand-100: 22 22 26;
    --brand-200: 42 42 47;
    --brand-300: 62 62 68;
    --brand-400: 91 91 98;
    --brand-500: 128 128 136;
    --brand-600: 176 176 182;
    --brand-700: 216 216 220;
    --brand-800: 237 237 239;
    --brand-900: 247 247 248;
    --color-brand-200: #2a2a2f;
    --color-brand-300: #3e3e44;
    --color-brand-400: #5b5b62;
    --color-brand-500: #808088;
    --color-brand-600: #b0b0b6;
    --color-brand-700: #d8d8dc;
    --color-brand-800: #ededef;
    --color-brand-900: #f4f4f4;
    --main-bg: #ffffff;
    --color-steel: 91 91 98;
    --color-steel-bright: 62 62 68;
    color-scheme: light;
}
:root{
    --header-h: 64px !important;
}
@media (min-width: 768px) {
    :root {
        --header-h: 94px !important;
    }
}
@media (max-width: 1024px) {
    .container{
        max-width: 100%;
       
    }
}
.en {
    font-family: "Montserrat", sans-serif;
}

.inter{
   font-family: "Inter", sans-serif;
}


.hero-section {
    background:
        radial-gradient(
            circle at 72% 32%,
            rgb(var(--color-accent-rgb) / 0.08),
            transparent 32%
        ),
        var(--color-brand-900);
}

.dark .hero-section {
    background:
        radial-gradient(
            circle at 72% 32%,
            rgb(var(--color-accent-rgb) / 0.14),
            transparent 34%
        ),
        var(--color-brand-900);
}


/* grid */

.hero-grid {
    background-image:
        linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            0deg,
            rgba(15, 23, 42, 0.04) 1px,
            transparent 1px
        );

    background-size: 96px 96px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 15%,
        #000 80%,
        transparent
    );
}

.dark .hero-grid {
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );
}


/* glow */

.hero-glow {
    border-radius: 50%;

    background: rgb(var(--color-accent-rgb) / 0.1);

    filter: blur(120px);
}

.dark .hero-glow {
    background: rgb(var(--color-accent-rgb) / 0.15);
}


/* service tag */

.hero-tag {
    padding: 8px 13px;

    border: 1px solid rgb(226 232 240);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.7);

                font-weight: 600;

    color: rgb(71 85 105);
}

.dark .hero-tag {
    border-color: rgb(var(--brand-700));
    background: rgba(255, 255, 255, 0.03);
    color: rgb(var(--brand-300));
}


/* main CTA */

.hero-call-btn {
    display: inline-flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0 24px;

    border-radius: 12px;

    background: var(--primary);
    color: #fff;

    font-weight: 700;

    box-shadow:
        0 15px 35px rgb(var(--color-accent-rgb) / 0.22);

    transition: 0.3s;
}

.hero-call-btn:hover {
    transform: translateY(-2px);
    background: var(--color-accent-dark);
}


/* secondary CTA */

.hero-contact-btn {
    display: inline-flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0 28px;

    border: 1px solid rgb(203 213 225);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.4);

    color: rgb(15 23 42);

    font-weight: 700;

    backdrop-filter: blur(8px);

    transition: 0.3s;
}

.hero-contact-btn:hover {
    border-color: var(--primary);
    background: #fff;
    transform: translateY(-2px);
}

.dark .hero-contact-btn {
    border-color: rgb(var(--brand-600));
    background: rgba(255, 255, 255, 0.02);
    color: rgb(var(--brand-50));
}


/* media */

.hero-media {
    background: rgb(226 232 240);

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.15);
}

.hero-media-overlay {
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.35),
        transparent 55%
    );
}


/* glass card */

.hero-media-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.85);

    box-shadow:
        0 15px 40px rgba(15, 23, 42, 0.15);

    backdrop-filter: blur(16px);
}

.dark .hero-media-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgb(var(--brand-900) / 0.8);
}

.service-row-image {
    transition:
        transform 0.7s cubic-bezier(.2, .6, .2, 1),
        filter 0.5s ease;
}

.service-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5, 10, 18, 0.04) 30%,
            rgba(5, 10, 18, 0.42) 100%
        );

    transition: background 0.4s ease;
}

.service-row:hover .service-row-image {
    transform: scale(1.055);
}

.service-row:hover .service-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5, 10, 18, 0.02) 20%,
            rgba(5, 10, 18, 0.28) 100%
        );
}
.contact-section {
    background-color: #08101d;
}

.contact-overlay {
    background-color: rgba(8, 12, 18, 0.82);
}

html.light .contact-section {
    background-color: #08101d;
}

html.light .contact-overlay {
    background-color: rgba(8, 12, 18, 0.78);
}

.contact-scroll-line {
    display: block;
    transform-origin: top;
    animation: contact-scroll-line 1.2s ease-in-out infinite alternate;
}

@keyframes contact-scroll-line {
    from {
        transform: scaleY(0);
        opacity: 0.25;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}


/* service keywords */

.contact-service {
    position: relative;

    font-size: 13px;
    font-weight: 600;

    color: rgba(255, 255, 255, 0.55);
}

.contact-service:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -11px;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.3);

    transform: translateY(-50%);
}


/* CTA */

.contact-btn-primary,
.contact-btn-secondary {
    display: inline-flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 26px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.contact-btn-primary {
    background: var(--primary);
    color: #fff;

    box-shadow:
        0 15px 40px rgb(var(--color-accent-rgb) / 0.3);
}

.contact-btn-primary:hover {
    transform: translateY(-4px);

    background: var(--color-accent-dark);

    box-shadow:
        0 20px 50px rgb(var(--color-accent-rgb) / 0.4);
}


.contact-btn-icon {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.14);
}


.contact-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.2);

    background: rgba(255, 255, 255, 0.07);

    color: #fff;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.contact-btn-secondary:hover {
    transform: translateY(-4px);

    border-color: rgba(255, 255, 255, 0.4);

    background: rgba(255, 255, 255, 0.13);
}


/* ============================================================
 * PAGE STAIRS
 * ============================================================ */

.page-stairs {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    visibility: hidden;
}

.page-stairs__col {
    position: absolute;
    top: 0;
    width: 20.1%;
    height: 100%;
    background: #0a0a0c;

    transform: translateY(100%);

    transition:
        transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);

    will-change: transform;
}

html.light .page-stairs__col {
    background: #f4f4f4;
}


/* 위치 */
.page-stairs__col:nth-child(1) {
    left: 0;
}

.page-stairs__col:nth-child(2) {
    left: 20%;
}

.page-stairs__col:nth-child(3) {
    left: 40%;
}

.page-stairs__col:nth-child(4) {
    left: 60%;
}

.page-stairs__col:nth-child(5) {
    left: 80%;
}


/* 위쪽 라인 */
.page-stairs__col::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgb(var(--color-steel));
    opacity: 0.9;
}


/* ============================================================
 * COVER
 * 아래 → 위
 * ============================================================ */

.page-stairs.is-cover {
    visibility: visible;
}

.page-stairs.is-cover .page-stairs__col {
    transform: translateY(0);
}

.page-stairs.is-cover .page-stairs__col:nth-child(1) {
    transition-delay: 0ms;
}

.page-stairs.is-cover .page-stairs__col:nth-child(2) {
    transition-delay: 70ms;
}

.page-stairs.is-cover .page-stairs__col:nth-child(3) {
    transition-delay: 140ms;
}

.page-stairs.is-cover .page-stairs__col:nth-child(4) {
    transition-delay: 210ms;
}

.page-stairs.is-cover .page-stairs__col:nth-child(5) {
    transition-delay: 280ms;
}


/* ============================================================
 * 새 페이지 진입 직후
 * 이미 화면을 덮은 상태
 * ============================================================ */

html.is-page-stairs .page-stairs {
    visibility: visible;
}

html.is-page-stairs .page-stairs__col {
    transform: translateY(0);
    transition: none;
}


/* ============================================================
 * REVEAL
 * 위쪽으로 빠짐
 * ============================================================ */

.page-stairs.is-reveal {
    visibility: visible;
}

.page-stairs.is-reveal .page-stairs__col {
    transform: translateY(100%);
}

.page-stairs.is-reveal .page-stairs__col:nth-child(1) {
    transition-delay: 0ms;
}

.page-stairs.is-reveal .page-stairs__col:nth-child(2) {
    transition-delay: 70ms;
}

.page-stairs.is-reveal .page-stairs__col:nth-child(3) {
    transition-delay: 140ms;
}

.page-stairs.is-reveal .page-stairs__col:nth-child(4) {
    transition-delay: 210ms;
}

.page-stairs.is-reveal .page-stairs__col:nth-child(5) {
    transition-delay: 280ms;
}

/* ============================================================
 * RESET
 * ============================================================ */

.page-stairs.is-idle {
    visibility: hidden;
}

.page-stairs.is-idle .page-stairs__col {
    transform: translateY(100%);
    transition: none;
}


@media (prefers-reduced-motion: reduce) {
    .page-stairs {
        display: none;
    }
}



.header-bg {
    background: linear-gradient(rgb(var(--brand-900) / 0.4), rgb(var(--brand-900) / 0));
}

.header-bg.is-scrolled,
.header-bg.is-open {
    background: rgb(var(--brand-900) / 0.7);
}

html.dark .theme-icon-sun,
html.light .theme-icon-moon {
    display: none;
}

html.dark .theme-icon-moon,
html.light .theme-icon-sun {
    display: inline-block;
}

.theme-toggle-knob {
    transform: translateX(0);
}

html.light .theme-toggle-knob {
    transform: translateX(1.5rem);
}

.nav-split {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    line-height: 1.2;
    vertical-align: bottom;
    perspective: 480px;
}

.nav-split-origin,
.nav-split-clone {
    display: flex;
    white-space: nowrap;
}

.nav-split-clone {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    color: var(--primary);
}

.nav-split .char {
    display: inline-block;
    backface-visibility: hidden;
    transform-origin: center center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-split-clone .char {
    transform: translateY(120%) rotateX(-80deg);
}

.nav-split-link:hover .nav-split-origin .char,
.nav-split-link:focus-visible .nav-split-origin .char {
    transform: translateY(-120%) rotateX(80deg);
}

.nav-split-link:hover .nav-split-clone .char,
.nav-split-link:focus-visible .nav-split-clone .char {
    transform: translateY(0) rotateX(0deg);
}

.shadow-accent {
    box-shadow: 0 10px 15px -3px rgb(var(--color-accent-rgb) / 0.32);
}