/* 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;
    background: var(--service-overview-paper);
    color: var(--fm-color-text-primary);
    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(--fm-color-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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    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;
}

/* FRiT과 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-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

/* FRiT 범위를 청록색에서 투명해지는 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);
    font-family: var(--k-font-cafe24);
    font-weight: 400;
}

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

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

/* FRiT 제품 소개 배경을 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;
}

/* FRiT 설명을 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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    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);
}

/* FRiT 실제 화면을 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;
}

/* FreeMode 화면 이미지에 포함된 기존 워드마크를 현재 브랜드 글자 체계로 교체한다. */
.service-overview-product__wordmark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    width: 12%;
    height: 6%;
    align-items: center;
    justify-content: center;
    gap: 5%;
    background: var(--fm-color-surface);
}

/* 이미지 위 FreeMode 워드마크의 심볼 크기를 화면 비율에 맞춘다. */
.service-overview-product__wordmark > img {
    width: 22%;
    height: auto;
    flex: 0 0 auto;
}

/* 이미지 위 FreeMode 워드마크 텍스트를 Pretendard Black으로 표시한다. */
.service-overview-product__wordmark > span {
    color: var(--fm-color-text-primary);
    font-family: var(--fm-font-family);
    font-size: clamp(5px, 1.25vw, 8px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

/* 서비스 기능 태그를 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(--fm-color-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.32px;
    white-space: nowrap;
}

/* FRiT 기능 태그를 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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    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(--fm-color-surface);
    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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    color: var(--fm-color-surface);
}

/* 서비스 철학 콘텐츠를 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(--fm-color-surface);
    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(--fm-color-surface);
}

/* 서비스 철학 하단의 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;
}

/* 서비스 철학 로고 문구를 Pretendard Black 24px로 표시한다. */
.service-overview-philosophy__logo span {
    color: var(--fm-color-surface);
    font-family: var(--fm-font-family);
    font-size: 24px;
    font-weight: 900;
    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(--fm-color-text-primary);
    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(--fm-color-text-primary);
    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(--fm-color-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;
}

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

/* 키보드 탐색 시 서비스 CTA 버튼의 초점을 명확히 표시한다. */
.service-overview-cta__actions a:focus-visible {
    outline: 2px solid var(--fm-color-text-primary);
    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);
    }
}