/* 독립 HTML을 직접 열 때도 기존 Pretendard 글꼴 자산을 사용합니다. */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/Pretendard-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/Pretendard-SemiBold.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/Pretendard-Bold.otf') format('opentype');
}

/* 공통 홍보 컴포넌트의 크기·글꼴·표면을 샘플 안으로 한정합니다. */
.brand-brochure {
    margin: 0;
    color: var(--frit-ink);
    background: var(--frit-white);
    font-family: var(--k-font-primary), sans-serif;
    font-size: 16px;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.brand-brochure *, .brand-brochure *::before, .brand-brochure *::after { box-sizing: border-box; }
.brand-brochure :where(h1, h2, h3, p, figure, ul, ol) { margin: 0; }
.brand-brochure :where(ul, ol) { padding: 0; list-style: none; }
.brand-brochure :where(a) { color: inherit; text-decoration: none; }
.brand-brochure :where(img) { display: block; max-width: 100%; height: auto; }
.brand-brochure :where(a):focus-visible { outline: 3px solid var(--frit-primary); outline-offset: 6px; }
.brand-brochure :where(section, main) { scroll-margin-top: 24px; }
.brand-shell { width: min(1260px, calc(100% - 96px)); margin-inline: auto; }
.brand-section { padding-block: 112px; }
.brand-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .15em; line-height: 1.5; }
.brand-eyebrow--accent { color: var(--frit-primary); }
.brand-index { display: inline-block; min-width: 42px; margin-right: 12px; letter-spacing: .04em; }
.brand-title { margin-top: 28px; font-size: clamp(34px, 4vw, 54px); font-weight: 700; letter-spacing: -.055em; line-height: 1.28; }
.brand-description { color: var(--frit-muted); font-size: 18px; line-height: 1.85; }
.brand-text-link { display: inline-flex; align-items: center; gap: 24px; padding-block: 10px; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 600; }
.brand-text-link:hover { color: var(--frit-primary); }
.brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.brand-button.btn-freemode { min-height: 52px; height: auto; padding: 13px 26px; gap: 30px; border-color: var(--frit-primary); color: var(--frit-white); background: var(--frit-primary); font-size: 15px; font-weight: 600; }
.brand-button.btn-freemode:hover { color: var(--frit-white); background: var(--k-color-violet-700); border-color: var(--k-color-violet-700); }
.brand-skip { position: absolute; top: 8px; left: 16px; z-index: var(--k-z-header); padding: 10px 16px; transform: translateY(-160%); color: var(--frit-white); background: var(--frit-primary); }
.brand-skip:focus { transform: translateY(0); }

/* 다른 화면과 같은 공통 높이 60px을 사용하고 헤더 내용을 세로 중앙에 배치합니다. */
.brand-header { height: var(--header-height); padding-block: 0; }
.brand-header__inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 24px; }
.brand-header__logo { width: 124px; }
.brand-header__caption { margin-right: auto; padding-left: 25px; border-left: 1px solid var(--frit-border); color: var(--frit-muted); font-size: 12px; letter-spacing: .12em; }
.brand-header__link { display: inline-flex; align-items: center; gap: 25px; font-size: 14px; font-weight: 600; }
.brand-header__link:hover { color: var(--frit-primary); }

/* PDF의 표지 대비와 연결 도식을 대형 타이포그래피와 함께 배치합니다. */
.brand-dark { color: var(--frit-white); background: var(--k-color-slate-900); }
/* 기존 공통 제목 색상보다 어두운 홍보 표면의 흰색 제목을 우선합니다. */
.brand-dark :where(h1, h2, h3) { color: var(--frit-white); }
.brand-dark .brand-eyebrow { color: var(--k-color-violet-300); }
.brand-dark .brand-description { color: var(--k-color-slate-300); }
.brand-dark .brand-text-link:hover { color: var(--k-color-chart-mint); }
.brand-dark :where(a):focus-visible { outline-color: var(--k-color-chart-mint); }
.brand-hero { padding: 48px 0 26px; }
.brand-hero__top { display: flex; justify-content: space-between; align-items: center; }
.brand-hero__edition { color: var(--k-color-slate-300); font-size: 11px; letter-spacing: .1em; }
.brand-hero__grid { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 36px; padding: 65px 0 76px; }
.brand-hero h1 { font-size: clamp(58px, 6.7vw, 96px); font-weight: 700; letter-spacing: -.065em; line-height: 1.17; }
.brand-hero h1 span { color: var(--k-color-chart-mint); }
.brand-hero__copy { max-width: 460px; margin-top: 30px; color: var(--k-color-slate-300); font-size: 19px; line-height: 1.8; }
.brand-hero__graph { width: 100%; max-width: 480px; justify-self: end; }
.brand-graph-line { fill: none; stroke: var(--k-overlay-white-30); stroke-width: 1.5; }
.brand-graph-line--active { stroke: var(--frit-primary); stroke-width: 2; }
.brand-graph-dot { fill: var(--frit-primary); }
.brand-graph-dot--mint { fill: var(--k-color-chart-mint); }
.brand-graph-label { fill: var(--frit-white); font-family: var(--k-font-primary), sans-serif; font-size: 17px; font-weight: 600; }
.brand-graph-note { fill: var(--k-color-slate-300); font-family: var(--k-font-primary), sans-serif; font-size: 10px; letter-spacing: 2px; }
.brand-hero__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--k-overlay-white-15); color: var(--k-color-slate-300); font-size: 12px; }
.brand-hero__bottom a { display: inline-flex; gap: 30px; color: var(--frit-white); }

/* 이름의 기능과 철학을 하나의 로고로 모으는 네이밍 구성입니다. */
.brand-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 60px; }
.brand-heading-row > .brand-description { max-width: 390px; }
.brand-naming { display: grid; grid-template-columns: 1fr .68fr 1fr; align-items: center; gap: 48px; margin-top: 70px; padding: 48px 0; border-block: 1px solid var(--frit-border); text-align: center; }
.brand-naming__equation { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: clamp(21px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; }
.brand-naming__equation span { color: var(--frit-primary); font-weight: 400; }
.brand-naming__label { margin-top: 12px; color: var(--frit-muted); font-size: 13px; }
.brand-naming__logo { width: 180px; margin-inline: auto; }
.brand-naming__path { margin-top: 30px; text-align: center; color: var(--frit-muted); font-size: 14px; }
.brand-naming__path strong { color: var(--frit-primary); font-weight: 600; }

/* 점·선·연결의 세 단계로 브랜드 철학을 설명합니다. */
.brand-connection { background: var(--frit-primary-soft); }
.brand-connection__heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; }
.brand-connect-word { margin-top: 20px; color: var(--k-color-slate-900); font-size: clamp(60px, 7vw, 104px); font-weight: 700; line-height: 1.1; letter-spacing: -.06em; }
.brand-connection .brand-title { margin: 0 0 16px; font-size: clamp(28px, 3.2vw, 40px); }
.brand-connection .brand-description { max-width: 440px; font-size: 17px; }
.brand-connection__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 68px; }
.brand-connection__steps li + li { border-left: 1px solid var(--k-color-violet-200); padding-left: 48px; }
.brand-step-diagram { display: block; width: 100%; max-width: 240px; height: 100px; margin: 16px 0 22px; }
.brand-step-diagram line, .brand-step-diagram path { fill: none; stroke: var(--frit-primary); stroke-width: 2; }
.brand-step-diagram circle { fill: var(--frit-primary); }
.brand-step-diagram .brand-step-diagram__mint { fill: var(--k-color-chart-mint); }
.brand-connection__steps h3 { font-size: 21px; line-height: 1.55; letter-spacing: -.035em; }
.brand-connection__steps p { margin-top: 10px; color: var(--frit-muted); font-size: 14px; }

/* 실제 제품을 탐색·연결과 계약·업무·정산으로 구분하는 순서도입니다. */
.brand-flow { margin-top: 64px; }
.brand-flow__steps { display: grid; grid-template-columns: repeat(5, 1fr); }
.brand-flow__steps li { position: relative; padding: 0 0 32px; }
.brand-flow__steps li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--frit-border); }
.brand-flow__steps li::before { content: ''; position: absolute; z-index: 1; left: 0; bottom: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--frit-primary); }
.brand-flow__steps li:nth-child(n+3)::before { background: var(--k-color-chart-mint); }
.brand-flow__steps small { display: block; color: var(--frit-muted); font-size: 11px; letter-spacing: .12em; }
.brand-flow__steps strong { display: block; margin-top: 8px; font-size: 21px; font-weight: 600; }
.brand-flow__roles { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; margin-top: 24px; }
.brand-flow__roles span { padding: 10px 18px; border-radius: var(--k-radius-sm); background: var(--frit-primary-soft); color: var(--frit-primary); font-size: 13px; font-weight: 600; }
.brand-flow__roles span + span { color: var(--k-color-emerald-800); background: var(--k-bg-green-soft); }

/* 기존 서비스 화면 이미지를 교차형 제품 소개로 재사용합니다. */
.brand-product { display: grid; grid-template-columns: .8fr 1.25fr; align-items: center; gap: 70px; margin-top: 88px; }
.brand-product--reverse { grid-template-columns: 1.25fr .8fr; }
.brand-product--reverse .brand-product__visual { order: -1; }
.brand-product__name { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.brand-product__name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--frit-primary); }
.brand-product--reverse .brand-product__name::before { background: var(--k-color-chart-mint); }
.brand-product h3 { margin: 22px 0 18px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.4; }
.brand-product .brand-description { font-size: 16px; }
.brand-product__new-window { color: var(--frit-muted); font-size: 11px; }
.brand-product__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 18px; }
.brand-product__tags li { padding: 4px 10px; background: var(--frit-primary-soft); border-radius: var(--k-radius-sm); color: var(--frit-primary); font-size: 12px; }
.brand-product__visual { min-width: 0; padding: 28px 28px 18px; background: var(--frit-primary-soft); border-radius: var(--k-radius-xl); }
.brand-product--reverse .brand-product__visual { background: var(--k-bg-green-soft); }
.brand-product__visual img { width: 100%; border-radius: var(--k-radius-md); box-shadow: var(--k-shadow-soft); }
.brand-product__visual figcaption { margin-top: 14px; color: var(--frit-muted); font-size: 11px; letter-spacing: .07em; }

/* 프리랜서와 기업의 서로 다른 목적을 같은 위계로 안내합니다. */
.brand-audience__intro { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.brand-audience__intro > .brand-description { max-width: 350px; }
.brand-audience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 64px; }
.brand-audience__item { padding-top: 32px; border-top: 1px solid var(--k-overlay-white-30); }
.brand-audience__item > .brand-eyebrow { color: var(--k-color-chart-mint); }
.brand-audience__item h3 { margin: 22px 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.45; letter-spacing: -.04em; }
.brand-audience__item .brand-description { max-width: 440px; font-size: 16px; }
.brand-audience__features { margin-top: 32px; }
.brand-audience__features li { display: flex; justify-content: space-between; gap: 24px; padding-block: 15px; border-bottom: 1px solid var(--k-overlay-white-15); font-size: 14px; }
.brand-audience__features span { color: var(--k-color-slate-300); font-size: 12px; }

/* 번호와 구분선으로 세 가지 브랜드 약속을 간결하게 정리합니다. */
.brand-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; margin-top: 64px; }
.brand-values__grid li { padding-top: 26px; border-top: 1px solid var(--frit-border); }
.brand-values__number { color: var(--frit-primary); font-size: 64px; line-height: 1; font-weight: 400; letter-spacing: -.06em; }
.brand-values__grid li:last-child .brand-values__number { color: var(--k-color-emerald-700); }
.brand-values__grid .brand-eyebrow { margin-top: 25px; color: var(--frit-primary); }
.brand-values__grid h3 { margin: 19px 0; font-size: 25px; line-height: 1.5; letter-spacing: -.035em; }
.brand-values__grid .brand-description { font-size: 15px; }

/* 네 개의 연결 메시지와 다음 이용 행동으로 브랜드 이야기를 마칩니다. */
.brand-finale { padding-block: 80px 96px; }
.brand-finale__grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 80px; margin-top: 46px; }
.brand-finale__manifesto { font-size: clamp(42px, 5vw, 66px); letter-spacing: -.05em; line-height: 1.65; font-weight: 600; }
.brand-finale__manifesto span { display: block; }
.brand-finale__manifesto span:last-child { color: var(--k-color-chart-mint); }
.brand-finale__invite { padding-bottom: 20px; }
.brand-finale__invite h3 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.04em; line-height: 1.4; }
.brand-finale__invite .brand-description { margin-top: 20px; font-size: 16px; }
.brand-finale__signature { margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--k-overlay-white-30); color: var(--k-color-slate-300); font-size: 13px; }
.brand-footer { padding-block: 30px; background: var(--frit-surface); }
.brand-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-footer__logo { width: 100px; }
.brand-footer p { color: var(--frit-muted); font-size: 11px; }
.brand-footer__top { font-size: 12px; }

/* 태블릿에서는 읽기 순서를 유지하며 제품·대상별 설명을 단일 열로 전환합니다. */
@media (max-width: 900px) {
    .brand-shell { width: calc(100% - 48px); }
    .brand-section { padding-block: 80px; }
    .brand-hero__grid { gap: 24px; grid-template-columns: 1.3fr 1fr; padding-block: 60px; }
    .brand-hero h1 { font-size: 60px; }
    .brand-hero__copy { font-size: 17px; }
    .brand-heading-row, .brand-audience__intro { display: block; }
    .brand-heading-row > .brand-description, .brand-audience__intro > .brand-description { margin-top: 24px; max-width: 530px; }
    .brand-naming { gap: 24px; grid-template-columns: 1fr .6fr 1fr; }
    .brand-naming__equation { flex-wrap: wrap; gap: 10px; font-size: 23px; }
    .brand-connection__heading { gap: 32px; }
    .brand-connection__steps { gap: 24px; }
    .brand-connection__steps li + li { padding-left: 24px; }
    .brand-connection__steps h3 { font-size: 19px; }
    .brand-product, .brand-product--reverse { grid-template-columns: 1fr; gap: 32px; margin-top: 64px; }
    .brand-product--reverse .brand-product__visual { order: initial; }
    .brand-product__copy { max-width: 580px; }
    .brand-audience__grid { grid-template-columns: 1fr; gap: 48px; }
    .brand-audience__item .brand-description { max-width: 580px; }
    .brand-values__grid { gap: 26px; }
    .brand-values__grid h3 { font-size: 21px; }
    .brand-finale__grid { gap: 36px; }
    .brand-finale__manifesto { font-size: 48px; }
    .brand-finale__invite h3 { font-size: 29px; }
}

/* 모바일에서는 도식과 업무 순서를 세로로 읽고 터치 영역을 충분히 확보합니다. */
@media (max-width: 600px) {
    .brand-shell { width: calc(100% - 40px); }
    .brand-section { padding-block: 64px; }
    .brand-header__logo { width: 100px; }
    .brand-header__caption { display: none; }
    .brand-header__link { min-height: 44px; gap: 12px; font-size: 12px; }
    .brand-title { font-size: 34px; margin-top: 22px; }
    .brand-description { font-size: 16px; }
    .brand-eyebrow { font-size: 10px; }
    .brand-index { min-width: 28px; margin-right: 8px; }
    .brand-hero { padding-top: 28px; }
    .brand-hero__edition { font-size: 9px; }
    .brand-hero__grid { display: flex; flex-direction: column; align-items: stretch; padding: 48px 0 24px; gap: 8px; }
    .brand-hero h1 { font-size: clamp(48px, 12.2vw, 70px); }
    .brand-hero__copy { margin-top: 26px; max-width: 350px; font-size: 16px; }
    .brand-hero .brand-actions { gap: 20px; }
    .brand-hero__graph { width: min(100%, 330px); height: 245px; align-self: center; }
    .brand-hero__bottom { font-size: 10px; align-items: center; }
    .brand-hero__bottom a { gap: 10px; white-space: nowrap; min-height: 44px; align-items: center; }
    .brand-button.btn-freemode { padding-inline: 20px; gap: 18px; font-size: 14px; }
    .brand-text-link { min-height: 44px; font-size: 14px; }
    .brand-naming { grid-template-columns: 1fr; gap: 30px; margin-top: 36px; padding-block: 36px; }
    .brand-naming__logo { width: 142px; }
    .brand-naming__equation { font-size: 26px; }
    .brand-naming__path { font-size: 12px; }
    .brand-connection__heading { grid-template-columns: 1fr; gap: 32px; }
    .brand-connect-word { font-size: clamp(58px, 16vw, 88px); }
    .brand-connection .brand-title { font-size: 30px; }
    .brand-connection__steps { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
    .brand-connection__steps li, .brand-connection__steps li + li { position: relative; min-height: 140px; padding: 25px 0 0 42%; border-left: 0; border-top: 1px solid var(--k-color-violet-200); }
    .brand-connection__steps .brand-step-diagram { position: absolute; left: 0; top: 38px; width: 33%; height: 65px; margin: 0; }
    .brand-connection__steps h3 { margin-top: 12px; font-size: 19px; }
    .brand-connection__steps p { font-size: 13px; }
    .brand-flow { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: 40px; }
    .brand-flow__steps { grid-template-columns: 1fr; }
    .brand-flow__steps li { min-height: 87px; padding: 0 0 22px 24px; }
    .brand-flow__steps li::after { left: 5px; right: auto; top: 10px; bottom: 0; width: 1px; height: auto; }
    .brand-flow__steps li:last-child::after { display: none; }
    .brand-flow__steps li::before { left: 0; top: 8px; bottom: auto; }
    .brand-flow__steps strong { margin-top: 3px; font-size: 18px; }
    .brand-flow__roles { grid-template-columns: 1fr; grid-template-rows: 2fr 3fr; gap: 12px; margin: 0; padding-bottom: 22px; }
    .brand-flow__roles span { display: flex; align-items: center; padding: 16px; font-size: 12px; }
    .brand-product { margin-top: 48px; }
    .brand-product h3 { font-size: 29px; }
    .brand-product__visual { padding: 15px 15px 12px; }
    .brand-product__visual figcaption { font-size: 9px; }
    .brand-audience__grid { margin-top: 40px; }
    .brand-audience__item h3 { font-size: 28px; }
    .brand-audience__features li { flex-wrap: wrap; gap: 4px 20px; }
    .brand-values__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
    .brand-values__grid li { position: relative; padding: 28px 0 0 74px; }
    .brand-values__number { position: absolute; left: 0; top: 28px; font-size: 46px; }
    .brand-values__grid .brand-eyebrow { margin-top: 0; }
    .brand-values__grid h3 { font-size: 23px; margin-block: 16px; }
    .brand-finale { padding-block: 60px; }
    .brand-finale__grid { grid-template-columns: 1fr; gap: 46px; margin-top: 30px; }
    .brand-finale__manifesto { font-size: 45px; line-height: 1.7; }
    .brand-finale__invite { padding: 30px 0 0; border-top: 1px solid var(--k-overlay-white-30); }
    .brand-finale__signature { margin-top: 32px; }
    .brand-footer__inner { flex-wrap: wrap; gap: 16px; }
    .brand-footer p { order: 1; width: 100%; }
    .brand-footer__top { min-height: 44px; display: flex; align-items: center; }
}

/* 움직임을 줄이도록 설정한 사용자의 탐색은 즉시 이동합니다. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.brand-brochure) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-brochure .btn-freemode { transition: none; }
}