/* ==========================================================================
   main.css
========================================================================== */
/* ========================
   section1 : Hero
======================== */
.section1 {
    height: 100vh;
    position: relative;
    padding-top: 180px;
    padding-bottom: 60px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 도트 패턴을 섹션 전체 배경으로 깔기 */
.section1__bg-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.section1__bg-deco img {
    position: absolute;
    top: -8%;
    left: -8%;
    width: 116%;
    height: 116%;
    object-fit: cover;
    animation: dotDrift 14s ease-in-out infinite alternate;
}

@keyframes dotDrift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-3%, 2%) scale(1.04);
    }
}

.section1__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;

}

.section1__title {
    line-height: 1.3;
}

.section1__desc {
    margin-top: 24px;
}

.section1__tag {
    text-align: right;
}

.section1__tag-mark {
    font-style: italic;
}

.section1__tag-en {
    letter-spacing: 0.02em;
    margin-top: 4px;
}

/* ------------------------
   광고 상담 버튼
   : 기본은 화살표만, 호버하면 왼쪽에 텍스트가 펼쳐지며 화살표가 밀림
------------------------ */
.section1__btn {
    display: inline-flex;
    align-items: center;
    margin-top: 60px;
}

.section1__btn-text {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .35s ease, opacity .35s ease, margin-right .35s ease;
}

.section1__btn:hover .section1__btn-text {
    max-width: 200px;
    /* "광고 상담" 텍스트가 다 보일 만큼의 여유값 */
    opacity: 1;
    margin-right: 14px;
}

.section1__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.section1__btn:hover .section1__btn-icon {}

/* ------------------------
   하단 4컷 이미지 : Slick으로 자동 롤링 처리 (JS는 index.html 하단)
------------------------ */
.section1__gallery {
    margin-top: 40px;
}

.section1__gallery-item {
    position: relative;
    height: 260px;
    overflow: hidden;
    margin: 0 12px;
    /* gap 대신 슬라이드 자체에 여백 */
}

.section1__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================
   section2 : Trusted By
======================== */
.section2 {
    padding: 120px 0;
    text-align: center;
}

.section2__title {
    margin-bottom: 60px;
}

.section2__logo {
    padding: 0 40px;
    font-weight: 700;
    color: var(--color-sub2);
}

/* ========================
   section3 : Creative / Algorithm / Conversion
======================== */
.service-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
}

.service-row__media {
    flex: 0 0 50%;
}

.service-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.service-row .service-row__text_wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-row__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.service-row--reverse {
    flex-direction: row;
}

.service-row__title {
    margin-bottom: 12px;
}

.service-row__sub {
    margin-bottom: 8px;
}

.service-row__desc {
    color: var(--color-sub1);
}

/* ========================
   section4 : Our Services
======================== */
.section4 {
    padding: 120px 0;
}

.service-strip {
    display: flex;
    height: 620px;
}

.service-strip__item {
    position: relative;
    flex: 1;
    overflow: hidden;
    transition: flex .5s ease;
    cursor: pointer;
}

.service-strip__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 빨간 오버레이 : 평소엔 화면 아래에 숨어있다가, 호버 시 위로 슬라이드 */
.service-strip__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-red);
    transform: translateY(100%);
    transition: transform .5s ease;
    z-index: 1;
}

.service-strip__item:hover::before {
    transform: translateY(0);
}

.service-strip__label {
    position: absolute;
    top: 32px;
    right: 24px;
    writing-mode: vertical-rl;
    color: var(--color-white);
    letter-spacing: -0.02em;
    white-space: nowrap;
    z-index: 2;
    /* 오버레이(z-index:1)보다 항상 위 */
}

.service-strip__btn {
    position: absolute;
    left: 32px;
    bottom: 32px;
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 30px;
    border: 1px solid #fff;
    color: var(--color-white);
    background-color: transparent;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s;
    z-index: 2;
}

.service-strip__item:hover .service-strip__btn {
    color: #fff;
    opacity: 1;
    transform: translateY(0);
}

/* ========================
   section5 : Ready to Grow
======================== */
.section5 {
    padding: 120px 0;
}

.section5__title {
    margin-bottom: 60px;
}

.section5 .counter-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 30px 0;
    border-bottom: 1px solid #000000;

}

.section5 .counter-row .counter-row__value span {
    color: var(--color-red);
}

/* ========================
   section6 : Selected Works
======================== */
.section6 {
    padding: 0 0 160px;
}

.section6__inner {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.section6__text_wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section6__text {
    flex: 0 0 25%;
}

.section6__text.section6__text1 {
    display: inline-flex;
    align-items: flex-end;

}

.section6__text.section6__text1 a {
    padding: 15px 40px;
    border: 1px solid #111;
    border-radius: 36.5px;
}

.section6__text.section6__text1 a:hover {
    border: 1px solid #111;
    background-color: #111;
    color: #fff;
}

.section6__title {
    margin-bottom: 16px;
}

.section6__desc {
    color: var(--color-sub1);
    margin-bottom: 32px;
}



.work-grid__item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.work-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.work-grid__item:hover img {
    transform: scale(1.06);
}

.work-grid__item_description {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;   /* 블러된 배경이 삐져나가지 않게 */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
}

.work-grid__item:hover .work-grid__item_description {
    opacity: 1;
    transform: translateY(0);
}

/* 블러는 이 배경 레이어에만 적용 */
.work-grid__desc-bg {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.15);
    filter: blur(15px);
}

/* 텍스트는 별도 레이어라 블러 영향 없음 */
.work-grid__desc-content {
    position: relative;   /* 배경(z-index 없이도 자연스레 위) 위에 쌓이도록 */
    padding: 30px 20px;
    color: var(--color-white);
}

.work-grid__desc-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}
.marquee {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee__track {
    display: inline-flex;
    align-items: center;
    will-change: transform;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}