/* 공통 섹션 헤드 */
.sec-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    letter-spacing: 3px;
    color: var(--mut2);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px
}

.sec-tag::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--mut2)
}

/* 01 HERO */
.chero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000;
}

.chero .blob {
    position: absolute;
}

.chero .b1 {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: background 2.4s ease;
}

.chero .b2 {
    width: 42vw;
    height: 42vw;
    background: radial-gradient(circle, #1d1d1d, transparent 70%);
    bottom: -10vw;
    left: -6vw;
    animation: float2 20s ease-in-out infinite
}

@keyframes float1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(-4vw, 5vw) scale(1.1)
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(5vw, -4vw) scale(1.15)
    }
}

.chero-grid {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%)
}

.chero-inner {
    position: relative;
    z-index: 5;
    width: 100%;
    text-align: center
}

.chero-tag {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 3px;
    color: #888;
    margin-bottom: 40px;
    font-weight: 500;
    text-transform: uppercase
}

.chero h1 {
    font-weight: 800;
    font-size: clamp(42px, 8vw, 120px);
    line-height: 1.08;
    letter-spacing: -3px
}

.chero h1 .dim {
    color: rgba(255, 255, 255, 0.5);
    /* color: transparent;
    -webkit-text-stroke: 1px #ffffff; */
}

.chero-sub {
    font-size: clamp(16px, 1.7vw, 21px);
    color: rgba(255, 255, 255, 0.8);
    margin: 38px auto 0;
    line-height: 1.7;
    max-width: 620px
}

.chero-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 48px;
    flex-wrap: wrap
}

.btn-w,
.btn-o {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 40px;
    transition: transform .3s, background .3s, color .3s;
    width: 200px;
    height: 55px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-w {
    background: var(--point);
    color: var(--ac);
    border: 1px solid var(--point);
}

.btn-w:hover {
    transform: translateY(-2px);
    background: var(--point);
}

.btn-o {
    background: transparent;
    color: #fff;
    border: 2px solid var(--ac)
}

.btn-o:hover {
    transform: translateY(-2px);
    border-color: var(--ac);
}

.btn-w .arr,
.btn-o .arr {
    transition: transform .35s
}

.btn-w:hover .arr,
.btn-o:hover .arr {
    transform: translate(3px, -3px)
}

.chero-scroll {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 11px;
    letter-spacing: 3px
}

.chero-scroll .ln {
    width: 1px;
    height: 40px;
    background: linear-gradient(#666, transparent);
    position: relative;
    overflow: hidden
}

.chero-scroll .ln::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #fff;
    animation: scrolldn 1.8s infinite
}

@keyframes scrolldn {
    0% {
        transform: translateY(-100%)
    }

    100% {
        transform: translateY(200%)
    }
}

/* ============================================================
   01 HERO — 배경 포커스 인 + 제목 슬라이드
   (스크롤로 진입(.chero.in)할 때마다 재생, 벗어나면 리셋)
   ============================================================ */

/* 배경 — 기본은 확대+블러 정지 상태, 진입 시 포커스 인 */
.chero .chero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../image/sub/chero_bg01.webp') center center / cover no-repeat;
    filter: blur(16px);
    transform: scale(1.35);
    transition: filter 2.4s cubic-bezier(.2, .7, .2, 1),
        transform 2.4s cubic-bezier(.2, .7, .2, 1);
    will-change: transform, filter;
}

.chero.in .chero-bg {
    filter: blur(0);
    transform: scale(1);
}

/* 어둠막 — 진입 시 살짝 옅어짐 */
.chero.in .b1 {
    background: rgba(0, 0, 0, 0.45);
}

/* ── 텍스트 순차 등장(stagger) ── 진입 시 재생 */
.chero .reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    transition: opacity 1s cubic-bezier(.2, .7, .2, 1),
        transform 1s cubic-bezier(.2, .7, .2, 1),
        filter 1s ease;
}

.chero.in .reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.chero.in .chero-tag {
    transition-delay: .9s;
}

.chero.in .chero-sub {
    transition-delay: 1.5s;
}

.chero.in .chero-btns {
    transition-delay: 1.75s;
}

/* h1은 좌우 슬라이드를 쓰므로 기본 모션 제외 */
.chero h1.reveal {
    transform: none;
    filter: none;
    opacity: 1;
}

/* 제목 두 줄 — 좌/우에서 슬라이드 등장 */
.chero h1 .line-l,
.chero h1 .line-r {
    display: block;
    opacity: 0;
    transition: opacity 1s cubic-bezier(.2, .7, .2, 1) 1s,
        transform 1s cubic-bezier(.2, .7, .2, 1) 1s;
}

.chero h1 .line-l {
    transform: translateX(-80px);
}

.chero h1 .line-r {
    transform: translateX(80px);
    transition-delay: 1.2s;
}

.chero.in h1 .line-l,
.chero.in h1 .line-r {
    opacity: 1;
    transform: translateX(0);
}

/* 제목 dim 텍스트 글로우 호흡 */
.chero h1 .dim {
    animation: cheroDimPulse 4s ease-in-out infinite 2s;
}

@keyframes cheroDimPulse {

    0%,
    100% {
        color: rgba(255, 255, 255, .42);
        text-shadow: 0 0 0 transparent;
    }

    50% {
        color: rgba(255, 255, 255, .62);
        text-shadow: 0 0 24px rgba(255, 255, 255, .18);
    }
}

/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
    .chero h1 .dim {
        animation: none !important;
    }

    .chero .chero-bg {
        filter: none;
        transform: none;
        transition: none;
    }

    .chero .reveal,
    .chero h1 .line-l,
    .chero h1 .line-r {
        transition: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* 02 WHO WE ARE */
.who {
    padding: clamp(120px, 16vw, 200px) 0;
    background: #fff;
    color: var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.who-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.who-text {
    display: flex;
    flex-direction: column;
}

.who h2 {
    margin-bottom: 30px;
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.18;
    letter-spacing: -3px
}

.who h2 .pt {
    color: var(--point)
}

.who .w-lead {
    font-weight: 600;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.35;
    margin-bottom: 50px;
    letter-spacing: -0.03em;
}

.who .w-desc {
    font-size: clamp(16px, 1.6vw, 19px);
    color: #555;
    line-height: 1.85;
}

/* 우측 이미지 영역 - who_img01.png 모양으로 배경이 비치는 마스크 */
.who-visual {
    position: relative;
    width: 100%;
    max-width: 845px;
    height: 560px;
    /* aspect-ratio: 2 / 1; */
}

.who-img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* who_img01.png 의 형태를 마스크로 사용 */
    -webkit-mask-image: url(../image/sub/who_img01.png);
    mask-image: url(../image/sub/who_img01.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;

    /* 마스크 안쪽에 보일 움직이는 배경 이미지 */
    background-image: url(../image/sub/who_bg01.webp);
    background-size: 180% 180%;
    background-position: 0% 0%;
    animation: whoBgMove 18s ease-in-out infinite;

    /* img 자체 픽셀은 숨기고 background 만 보이게 */
    object-fit: cover;
    opacity: 1;
}

@keyframes whoBgMove {
    0% {
        background-position: 0% 0%;
    }

    25% {
        background-position: 100% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    75% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* .who-visual 위→아래 등장 효과 */
.who-drop {
    opacity: 0;
    transform: translateY(-90px);
    transition: opacity 3s cubic-bezier(.2, .7, .2, 1),
        transform 3s cubic-bezier(.2, .7, .2, 1);
    will-change: transform, opacity;
}

.who-drop.in {
    opacity: 1;
    transform: translateY(0);
}

@media(max-width:860px) {
    .who-inner {
        grid-template-columns: 1fr;
        gap: 50px
    }

    .who-visual {
        max-width: 460px;
        margin: 0 auto;
    }
}

/* 03 MISSION */
.mission {
    position: relative;
    padding: clamp(120px, 16vw, 200px) 0;
    text-align: center;
    overflow: hidden;
}

/* 배경이미지 레이어 (서서히 축소되는 효과 대상) */
.mission-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../image/sub/mission_bg01.webp) center center / cover no-repeat;
    transform: scale(1.35);
    /* 처음엔 확대된 상태 */
    transition: transform 2.4s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}

/* 섹션 진입 시 원래 크기로 축소되며 멈춤 */
.mission.in .mission-bg {
    transform: scale(1);
}

/* 텍스트 가독성용 어두운 오버레이 */
.mission::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* 콘텐츠는 배경/오버레이 위로 */
.mission-inner {
    position: relative;
    z-index: 2;
}

.mission .sec-tag {
    justify-content: center
}

.mission .sec-tag::before {
    display: none
}

.mission h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.25;
    letter-spacing: -2px
}

.mission .m-sub {
    font-size: clamp(16px, 1.6vw, 20px);
    color: var(--mut);
    margin: 28px auto 0;
    line-height: 1.8;
}

.m-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    ;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    ;
    margin-top: 70px
}

.m-col {
    padding: 56px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    ;
    text-align: center
}

.m-col:last-child {
    border-right: none
}

.m-col .m-en {
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 44px);
    letter-spacing: -1px;
    line-height: 1
}

.m-col .m-en .o {
    color: transparent;
    -webkit-text-stroke: 1px var(--ac);
}

.m-col .m-ko {
    font-size: 1em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 20px;
    letter-spacing: .5px
}

@media(max-width:760px) {
    .m-grid {
        grid-template-columns: 1fr
    }

    .m-col {
        border-right: none;
        border-bottom: .5px solid var(--line)
    }

    .m-col:last-child {
        border-bottom: none
    }
}

/* 04 WHY  ── values(.val-rows)와 동일한 디자인 */
.why {
    position: relative;
    padding: clamp(120px, 16vw, 200px) 0;
    overflow: hidden;
    /* 회전 배경이 섹션 밖으로 안 보이게 잘라줌 */
}

/* 배경을 섹션 영역으로 클리핑하는 래퍼 (위치는 fixed지만 .why 범위 안에서만 보임) */
.why-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* 화면에 고정된 회전 배경 — 스크롤해도 화면 중앙에서 안 움직임 */
.why-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(90vw, 760px);
    height: min(90vw, 760px);
    transform: translate(-50%, -50%);
    background: url(../image/sub/why_img01.webp) center center / contain no-repeat;
    opacity: .35;
    will-change: transform;
    animation: whySpin 40s linear infinite;
}

@keyframes whySpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.why-content {
    position: relative;
    z-index: 1;
}

.why-head {
    text-align: center;
    margin-bottom: 60px;
}

.why-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px;
    line-height: 1.15
}

.why-head h2 .pt {
    color: var(--point)
}

.why .sec-tag::before {
    display: none
}

.why-rows {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1)
}

.why-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 5vw, 62px) clamp(20px, 3vw, 40px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden
}

/* hover 배경: 중앙에서 상하로 퍼짐 */
.why-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 50%;
    background: var(--point);
    z-index: -1;
    transition: top .45s cubic-bezier(.2, .7, .2, 1), bottom .45s cubic-bezier(.2, .7, .2, 1)
}

.why-row:hover::before {
    top: 0;
    bottom: 0
}

.why-row .wc-en {
    font-weight: 800;
    font-size: clamp(30px, 5vw, 68px);
    letter-spacing: -2px;
    line-height: 1;
    color: #fff;
    /* color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .8); */
    transition: color .4s, -webkit-text-stroke .4s, transform .45s cubic-bezier(.2, .7, .2, 1)
}

.why-row:hover .wc-en {
    color: #fff;
    -webkit-text-stroke: 0 transparent;
    transform: translateY(-14px)
}

/* 한글: 흐름에서 제외(absolute) -> 영문은 항상 행 중앙, hover 시 등장 */
.why-row .wc-ko {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(20px, 3vw, 28px);
    font-size: clamp(15px, 1.7vw, 20px);
    color: #fff;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1)
}

.why-row:hover .wc-ko {
    opacity: 1;
    transform: translateY(0)
}

@media(max-width:700px) {
    .why-row .wc-ko {
        font-size: 14px
    }
}

/* 05 PROCESS */
.process {
    padding: clamp(100px, 13vw, 170px) 0;
}

.process-head {
    margin-bottom: 70px;
    text-align: center
}

.process-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px
}

.proc-list {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.proc-item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: clamp(56px, 8vw, 120px) 1fr;
    gap: clamp(20px, 4vw, 60px);
    justify-content: center;
    text-align: center;
    padding: clamp(34px, 4.5vw, 60px) clamp(20px, 3vw, 40px);
    border-bottom: .5px solid var(--line);
    overflow: hidden
}

.proc-item:last-child {
    border-bottom: none
}

/* hover 배경: 중앙에서 상하로 퍼짐 */
.proc-item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 50%;
    background: var(--point);
    z-index: -1;
    transition: top .45s cubic-bezier(.2, .7, .2, 1), bottom .45s cubic-bezier(.2, .7, .2, 1)
}

.proc-item:hover::before {
    top: 0;
    bottom: 0
}

.proc-item>div {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.proc-item .p-no {
    font-weight: 800;
    font-size: clamp(28px, 4vw, 52px);
    letter-spacing: -1px;
    color: transparent;
    -webkit-text-stroke: 1.5px #555;
    line-height: 1;
    transition: color .4s, -webkit-text-stroke .4s
}

.proc-item:hover .p-no,
.proc-item.act .p-no {
    color: #fff;
    -webkit-text-stroke: 0 transparent
}

.proc-item .p-en {
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 46px);
    letter-spacing: -1px;
    margin-bottom: 12px;
    transition: color .3s
}

.proc-item .p-ko {
    font-size: clamp(15px, 1.6vw, 19px);
    color: var(--mut);
    line-height: 1.7;
    transition: color .3s
}

.proc-item:hover .p-ko {
    color: #fff
}

/* 06 VALUES */
.values {
    padding: clamp(100px, 13vw, 170px) 0;
    width: 100%;
}

.values-head {
    text-align: center;
    margin-bottom: 60px
}

.values-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px
}

.val-rows {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-top: .5px solid var(--line)
}

/* 중앙 세로선 */
.val-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
    transform: translateX(-50%);
    z-index: 0
}

.val-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 5vw, 62px) clamp(20px, 3vw, 40px);
    border-bottom: .5px solid var(--line);
    overflow: hidden
}

/* hover 배경: 중앙에서 상하로 퍼짐 */
.val-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 50%;
    background: var(--point);
    z-index: -1;
    transition: top .45s cubic-bezier(.2, .7, .2, 1), bottom .45s cubic-bezier(.2, .7, .2, 1)
}

.val-row:hover::before {
    top: 0;
    bottom: 0
}

.val-row .v-en {
    font-weight: 800;
    font-size: clamp(30px, 5vw, 68px);
    letter-spacing: -2px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .4);
    transition: color .4s, -webkit-text-stroke .4s, transform .45s cubic-bezier(.2, .7, .2, 1)
}

.val-row:hover .v-en {
    color: #fff;
    -webkit-text-stroke: 0 transparent;
    transform: translateY(-14px)
}

/* 한글: 흐름에서 제외(absolute) -> 영문은 항상 행 중앙, hover 시 등장 */
.val-row .v-ko {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(20px, 3vw, 28px);
    font-size: clamp(15px, 1.7vw, 20px);
    color: #fff;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1)
}

.val-row:hover .v-ko {
    opacity: 1;
    transform: translateY(0)
}

@media(max-width:700px) {
    .val-row .v-ko {
        font-size: 14px
    }
}

/* 07 ACHIEVEMENTS */
.ach {
    position: relative;
    z-index: 9;
    padding: clamp(120px, 16vw, 200px) 0;
    background: #fff;
    color: var(--bg);
}

.ach-inner {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start
}

.ach-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px;
    line-height: 1.25
}

.ach-head p {
    font-size: clamp(16px, 1.6vw, 20px);
    color: var(--mut2);
    margin: 28px auto 0;
    line-height: 1.8;
}

.stats-list {
    border-top: .5px solid #ddd;
}

.stat {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: clamp(160px, 22vw, 260px) 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    padding: clamp(40px, 5.5vw, 72px) clamp(20px, 2.5vw, 36px);
    border-bottom: .5px solid #ddd;
    overflow: hidden
}

/* hover 배경: 중앙에서 상하로 퍼짐 (val-row와 동일) */
.stat::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 50%;
    background: var(--point);
    z-index: -1;
    transition: top .45s cubic-bezier(.2, .7, .2, 1), bottom .45s cubic-bezier(.2, .7, .2, 1)
}

.stat:hover::before {
    top: 0;
    bottom: 0
}

.stat .num {
    font-family: "Pretendard", sans-serif;
    font-weight: 800;
    font-size: clamp(44px, 6vw, 76px);
    line-height: .9;
    letter-spacing: -3px;
    display: flex;
    align-items: flex-start;
    transition: color .3s
}

.stat .num .suf {
    font-size: .5em;
    color: var(--mut2);
    margin-left: 2px;
    transition: color .3s
}

.stat:hover .num,
.stat:hover .num .suf {
    color: #fff
}

.stat .st-en {
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: -.5px;
    line-height: 1;
    transition: color .3s
}

.stat .st-ko {
    font-family: "Pretendard", sans-serif;
    font-size: clamp(13px, 1.4vw, 16px);
    color: var(--mut);
    margin-top: 12px;
    transition: color .3s
}

.stat:hover .st-en,
.stat:hover .st-ko {
    color: #fff
}

@media(max-width:880px) {
    .ach-inner {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .ach-head {
        text-align: center
    }

    .ach-head .sec-tag {
        justify-content: center
    }
}

@media(max-width:520px) {
    .stat {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: left
    }
}

/* 08 TIMELINE */
.tl {
    padding: clamp(100px, 13vw, 170px) 0
}

.tl-head {
    margin-bottom: 60px
}

.tl-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px
}

.tl-rows {
    border-top: .5px solid var(--line)
}

.tl-row {
    display: grid;
    grid-template-columns: clamp(120px, 18vw, 280px) 1fr;
    gap: 24px;
    align-items: baseline;
    padding: clamp(26px, 3.4vw, 42px) 0;
    border-bottom: .5px solid var(--line);
    transition: padding-left .4s
}

.tl-row:hover {
    padding-left: 18px
}

.tl-row .t-yr {
    font-weight: 800;
    font-size: clamp(30px, 4.6vw, 60px);
    letter-spacing: -2px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #555;
    transition: color .4s, -webkit-text-stroke .4s
}

.tl-row:hover .t-yr {
    color: var(--point);
    -webkit-text-stroke: 0 transparent
}

.tl-row .t-tx {
    font-size: clamp(16px, 1.8vw, 22px);
    color: var(--mut);
    font-weight: 500;
    transition: color .3s
}

.tl-row:hover .t-tx {
    color: #fff
}

/* 09 CLIENTS marquee */
.clients {
    position: relative;
    z-index: 9;
    background: #000;
    padding: clamp(120px, 16vw, 200px) 0 0;
}

/* CLIENTS 헤드 — company 다른 섹션과 동일 톤 */
.clients-head {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 80px);
}

.clients-head .sec-tag {
    justify-content: center;
    /* 가운데 정렬 */
}

.clients .sec-tag::before {
    display: none
}

.clients-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    /* company 다른 섹션과 동일 */
    line-height: 1.18;
    letter-spacing: -2px;
}

.clients-head h2 .pt {
    color: var(--point);
}

.clients-head p {
    font-size: clamp(16px, 1.6vw, 20px);
    color: var(--mut2);
    margin: 28px auto 0;
    line-height: 1.8;
}

.cmarq {
    padding: clamp(24px, 3vw, 40px) 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: .5px solid var(--line);
    border-bottom: .5px solid var(--line)
}

.cmarq+.cmarq {
    border-top: none
}

.cmarq-track {
    display: inline-flex;
    align-items: center;
    animation: flow2 28s linear infinite
}

.cmarq.rev .cmarq-track {
    animation-direction: reverse
}

.cmarq-track span {
    font-weight: 800;
    font-size: clamp(34px, 5.5vw, 80px);
    padding: 0 30px;
    letter-spacing: -2px;
    color: #fff
}

.cmarq-track span.o {
    color: transparent;
    -webkit-text-stroke: 1.5px #555
}

.cmarq-track .dot {
    width: 10px;
    height: 10px;
    border-radius: 500px;
    background: var(--point);
    flex: 0 0 auto;
    display: inline-block;
    padding: 0;
}

@keyframes flow2 {
    to {
        transform: translateX(-50%)
    }
}

/* ============================================================
   FAQ (자주 묻는 질문) 페이지 전용 스타일
   - 트윈에이치 메인 톤: #000 / #D7263D 포인트 / 800 weight
   ============================================================ */

/* 공통 섹션 태그 */
.faq-hero .kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--point);
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* ---------- FAQ PAGE WRAP (hero + body 전체를 감싸는 배경) ---------- */
.faq-page {
    position: relative;
    background: #000;
    overflow: hidden;
}

/* 배경이미지 레이어 — 페이지 전체(hero+본문)를 덮어 잘리지 않음 */
/* .faq-page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../image/sub/faq_bg01.webp) right top no-repeat;
    transform: scale(1.35);
    transition: transform 2.4s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}*/

.faq-page:before {
    content: '';
    position: absolute;
    /* 프로젝트 페이지와 동일한 시작 위치 (뷰포트 기준, 페이지 길이와 무관) */
    top: calc(4vh + 60px);
    left: -10%;
    right: -40%;
    height: 150vh;
    bottom: auto;
    z-index: 1;
    background: url(../image/main/f-cta_bg01.webp) top center / auto no-repeat;
    animation: fctaFloat 24s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

/* 진입 시 원래 크기로 축소되며 멈춤 (반복) */
.faq-page.in .faq-page-bg {
    transform: scale(1);
}

/* 텍스트 가독성용 어두운 오버레이 */
.faq-page-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* 콘텐츠는 배경/오버레이 위로 */
.faq-page-content {
    position: relative;
    z-index: 1;
}

/* ---------- 01 HERO ---------- */
.faq-hero {
    position: relative;
    padding: clamp(140px, 18vw, 220px) 0 clamp(70px, 9vw, 110px);
    overflow: hidden
}

.faq-hero::before {
    content: '';
    position: absolute;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    top: -18vw;
    right: -12vw;
    z-index: 0;
    background: radial-gradient(circle, rgba(215, 38, 61, .16), transparent 68%);
    filter: blur(40px);
    pointer-events: none
}

.faq-hero-inner {
    position: relative;
    z-index: 1
}

.faq-hero h1 {
    font-weight: 800;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.08;
}

.faq-hero h1 .pt {
    color: var(--point)
}

.faq-lead {
    margin-top: 28px;
    font-size: clamp(16px, 1.7vw, 21px);
    color: var(--mut);
    line-height: 1.75
}

/* ---------- 02 BODY ---------- */
.faq-sec {
    padding: clamp(20px, 3vw, 40px) 0 clamp(120px, 15vw, 200px)
}

/* 카테고리 필터 */
.faq-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(40px, 5vw, 64px)
}

.ff-btn {
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--mut);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 60px;
    padding: 12px 26px;
    cursor: pointer;
    transition: color .3s, background .3s, border-color .3s, transform .2s
}

.ff-btn:hover {
    color: #fff;
    border-color: #444
}

.ff-btn.on {
    color: var(--ac);
    background: var(--point);
    border-color: var(--point)
}

/* 아코디언 리스트 */
.faq-list {
    border-top: .5px solid rgba(255, 255, 255, 0.2);
}

.faq-item {
    border-bottom: .5px solid rgba(255, 255, 255, 0.2);
    position: relative
}

.faq-item.hide {
    display: none
}

/* 질문(버튼) */
.faq-q {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: clamp(46px, 6vw, 86px) 1fr clamp(40px, 4vw, 56px);
    align-items: center;
    gap: clamp(14px, 2.5vw, 36px);
    text-align: left;
    padding: clamp(26px, 3.2vw, 44px) 4px;
    font-family: inherit;
    transition: padding-left .4s cubic-bezier(.2, .7, .2, 1)
}

.faq-q:hover {
    padding-left: 16px
}

.faq-q .q-no {
    font-family: "Pretendard", sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 1.5vw, 19px);
    letter-spacing: 1px;
    color: var(--mut2);
    transition: color .35s
}

.faq-q .q-tx {
    font-weight: 700;
    font-size: clamp(17px, 2.1vw, 28px);
    letter-spacing: -.5px;
    color: var(--fg);
    line-height: 1.4;
    word-break: keep-all;
    transition: color .35s
}

.faq-q:hover .q-tx {
    color: var(--point)
}

/* +/- 아이콘 */
.faq-q .q-ic {
    position: relative;
    width: clamp(28px, 3vw, 40px);
    height: clamp(28px, 3vw, 40px);
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    justify-self: end;
    flex: none;
    transition: border-color .35s, background .35s, transform .45s cubic-bezier(.2, .7, .2, 1)
}

.faq-q .q-ic::before,
.faq-q .q-ic::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--fg);
    transition: background .35s, transform .4s cubic-bezier(.2, .7, .2, 1), opacity .3s
}

.faq-q .q-ic::before {
    width: 44%;
    height: 1.6px;
    transform: translate(-50%, -50%)
}

.faq-q .q-ic::after {
    width: 1.6px;
    height: 44%;
    transform: translate(-50%, -50%)
}

/* 열림 상태 */
.faq-item.open .faq-q .q-no {
    color: var(--point)
}

.faq-item.open .faq-q .q-tx {
    color: var(--point)
}

.faq-item.open .faq-q .q-ic {
    background: var(--point);
    border-color: var(--point);
    transform: rotate(180deg)
}

.faq-item.open .faq-q .q-ic::before,
.faq-item.open .faq-q .q-ic::after {
    background: #fff
}

.faq-item.open .faq-q .q-ic::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0
}

/* 답변(슬라이드) */
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.2, .7, .2, 1)
}

.faq-a-inner {
    padding: 0 clamp(40px, 5vw, 56px) clamp(28px, 3.4vw, 44px) clamp(60px, 8vw, 122px);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .4s ease .05s, transform .45s cubic-bezier(.2, .7, .2, 1) .05s
}

.faq-item.open .faq-a-inner {
    opacity: 1;
    transform: none
}

.faq-a-inner p {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.85;
    color: var(--mut);
    word-break: keep-all
}

/* ---------- 하단 CTA ---------- */
.faq-cta {
    margin-top: clamp(70px, 9vw, 120px);
    text-align: center;
    padding: clamp(50px, 6vw, 80px) 30px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(215, 38, 61, .08), transparent 60%), var(--card)
}

.faq-cta h3 {
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 44px);
    letter-spacing: -1px;
    line-height: 1.2
}

.faq-cta p {
    margin-top: 16px;
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--mut)
}

.faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 32px;
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 18px);
    color: #fff;
    background: var(--point);
    border: 1px solid var(--point);
    padding: 16px 34px;
    border-radius: 40px;
    transition: transform .3s, background .3s, border-color .3s
}

.faq-cta-btn:hover {
    transform: translateY(-2px);
    background: #b81e31;
    border-color: #b81e31
}

.faq-cta-btn .arr {
    transition: transform .35s
}

.faq-cta-btn:hover .arr {
    transform: translate(3px, -3px)
}

/* ---------- responsive ---------- */
@media(max-width:600px) {
    .faq-q {
        grid-template-columns: auto 1fr auto;
        gap: 14px
    }

    .faq-q .q-no {
        display: none
    }

    .faq-a-inner {
        padding-left: clamp(20px, 6vw, 30px)
    }
}

/* ============================================================
   PROJECT (포트폴리오) 페이지 전용 스타일
   - 트윈에이치 메인 톤: #000 / #D7263D 포인트 / 800 weight
   - 시그니처: 인덱스형 리스트 + 커서를 따라오는 썸네일 프리뷰
   ============================================================ */

.pj-page {
    position: relative;
    background: #000;
    overflow: hidden;
}

.pj-page::before {
    content: '';
    position: absolute;
    /* 페이지 높이(%) 대신 뷰포트(vh) 기준 → 스크롤이 길어도 배경이 아래로 밀리지 않음 */
    top: calc(4vh + 60px);
    left: -10%;
    right: -40%;
    height: 150vh;
    bottom: auto;
    z-index: 1;
    background: url(../image/main/f-cta_bg01.webp) top center / auto no-repeat;
    animation: fctaFloat 24s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

/* 텍스트 가독성용 어두운 오버레이 (FAQ .faq-page-overlay 와 동일) */
.pj-page-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* 콘텐츠는 배경/오버레이 위로 (FAQ .faq-page-content 와 동일) */
.pj-page-content {
    position: relative;
    z-index: 1;
}

/* ---------- 01 HERO ---------- */
.pj-hero {
    position: relative;
    padding: clamp(140px, 18vw, 220px) 0 clamp(50px, 6vw, 80px);
    overflow: hidden;
}

.pj-hero::before {
    content: '';
    position: absolute;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    top: -20vw;
    left: -14vw;
    background: radial-gradient(circle, rgba(215, 38, 61, .16), transparent 68%);
    filter: blur(40px);
    pointer-events: none;
}

.pj-hero-inner {
    position: relative;
    z-index: 1;
}

.pj-hero .kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--point);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.pj-hero h1 {
    font-weight: 800;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.08;
    letter-spacing: -3px;
}

.pj-hero h1 .pt {
    color: var(--point);
    /* -webkit-text-stroke: 1.5px var(--point); */
}

.pj-lead {
    margin-top: 28px;
    max-width: 600px;
    font-size: clamp(16px, 1.7vw, 21px);
    color: var(--mut);
    line-height: 1.75;
}

/* ---------- 02 FILTER + COUNT BAR ---------- */
.pj-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: clamp(20px, 3vw, 32px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pj-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pj-filters .ff-btn {
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--mut);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 60px;
    padding: 11px 24px;
    cursor: pointer;
    transition: color .3s, background .3s, border-color .3s;
}

.pj-filters .ff-btn:hover {
    color: #fff;
    border-color: #555;
}

.pj-filters .ff-btn.on {
    color: var(--ac);
    background: var(--point);
    border-color: var(--point);
}

.pj-count {
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--mut2);
    text-transform: uppercase;
}

.pj-count b {
    color: #fff;
    font-weight: 800;
}

/* ---------- 03 PROJECT LIST (인덱스형) ---------- */
.pj-list {
    position: relative;
    z-index: 2;
    margin-bottom: clamp(100px, 14vw, 180px);
}

.pj-row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(54px, 6vw, 96px) 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 48px);
    padding: clamp(28px, 4vw, 50px) clamp(8px, 2vw, 24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.pj-row.hide {
    display: none;
}

/* hover 시 좌측에서 채워지는 흰색 배경 */
.pj-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 0;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.pj-row:hover::before {
    transform: scaleX(1);
}

/* hover 들여쓰기: padding-left(레이아웃) 애니메이션 → transform(합성 전용)으로 변경
   (빠른 마우스 이동 시 매 프레임 재배치로 화면이 떨리던 문제 해결 — 시각 효과 동일) */
.pj-row>* {
    position: relative;
    z-index: 1;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.pj-row:hover>* {
    transform: translateX(clamp(8px, 1vw, 16px));
}

.pj-no {
    font-family: "Pretendard", sans-serif;
    font-weight: 800;
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: 1px;
    color: var(--mut2);
    transition: color .35s;
}

.pj-row:hover .pj-no {
    color: rgba(0, 0, 0, .55);
}

.pj-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.pj-title {
    font-weight: 800;
    font-size: clamp(24px, 4vw, 42px);
    letter-spacing: -1px;
    line-height: 1.05;
    color: #fff;
    transition: color .35s, transform .45s cubic-bezier(.2, .7, .2, 1);
}

.pj-row:hover .pj-title {
    color: #000;
    transform: translateX(6px);
}

.pj-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pj-tags span {
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 500;
    color: var(--mut);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    padding: 5px 13px;
    transition: color .35s, border-color .35s;
}

.pj-row:hover .pj-tags span {
    color: #000;
    border-color: rgba(0, 0, 0, 0.3);
}

.pj-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
}

.pj-year {
    font-family: "Pretendard", sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 1.6vw, 20px);
    color: #fff;
    letter-spacing: 1px;
    transition: color .35s;
}

.pj-row:hover .pj-year {
    color: #000;
}

.pj-cat {
    font-size: clamp(12px, 1.2vw, 14px);
    color: var(--mut2);
    transition: color .35s;
}

.pj-row:hover .pj-cat {
    color: rgba(0, 0, 0, .6);
}

.pj-arrow {
    font-size: clamp(22px, 2.4vw, 34px);
    color: #fff;
    opacity: 0;
    transform: translate(-10px, 6px);
    transition: color .35s, opacity .4s, transform .45s cubic-bezier(.2, .7, .2, 1);
    flex: none;
}

.pj-row:hover .pj-arrow {
    color: #000;
    opacity: 1;
    transform: translate(0, 0);
}

/* ---------- 커서 따라오는 썸네일 프리뷰 (데스크탑) ---------- */
/* 이동은 JS가 transform(합성 전용)으로 제어 — left/top 애니메이션으로 인한
   매 프레임 재배치(화면 떨림) 제거. 크기는 기존 scale(.8) 반영값으로 고정,
   등장 시 축소 팝 효과는 내부 img의 scale로 동일하게 재현 */
.pj-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(clamp(300px, 30vw, 480px) * .8);
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    z-index: 50;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    transition: opacity .35s ease;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}

.pj-preview.show {
    opacity: 1;
}

.pj-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.0625);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.pj-preview.show img {
    transform: scale(1);
}

/* ---------- 하단 CTA (faq-cta 재사용 톤) ---------- */
.pj-cta {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: clamp(70px, 10vw, 130px) 30px clamp(100px, 14vw, 180px);
}

.pj-cta h3 {
    font-weight: 800;
    font-size: clamp(30px, 5vw, 64px);
    letter-spacing: -2px;
    line-height: 1.15;
}

.pj-cta h3 .pt {
    color: var(--point);
}

.pj-cta p {
    margin: 22px auto 0;
    max-width: 520px;
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--mut);
    line-height: 1.75;
}

.pj-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 36px;
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--ac);
    background: var(--point);
    border: 1px solid var(--point);
    padding: 17px 38px;
    border-radius: 40px;
    text-decoration: none;
    transition: transform .3s, background .3s;
}

.pj-cta-btn:hover {
    transform: translateY(-2px);
    background: #b81e31;
}

.pj-cta-btn .arr {
    transition: transform .35s;
}

.pj-cta-btn:hover .arr {
    transform: translate(3px, -3px);
}

/* ---------- responsive ---------- */
@media(max-width: 760px) {
    .pj-preview {
        display: none;
    }

    /* 모바일은 프리뷰 숨김 */
    .pj-row {
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: start;
    }

    .pj-no {
        display: none;
    }

    .pj-arrow {
        display: none;
    }

    .pj-meta {
        text-align: right;
    }
}

/* ============================================================
Contact (프로젝트 문의) 페이지 전용 스타일
- 적용 범위: .contact-page 래퍼 내부에서만 동작
- sub.css 에 포함 시 다른 페이지와 충돌하지 않도록 스코프 처리됨
============================================================ */

.contact-page {
    padding: 0 0 100px;
}

.contact-page ::selection {
    background: var(--point);
    color: var(--ac)
}

.contact-page:before {
    content: '';
    position: absolute;
    /* 프로젝트 페이지와 동일한 시작 위치 (뷰포트 기준, 페이지 길이와 무관) */
    top: calc(4vh + 60px);
    left: -10%;
    right: -40%;
    height: 150vh;
    bottom: auto;
    z-index: 1;
    background: url(../image/main/f-cta_bg01.webp) top center / auto no-repeat;
    animation: fctaFloat 24s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

/* header */
.contact-page header.site {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.contact-page .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px
}

.contact-page .brand {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.5px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--fg);
    text-decoration: none
}

.contact-page .brand .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--point);
    box-shadow: 0 0 0 4px rgba(215, 38, 61, .12)
}

.contact-page .nav .links {
    display: flex;
    gap: 28px;
    font-size: 16px;
    color: var(--mut)
}

.contact-page .nav .links a {
    color: inherit;
    text-decoration: none;
    transition: color .2s
}

.contact-page .nav .links a:hover {
    color: var(--fg)
}

@media(max-width:680px) {
    .contact-page .nav .links {
        display: none
    }
}

/* hero */
.contact-page .hero {
    padding: 200px 0 150px;
    position: relative;
    min-height: auto;
}

.contact-page .kicker {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--point);
    text-transform: uppercase;
    margin-bottom: 18px
}

.contact-page h1 {
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.08
}

.contact-page h1 .grad {
    color: var(--point);
}

.contact-page .hero p {
    margin-top: 28px;
    font-size: clamp(16px, 1.7vw, 21px);
    color: var(--mut);
    line-height: 1.75;
}

.contact-page .stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 26px
}

.contact-page .stack span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mut);
    background: var(--card);
    border: 1px solid var(--line);
    padding: 6px 13px;
    border-radius: 8px
}

/* main grid */
.contact-page .grid {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 2;
}

@media(max-width:880px) {
    .contact-page .grid {
        grid-template-columns: 1fr;
        gap: 40px
    }
}

/* steps aside */
.contact-page aside .steps {
    position: relative;
    padding-left: 6px
}

.contact-page aside .step {
    display: flex;
    gap: 16px;
    padding-bottom: 30px;
    position: relative
}

.contact-page aside .step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 1.5px;
    background: var(--line)
}

.contact-page aside .step .num {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--fg);
    font-weight: 600;
    font-size: 16px;
    display: grid;
    place-items: center;
    z-index: 1
}

.contact-page aside .step.active .num {
    background: var(--point);
    border-color: var(--point);
    color: var(--ac)
}

.contact-page aside .step h4 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 3px
}

.contact-page aside .step p {
    font-size: 15px;
    color: var(--mut);
    line-height: 1.5
}

.contact-page .infobox {
    margin-top: 18px;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 24px
}

.contact-page .infobox h5 {
    font-size: 16px;
    margin-bottom: 14px;
    color: var(--fg);
    font-weight: 600
}

.contact-page .infobox .line {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    font-size: 16px;
    color: var(--mut)
}

.contact-page .infobox .line i {
    color: var(--point);
}

.contact-page .infobox a {
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--line)
}

/* form card */
.contact-page .formcard {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 42px 40px 34px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 50px -30px rgba(0, 0, 0, .8)
}

.contact-page .legend {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--mut2);
    margin: 30px 0 16px;
    display: flex;
    align-items: center;
    gap: 10px
}

.contact-page .legend:first-child {
    margin-top: 0
}

.contact-page .legend::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line)
}

.contact-page .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

@media(max-width:560px) {
    .contact-page .row {
        grid-template-columns: 1fr
    }
}

.contact-page .field {
    margin-bottom: 30px
}

.contact-page label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--fg)
}

.contact-page label .req {
    color: var(--point);
    margin-left: 2px
}

.contact-page input,
.contact-page select,
.contact-page textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 17px;
    color: var(--fg);
    transition: border-color .16s, box-shadow .16s
}

.contact-page input::placeholder,
.contact-page textarea::placeholder {
    color: var(--mut2)
}

.contact-page select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b909c' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center
}

.contact-page select option {
    background: var(--card);
    color: var(--fg)
}

.contact-page textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6
}

.contact-page input:focus,
.contact-page select:focus,
.contact-page textarea:focus {
    outline: none;
    border-color: var(--point);
    box-shadow: 0 0 0 3px rgba(215, 38, 61, .12)
}

.contact-page .field.error input,
.contact-page .field.error select,
.contact-page .field.error textarea {
    border-color: var(--point);
    box-shadow: 0 0 0 3px rgba(215, 38, 61, .12)
}

.contact-page .err-msg {
    display: none;
    color: var(--point);
    font-size: 14px;
    margin-top: 6px
}

.contact-page .field.error .err-msg {
    display: block
}

/* option cards (project type) */
.contact-page .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

@media(max-width:560px) {
    .contact-page .cards {
        grid-template-columns: 1fr
    }
}

.contact-page .card {
    border: 1.5px solid var(--line);
    border-radius: 5px;
    padding: 15px 16px;
    cursor: pointer;
    transition: all .16s;
    background: var(--surface);
    position: relative
}

.contact-page .card:hover {
    border-color: var(--point);
    background: rgba(215, 38, 61, .12)
}

.contact-page .card.on {
    border-color: var(--point);
    background: rgba(215, 38, 61, .12)
}

.contact-page .card .ic {
    width: 30px;
    height: 30px;
    color: var(--point);
    margin-bottom: 10px
}

.contact-page .card .ic svg {
    width: 100%;
    height: 100%
}

.contact-page .card h5 {
    font-size: 16.5px;
    font-weight: 600;
    margin-bottom: 3px
}

.contact-page .card span {
    font-size: 14px;
    color: var(--mut);
    line-height: 1.4;
    display: block
}

.contact-page .card .check {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--ac);
    transition: all .16s
}

.contact-page .card.on .check {
    background: var(--point);
    border-color: var(--point)
}

.contact-page .card .check svg {
    width: 11px;
    height: 11px;
    opacity: 0;
    transition: opacity .16s
}

.contact-page .card.on .check svg {
    opacity: 1
}

/* budget pills */
.contact-page .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.contact-page .pill {
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--mut);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    user-select: none
}

.contact-page .pill:hover {
    border-color: var(--point)
}

.contact-page .pill.on {
    background: var(--point);
    border-color: var(--point);
    color: var(--ac)
}

.contact-page .consent {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 8px 0 6px
}

.contact-page .consent input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 2px;
    accent-color: var(--point);
    cursor: pointer
}

.contact-page .consent label {
    font-size: 15px;
    color: var(--mut);
    font-weight: 400;
    margin: 0;
    line-height: 1.55;
    cursor: pointer
}

.contact-page .consent a {
    color: var(--point);
    text-decoration: none;
    font-weight: 500
}

.contact-page .submit {
    width: 100%;
    margin-top: 30px;
    border: none;
    cursor: pointer;
    background: var(--point);
    color: var(--ac);
    font-weight: 600;
    font-size: 18px;
    padding: 18px;
    border-radius: 5px;
    transition: background .18s, transform .12s, box-shadow .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px
}

.contact-page .submit:hover {
    background: #a81027;
    box-shadow: 0 12px 28px -10px rgba(215, 38, 61, .6);
    transform: translateY(-1px)
}

.contact-page .submit:active {
    transform: translateY(0)
}

.contact-page .submit svg {
    width: 17px;
    height: 17px
}

.contact-page .done {
    display: none;
    text-align: center;
    padding: 36px 12px
}

.contact-page .done.show {
    display: block;
    animation: rise .5s ease both
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.contact-page .done .ring {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: rgba(215, 38, 61, .12);
    display: grid;
    place-items: center;
    color: var(--point)
}

.contact-page .done .ring svg {
    width: 32px;
    height: 32px
}

.contact-page .done h3 {
    font-size: 28px;
    margin-bottom: 10px;
    letter-spacing: -.5px
}

.contact-page .done p {
    color: var(--mut);
    font-size: 17px;
    max-width: 400px;
    margin: 0 auto
}

.contact-page footer.site {
    border-top: 1px solid var(--line);
    padding: 28px 0;
    font-size: 14px;
    color: var(--mut2)
}

.contact-page footer .wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px
}

.contact-page footer a {
    color: var(--mut2);
    text-decoration: none
}

.contact-page footer a:hover {
    color: var(--mut)
}

/* 서비스 안내 */
/* HERO */
.shero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000
}

.shero .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform
}

.shero .b1 {
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, #242424, #0a0a0a 65%, transparent 78%);
    top: -12vw;
    right: -8vw;
    animation: float1 16s ease-in-out infinite
}

.shero .b2 {
    width: 42vw;
    height: 42vw;
    background: radial-gradient(circle, #1d1d1d, transparent 70%);
    bottom: -10vw;
    left: -6vw;
    animation: float2 20s ease-in-out infinite
}

@keyframes float1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(-4vw, 5vw) scale(1.1)
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(5vw, -4vw) scale(1.15)
    }
}

.shero-grid {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%)
}

.shero-inner {
    position: relative;
    z-index: 4;
    width: 100%;
    text-align: center
}

.shero-tag {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 3px;
    color: #888;
    margin-bottom: 40px;
    font-weight: 500;
    text-transform: uppercase
}

.shero h1 {
    font-weight: 800;
    font-size: clamp(42px, 8vw, 120px);
    line-height: 1.12;
    letter-spacing: -3px
}

.shero h1 .dim {
    color: #5a5a5a
}

.shero-sub {
    font-size: clamp(16px, 1.7vw, 21px);
    color: rgba(255, 255, 255, 0.8);
    margin: 38px auto 0;
    line-height: 1.7;
    max-width: 620px;
}

/* 가치 마퀴 */
.vmarq {
    padding: clamp(24px, 3vw, 40px) 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: .5px solid var(--line);
    border-bottom: .5px solid var(--line)
}

.vmarq-track {
    display: inline-flex;
    align-items: center;
    animation: flow2 32s linear infinite
}

.vmarq-track span {
    font-weight: 800;
    font-size: clamp(28px, 4.6vw, 66px);
    padding: 0 28px;
    letter-spacing: -2px;
    color: #fff
}

.vmarq-track span.o {}

.vmarq-track span:nth-child(even) {
    color: transparent;
    -webkit-text-stroke: 1.5px #555
}

.vmarq-track .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--point);
    flex: 0 0 auto
}

@keyframes flow2 {
    to {
        transform: translateX(-50%)
    }
}

/* SERVICE 아코디언 — 흰 배경 대응 */
.svc-acc {
    padding: clamp(120px, 16vw, 200px) 0;
    background: #fff;
    color: #000;
}

.acc-head-sec {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 7vw, 110px);
    align-items: end;
    margin-bottom: clamp(50px, 7vw, 90px)
}

.acc-head-sec h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.18;
    letter-spacing: -2px;
    color: #111;
}

.acc-head-sec h2 .pt {
    color: var(--point)
}

.acc-head-sec .desc {
    font-size: clamp(16px, 1.6vw, 19px);
    color: #555;
    line-height: 1.85;
    padding-top: 10px
}

@media(max-width:860px) {
    .acc-head-sec {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

.acc {
    border-top: 1px solid #e2e2e2
}

.acc-item {
    border-bottom: 1px solid #e2e2e2
}

.acc-head {
    display: grid;
    grid-template-columns: clamp(60px, 9vw, 140px) 1fr auto;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
    padding: clamp(30px, 4vw, 48px) 0;
    cursor: pointer;
    transition: padding-left .4s
}

.acc-item:hover .acc-head,
.acc-item.on .acc-head {
    padding-left: 18px
}

.acc-no {
    font-weight: 800;
    font-size: clamp(16px, 1.8vw, 22px);
    letter-spacing: 0px;
    color: #333;
    transition: color .35s
}

.acc-item.on .acc-no {
    color: var(--point)
}

.acc-tt {
    min-width: 0
}

/* 기본: 흰 배경 위 연한 회색 아웃라인 글자 → hover/open 시 진한 검정 */
.acc-en {
    font-weight: 900;
    font-size: clamp(28px, 4.6vw, 64px);
    line-height: 1.05;
    color: transparent;
    -webkit-text-stroke: 1px #c4c4c4;
    transition: color .45s, -webkit-text-stroke .45s
}

.acc-item:hover .acc-en,
.acc-item.on .acc-en {
    color: #333;
    -webkit-text-stroke: 0 transparent
}

.acc-ko {
    font-size: clamp(14px, 1.5vw, 18px);
    color: #888;
    margin-top: 8px;
    transition: color .35s
}

.acc-item.on .acc-ko {
    color: #555
}

/* +아이콘: 흰 배경 위 어두운 테두리/글자 → open 시 검정 배경 반전 */
.acc-ic {
    width: clamp(44px, 4.6vw, 60px);
    height: clamp(44px, 4.6vw, 60px);
    border-radius: 50%;
    border: 1px solid #d4d4d4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 300;
    color: #111;
    flex: 0 0 auto;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), background .35s, color .35s, border-color .35s
}

.acc-item.on .acc-ic {
    transform: rotate(45deg);
    background: #111;
    color: #fff;
    border-color: #111
}

.acc-body {
    height: 0;
    overflow: hidden;
    transition: height .55s cubic-bezier(.2, .7, .2, 1)
}

.acc-body-in {
    display: grid;
    grid-template-columns: clamp(60px, 9vw, 140px) 1fr;
    gap: clamp(16px, 3vw, 40px);
    padding: 0 0 clamp(36px, 5vw, 56px);
    padding-left: 18px;
}

.acc-body-in .sp {
    /* 번호 칸 비움 */
}

.acc-desc {
    font-size: clamp(16px, 1.7vw, 18px);
    color: #555;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* 칩: 흰 배경 위 → 기본 회색 테두리, hover 시 검정 */
.acc-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.acc-chips span {
    font-size: 14px;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 10px 20px;
    transition: border-color .3s, color .3s, background .3s
}

.acc-chips span:hover {
    border-color: #111;
    color: #111;
    background: #f5f5f5
}

@media(max-width:700px) {
    .acc-head {
        grid-template-columns: 1fr auto
    }

    .acc-no {
        display: none
    }

    .acc-body-in {
        grid-template-columns: 1fr
    }

    .acc-body-in .sp {
        display: none
    }
}

/* 고객 문제 중심 */
.prob {
    padding: clamp(120px, 16vw, 200px) 0;
}

.prob-head {
    text-align: center;
    margin-bottom: 60px
}

.prob-head .sec-tag {
    justify-content: center
}

.prob-head .sec-tag::before {
    display: none
}

.prob-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px;
    line-height: 1.2
}

.prob-head p {
    font-size: clamp(16px, 1.6vw, 20px);
    color: var(--mut);
    margin: 26px auto 0;
    line-height: 1.8;
    max-width: 620px
}

.prob-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
}

.prob-card {
    background: var(--card);
    border: .5px solid var(--line);
    border-radius: 12px;
    padding: clamp(34px, 4vw, 54px);
    position: relative;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .4s
}

.prob-card:hover {
    transform: translateY(-6px);
    border-color: #333
}

.prob-card .q {
    font-size: clamp(15px, 1.6vw, 19px);
    color: var(--point);
    font-weight: 700;
    margin-bottom: 16px
}

.prob-card .a {
    font-weight: 800;
    font-size: clamp(24px, 2.8vw, 38px);
    letter-spacing: -1px;
    margin-bottom: 14px
}

.prob-card .d {
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--mut);
    line-height: 1.8
}

.prob-card .arr {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 22px;
    color: #444;
    transition: color .35s, transform .35s
}

.prob-card:hover .arr {
    color: #fff;
    transform: translate(3px, -3px)
}

@media(max-width:760px) {
    .prob-grid {
        grid-template-columns: 1fr
    }
}

/* 프로세스 (Idea → Experience → Growth) */
.flow {
    padding: clamp(120px, 16vw, 200px) 0;
    background: #fff;
    color: #000;
}

.flow-head {
    text-align: center;
    margin-bottom: 70px
}

.flow-head .sec-tag {
    justify-content: center
}

.flow-head .sec-tag::before {
    display: none
}

.flow-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px;
    line-height: 1.15
}

.flow-head h2 .o {
    color: transparent;
    -webkit-text-stroke: 1px #c4c4c4;
}

.flow-head h2 .fa {
    color: var(--mut);
    font-weight: 400;
    padding: 0 .12em
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: .5px solid var(--line);
    border-bottom: .5px solid var(--line)
}

.flow-col {
    padding: clamp(40px, 4.6vw, 60px) clamp(22px, 2.6vw, 36px);
    border-right: .5px solid var(--line);
    transition: background .4s
}

.flow-col:last-child {
    border-right: none
}

.flow-col:hover {
    background: var(--surface)
}

.flow-col .f-no {
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--mut2);
    font-weight: 600
}

.flow-col .f-en {
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 36px);
    letter-spacing: -1px;
    margin: 16px 0 12px
}

.flow-col .f-ko {
    font-size: clamp(14px, 1.4vw, 17px);
    color: var(--mut);
    line-height: 1.7;
    margin-bottom: 22px
}

.flow-col ul {
    list-style: none
}

.flow-col ul li {
    font-size: 14px;
    color: var(--mut2);
    padding: 9px 0;
    border-bottom: .5px dashed #222;
    transition: color .3s, padding-left .3s
}

.flow-col ul li:last-child {
    border-bottom: none
}

.flow-col:hover ul li {
    color: #ccc
}

.flow-col ul li::before {
    content: '—';
    color: var(--point);
    margin-right: 10px
}

@media(max-width:980px) {
    .flow-grid {
        grid-template-columns: 1fr 1fr
    }

    .flow-col:nth-child(2) {
        border-right: none
    }

    .flow-col:nth-child(1),
    .flow-col:nth-child(2) {
        border-bottom: .5px solid var(--line)
    }
}

@media(max-width:560px) {
    .flow-grid {
        grid-template-columns: 1fr
    }

    .flow-col {
        border-right: none;
        border-bottom: .5px solid var(--line)
    }

    .flow-col:last-child {
        border-bottom: none
    }
}

/* 서비스 안내 */
/* HERO */
.shero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000
}

@keyframes float1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(-4vw, 5vw) scale(1.1)
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(5vw, -4vw) scale(1.15)
    }
}

.shero-inner {
    position: relative;
    z-index: 4;
    width: 100%;
    text-align: center
}

.shero-tag {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 3px;
    color: #888;
    margin-bottom: 40px;
    font-weight: 500;
    text-transform: uppercase
}

.shero h1 {
    font-weight: 800;
    font-size: clamp(42px, 8vw, 100px);
    line-height: 1.12;
    letter-spacing: -3px
}

.shero h1 .dim {
    color: rgba(255, 255, 255, 0.5);
}

.shero-sub {
    font-size: clamp(16px, 1.7vw, 21px);
    color: rgba(255, 255, 255, 0.8);
    margin: 38px auto 0;
    line-height: 1.7;
    max-width: 620px;
}

/* ============================================================
   서비스 안내 HERO(.shero) — company .chero 진입 애니메이션 이식
   (스크롤로 진입(.shero.in)할 때마다 재생, 벗어나면 리셋)
   ============================================================ */

/* 배경 이미지 레이어 — 기본은 확대+블러 정지, 진입 시 포커스 인
   (배경 이미지를 쓰려면 아래 url을 실제 파일로 지정. 없으면 검정 유지) */
.shero .shero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #000 url('../image/sub/shero_bg01.webp') center center / cover no-repeat;
    filter: blur(16px);
    transform: scale(1.35);
    transition: filter 2.4s cubic-bezier(.2, .7, .2, 1),
        transform 2.4s cubic-bezier(.2, .7, .2, 1);
    will-change: transform, filter;
}

.shero.in .shero-bg {
    filter: blur(0);
    transform: scale(1);
}

/* 어둠막 — 배경 위 가독성용 (진입 시 살짝 옅어짐) */
.shero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    transition: background 2.4s ease;
    pointer-events: none;
}

.shero.in::after {
    background: rgba(0, 0, 0, 0.45);
}

/* 텍스트 순차 등장(stagger) — 진입 시 재생 */
.shero .reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    transition: opacity 1s cubic-bezier(.2, .7, .2, 1),
        transform 1s cubic-bezier(.2, .7, .2, 1),
        filter 1s ease;
}

.shero.in .reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.shero.in .shero-tag {
    transition-delay: .9s;
}

.shero.in .shero-sub {
    transition-delay: 1.5s;
}

.shero.in .chero-btns {
    transition-delay: 1.75s;
}

/* h1은 좌우 슬라이드를 쓰므로 기본 모션 제외 */
.shero h1.reveal {
    transform: none;
    filter: none;
    opacity: 1;
}

/* 제목 두 줄 — 좌/우에서 슬라이드 등장 */
.shero h1 .line-l,
.shero h1 .line-r {
    display: block;
    opacity: 0;
    transition: opacity 1s cubic-bezier(.2, .7, .2, 1) 1s,
        transform 1s cubic-bezier(.2, .7, .2, 1) 1s;
}

.shero h1 .line-l {
    transform: translateX(-80px);
}

.shero h1 .line-r {
    transform: translateX(80px);
    transition-delay: 1.2s;
}

.shero.in h1 .line-l,
.shero.in h1 .line-r {
    opacity: 1;
    transform: translateX(0);
}

/* 제목 dim 텍스트 글로우 호흡 */
.shero h1 .dim {
    animation: sheroDimPulse 4s ease-in-out infinite 2s;
}

@keyframes sheroDimPulse {

    0%,
    100% {
        color: rgba(255, 255, 255, 0.5);
        text-shadow: 0 0 0 transparent;
    }

    50% {
        color: rgba(255, 255, 255, .62);
        text-shadow: 0 0 24px rgba(255, 255, 255, .18);
    }
}

/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
    .shero h1 .dim {
        animation: none !important;
    }

    .shero .shero-bg {
        filter: none;
        transform: none;
        transition: none;
    }

    .shero .reveal,
    .shero h1 .line-l,
    .shero h1 .line-r {
        transition: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* 가치 마퀴 */
.vmarq {
    padding: clamp(24px, 3vw, 40px) 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: .5px solid var(--line);
    border-bottom: .5px solid var(--line)
}

.vmarq-track {
    display: inline-flex;
    align-items: center;
    animation: flow2 32s linear infinite
}

.vmarq-track span {
    font-weight: 800;
    font-size: clamp(28px, 4.6vw, 66px);
    padding: 0 28px;
    letter-spacing: -2px;
    color: #fff
}

.vmarq-track span.o {}

.vmarq-track span:nth-child(even) {
    color: transparent;
    -webkit-text-stroke: 1.5px #555
}

.vmarq-track .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--point);
    flex: 0 0 auto
}

@keyframes flow2 {
    to {
        transform: translateX(-50%)
    }
}

/* SERVICE 아코디언 — 흰 배경 대응 */
.svc-acc {
    padding: clamp(120px, 16vw, 200px) 0;
    background: #fff;
    color: #000;
}

.acc-head-sec {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 7vw, 110px);
    align-items: end;
    margin-bottom: clamp(50px, 7vw, 90px)
}

.acc-head-sec h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.18;
    letter-spacing: -2px;
    color: #111;
}

.acc-head-sec h2 .pt {
    color: var(--point)
}

.acc-head-sec .desc {
    font-size: clamp(16px, 1.6vw, 19px);
    color: #555;
    line-height: 1.85;
    padding-top: 10px
}

@media(max-width:860px) {
    .acc-head-sec {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

.acc {
    border-top: 1px solid #e2e2e2
}

.acc-item {
    border-bottom: 1px solid #e2e2e2
}

.acc-head {
    display: grid;
    grid-template-columns: clamp(60px, 9vw, 140px) 1fr auto;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
    padding: clamp(30px, 4vw, 48px) 0;
    cursor: pointer;
    transition: padding-left .4s
}

.acc-item:hover .acc-head,
.acc-item.on .acc-head {
    padding-left: 18px
}

.acc-no {
    font-weight: 800;
    font-size: clamp(16px, 1.8vw, 22px);
    letter-spacing: 0px;
    color: #333;
    transition: color .35s
}

.acc-item.on .acc-no {
    color: var(--point)
}

.acc-tt {
    min-width: 0
}

/* 기본: 흰 배경 위 연한 회색 아웃라인 글자 → hover/open 시 진한 검정 */
.acc-en {
    font-weight: 900;
    font-size: clamp(28px, 4.6vw, 64px);
    line-height: 1.05;
    color: transparent;
    -webkit-text-stroke: 1px #c4c4c4;
    transition: color .45s, -webkit-text-stroke .45s
}

.acc-item:hover .acc-en,
.acc-item.on .acc-en {
    color: #333;
    -webkit-text-stroke: 0 transparent
}

.acc-ko {
    font-size: clamp(14px, 1.5vw, 18px);
    color: #888;
    margin-top: 8px;
    transition: color .35s
}

.acc-item.on .acc-ko {
    color: #555
}

/* +아이콘: 흰 배경 위 어두운 테두리/글자 → open 시 검정 배경 반전 */
.acc-ic {
    width: clamp(44px, 4.6vw, 60px);
    height: clamp(44px, 4.6vw, 60px);
    border-radius: 50%;
    border: 1px solid #d4d4d4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 300;
    color: #111;
    flex: 0 0 auto;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), background .35s, color .35s, border-color .35s
}

.acc-item.on .acc-ic {
    transform: rotate(45deg);
    background: #111;
    color: #fff;
    border-color: #111
}

.acc-body {
    height: 0;
    overflow: hidden;
    transition: height .55s cubic-bezier(.2, .7, .2, 1)
}

.acc-body-in {
    display: grid;
    grid-template-columns: clamp(60px, 9vw, 140px) 1fr;
    gap: clamp(16px, 3vw, 40px);
    padding: 0 0 clamp(36px, 5vw, 56px);
    padding-left: 18px;
}

.acc-body-in .sp {
    /* 번호 칸 비움 */
}

.acc-desc {
    font-size: clamp(16px, 1.7vw, 20px);
    color: #555;
    letter-spacing: -0.03em;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* 칩: 흰 배경 위 → 기본 회색 테두리, hover 시 검정 */
.acc-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.acc-chips span {
    font-size: 14px;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 10px 20px;
    transition: border-color .3s, color .3s, background .3s
}

.acc-chips span:hover {
    border-color: #111;
    color: #111;
    background: #f5f5f5
}

@media(max-width:700px) {
    .acc-head {
        grid-template-columns: 1fr auto
    }

    .acc-no {
        display: none
    }

    .acc-body-in {
        grid-template-columns: 1fr
    }

    .acc-body-in .sp {
        display: none
    }
}

/* === 고객 문제 중심(.prob) — sticky 하단 정렬 고정 + 고정 배경 === */
/* top 값은 JS(setProbStickyTop)가 콘텐츠 높이에 맞춰 동적으로 설정합니다 */
.prob {
    padding: clamp(120px, 16vw, 200px) 0;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #000 url(../image/sub/prob_bg01.webp) center center / cover no-repeat;
    background-attachment: fixed;
    /* 스크롤 시 배경 고정 */
    margin-bottom: clamp(200px, 40vh, 480px);
    overflow: hidden;
}

/* 콘텐츠 가독성용 어두운 오버레이 */
.prob::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.62);
    pointer-events: none;
}

/* 콘텐츠를 오버레이 위로 */
.prob>.prob-head,
.prob>.prob-grid {
    position: relative;
    z-index: 1;
}

@media(max-width:768px) {
    .prob {
        position: static;
        top: auto !important;
        margin-bottom: 0;
        background-attachment: scroll;
        /* 모바일은 fixed 비활성(성능/렌더 이슈 회피) */
    }
}


.prob-head {
    position: relative;
    text-align: center;
    margin-bottom: 60px;
    z-index: 2;
}

.prob-head .sec-tag {
    justify-content: center
}

.prob-head .sec-tag::before {
    display: none
}

.prob-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px;
    line-height: 1.2
}

.prob-head p {
    font-size: clamp(16px, 1.6vw, 20px);
    color: var(--mut);
    margin: 26px auto 0;
    line-height: 1.8;
    max-width: 620px
}

.prob-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
}

.prob-card {
    background: rgba(0, 0, 0, 0.7);
    /* border: .5px solid rgba(255, 255, 255, 0.1); */
    border-radius: 12px;
    padding: clamp(34px, 4vw, 54px);
    position: relative;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .4s
}

/* hover 배경: 포인트 컬러가 가운데에서 상하로 퍼짐 (val-row/stat와 동일 톤) */
.prob-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 50%;
    background: var(--point);
    z-index: 0;
    transition: top .45s cubic-bezier(.2, .7, .2, 1), bottom .45s cubic-bezier(.2, .7, .2, 1)
}

.prob-card:hover::before {
    top: 0;
    bottom: 0
}

/* 카드 내부 콘텐츠는 배경 위로 */
.prob-card>* {
    position: relative;
    z-index: 1
}

.prob-card:hover {
    transform: translateY(-6px);
    /* border-color: var(--point) */
}

.prob-card .q {
    font-size: clamp(15px, 1.6vw, 19px);
    color: var(--point);
    font-weight: 700;
    margin-bottom: 16px;
    transition: color .35s
}

.prob-card:hover .q {
    color: #fff
}

.prob-card .a {
    font-weight: 800;
    font-size: clamp(24px, 2.8vw, 38px);
    letter-spacing: -1px;
    margin-bottom: 14px;
    color: #fff;
    transition: color .35s
}

.prob-card .d {
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--mut);
    line-height: 1.8;
    transition: color .35s
}

.prob-card:hover .d {
    color: rgba(255, 255, 255, 0.9)
}

.prob-card .arr {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.7);
    transition: color .35s, transform .35s
}

.prob-card:hover .arr {
    color: #fff;
    transform: translate(3px, -3px)
}

@media(max-width:760px) {
    .prob-grid {
        grid-template-columns: 1fr
    }
}

/* 프로세스 (Our Process) — index #works(.proj)와 동일한 폭 확장 + 위로 덮으며 올라옴 */
.flow {
    padding: clamp(120px, 16vw, 200px) 0;
    position: relative;
    z-index: 2;
    background: #fff;
    color: #000;
    width: 88%;
    margin: 0 auto;
    border-radius: 60px 60px 0 0;
    will-change: width;
}

.flow-head {
    text-align: center;
    margin-bottom: 70px
}

.flow-head .sec-tag {
    justify-content: center
}

.flow-head .sec-tag::before {
    display: none
}

.flow-head h2 {
    font-weight: 800;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px;
    line-height: 1.15;
    color: #111;
}

.flow-head h2 .pt {
    color: var(--point)
}

.flow-desc {
    font-size: clamp(16px, 1.6vw, 20px);
    color: #666;
    margin: 26px auto 0;
    line-height: 1.8;
    max-width: 560px
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: .5px solid #e2e2e2;
    border-bottom: .5px solid #e2e2e2
}

.flow-col {
    padding: clamp(40px, 4.6vw, 60px) clamp(22px, 2.6vw, 36px);
    border-right: .5px solid #e2e2e2;
    transition: background .4s
}

.flow-col:last-child {
    border-right: none
}

.flow-col:hover {
    background: #111
}

.flow-col .f-no {
    font-size: 13px;
    letter-spacing: 2px;
    color: #aaa;
    font-weight: 600;
    transition: color .35s
}

.flow-col:hover .f-no {
    color: #888
}

.flow-col .f-en {
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 36px);
    letter-spacing: -1px;
    margin: 16px 0 12px;
    color: #111;
    transition: color .35s
}

.flow-col:hover .f-en {
    color: #fff
}

.flow-col .f-ko {
    font-size: clamp(14px, 1.4vw, 17px);
    color: #666;
    line-height: 1.7;
    margin-bottom: 22px;
    transition: color .35s
}

.flow-col:hover .f-ko {
    color: #bbb
}

.flow-col ul {
    list-style: none
}

.flow-col ul li {
    font-size: 14px;
    color: #777;
    padding: 9px 0;
    border-bottom: .5px dashed #e2e2e2;
    transition: color .3s, border-color .3s
}

.flow-col ul li:last-child {
    border-bottom: none
}

.flow-col:hover ul li {
    color: #ccc;
    border-color: #333
}

.flow-col ul li::before {
    content: '—';
    color: var(--point);
    margin-right: 10px
}

@media(max-width:980px) {
    .flow-grid {
        grid-template-columns: 1fr 1fr
    }

    .flow-col:nth-child(2) {
        border-right: none
    }

    .flow-col:nth-child(1),
    .flow-col:nth-child(2) {
        border-bottom: .5px solid #e2e2e2
    }
}

@media(max-width:768px) {
    .flow {
        width: 100%;
        border-radius: 0
    }
}

@media(max-width:560px) {
    .flow-grid {
        grid-template-columns: 1fr
    }

    .flow-col {
        border-right: none;
        border-bottom: .5px solid #e2e2e2
    }

    .flow-col:last-child {
        border-bottom: none
    }
}

/* ============================================================
   반응형 보강 (모바일 대응 추가분) — 데스크톱 스타일 변경 없음
   ============================================================ */
@media(max-width:768px) {

    /* company: WHY 행 — 터치 기기에서는 hover가 없어 한글 설명이 안 보이므로 항상 노출 */
    .why-row .wc-ko {
        position: static;
        opacity: 1;
        transform: none;
        margin-top: 16px;
        color: var(--mut);
    }

    .why-row:hover .wc-en {
        transform: none;
    }

    /* contact: 히어로 고정 여백 축소 */
    .contact-page .hero {
        padding: 150px 0 90px;
    }

    /* contact: 폼 카드 여백 축소 */
    .contact-page .formcard {
        padding: 30px 24px 26px;
    }
}

@media(max-width:480px) {

    /* 공통 히어로 버튼 — 고정폭 200px 두 개가 좁은 화면에서 어색하게 줄바꿈되므로 풀폭 스택 */
    .chero-btns .btn-w,
    .chero-btns .btn-o {
        width: 100%;
        max-width: 320px;
    }

    /* 공통 히어로 타이틀 자간 완화 */
    .chero h1,
    .shero h1,
    .pj-hero h1 {
        letter-spacing: -1.5px;
    }

    /* company: WHO 비주얼 고정 높이 축소 */
    .who-visual {
        height: 320px;
    }

    /* company: 미션 3단 칼럼(모바일 1단) 여백 축소 */
    .m-col {
        padding: 36px 20px;
    }

    /* faq/project 공통 필터 버튼 축소 */
    .ff-btn {
        padding: 10px 18px;
    }

    /* contact: 히어로/폼 카드 여백 추가 축소 */
    .contact-page .hero {
        padding: 130px 0 60px;
    }

    .contact-page .formcard {
        padding: 24px 16px 20px;
    }

    .contact-page .pill {
        padding: 9px 14px;
        font-size: 14px;
    }
}