@charset "utf-8";

/* ------------------------------------------------------------------
   더드림벤처스 회사 소개 — company.dreamventures.kr
   활자는 플랫폼 사이트(Paperlogy)를 그대로 잇고, 색과 형태는 사업계획서의
   4축 체계를 따른다. 알약·그림자 대신 직각·헤어라인으로 문서의 얼굴을 만든다.
   ------------------------------------------------------------------ */

@font-face { font-family: Paperlogy; src: url(fonts/Paperlogy-400.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: Paperlogy; src: url(fonts/Paperlogy-600.woff2) format('woff2'); font-weight: 600; font-display: swap }
@font-face { font-family: Paperlogy; src: url(fonts/Paperlogy-800.woff2) format('woff2'); font-weight: 800; font-display: swap }
@font-face { font-family: Paperlogy; src: url(fonts/Paperlogy-700.woff2) format('woff2'); font-weight: 700; font-display: swap }

:root {
  /* 지면 */
  --ink:        #16202b;   /* 사업계획서 네이비(#123654)에서 색상만 남기고 채도·명도를 낮춘 값 */
  --ink-raise:  #1e2a37;   /* 다크 위에 한 겹 올린 면 */
  --ink-line:   rgba(255, 255, 255, .14);   /* 다크 위 헤어라인 */
  --paper:      #faf9f6;   /* --dv-bg-page */
  --paper-deep: #f2f0ec;   /* --dv-bg-subtle */
  --surface:    #ffffff;
  --line:       #e4e1d9;   /* --dv-border-soft */
  --line-soft:  #edeae3;

  /* 4대 사업축 — 사업계획서 전 장에서 고정으로 쓰는 색이다 */
  --primary: #2c55e0;  /* --dv-primary — 강조·링크·포커스 */
  --ax-1: #0d9488;   /* AI 통합지원플랫폼 */
  --ax-2: #2563eb;   /* AX·DX 전문서비스 */
  --ax-3: #7c3aed;   /* 공동기술개발·R&D */
  --ax-4: #f0b429;   /* 홈페이지·플랫폼 제작 */

  /* 글자 */
  --fg:    #14181f;   /* --dv-text-strong */
  --fg-2:  #2e3440;   /* --dv-text */
  --fg-3:  #636b79;   /* --dv-text-muted */
  --on-ink:      #ffffff;
  --on-ink-2:    rgba(255, 255, 255, .74);
  --on-ink-3:    rgba(255, 255, 255, .5);

  --font: Paperlogy, "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --shell: 1180px;
  --gutter: 24px;
  --header-h: 56px;
  --r: 3px;
  --hair: .667px;   /* Linear가 쓰는 서브픽셀 헤어라인 */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
  /* 스크롤바를 감춘다. 스크롤·키보드 이동은 그대로 동작한다. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none }

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block }
a { color: inherit }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0 }
ul, ol { padding: 0; list-style: none }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 뼈대 ---------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: clamp(72px, 8vw, 116px) }
.band + .band { border-top: var(--hair) solid var(--line) }
.band--paper { background: var(--paper) }
.band--tint  { background: var(--paper-deep) }
.band--ink   { background: var(--ink); color: var(--on-ink) }

/* 섹션 머리는 2단이다 — 왼쪽에 영문 라벨, 오른쪽에 제목과 리드.
   플랫폼 사이트는 한 줄로 쌓아 올리므로, 여기서 구성이 갈린다. */
.head {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  margin-bottom: clamp(36px, 4.4vw, 60px);
}

.head__label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: .7em;
  border-top: 2px solid var(--fg);
}


.head__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.head__title { color: var(--fg-2) }
.head__title em { font-style: normal; color: var(--fg) }

.head__lead {
  margin-top: 16px;
  max-width: 60ch;
  color: var(--fg-2);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -.02em;
}


/* --- 본문 건너뛰기 -------------------------------------------------- */

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 70;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  clip-path: inset(50%);
}
.skip:focus-visible { clip-path: none }

/* --- 헤더 ----------------------------------------------------------
   배경판을 두지 않는다. 헤더는 글자만 얹혀 있고, 지금 어느 면 위에 있는지에
   따라 색을 뒤집는다(data-tone). 가로 메뉴 대신 섹션 인덱스를 연다 —
   그래야 좁은 화면에서 메뉴가 통째로 사라지는 분기가 없어진다. */

.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.hdr__inner { display: flex; align-items: center; gap: 20px; width: 100% }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none }
.brand__mark { width: 27px; height: 27px; flex: none; color: currentColor }
.brand__name { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15 }
.brand__sub { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .17em }

.hdr__act { display: flex; align-items: center; gap: 6px; margin-left: auto }

.hdr__contact {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.hdr__menu {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-inline: 12px;
  border: var(--hair) solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: inherit;
}
.hdr__menu:hover { border-color: currentColor }
.hdr__menu-mark rect { fill: currentColor }

/* 톤 반전 — 지금 지나는 섹션의 바탕색을 그대로 입는다.
   배경 없이 두면 본문이 헤더 글자 밑으로 지나가 둘 다 못 읽는다.
   그라데이션·블러·그림자 없이 단색 한 겹으로만 처리한다. */
.hdr::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 112px;
  pointer-events: none;
  z-index: -1;
}
.hdr[data-tone="ink"] { color: var(--on-ink) }
.hdr[data-tone="ink"]::before {
  background: linear-gradient(to bottom, #16202b 0%, #16202b 44%, rgba(22, 32, 43, .72) 68%, rgba(22, 32, 43, 0) 100%);
}
.hdr[data-tone="ink"] .brand__sub,
.hdr[data-tone="ink"] .hdr__contact { color: var(--on-ink-2) }

.hdr[data-tone="paper"]::before {
  background: linear-gradient(to bottom, #faf9f6 0%, #faf9f6 44%, rgba(250, 249, 246, .72) 68%, rgba(250, 249, 246, 0) 100%);
}
.hdr[data-tone="tint"]::before {
  background: linear-gradient(to bottom, #f2f0ec 0%, #f2f0ec 44%, rgba(242, 240, 236, .72) 68%, rgba(242, 240, 236, 0) 100%);
}
.hdr[data-tone="paper"], .hdr[data-tone="tint"] { color: var(--fg) }
.hdr[data-tone="paper"] .brand__sub, .hdr[data-tone="tint"] .brand__sub,
.hdr[data-tone="paper"] .hdr__contact, .hdr[data-tone="tint"] .hdr__contact { color: var(--fg-2) }

/* --- 섹션 인덱스 ---------------------------------------------------- */

.index {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  opacity: 0;
  transition: opacity .18s var(--ease);
}
.index[open].is-open { opacity: 1 }
.index::backdrop { background: var(--ink) }

.index__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: var(--hair) solid var(--ink-line);
}
.index__act { display: flex; align-items: center; gap: 6px; margin-left: auto }
.index__link, .index__close {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
  border: var(--hair) solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--on-ink-2);
  text-decoration: none;
}
.index__link:hover, .index__close:hover { color: var(--on-ink); border-color: currentColor }

.index__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(28px, 5vh, 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  height: calc(100dvh - var(--header-h));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.index__body::-webkit-scrollbar { width: 0; height: 0; display: none }

.ix {
  display: block;
  padding: 15px 12px 15px 0;
  border-top: var(--hair) solid var(--ink-line);
  text-decoration: none;
  color: inherit;
}
/* 그룹 경계는 굵은 선 하나로만 긋는다 — 누구인가 / 무엇을 어떻게 / 원칙과 정보 */
.ix--head { border-top: 2px solid var(--on-ink) }
.ix:hover, .ix:focus-visible { background: rgba(255, 255, 255, .06) }
.ix__en { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: var(--on-ink-3) }
.ix__ko {
  display: block;
  margin-top: 5px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.ix__ko::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: .28em;
  background: transparent;
}
.ix[aria-current] .ix__ko::before { background: var(--ax-1) }

.index__side {
  border-left: var(--hair) solid var(--ink-line);
  padding-left: clamp(28px, 3vw, 48px);
}
.index__id { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.48 }
.index__rows { margin-top: 22px; border-top: var(--hair) solid var(--ink-line) }
.index__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding-block: 11px; border-bottom: var(--hair) solid var(--ink-line); align-items: baseline }
.index__k { font-size: 12.5px; font-weight: 600; color: var(--on-ink-3) }
.index__v { font-size: 14.5px; font-weight: 600; letter-spacing: -.02em }
.index__v a { color: inherit; text-decoration: none }
.index__v a:hover { text-decoration: underline }
.index__cta { margin-top: 22px }

/* --- 버튼 — 알약이 아니라 사각이다 -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding-inline: 22px;
  border: var(--hair) solid transparent;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.btn--solid { background: var(--fg); color: #fff }
.btn--solid:hover { background: #1b3346 }
.btn--line { border-color: var(--line); color: var(--fg); background: var(--surface) }
.btn--line:hover { border-color: var(--fg-3) }
.btn--onink { border-color: rgba(255, 255, 255, .34); color: #fff }
.btn--onink:hover { background: rgba(255, 255, 255, .12) }
.btn--onink-solid { background: #fff; color: var(--ink) }
.btn--onink-solid:hover { background: #dbe6ee }

.btn__arrow { font-family: var(--mono); font-weight: 400 }

/* --- 히어로 -------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 92px);
  overflow: hidden;
}

.hero__inner { position: relative; max-width: 920px }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--on-ink-3);
}

.hero__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--ax-1);
}

.hero__title {
  margin-top: 22px;
  color: rgba(255, 255, 255, .42);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hero__title em { font-style: normal; color: var(--on-ink) }

.hero__lead {
  margin-top: 22px;
  max-width: 52ch;
  color: var(--on-ink-2);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -.02em;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px }

.hero__id {
  margin-top: 30px;
  padding-top: 18px;
  border-top: var(--hair) solid var(--ink-line);
  color: var(--on-ink-3);
  font-size: 13.5px;
  letter-spacing: -.01em;
}

/* 사업축 칩 — 표지의 알약 4개를 잇되 직각으로 */
.axes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hair);
  margin-top: clamp(38px, 4.5vw, 58px);
  background: var(--ink-line);
  border: var(--hair) solid var(--ink-line);
  position: relative;
}

.axis {
  background: var(--ink);
  padding: 22px 18px 26px;
  transition: background .2s var(--ease);
}
.axis__no::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  vertical-align: .12em;
  background: var(--c);
}

.axis:hover { background: var(--ink-raise) }
.axis__no { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--c) }
.axis__name { margin-top: 4px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.48 }
.axis__tag { margin-top: 6px; font-size: 12px; color: var(--on-ink-3); letter-spacing: -.01em }

/* --- 대비 목록: A → B --------------------------------------------- */

.vs { border-top: var(--hair) solid var(--line) }

.vs__row {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 40px);
  padding-block: clamp(22px, 2.6vw, 30px);
  border-bottom: var(--hair) solid var(--line);
  align-items: baseline;
}

.vs__pair { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap }
.vs__from { color: var(--fg-3); font-size: 15px; font-weight: 600; text-decoration: line-through; text-decoration-color: var(--line) }
.vs__arrow { font-family: var(--mono); color: var(--ax-1); font-size: 13px }
.vs__to { font-size: 20px; font-weight: 700; line-height: 1.48; letter-spacing: -.02em; color: var(--fg) }
.vs__desc { color: var(--fg-2); font-size: 15.5px; line-height: 1.6 }

/* --- 비전 / 미션 --------------------------------------------------- */

.creed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line) }
.creed__cell { background: var(--surface); padding: clamp(24px, 3vw, 38px) }
.creed__k { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--ax-1) }
.creed__cell:nth-child(2) .creed__k { color: #7fb9ff }
.creed__v { margin-top: 14px; font-size: 24px; font-weight: 700; line-height: 1.48; letter-spacing: -.02em; text-wrap: pretty }

.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(30px, 3.6vw, 46px) }
.value { padding-top: 16px; border-top: var(--hair) solid var(--fg) }
.value__k { font-size: 20px; font-weight: 700; line-height: 1.48; letter-spacing: -.02em }
.value__d { margin-top: 8px; color: var(--fg-2); font-size: 14.5px; line-height: 1.6 }

/* --- 인용 ---------------------------------------------------------- */

.pull {
  margin-bottom: clamp(30px, 3.6vw, 46px);
  padding: clamp(22px, 2.8vw, 34px) clamp(22px, 3vw, 38px);
  background: var(--surface);
  border-left: 3px solid var(--ax-1);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.pull cite { display: block; margin-top: 10px; font-size: 12.5px; font-style: normal; font-weight: 600; letter-spacing: -.01em; color: var(--fg-3) }

/* --- 번호 목록(문제) ----------------------------------------------- */

.probs { border-top: var(--hair) solid var(--line) }

.prob {
  display: grid;
  grid-template-columns: 44px minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding-block: 20px;
  border-bottom: var(--hair) solid var(--line);
  align-items: baseline;
}

.prob__no { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--fg-3) }
.prob__k { font-size: 18px; font-weight: 700; line-height: 1.48; letter-spacing: -.02em }
.prob__d { color: var(--fg-2); font-size: 15px; line-height: 1.6 }

/* --- 정책 수치 띠 --------------------------------------------------- */

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hair); margin-top: clamp(28px, 3.2vw, 40px); background: var(--line); border: var(--hair) solid var(--line) }
.fact { background: var(--surface); padding: 22px }
.fact__n { font-variant-numeric: tabular-nums; font-size: 36px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: var(--ax-1) }
.fact__l { margin-top: 4px; font-size: 14px; color: var(--fg-2) }
.facts__note { margin-top: 12px; font-size: 12.5px; color: var(--fg-3) }

/* --- 사업축 카드 ---------------------------------------------------- */

.biz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line) }

.biz__card {
  background: var(--surface);
  padding: clamp(24px, 3vw, 34px);
  transition: background .2s var(--ease);
}
.biz__no::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: .1em;
  background: var(--c);
}

.biz__card:hover { background: #fbfdfe }
.biz__no { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--c) }
.biz__k { margin-top: 8px; font-size: 20px; font-weight: 700; line-height: 1.48; letter-spacing: -.02em }
.biz__d { margin-top: 12px; color: var(--fg-2); font-size: 15.5px; line-height: 1.6 }
.biz__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px }
.biz__tag { font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--fg-2); border: var(--hair) solid var(--line); border-radius: 2px; padding: 4px 8px }

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding: 18px 20px;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.flow__k { font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--fg-3); margin-right: 4px }
.flow__sep { font-family: var(--mono); color: var(--ax-1); font-weight: 400 }

/* --- 6단계 --------------------------------------------------------- */

.chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line); border-top: 2px solid var(--ax-1) }

.step { background: var(--surface); padding: 22px 18px 26px }
.step__no { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--ax-1) }
.step__en { margin-top: 8px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--fg-3) }
.step__k { margin-top: 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.48 }

.loop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(18px, 3vw, 44px); margin-top: clamp(30px, 3.6vw, 46px); padding-top: clamp(26px, 3vw, 36px); border-top: var(--hair) solid var(--line) }
.loop__k { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.48 }
.loop__d { color: var(--fg-2); font-size: 15.5px; line-height: 1.6 }

/* --- 차별화 7 ------------------------------------------------------ */

.edges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line) }
.edge { background: var(--surface); padding: 22px clamp(20px, 2.4vw, 28px) }
.edge:last-child { grid-column: 1 / -1 }
.edge__k { display: flex; align-items: baseline; gap: 9px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em }
.edge__no { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--fg-3); flex: none }
.edge__d { margin-top: 7px; padding-left: 26px; color: var(--fg-2); font-size: 14.5px; line-height: 1.6 }

/* --- 원칙 ---------------------------------------------------------- */

.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px) }
.rule { padding-top: 16px; border-top: var(--hair) solid var(--line) }
.rule__k { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em }
.rule__d { margin-top: 8px; color: var(--fg-2); font-size: 14.5px; line-height: 1.6 }

.warn {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 3.2vw, 40px);
  padding: 16px 20px;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-left: 2px solid var(--ax-4);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* --- 로드맵 -------------------------------------------------------- */

.road { border-top: var(--hair) solid var(--line) }

.road__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(12px, 2.2vw, 32px);
  padding-block: clamp(20px, 2.4vw, 28px);
  border-bottom: var(--hair) solid var(--line);
  align-items: baseline;
}

.road__t { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--c) }
.road__k { font-size: 20px; font-weight: 700; line-height: 1.48; letter-spacing: -.02em }
.road__d { color: var(--fg-2); font-size: 15px; line-height: 1.6 }

.horizon {
  margin-top: clamp(28px, 3.2vw, 40px);
  padding: clamp(26px, 3vw, 36px);
  background: var(--surface);
  border: var(--hair) solid var(--line);
}

.horizon__k { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--ax-1) }
.horizon__v { margin-top: 12px; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; text-wrap: pretty }
.horizon__d { margin-top: 12px; color: var(--fg-2); font-size: 15px }

.note { margin-top: 16px; font-size: 13px; color: var(--fg-3) }

/* --- 회사 정보 ----------------------------------------------------- */

.info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(26px, 4vw, 60px); align-items: start }
.info__rows { border-top: var(--hair) solid var(--line) }
.info__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding-block: 13px; border-bottom: var(--hair) solid var(--line); align-items: baseline }
.info__k { font-size: 13.5px; font-weight: 600; letter-spacing: -.02em; color: var(--fg-3) }
.info__v { font-size: 15.5px; font-weight: 600; letter-spacing: -.02em }
.info__v a { color: var(--primary); text-decoration: none }
.info__v a:hover { text-decoration: underline }
.info__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }

/* --- 푸터 ---------------------------------------------------------- */

.ftr { border-top: var(--hair) solid var(--line); color: var(--fg-3); padding-block: 40px; font-size: 13.5px }
.ftr__inner { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center }
.ftr__brand { font-weight: 700; color: var(--fg); letter-spacing: -.02em }
.ftr__links { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto }
.ftr__links a { text-decoration: none }
.ftr__links a:hover { color: var(--fg) }
.ftr__legal { width: 100%; padding-top: 18px; border-top: var(--hair) solid var(--line); font-size: 12.5px; line-height: 1.8 }

/* --- 등장 ---------------------------------------------------------- */

.rise {
  opacity: .28;
  filter: blur(7px);
  transition: opacity .8s var(--ease), filter .8s var(--ease);
}
.rise.is-in { opacity: 1; filter: blur(0) }

/* --- 하이라이트 스윕 -------------------------------------------------
   문단이 들어온 뒤 0.35초 늦게, 핵심 문구 뒤로 색이 좌에서 우로 쓸고 간다.
   기본색은 플랫폼 사이트의 --dv-primary-soft. 축 색을 쓰려면 --hl로 넘긴다. */

.rise { position: relative; z-index: 0 }

.hl { position: relative; z-index: 0; display: inline; color: inherit }
.hl::before {
  content: "";
  position: absolute;
  left: -.18em;
  right: -.18em;
  top: .06em;
  bottom: .04em;
  z-index: -1;
  background: var(--hl, rgba(44, 85, 224, .15));   /* 브랜드 파랑을 옅게 — 마커처럼 */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ease) .35s;
}
.is-in .hl::before { transform: scaleX(1) }

}

/* --- 반응형 -------------------------------------------------------- */

@media (max-width: 1080px) {
  .chain { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) }
  .head { grid-template-columns: minmax(0, 1fr); gap: 16px }
  .head__label { padding-top: 0; border-top: none; border-left: 2px solid var(--fg); padding-left: 12px }
  .band--ink .head__label { border-left-color: var(--on-ink) }
  .info { grid-template-columns: minmax(0, 1fr) }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)) }

  /* 활자는 vw로 흘리지 않고 단계마다 다시 선언한다 — 토스가 쓰는 방식 */
  .hero__title { font-size: 44px }
  .head__title { font-size: 32px }
  .fact__n { font-size: 30px }
  .horizon__v { font-size: 28px }
  .creed__v, .pull, .loop__k { font-size: 22px }
  .ix__ko { font-size: 26px }
}

@media (max-width: 720px) {
  :root { --gutter: 18px }
  .index__body { grid-template-columns: minmax(0, 1fr); row-gap: 34px }
  .index__side { border-left: none; border-top: var(--hair) solid var(--ink-line); padding-left: 0; padding-top: 28px }
  .ix { padding-block: 13px }
  .ix__ko { font-size: 21px }
  .hero__title { font-size: 31px }
  .head__title { font-size: 28px }
  .head__lead, .hero__lead { font-size: 16px }
  .fact__n { font-size: 28px }
  .horizon__v { font-size: 24px }
  .creed__v, .pull, .loop__k { font-size: 20px }
  .biz__k, .vs__to, .road__k, .value__k { font-size: 19px }
  .axes { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .creed, .biz, .edges { grid-template-columns: minmax(0, 1fr) }
  .facts { grid-template-columns: minmax(0, 1fr) }
  .vs__row, .prob, .road__row { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .prob__no { display: none }
  .loop { grid-template-columns: minmax(0, 1fr) }
  .edge__d { padding-left: 0 }
  .info__row { grid-template-columns: minmax(0, 1fr); gap: 2px }
}

@media (max-width: 520px) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rules { grid-template-columns: minmax(0, 1fr) }
  .axes { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 480px) {
  /* 브랜드 · 문의 · 메뉴만 남긴다 */
  .index__row { grid-template-columns: minmax(0, 1fr); gap: 2px }
}

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

@media print {
  .hdr, .index { display: none }
  body { background: #fff }
}