/* 프릿 소개 본문에만 Figma 4257:533의 색상 토큰과 타이포그래피를 적용합니다. */
.frit-intro {
    width: 100%;
    background: var(--frit-white);
    color: var(--frit-completion-gradient-start);
    font-family: var(--k-font-primary), sans-serif;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.frit-intro *,
.frit-intro *::before,
.frit-intro *::after {
    box-sizing: border-box;
}

.frit-intro :where(h1, h2, p, figure) { margin: 0; }
.frit-intro :where(h1, h2) { color: inherit; }
.frit-intro :where(h1, h2, p, figcaption) { letter-spacing: -0.02em; }
.frit-intro img { display: block; max-width: 100%; height: auto; }
.frit-intro__shell { width: min(1260px, calc(100% - 64px)); margin-inline: auto; }
.frit-intro__title { font-size: 64px; font-weight: 600; line-height: 1.4; }
.frit-intro__copy { color: var(--k-text-gray); font-size: 20px; font-weight: 500; }
.frit-intro__accent { color: var(--frit-primary); }
.frit-intro__dark { background: var(--frit-completion-gradient-start); color: var(--frit-white); }
.frit-intro__dark .frit-intro__copy { color: var(--frit-white); }

/* 히어로의 소개 문구와 원본 연결 도식을 490px 높이 안에 배치합니다. */
.frit-intro__hero { overflow: hidden; }
.frit-intro__hero-inner { position: relative; min-height: 600px; padding-block: 120px; }
.frit-intro__hero-copy { position: relative; z-index: 1; width: 50%; }
.frit-intro__hero h1 { font-size: 72px; font-weight: 600; line-height: 1.4; }
.frit-intro__hero-name { font-size: 24px; letter-spacing: -0.02em; color: var(--frit-connect-recommended-end); }
.frit-intro__hero .frit-intro__copy { margin-top: 42px; font-size: 24px; }
.frit-intro__hero-art { position: absolute; top: 70px; left: 50%; width: 672px; height: 446px; }

/* 이름의 의미와 CONNECT 설명에 같은 2열 소개 패턴을 사용합니다. */
.frit-intro__row { display: flex; align-items: center; gap: 72px; min-height: 628px; padding-block: 160px; }
.frit-intro__row-copy { flex: 1; min-width: 0; }
.frit-intro__row-copy > .frit-intro__copy { margin-top: 72px; }
.frit-intro__naming { gap: 42px; min-height: 428px; padding-bottom: 0; }
.frit-intro__equation { display: flex; align-items: center; justify-content: flex-end; gap: 42px; flex-shrink: 0; color: var(--frit-ink); font-size: 26px; font-weight: 600; }
.frit-intro__equation p { white-space: nowrap; }
.frit-intro__equation img { width: 150.745px; height: 54.499px; }
.frit-intro__eyebrow { margin-bottom: 24px; color: var(--k-color-indigo-500); font-size: 20px; font-weight: 600; }

/* 연결 도식의 원본 비율과 각 요소 아래 설명 위치를 유지합니다. */
.frit-intro__diagram { width: 550.918px; flex-shrink: 0; }
.frit-intro__diagram img { width: 92.74%; margin-left: auto; }
.frit-intro__diagram figcaption { position: relative; min-height: 23px; margin-top: 8px; color: var(--frit-muted); font-size: 16px; font-weight: 500; text-align: center; }
.frit-intro__diagram figcaption span { position: absolute; white-space: nowrap; }
.frit-intro__diagram figcaption span:nth-child(1) { left: 0; }
.frit-intro__diagram figcaption span:nth-child(2) { left: 31.58%; }
.frit-intro__diagram figcaption span:nth-child(3) { left: 55.54%; }
.frit-intro__diagram figcaption span:nth-child(4) { right: 0; color: var(--frit-completion-gradient-start); font-weight: 600; }
.frit-intro__diagram em { color: var(--frit-primary); font-style: normal; }

/* 대상별 메시지와 마지막 브랜드 문구를 중앙에 정렬합니다. */
.frit-intro__center { padding-block: 160px; text-align: center; }
.frit-intro__center .frit-intro__copy { margin-top: 72px; font-size: 24px; }
.frit-intro__audience { min-height: 560px; }
.frit-intro__finale { min-height: 785px; }
.frit-intro__finale .frit-intro__title { font-size: 72px; }
.frit-intro__finale .frit-intro__copy p + p { margin-top: 1.4em; }
.frit-intro__signature { margin-top: 72px; }
.frit-intro__signature img { width: 225.432px; height: 81.501px; margin-inline: auto; }
.frit-intro__signature figcaption { margin-top: 14px; color: var(--frit-primary); font-size: 24px; font-weight: 600; }

/* 태블릿에서는 도식과 문구가 겹치지 않도록 소개 행을 세로로 배치합니다. */
@media (max-width: 1259px) {
    .frit-intro__hero h1 { font-size: 56px; }
    .frit-intro__hero .frit-intro__copy { font-size: 20px; }
    .frit-intro__hero-art { top: 50%; width: 55%; height: auto; transform: translateY(-50%); }
    .frit-intro__row { flex-direction: column; align-items: stretch; gap: 56px; min-height: 0; padding-block: 80px; }
    .frit-intro__naming { padding-bottom: 0; }
    .frit-intro__equation { justify-content: center; }
    .frit-intro__diagram { align-self: center; max-width: 100%; }
    .frit-intro__row-copy > .frit-intro__copy { margin-top: 40px; }
    .frit-intro__title { font-size: 48px; }
    .frit-intro__center { padding-block: 80px; }
    .frit-intro__audience, .frit-intro__finale { min-height: 0; }
    .frit-intro__finale .frit-intro__title { font-size: 56px; }
}

/* 모바일에서는 원본 이미지 비율을 유지하며 제목과 설명을 자연스럽게 줄바꿈합니다. */
@media (max-width: 767px) {
    .frit-intro__shell { width: calc(100% - 40px); }
    .frit-intro__hero-inner { display: flex; flex-direction: column; gap: 32px; padding-block: 48px 32px; }
    .frit-intro__hero-copy { width: 100%; }
    .frit-intro__hero h1 { font-size: clamp(36px, 7.5vw, 56px); }
    .frit-intro__hero-name { font-size: 18px; }
    .frit-intro__hero .frit-intro__copy { margin-top: 28px; font-size: 18px; }
    .frit-intro__hero-art { position: static; width: min(100%, 500px); align-self: center; transform: none; }
    .frit-intro__row { gap: 40px; padding-block: 64px; }
    .frit-intro__naming { padding-bottom: 0; }
    .frit-intro__title, .frit-intro__finale .frit-intro__title { font-size: clamp(30px, 6vw, 42px); }
    .frit-intro__copy { font-size: 18px; }
    .frit-intro__copy br { display: none; }
    .frit-intro__eyebrow { margin-bottom: 18px; font-size: 16px; }
    .frit-intro__equation { gap: 16px; font-size: clamp(12px, 2.8vw, 20px); }
    .frit-intro__equation img { width: 26%; height: auto; }
    .frit-intro__diagram figcaption { font-size: clamp(10px, 2.5vw, 16px); }
    .frit-intro__center { padding-block: 64px; }
    .frit-intro__center .frit-intro__copy { margin-top: 40px; font-size: 18px; }
    .frit-intro__signature { margin-top: 48px; }
    .frit-intro__signature img { width: 180px; height: auto; }
    .frit-intro__signature figcaption { font-size: 18px; }
}