/* Figma 4110:710의 본문 색상과 배치를 픽셀 단위로 재현한다. */
.legal-static-page.service-overview-page {
    --service-overview-paper: #FEFEFE;
    --service-overview-cyan: #4DD9E9;
    --service-overview-cyan-flow: #47D8E8;
    --service-overview-cyan-text: #3099A5;
    --service-overview-cyan-surface: rgba(78, 217, 233, 0.05);
    --service-overview-cyan-soft: rgba(77, 217, 233, 0.1);
    --service-overview-cyan-clear: rgba(71, 216, 232, 0);
    --service-overview-primary-surface: rgba(97, 99, 229, 0.05);
    --service-overview-primary-soft: rgba(97, 99, 229, 0.1);
    --service-overview-primary-clear: rgba(97, 99, 229, 0);
    --service-overview-white-20: rgba(255, 255, 255, 0.2);
    --service-overview-white-40: rgba(255, 255, 255, 0.4);
    --service-overview-card-shadow: 12px 12px 18px 0 var(--service-overview-primary-soft);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--service-overview-paper);
    color: var(--career-ink);
    font-family: var(--k-font-primary);
}

/* 서비스 소개 본문의 요소 크기를 Figma 프레임과 같은 박스 모델로 계산한다. */
.service-overview-page,
.service-overview-page *,
.service-overview-page *::before,
.service-overview-page *::after {
    box-sizing: border-box;
}

/* 서비스 소개 본문의 기본 문구와 이미지 여백을 초기화한다. */
.service-overview-page h1,
.service-overview-page h2,
.service-overview-page h3,
.service-overview-page p,
.service-overview-page figure,
.service-overview-page ul,
.service-overview-page ol {
    margin: 0;
}

/* 서비스 소개 본문의 공통 데스크톱 콘텐츠 폭을 1260px로 고정한다. */
.service-overview-shell {
    width: 1260px;
    margin: 0 auto;
}

/* 서비스 소개 본문의 이미지가 지정된 크기로 정확하게 표시되도록 한다. */
.service-overview-page img {
    display: block;
}

/* 서비스 소개의 공통 영문 분류 문구를 Figma 위계로 표시한다. */
.service-overview-eyebrow {
    color: var(--career-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.4px;
    word-break: break-word;
}

/* 서비스 소개 히어로를 Figma의 704px 높이로 구성한다. */
.service-overview-hero {
    height: 704px;
    background: var(--service-overview-paper);
}

/* 서비스 소개 히어로의 120px 여백과 72px 항목 간격을 적용한다. */
.service-overview-hero__inner {
    display: flex;
    height: 100%;
    padding: 120px 32px;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    overflow: hidden;
    text-align: center;
}

/* 서비스 소개 히어로 제목을 Figma의 72px 타이포그래피로 표시한다. */
.service-overview-hero h1 {
    width: 100%;
    color: var(--career-ink);
    font-size: 72px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -1.44px;
    word-break: keep-all;
}

/* 서비스 소개 히어로 설명을 Figma의 32px 타이포그래피로 표시한다. */
.service-overview-hero h1 + p {
    width: 100%;
    color: var(--career-ink);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

/* 서비스 흐름 섹션을 Figma의 896px 높이로 구성한다. */
.service-overview-why {
    height: 896px;
    background: var(--service-overview-paper);
}

/* 서비스 흐름 섹션의 제목 영역을 603px 높이와 72px 간격으로 구성한다. */
.service-overview-why .service-overview-heading {
    display: flex;
    height: 603px;
    padding: 120px 32px;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    overflow: hidden;
    text-align: center;
}

/* 서비스 흐름 섹션 제목을 Figma의 72px 타이포그래피로 표시한다. */
.service-overview-why .service-overview-heading h2 {
    width: 100%;
    color: var(--career-ink);
    font-size: 72px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -1.44px;
    word-break: keep-all;
}

/* 서비스 흐름 섹션 설명을 Figma의 32px 타이포그래피로 표시한다. */
.service-overview-why .service-overview-heading h2 + p {
    width: 100%;
    color: var(--career-ink);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

/* 서비스 흐름을 Figma의 1027px 단계 영역으로 중앙 배치한다. */
.service-overview-flow {
    width: 1027px;
    height: 173px;
    margin: 0 auto;
}

/* 서비스 흐름의 단계 이름을 199px 너비와 8px 간격으로 배치한다. */
.service-overview-flow ol {
    display: grid;
    padding: 0;
    grid-template-columns: repeat(5, 199px);
    gap: 8px;
    list-style: none;
}

/* 서비스 흐름의 각 단계 이름과 점을 중앙 정렬한다. */
.service-overview-flow li {
    width: 199px;
    text-align: center;
}

/* 서비스 흐름의 단계 이름을 Figma의 22px 타이포그래피로 표시한다. */
.service-overview-flow li > strong {
    display: block;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.44px;
}

/* 서비스 흐름의 점과 선을 단계 이름 아래 34px 위치에 배치한다. */
.service-overview-flow__marker {
    position: relative;
    display: block;
    height: 24px;
    margin-top: 34px;
}

/* 서비스 흐름의 점을 Figma 자산 크기인 24px로 표시한다. */
.service-overview-flow__marker > img:first-child {
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

/* 서비스 흐름의 점 사이에 152px Figma 연결선 자산을 배치한다. */
.service-overview-flow__line {
    position: absolute;
    top: 11px;
    left: calc(50% + 28px);
    width: 152px;
    height: 2px;
    max-width: none;
}

/* CareerMode와 FreeMode 범위 막대를 68px 겹치는 Figma 구조로 배치한다. */
.service-overview-flow__modes {
    position: relative;
    width: 898px;
    height: 50px;
    margin: 34px auto 0;
}

/* 서비스 범위 막대의 공통 크기와 로고 타이포그래피를 정의한다. */
.service-overview-flow__modes span {
    position: absolute;
    top: 0;
    display: flex;
    width: 483px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-family: var(--k-font-cafe24);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

/* CareerMode 범위를 청록색에서 투명해지는 Figma 그라데이션으로 표시한다. */
.service-overview-flow__modes .is-career {
    left: 0;
    background: linear-gradient(90deg, var(--service-overview-cyan-flow) 0%, var(--service-overview-cyan-clear) 95%);
    color: var(--service-overview-cyan-text);
}

/* FreeMode 범위를 투명에서 보라색으로 이어지는 Figma 그라데이션으로 표시한다. */
.service-overview-flow__modes .is-freemode {
    left: 415px;
    background: linear-gradient(90deg, var(--service-overview-primary-clear) 5%, var(--career-primary) 100%);
    color: var(--career-primary);
}

/* 제품 소개 섹션을 Figma의 742px 고정 높이로 구성한다. */
.service-overview-product {
    position: relative;
    height: 742px;
}

/* CareerMode 제품 소개 배경을 Figma의 청록색 5% 표면으로 표시한다. */
.service-overview-product.is-career {
    background: var(--service-overview-cyan-surface);
}

/* FreeMode 제품 소개 배경을 Figma의 브랜드 5% 표면으로 표시한다. */
.service-overview-product.is-freemode {
    background: var(--service-overview-primary-surface);
}

/* 제품 소개 콘텐츠와 실제 화면의 절대 배치 기준을 정의한다. */
.service-overview-product__grid {
    position: relative;
    height: 100%;
}

/* 제품 설명을 Figma의 72px 항목 간격으로 구성한다. */
.service-overview-product__copy {
    position: absolute;
    top: 120px;
    display: flex;
    width: 571px;
    flex-direction: column;
    align-items: flex-start;
    gap: 72px;
}

/* CareerMode 설명을 1260px 프레임의 왼쪽 32px에 배치한다. */
.service-overview-product.is-career .service-overview-product__copy {
    left: 32px;
}

/* FreeMode 설명을 1260px 프레임의 오른쪽에 배치한다. */
.service-overview-product.is-freemode .service-overview-product__copy {
    right: 0;
}

/* 제품 소개 제목을 Figma의 56px 타이포그래피로 표시한다. */
.service-overview-product__copy h2 {
    width: 100%;
    color: var(--career-ink);
    font-size: 56px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -1.12px;
    word-break: keep-all;
}

/* 제품 소개 설명을 Figma의 24px 타이포그래피로 표시한다. */
.service-overview-product__copy h2 + p {
    width: 100%;
    color: var(--career-ink);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.48px;
    word-break: keep-all;
}

/* 제품 화면 이미지를 Figma의 20px 모서리와 브랜드 그림자로 표시한다. */
.service-overview-product__visual {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--service-overview-paper);
    box-shadow: var(--service-overview-card-shadow);
}

/* CareerMode 실제 화면을 Figma 좌표와 크기로 배치한다. */
.service-overview-product.is-career .service-overview-product__visual {
    top: 156px;
    left: 631px;
    width: 629px;
    height: 440px;
}

/* FreeMode 실제 화면을 Figma 좌표와 크기로 배치한다. */
.service-overview-product.is-freemode .service-overview-product__visual {
    top: 183px;
    left: -1px;
    width: 603px;
    height: 377px;
}

/* 제품 화면 이미지가 Figma 프레임을 빈틈없이 채우도록 한다. */
.service-overview-product__visual img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* 서비스 기능 태그를 Figma의 8px 간격으로 배치한다. */
.service-overview-tags {
    display: flex;
    padding: 0;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

/* 서비스 기능 태그를 Figma의 16px 글자와 6px·16px 여백으로 표시한다. */
.service-overview-tags li {
    display: flex;
    padding: 6px 16px;
    align-items: center;
    border-radius: 100px;
    background: var(--service-overview-primary-soft);
    color: var(--career-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.32px;
    white-space: nowrap;
}

/* CareerMode 기능 태그를 Figma의 청록색으로 표시한다. */
.service-overview-product.is-career .service-overview-tags li,
.service-overview-audience__card.is-business .service-overview-tags li {
    background: var(--service-overview-cyan-soft);
    color: var(--service-overview-cyan-text);
}

/* 대상별 가치 섹션을 Figma의 1349px 높이로 구성한다. */
.service-overview-audience {
    height: 1349px;
    background: var(--service-overview-paper);
}

/* 대상별 가치 섹션을 120px 여백과 72px 간격의 세로 흐름으로 구성한다. */
.service-overview-audience > .service-overview-shell {
    display: flex;
    height: 100%;
    padding: 120px 0;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    overflow: hidden;
}

/* 대상별 가치 섹션 제목을 72px 항목 간격으로 중앙 정렬한다. */
.service-overview-audience .service-overview-heading {
    display: flex;
    width: 100%;
    padding: 0 32px;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    text-align: center;
}

/* 대상별 가치 섹션 제목을 Figma의 72px 타이포그래피로 표시한다. */
.service-overview-audience .service-overview-heading h2 {
    width: 100%;
    color: var(--career-ink);
    font-size: 72px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -1.44px;
    word-break: keep-all;
}

/* 대상별 가치 섹션 설명을 Figma의 32px 타이포그래피로 표시한다. */
.service-overview-audience .service-overview-heading h2 + p {
    width: 100%;
    color: var(--career-ink);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

/* 프리랜서와 기업 카드를 594px 너비와 72px 간격으로 배치한다. */
.service-overview-audience__grid {
    display: grid;
    width: 1260px;
    grid-template-columns: repeat(2, 594px);
    gap: 72px;
}

/* 대상별 가치 카드를 Figma의 575px 높이와 72px 내부 간격으로 구성한다. */
.service-overview-audience__card {
    display: flex;
    width: 594px;
    height: 575px;
    padding: 42px 24px;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--career-white);
    box-shadow: var(--service-overview-card-shadow);
}

/* 대상별 가치 카드의 텍스트 영역을 중앙 정렬한다. */
.service-overview-audience__card > div:first-child {
    width: 100%;
    text-align: center;
}

/* 대상별 가치 카드의 영문 분류 문구를 18px로 표시한다. */
.service-overview-audience__card .service-overview-eyebrow {
    font-size: 18px;
    letter-spacing: -0.36px;
}

/* 대상별 가치 카드 제목을 분류 문구 아래 14px에 표시한다. */
.service-overview-audience__card h3 {
    margin-top: 14px;
    color: var(--career-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.52px;
    word-break: keep-all;
}

/* 대상별 가치 카드 설명을 제목 아래 32px에 표시한다. */
.service-overview-audience__description {
    margin-top: 32px !important;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.32px;
    word-break: keep-all;
}

/* 프리랜서 일러스트를 Figma의 원본 크기로 표시한다. */
.service-overview-audience__illustration {
    width: 136.977px;
    height: 104.002px;
    max-width: none;
}

/* 기업 일러스트를 Figma의 원본 크기로 표시한다. */
.service-overview-audience__card.is-business .service-overview-audience__illustration {
    width: 130.046px;
    height: 104px;
}

/* 대상별 가치 카드 태그를 Figma의 14px 타이포그래피로 표시한다. */
.service-overview-audience__card .service-overview-tags li {
    font-size: 14px;
    letter-spacing: -0.28px;
}

/* 서비스 철학 섹션을 Figma의 936px 검정 표면으로 구성한다. */
.service-overview-philosophy {
    height: 936px;
    background: var(--career-ink);
    color: var(--career-white);
}

/* 서비스 철학 콘텐츠를 120px 여백과 72px 간격으로 중앙 정렬한다. */
.service-overview-philosophy__inner {
    display: flex;
    height: 100%;
    padding: 120px 32px;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    overflow: hidden;
    text-align: center;
}

/* 서비스 철학 제목을 Figma의 72px 흰색 타이포그래피로 표시한다. */
.service-overview-philosophy h2 {
    width: 100%;
    color: var(--career-white);
    font-size: 72px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -1.44px;
    word-break: keep-all;
}

/* 서비스 철학 설명을 빈 줄 한 줄과 동일한 44.8px 간격으로 배치한다. */
.service-overview-philosophy__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 44.8px;
}

/* 서비스 철학 설명을 Figma의 32px 타이포그래피로 표시한다. */
.service-overview-philosophy__copy p {
    color: var(--service-overview-white-40);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

/* 서비스 철학 도입 문장을 흰색 20% 명도로 표시한다. */
.service-overview-philosophy__copy .is-muted {
    color: var(--service-overview-white-20);
}

/* 서비스 철학 결론 문장을 흰색으로 강조한다. */
.service-overview-philosophy__copy .is-strong {
    color: var(--career-white);
}

/* 서비스 철학 하단의 FreeMode 로고를 Figma의 192px·36px 크기로 구성한다. */
.service-overview-philosophy__logo {
    display: flex;
    width: 192px;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 서비스 철학 로고 심볼을 Figma 원본 크기로 표시한다. */
.service-overview-philosophy__logo img {
    width: 42.528px;
    height: 12px;
}

/* 서비스 철학 로고 문구를 Cafe24 24px로 표시한다. */
.service-overview-philosophy__logo span {
    color: var(--career-white);
    font-family: var(--k-font-cafe24);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.48px;
    white-space: nowrap;
}

/* 서비스 CTA를 Figma의 25% 다색 그라데이션으로 표시한다. */
.service-overview-cta {
    min-height: 423px;
    background-color: var(--service-overview-paper);
    background-image: linear-gradient(104.1217445111deg, rgba(44, 138, 255, 0.25) 14.291%, rgba(71, 216, 232, 0.25) 51.953%, rgba(97, 99, 229, 0.25) 90.347%);
}

/* 서비스 CTA 콘텐츠를 72px 여백과 24px 간격으로 중앙 정렬한다. */
.service-overview-cta__inner {
    display: flex;
    width: 100%;
    min-height: 423px;
    padding: 72px 32px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

/* 서비스 CTA 제목을 Figma의 검정색 42px 타이포그래피로 표시한다. */
.service-overview-cta h2 {
    width: 100%;
    color: var(--career-ink);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.84px;
    word-break: keep-all;
}

/* 서비스 CTA 설명을 Figma의 검정색 22px 타이포그래피로 표시한다. */
.service-overview-cta h2 + p {
    width: 100%;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.44px;
    word-break: keep-all;
}

/* 서비스 CTA 버튼을 Figma의 8px 간격으로 배치한다. */
.service-overview-cta__actions {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

/* 서비스 CTA 기본 버튼을 Figma의 52px 높이와 8px 모서리로 표시한다. */
.service-overview-cta__actions a {
    display: flex;
    height: 52px;
    padding: 12px 24px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: var(--career-primary);
    color: var(--service-overview-paper);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.32px;
    text-decoration: none;
    white-space: nowrap;
}

/* CareerMode 이동 버튼을 Figma의 흰색 표면과 1.5px 외곽선으로 표시한다. */
.service-overview-cta__actions a.is-secondary {
    border: 1.5px solid var(--career-primary);
    background: var(--service-overview-paper);
    color: var(--career-primary);
}

/* 키보드 탐색 시 서비스 CTA 버튼의 초점을 명확히 표시한다. */
.service-overview-cta__actions a:focus-visible {
    outline: 2px solid var(--career-ink);
    outline-offset: 3px;
}

/* 1319px 이하 화면에서 Figma 데스크톱 구성을 화면 너비에 맞게 유동화한다. */
@media (max-width: 1319px) {
    .service-overview-shell {
        width: calc(100% - 64px);
    }

    .service-overview-hero,
    .service-overview-why,
    .service-overview-product,
    .service-overview-audience,
    .service-overview-philosophy {
        height: auto;
    }

    .service-overview-hero__inner,
    .service-overview-why .service-overview-heading,
    .service-overview-audience > .service-overview-shell,
    .service-overview-philosophy__inner {
        height: auto;
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .service-overview-hero h1,
    .service-overview-why .service-overview-heading h2,
    .service-overview-audience .service-overview-heading h2,
    .service-overview-philosophy h2 {
        font-size: 56px;
    }

    .service-overview-flow {
        width: min(1027px, calc(100% - 64px));
        height: auto;
        padding-bottom: 96px;
    }

    .service-overview-flow ol {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .service-overview-flow li {
        width: auto;
    }

    .service-overview-flow__line {
        left: calc(50% + 24px);
        width: calc(100% - 48px);
    }

    .service-overview-flow__modes {
        width: 87.44%;
    }

    .service-overview-flow__modes span {
        width: 53.79%;
    }

    .service-overview-flow__modes .is-freemode {
        left: 46.21%;
    }

    .service-overview-product {
        padding: 96px 0;
    }

    .service-overview-product__grid {
        display: grid;
        height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 48px;
    }

    .service-overview-product__copy,
    .service-overview-product.is-career .service-overview-product__copy,
    .service-overview-product.is-freemode .service-overview-product__copy {
        position: static;
        width: auto;
        gap: 48px;
    }

    .service-overview-product__visual,
    .service-overview-product.is-career .service-overview-product__visual,
    .service-overview-product.is-freemode .service-overview-product__visual {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 629 / 440;
    }

    .service-overview-product.is-freemode .service-overview-product__visual {
        aspect-ratio: 603 / 377;
    }

    .service-overview-product__copy h2 {
        font-size: 44px;
    }

    .service-overview-audience > .service-overview-shell {
        gap: 64px;
    }

    .service-overview-audience__grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }

    .service-overview-audience__card {
        width: 100%;
    }
}

/* 899px 이하 화면에서 제품 소개와 대상별 카드를 한 열로 전환한다. */
@media (max-width: 899px) {
    .service-overview-hero__inner,
    .service-overview-why .service-overview-heading,
    .service-overview-audience > .service-overview-shell,
    .service-overview-philosophy__inner {
        gap: 48px;
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .service-overview-hero h1,
    .service-overview-why .service-overview-heading h2,
    .service-overview-audience .service-overview-heading h2,
    .service-overview-philosophy h2 {
        font-size: 44px;
    }

    .service-overview-hero h1 + p,
    .service-overview-why .service-overview-heading h2 + p,
    .service-overview-audience .service-overview-heading h2 + p,
    .service-overview-philosophy__copy p {
        font-size: 24px;
    }

    .service-overview-flow {
        overflow-x: auto;
        width: calc(100% - 40px);
    }

    .service-overview-flow ol,
    .service-overview-flow__modes {
        width: 760px;
    }

    .service-overview-flow__modes {
        margin-left: 0;
        margin-right: 0;
    }

    .service-overview-product__grid {
        grid-template-columns: 1fr;
    }

    .service-overview-product.is-freemode .service-overview-product__visual {
        order: 2;
    }

    .service-overview-audience .service-overview-heading {
        gap: 48px;
        padding: 0;
    }

    .service-overview-audience__grid {
        grid-template-columns: 1fr;
    }

    .service-overview-audience__card {
        height: 575px;
    }

    .service-overview-philosophy__copy {
        gap: 32px;
    }
}

/* 599px 이하 화면에서 서비스 소개의 글자와 여백을 모바일 크기로 조정한다. */
@media (max-width: 599px) {
    .service-overview-shell {
        width: calc(100% - 40px);
    }

    .service-overview-eyebrow {
        font-size: 15px;
    }

    .service-overview-hero__inner,
    .service-overview-why .service-overview-heading,
    .service-overview-audience > .service-overview-shell,
    .service-overview-philosophy__inner {
        gap: 36px;
        padding: 64px 0;
    }

    .service-overview-hero h1,
    .service-overview-why .service-overview-heading h2,
    .service-overview-audience .service-overview-heading h2,
    .service-overview-philosophy h2 {
        font-size: 36px;
    }

    .service-overview-hero h1 + p,
    .service-overview-why .service-overview-heading h2 + p,
    .service-overview-audience .service-overview-heading h2 + p,
    .service-overview-philosophy__copy p {
        font-size: 20px;
    }

    .service-overview-product {
        padding: 64px 0;
    }

    .service-overview-product__copy {
        gap: 32px;
    }

    .service-overview-product__copy h2 {
        font-size: 34px;
    }

    .service-overview-product__copy h2 + p {
        font-size: 18px;
    }

    .service-overview-tags li {
        padding: 6px 14px;
        font-size: 14px;
    }

    .service-overview-audience__card {
        height: auto;
        min-height: 520px;
        padding: 36px 20px;
        gap: 54px;
    }

    .service-overview-audience__card h3 {
        font-size: 23px;
    }

    .service-overview-audience__description br {
        display: none;
    }

    .service-overview-cta__inner {
        padding: 64px 20px;
    }

    .service-overview-cta h2 {
        font-size: 32px;
    }

    .service-overview-cta h2 + p {
        font-size: 18px;
    }

    .service-overview-cta h2 br,
    .service-overview-cta h2 + p br {
        display: none;
    }

    .service-overview-cta__actions {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .service-overview-cta__actions a {
        width: min(100%, 280px);
    }
}

/* 제휴광고 화면을 1260px 중심축의 광고 제안서형 흐름으로 구성한다. */
.legal-static-page.partnership-ad-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--service-overview-paper);
    color: var(--career-ink);
    font-family: var(--k-font-primary);
}

/* 제휴광고 제안서 슬라이드를 데스크톱 2열 그리드로 배치한다. */
.partnership-ad-page .partnership-ad-deck {
    display: grid;
    padding: 80px 0 120px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* 제휴광고의 각 구획을 각진 프레젠테이션 슬라이드 표면으로 표시한다. */
.partnership-ad-page .partnership-ad-slide {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 480px;
    padding: 32px 32px 72px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--career-ink);
    background: var(--career-white);
    color: var(--career-ink);
    border-radius: 14px;
}

/* 각 제안서 슬라이드의 이동 방향 기호를 참고 피치덱의 공통 표식으로 표시한다. */
.partnership-ad-page .partnership-ad-slide::after {
    content: "↗";
    position: absolute;
    bottom: 26px;
    left: 32px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

/* 제안서 슬라이드의 주제와 순번을 상단 양끝에 배치한다. */
.partnership-ad-page .partnership-ad-slide-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* 제안서 표지와 개요 슬라이드의 높이를 같은 기준으로 맞춘다. */
.partnership-ad-page .partnership-ad-cover,
.partnership-ad-page .partnership-ad-overview {
    min-height: 540px;
    border-radius: 14px;
}

/* 제안서 표지를 검정 바탕과 흰색 문구로 강하게 구분한다. */
.partnership-ad-page .partnership-ad-cover {
    background: var(--career-ink);
    color: var(--career-white);
    border-radius: 14px;
}

/* 제안서 표지의 핵심 문구를 이미지와 겹치지 않는 폭으로 제한한다. */
.partnership-ad-page .partnership-ad-cover-copy {
    position: relative;
    z-index: 1;
    width: 66%;
    margin-top: 54px;
}

/* 제안서 표지의 영문 분류 문구를 작은 보조 위계로 표시한다. */
.partnership-ad-page .partnership-ad-kicker {
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* 제안서 표지 제목을 참고 피치덱의 대형 제목 위계로 표시한다. */
.partnership-ad-page .partnership-ad-cover h1 {
    margin-top: 18px;
    color: inherit;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -1.38px;
    word-break: keep-all;
}

/* 제안서 표지 설명을 제목 아래의 간결한 보조 문구로 표시한다. */
.partnership-ad-page .partnership-ad-cover-copy > p:not(.partnership-ad-kicker) {
    margin-top: 20px;
    color: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.32px;
    word-break: keep-all;
}

/* 제안서 표지와 마감 슬라이드의 광고문의 행동을 기존 브랜드 색상으로 표시한다. */
.partnership-ad-page .partnership-ad-primary-link {
    display: inline-flex;
    min-height: 48px;
    margin-top: 28px;
    padding: 12px 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--career-primary);
    background: var(--career-primary);
    color: var(--career-white);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.3px;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
}

/* 제휴광고 문의 행동의 마우스 반응을 흰색 표면으로 전환한다. */
.partnership-ad-page .partnership-ad-primary-link:hover {
    border-color: var(--career-white);
    background: var(--career-white);
    color: var(--career-ink);
}

/* 키보드 탐색 시 제휴광고 문의 행동의 초점을 명확히 표시한다. */
.partnership-ad-page .partnership-ad-primary-link:focus-visible {
    outline: 2px solid var(--career-white);
    outline-offset: 3px;
}

/* 제안서 표지의 협업 이미지를 우측 하단의 작은 흑백 자료 화면으로 배치한다. */
.partnership-ad-page .partnership-ad-cover-media {
    position: absolute;
    right: 32px;
    bottom: 32px;
    width: 38%;
    margin: 0;
    background: var(--career-white);
    color: var(--career-ink);
}

/* 제안서 표지 사진을 참고 피치덱과 같은 흑백 이미지로 표시한다. */
.partnership-ad-page .partnership-ad-cover-media img {
    width: 100%;
    height: 132px;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1);
}

/* 제안서 표지 이미지의 서비스명과 주제를 하단 정보선으로 표시한다. */
.partnership-ad-page .partnership-ad-cover-media figcaption {
    display: flex;
    min-height: 36px;
    padding: 9px 10px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 9px;
    line-height: 1.4;
}

/* 제안서 개요를 제목과 목차가 위아래로 분리되는 슬라이드로 구성한다. */
.partnership-ad-page .partnership-ad-overview-layout {
    display: flex;
    height: 100%;
    margin-top: 54px;
    flex-direction: column;
}

/* 제안서 개요 제목을 참고 피치덱의 압축된 대형 영문 위계로 표시한다. */
.partnership-ad-page .partnership-ad-overview h2 {
    color: var(--career-ink);
    font-size: 54px;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -2.16px;
}

/* 제안서 목차를 구획선과 번호가 있는 목록으로 배치한다. */
.partnership-ad-page .partnership-ad-index {
    display: grid;
    margin-top: auto;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    list-style: none;
}

/* 제안서 목차의 번호와 제목을 얇은 구획선 아래에 정렬한다. */
.partnership-ad-page .partnership-ad-index li {
    display: grid;
    padding: 13px 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    border-top: 1px solid var(--career-ink);
    gap: 10px;
}

/* 제안서 목차 번호를 브랜드 색상으로 강조한다. */
.partnership-ad-page .partnership-ad-index span {
    color: var(--career-primary);
    font-size: 15px;
    font-weight: 600;
}

/* 제안서 목차 제목을 짧고 선명한 영문 정보로 표시한다. */
.partnership-ad-page .partnership-ad-index strong {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* 광고 적합 분야 슬라이드를 기존 브랜드 색상 표면으로 구분한다. */
.partnership-ad-page .partnership-ad-focus {
    background: var(--career-primary);
    color: var(--career-white);
    border-radius: 14px;
}

/* 광고 적합 분야의 제목과 설명을 슬라이드 상단의 핵심 메시지로 구성한다. */
.partnership-ad-page .partnership-ad-focus-copy {
    margin-top: 54px;
}

/* 광고 적합 분야 제목을 흰색 대형 문구로 표시한다. */
.partnership-ad-page .partnership-ad-focus h2 {
    color: inherit;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -1.14px;
    word-break: keep-all;
}

/* 광고 적합 분야 설명을 제목 아래의 짧은 제안 문구로 표시한다. */
.partnership-ad-page .partnership-ad-focus-copy p {
    width: min(100%, 500px);
    margin-top: 20px;
    color: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.32px;
    word-break: keep-all;
}

/* 광고 적합 주제를 슬라이드 하단의 3열 번호 정보로 배치한다. */
.partnership-ad-page .partnership-ad-topics {
    display: grid;
    margin-top: auto;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
}

/* 광고 적합 주제의 번호와 명칭을 흰색 구획선 아래에 표시한다. */
.partnership-ad-page .partnership-ad-topics li {
    display: flex;
    padding-top: 14px;
    flex-direction: column;
    border-top: 1px solid var(--service-overview-white-40);
    gap: 8px;
}

/* 광고 적합 주제 번호를 큰 프레젠테이션 숫자로 표시한다. */
.partnership-ad-page .partnership-ad-topics span {
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
}

/* 광고 적합 주제 이름을 번호 아래의 핵심 정보로 표시한다. */
.partnership-ad-page .partnership-ad-topics strong {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

/* 문의 준비사항을 흰색 제안서 슬라이드로 구성한다. */
.partnership-ad-page .partnership-ad-brief-copy {
    margin-top: 54px;
}

/* 문의 준비사항 제목을 대형 한국어 제안 문구로 표시한다. */
.partnership-ad-page .partnership-ad-brief h2 {
    color: var(--career-ink);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1.2px;
    word-break: keep-all;
}

/* 문의 준비사항 네 항목을 한 줄 요약으로 표시한다. */
.partnership-ad-page .partnership-ad-brief-copy p {
    margin-top: 20px;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.32px;
    word-break: keep-all;
}

/* 문의 준비사항의 네 항목을 하단 2열 번호 목록으로 배치한다. */
.partnership-ad-page .partnership-ad-brief-list {
    display: grid;
    margin-top: auto;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    list-style: none;
}

/* 문의 준비사항의 번호와 영문 주제를 구획선 아래에 정렬한다. */
.partnership-ad-page .partnership-ad-brief-list li {
    display: grid;
    padding: 13px 0;
    grid-template-columns: 34px minmax(0, 1fr);
    border-top: 1px solid var(--career-ink);
    gap: 10px;
}

/* 문의 준비사항 번호를 기존 브랜드 색상으로 강조한다. */
.partnership-ad-page .partnership-ad-brief-list span {
    color: var(--career-primary);
    font-size: 15px;
    font-weight: 600;
}

/* 문의 준비사항 영문 주제를 작은 제안서 정보 위계로 표시한다. */
.partnership-ad-page .partnership-ad-brief-list strong {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* 광고 진행 절차 슬라이드를 전체 2열 너비로 확장한다. */
.partnership-ad-page .partnership-ad-process {
    min-height: 440px;
    grid-column: 1 / -1;
    border-radius: 14px;
}

/* 광고 진행 절차 제목과 세부 단계를 좌우 2열로 배치한다. */
.partnership-ad-page .partnership-ad-process-layout {
    display: grid;
    height: 100%;
    margin-top: 54px;
    grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
    gap: 56px;
}

/* 광고 진행 절차의 영문 제목을 대형 제안서 위계로 표시한다. */
.partnership-ad-page .partnership-ad-process h2 {
    color: var(--career-ink);
    font-size: 64px;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -2.56px;
}

/* 광고 진행 절차를 카드 없이 구획선으로 나뉜 3열 목록으로 배치한다. */
.partnership-ad-page .partnership-ad-process-list {
    display: grid;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--career-ink);
    list-style: none;
}

/* 광고 진행 단계 사이를 세로 구획선으로 나눈다. */
.partnership-ad-page .partnership-ad-process-list li {
    display: flex;
    min-width: 0;
    padding: 18px 22px 0;
    flex-direction: column;
    border-left: 1px solid var(--career-ink);
}

/* 첫 번째 광고 진행 단계의 불필요한 왼쪽 구획선을 제거한다. */
.partnership-ad-page .partnership-ad-process-list li:first-child {
    padding-left: 0;
    border-left: 0;
}

/* 광고 진행 단계 번호를 브랜드 색상의 큰 숫자로 표시한다. */
.partnership-ad-page .partnership-ad-process-list li > span {
    color: var(--career-primary);
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
}

/* 광고 진행 단계 제목을 번호 아래의 핵심 정보로 표시한다. */
.partnership-ad-page .partnership-ad-process-list h3 {
    margin-top: auto;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.44px;
    word-break: keep-all;
}

/* 광고 진행 단계 설명을 제목 아래의 보조 정보로 표시한다. */
.partnership-ad-page .partnership-ad-process-list p {
    margin-top: 14px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.28px;
    word-break: keep-all;
}

/* 제휴광고 마감 슬라이드를 전체 2열 너비의 검정 표면으로 구성한다. */
.partnership-ad-page .partnership-ad-contact {
    min-height: 380px;
    grid-column: 1 / -1;
    background: var(--career-ink);
    color: var(--career-white);
    border-radius: 14px;
}

/* 제휴광고 마감 문구와 이메일 행동을 좌우로 나누어 배치한다. */
.partnership-ad-page .partnership-ad-contact-layout {
    display: grid;
    height: 100%;
    margin-top: 54px;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    align-items: end;
    gap: 64px;
}

/* 제휴광고 마감 제목을 흰색 대형 제안 문구로 표시한다. */
.partnership-ad-page .partnership-ad-contact h2 {
    color: inherit;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -1.62px;
    word-break: keep-all;
}

/* 제휴광고 마감의 이메일 주소와 행동을 세로로 정렬한다. */
.partnership-ad-page .partnership-ad-contact-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 제휴광고 문의 이메일 주소를 마감 행동 위의 보조 정보로 표시한다. */
.partnership-ad-page .partnership-ad-contact-action > span {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 마감 슬라이드의 이메일 행동이 오른쪽 열을 채우도록 한다. */
.partnership-ad-page .partnership-ad-contact .partnership-ad-primary-link {
    width: 100%;
}

/* 1319px 이하에서 제휴광고 제안서의 중심축과 여백을 화면에 맞게 유동화한다. */
@media (max-width: 1319px) {
    .partnership-ad-page .partnership-ad-deck {
        padding: 64px 0 96px;
    }

    .partnership-ad-page .partnership-ad-cover h1 {
        font-size: 40px;
    }

    .partnership-ad-page .partnership-ad-focus h2,
    .partnership-ad-page .partnership-ad-brief h2 {
        font-size: 34px;
    }
}

/* 899px 이하에서 제휴광고 제안서 슬라이드를 한 열로 전환한다. */
@media (max-width: 899px) {
    .partnership-ad-page .partnership-ad-deck {
        grid-template-columns: 1fr;
    }

    .partnership-ad-page .partnership-ad-slide {
        min-height: 460px;
    }

    .partnership-ad-page .partnership-ad-process,
    .partnership-ad-page .partnership-ad-contact {
        grid-column: auto;
    }

    .partnership-ad-page .partnership-ad-process-layout,
    .partnership-ad-page .partnership-ad-contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .partnership-ad-page .partnership-ad-process-list {
        min-height: 230px;
    }

    .partnership-ad-page .partnership-ad-contact-action {
        width: min(100%, 320px);
    }
}

/* 599px 이하에서 제휴광고 제안서의 타이포와 번호 목록을 모바일 흐름으로 조정한다. */
@media (max-width: 599px) {
    .partnership-ad-page .partnership-ad-deck {
        padding: 40px 0 64px;
        gap: 16px;
    }

    .partnership-ad-page .partnership-ad-slide {
        min-height: 0;
        padding: 24px 24px 60px;
    }

    .partnership-ad-page .partnership-ad-slide::after {
        bottom: 20px;
        left: 24px;
        font-size: 20px;
    }

    .partnership-ad-page .partnership-ad-slide-meta {
        gap: 16px;
        font-size: 10px;
    }

    .partnership-ad-page .partnership-ad-cover,
    .partnership-ad-page .partnership-ad-overview,
    .partnership-ad-page .partnership-ad-focus,
    .partnership-ad-page .partnership-ad-brief {
        min-height: 500px;
    }

    .partnership-ad-page .partnership-ad-cover {
        min-height: 620px;
    }

    .partnership-ad-page .partnership-ad-cover-copy {
        width: 100%;
        margin-top: 40px;
    }

    .partnership-ad-page .partnership-ad-cover h1 {
        font-size: 36px;
        letter-spacing: -1.08px;
    }

    .partnership-ad-page .partnership-ad-cover-media {
        position: static;
        width: 100%;
        margin-top: auto;
    }

    .partnership-ad-page .partnership-ad-cover-media img {
        height: 150px;
    }

    .partnership-ad-page .partnership-ad-overview-layout,
    .partnership-ad-page .partnership-ad-focus-copy,
    .partnership-ad-page .partnership-ad-brief-copy,
    .partnership-ad-page .partnership-ad-process-layout,
    .partnership-ad-page .partnership-ad-contact-layout {
        margin-top: 40px;
    }

    .partnership-ad-page .partnership-ad-overview h2 {
        font-size: 44px;
    }

    .partnership-ad-page .partnership-ad-index,
    .partnership-ad-page .partnership-ad-brief-list {
        grid-template-columns: 1fr;
    }

    .partnership-ad-page .partnership-ad-focus h2,
    .partnership-ad-page .partnership-ad-brief h2 {
        font-size: 32px;
    }

    .partnership-ad-page .partnership-ad-topics {
        gap: 10px;
    }

    .partnership-ad-page .partnership-ad-topics span {
        font-size: 30px;
    }

    .partnership-ad-page .partnership-ad-topics strong {
        font-size: 15px;
    }

    .partnership-ad-page .partnership-ad-process {
        min-height: 0;
    }

    .partnership-ad-page .partnership-ad-process h2 {
        font-size: 48px;
    }

    .partnership-ad-page .partnership-ad-process-list {
        min-height: 0;
        grid-template-columns: 1fr;
        border-top: 0;
    }

    .partnership-ad-page .partnership-ad-process-list li,
    .partnership-ad-page .partnership-ad-process-list li:first-child {
        min-height: 190px;
        padding: 18px 0;
        border-top: 1px solid var(--career-ink);
        border-left: 0;
    }

    .partnership-ad-page .partnership-ad-process-list h3 {
        margin-top: 40px;
    }

    .partnership-ad-page .partnership-ad-contact {
        min-height: 420px;
    }

    .partnership-ad-page .partnership-ad-contact h2 {
        font-size: 38px;
    }

    .partnership-ad-page .partnership-ad-contact-action {
        width: 100%;
    }
}