@charset "utf-8";
/* ==========================================================================
   ContentRix — base.css
   디자인 토큰 / 리셋 / 타이포그래피 / 공용 유틸리티
   브랜드 3색: Terracotta Orange · Teal · Warm Gold
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 토큰
   -------------------------------------------------------------------------- */
:root {
  /* 브랜드 3색 — 회사소개서 원본값 기준 */
  --o-50:  #FFF3EC;
  --o-100: #FFE1CE;
  --o-300: #F0996B;
  --o-500: #E8773B;   /* PRIMARY  — 오렌지 (전환 / 액션) */
  --o-600: #D2621F;
  --o-700: #A94D18;

  --t-50:  #EDF8F7;
  --t-100: #D2ECE9;
  --t-300: #7FC9C1;
  --t-500: #4FB3A9;   /* SECONDARY — 틸 (신뢰 / 연결) */
  --t-600: #2F9084;
  --t-700: #226C63;

  --g-50:  #FFF8EB;
  --g-100: #FDEBCB;
  --g-300: #F7C88C;
  --g-500: #F4AF5F;   /* TERTIARY — 골드 (성장 / 강조) */
  --g-600: #DE9236;
  --g-700: #A96C22;

  /* 로고 마크 고유색 (로고에만 사용) */
  --logo-o: #E27054;
  --logo-g: #E8B452;
  --logo-t: #30A399;

  /* 잉크 · 중성색 */
  --ink-900: #111827;
  --ink-800: #1F2937;
  --ink-700: #374151;
  --ink-600: #4B5563;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --ink-300: #C9CDD4;

  /* 면 · 선 — 살짝 따뜻한 중성으로 잡아 인쇄물 같은 질감 */
  --paper:     #FFFFFF;
  --paper-2:   #FAF9F7;
  --paper-3:   #F4F3EF;
  --paper-ink: #14181F;
  --line:      #E7E5E0;
  --line-soft: #F0EEEA;
  --line-ink:  #2A303B;

  /* 타이포 */
  --ff-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
             'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --ff-mono: 'SF Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono',
             Consolas, monospace;

  /* 레이아웃 */
  --wrap:    1280px;
  --wrap-nr: 1040px;
  --gut:     clamp(20px, 5vw, 64px);
  --util-h:  38px;   /* 상단 유틸 바 */
  --head-h:  74px;   /* 메인 헤더 */

  /* 모션 */
  --e-out:  cubic-bezier(.22, 1, .36, 1);
  --e-io:   cubic-bezier(.65, .05, .36, 1);
  --e-soft: cubic-bezier(.4, .14, .3, 1);

  /* 그림자 — 낮고 넓게, 따뜻한 톤 */
  --sh-1: 0 1px 2px rgba(31, 26, 20, .05);
  --sh-2: 0 4px 16px -6px rgba(31, 26, 20, .12);
  --sh-3: 0 18px 48px -20px rgba(31, 26, 20, .22);
}

/* --------------------------------------------------------------------------
   2. 리셋
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 70px);
  /* 세로 스크롤바 자리를 항상 비워 둔다.
     안 그러면 페이지 높이가 늦게 확정될 때(예: 오시는 길의 카카오맵이
     뒤늦게 렌더되며 문서가 길어질 때) 스크롤바가 새로 생기면서
     본문 가로폭이 15px 안팎으로 줄어 화면이 한 번 덜컥 움직인다. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-800);
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.011em;
  /* 한글 가독성 — 어절 단위 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 0;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; border: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--o-500);
  outline-offset: 3px;
  /* border-radius 는 지정하지 않는다.
     여기서 3px 를 주면 입력란처럼 원래 둥근 요소가 포커스 순간 각진 네모로 변한다.
     outline 은 요소의 border-radius 를 따라가므로 건드릴 필요가 없다. */
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: 0; text-align: left; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection { background: var(--o-100); color: var(--ink-900); }

/* --------------------------------------------------------------------------
   3. 타이포그래피 스케일
   -------------------------------------------------------------------------- */
.t-display {
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.042em;
  color: var(--ink-900);
}
.t-h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.038em;
  color: var(--ink-900);
}
.t-h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.032em;
  color: var(--ink-900);
}
.t-h3 {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}
.t-lead {
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.78;
  letter-spacing: -0.018em;
  color: var(--ink-600);
}
.t-body { font-size: .9375rem; line-height: 1.8; color: var(--ink-600); }
.t-small { font-size: .8125rem; line-height: 1.7; color: var(--ink-500); }

/* 섹션 상단 라벨 — 영문 대문자 + 트래킹 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-feature-settings: 'tnum' 1;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--o-500);
  border-radius: 2px;
}
.eyebrow--t::before { background: var(--t-500); }
.eyebrow--g::before { background: var(--g-500); }
.eyebrow--plain::before { display: none; }

/* 브랜드 강조 */
.hl-o { color: var(--o-500); }
.hl-t { color: var(--t-600); }
.hl-g { color: var(--g-600); }

/* 형광펜 밑줄 — 텍스트 뒤에 컬러 띠 */
.mark {
  background-image: linear-gradient(transparent 62%, var(--o-100) 62%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .06em;
}
.mark--t { background-image: linear-gradient(transparent 62%, var(--t-100) 62%); }
.mark--g { background-image: linear-gradient(transparent 62%, var(--g-100) 62%); }

/* 숫자 — 등폭 */
.num { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. 레이아웃 유틸
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: var(--wrap-nr); }

.section { padding-block: clamp(72px, 11vw, 140px); }
.section--tight { padding-block: clamp(56px, 7vw, 92px); }
.section--paper2 { background: var(--paper-2); }
.section--paper3 { background: var(--paper-3); }
.section--ink { background: var(--paper-ink); color: var(--ink-300); }

/* 섹션 헤더 — 좌측 라벨 / 우측 본문 2단 (에디토리얼 구성) */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 56px);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.sec-head__aside { padding-top: .5rem; }
.sec-head__title { margin-bottom: 18px; }
.sec-head__desc { max-width: 62ch; }

@media (max-width: 860px) {
  .sec-head { grid-template-columns: 1fr; gap: 18px; }
  .sec-head__aside { padding-top: 0; }
}

/* 얇은 규칙선 */
.rule { height: 1px; background: var(--line); }
.rule--dash {
  height: 1px;
  background-image: linear-gradient(to right, var(--line) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
}

/* --------------------------------------------------------------------------
   5. 버튼
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
  --btn-bd: var(--ink-900);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: transform .35s var(--e-out), box-shadow .35s var(--e-out);
  isolation: isolate;
}
.btn__ico {
  display: inline-block;
  transition: transform .38s var(--e-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:hover .btn__ico { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--o-500); --btn-bd: var(--o-500); }
.btn--primary:hover { box-shadow: 0 10px 26px -12px var(--o-600); }

/* 화살표에 흰 동그라미가 채워지는 변형 (상단 '프로젝트 문의' 버튼).
   주황 그림자 대신 화살표 자체가 반응한다. */
.btn--dot { padding-right: 8px; }
.btn--dot .btn__ico {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: .875rem;
  line-height: 1;
  transition: background .32s var(--e-out), color .28s var(--e-out), transform .38s var(--e-out);
}
.btn--dot:hover,
.btn--dot:focus-visible { box-shadow: none; }
.btn--dot:hover .btn__ico,
.btn--dot:focus-visible .btn__ico {
  background: #fff;
  color: var(--o-600);
  transform: none;          /* 원이 생기므로 옆으로 미는 동작은 끈다 */
}

.btn--teal { --btn-bg: var(--t-500); --btn-bd: var(--t-500); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: var(--line);
}
.btn--ghost:hover { --btn-bd: var(--ink-900); }

.btn--onink {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,.28);
}
.btn--onink:hover { --btn-bd: rgba(255,255,255,.7); }

.btn--sm { padding: 10px 18px; font-size: .875rem; }
.btn--lg { padding: 17px 32px; font-size: 1rem; }

/* 텍스트 링크 — 밑줄이 좌→우로 그려짐 */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink-900);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--o-500), var(--o-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .4s var(--e-out), color .3s;
}
.tlink:hover { background-size: 100% 2px; color: var(--o-600); }

/* --------------------------------------------------------------------------
   6. 배지 / 칩
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 6px;
  background: var(--o-500);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* 색상 키는 $GROUPS / $BIZ 의 tone 값(o · g · t · k)과 그대로 대응한다 */
.badge--o { background: var(--o-500); }
.badge--g { background: var(--g-500); color: var(--ink-900); }
.badge--t { background: var(--t-500); }
.badge--k { background: var(--ink-900); }

.chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-600);
}

/* --------------------------------------------------------------------------
   7. 스크롤 등장 모션 — [data-rv] 요소, common.js가 .is-in 부여
   -------------------------------------------------------------------------- */
[data-rv] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .82s var(--e-out) var(--rv-d, 0ms),
    transform .82s var(--e-out) var(--rv-d, 0ms);
  will-change: opacity, transform;
}
[data-rv='fade']  { transform: none; }
[data-rv='left']  { transform: translateX(-26px); }
[data-rv='right'] { transform: translateX(26px); }
[data-rv='zoom']  { transform: scale(.965); }
[data-rv].is-in { opacity: 1; transform: none; }

/* 좁은 화면에서는 좌우 이동을 쓰지 않는다.
   등장 전 상태(translateX)가 뷰포트를 넘겨 가로 스크롤을 만들기 때문. */
@media (max-width: 900px) {
  [data-rv='left'],
  [data-rv='right'] { transform: translateY(22px); }
}

/* 라인이 좌→우로 그려지는 연출 */
[data-rv-line] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--e-out) var(--rv-d, 0ms);
}
[data-rv-line].is-in { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   8. 접근성
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 999;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  background: var(--ink-900);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  transition: top .25s var(--e-out);
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv], [data-rv-line] { opacity: 1 !important; transform: none !important; }
}