/* 사업 소개 장 — site.css 위에 얹는다. 장마다 화면 하나, 왼쪽 위 번호, 위쪽 진행 막대. */
body.about .top { background: rgba(246,239,228,.7); }
.about-bar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 30; pointer-events: none; }
.about-bar i { display: block; height: 100%; width: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); }
.about-idx { position: fixed; left: 24px; bottom: 22px; z-index: 30; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; pointer-events: none; }
.about-idx b { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.about-main .sl { min-height: 100vh; display: flex; align-items: center; padding: 96px 0; border-top: 1px solid var(--line); }
.about-main .sl .wrap { width: 100%; }
.about-main .k { font-size: 13px; font-weight: 700; color: var(--green); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; }
.about-main .k::before { content: attr(data-n); }
.about-main .sl h2 { max-width: 820px; }
.about-main .lead { max-width: 720px; }

/* 표지 */
.cover { padding-top: 40px; overflow: hidden; }
.cover .wrap { position: relative; }
.kicker { display: flex; gap: 10px; margin-bottom: 26px; font-size: 13px; font-weight: 700; }
.kicker span { padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--ink); }
.kicker span:nth-child(2) { background: var(--ink); color: var(--paper); }
.cover h1 { font-size: clamp(44px, 8vw, 104px); }
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split .w > span { display: inline-block; transform: translateY(110%); }
.cover .lead { margin-top: 26px; font-size: clamp(18px, 2.2vw, 22px); }
.cover-img { width: min(100%, 980px); margin: 12px auto 0; opacity: 0; }
.cue { position: absolute; right: 0; bottom: -40px; font-size: 13px; color: var(--muted); padding-right: 22px; }
.cue::after { content: ''; position: absolute; right: 4px; top: 6px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); animation: cue 1.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(5px) rotate(45deg); } }

/* 한 줄 — 낱말이 차례로 켜진다 */
.big { font-size: clamp(34px, 5.6vw, 72px); max-width: 980px; }
.words .w { opacity: .18; transition: opacity .4s; }
.words .w.on { opacity: 1; }

/* 문제 — 예전/지금 (site.css .then 을 스크럽 대신 GSAP 가 --p 로 민다) */
.about-main .then { margin-top: 56px; }

/* 큰 숫자 줄 — site.css .figs 위에 이 장의 여백만 */
.about-main .figs { margin-top: 36px; }
.about-main .fig span { max-width: 260px; }

/* 셋 목록 — 상자 없이 줄로 */
.three { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.three li { padding: 18px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 23px; color: var(--muted); }
.three li b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }

/* 왜 지금 — 예전 → 지금 */
.shift { display: grid; gap: 10px; margin-top: 36px; }
.shift .row { display: grid; grid-template-columns: 140px 1fr 60px 1fr; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.shift .row span { font-weight: 700; }
.shift .from { font-style: normal; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(25,25,25,.35); }
.shift .to { font-style: normal; font-weight: 700; color: var(--green); }
.shift i { height: 2px; background: var(--line-2); position: relative; }
.shift i::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: rotate(45deg); }

/* 시장 — 왼쪽 숫자 셋 세로, 오른쪽 동그라미 */
.mkt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; margin-top: 8px; }
.mkt .figs.three { grid-template-columns: 1fr; gap: 0; border-top: 0; }
.mkt .fig { border-top: 1px solid var(--line); padding: 18px 0; }
.mkt .fig b { font-size: clamp(40px, 5vw, 64px); min-width: 2.2em; }
.mkt .fig i { min-width: 2.6em; }
.mkt .fig span { flex: 1; }
.mkt .figs .small { margin-top: 8px; }
.rings { position: relative; height: 380px; margin: 0; }
.ring { position: absolute; left: 50%; bottom: 0; translate: -50% 0; transform: scale(0); transform-origin: 50% 100%; border-radius: 50%; border: 2px solid var(--green); background: rgba(31,107,69,.06); display: flex; justify-content: center; align-items: flex-start; padding-top: 14px; font-size: 14px; font-weight: 700; color: var(--green); }
.ring.r1 { width: 380px; height: 380px; } .ring.r2 { width: 240px; height: 240px; background: rgba(31,107,69,.10); } .ring.r3 { width: 110px; height: 110px; background: var(--green); color: #fff; align-items: center; padding: 0; }

/* 제품 — 가로로 흐른다(핀) */
.pinwrap { display: block; padding: 0; min-height: 100vh; }
.pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 96px 0; }
.track { display: flex; gap: 18px; padding: 32px var(--gut) 0 max(var(--gut), calc((100vw - var(--col)) / 2)); will-change: transform; }
.track .zc { flex: 0 0 300px; }

/* 엔진 — 선이 그려지고 마디가 켜진다 */
.eng { margin-top: 36px; }
.eng-svg { width: 100%; max-width: 900px; height: auto; display: block; margin: 0 auto 24px; overflow: visible; }
.eng-svg .rail { stroke: var(--line-2); stroke-width: 3; fill: none; }
.eng-svg .draw { stroke: var(--green); stroke-width: 3; fill: none; stroke-dasharray: 780; stroke-dashoffset: 780; }
.eng-svg .node circle { fill: var(--card); stroke: var(--line-2); stroke-width: 3; transition: fill .3s, stroke .3s; }
.eng-svg .node text { font-size: 14px; font-weight: 700; text-anchor: middle; fill: var(--ink); font-family: inherit; }
.eng-svg .node.on circle { fill: var(--green); stroke: var(--green); }
.eng-svg .node.on text { fill: #fff; }
.eng-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.eng-l li { font-size: 14px; line-height: 21px; color: var(--muted); padding: 0 4px; }
.eng-l li b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.about-main .chips { margin-top: 32px; }


/* 지금까지 — 세로 타임라인 */
.tl { list-style: none; margin: 36px 0 0; padding: 0; position: relative; }
.tl::before { content: ''; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl li { display: grid; grid-template-columns: 100px 1fr; gap: 36px; padding: 10px 0; position: relative; }
.tl li::before { content: ''; position: absolute; left: 113px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--green); }
.tl time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); font-size: 15px; text-align: right; padding-top: 4px; }
.tl p { margin: 0; padding: 4px 0 0 20px; }

/* 경쟁 표 */
.cmp { width: 100%; border-collapse: collapse; margin-top: 32px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cmp th, .cmp td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: center; font-size: 15px; }
.cmp thead th { border-top: 0; font-size: 13px; color: var(--muted); background: var(--paper-2); }
.cmp thead th:last-child { color: var(--green); }
.cmp tbody th { text-align: left; font-weight: 600; }
.cmp td:last-child { background: rgba(31,107,69,.06); }
.cmp td span { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; opacity: 0; transform: scale(.6); }
.cmp .ok { background: var(--green-soft); color: var(--green); } .cmp .no { background: rgba(220,70,70,.10); color: #b3261e; } .cmp .half { background: rgba(255,198,41,.3); color: #7a4a2a; } .cmp .na { color: var(--faint); }

/* 로드맵 */
.rm { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.rm::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line); }
.rm::after { content: ''; position: absolute; left: 0; top: 9px; height: 2px; width: 0; background: var(--green); }
.rm.on::after { width: 100%; transition: width 1.6s var(--ease); }
.rm li { padding: 30px 14px 0 0; position: relative; }
.rm li::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 3px solid var(--line-2); }
.rm li.done::before { background: var(--green); border-color: var(--green); }
.rm li.now::before { background: var(--cheetah); border-color: var(--cheetah); box-shadow: 0 0 0 5px rgba(255,198,41,.3); }
.rm time { display: block; font-weight: 800; font-size: 18px; letter-spacing: -.02em; margin-bottom: 6px; }
.rm p { margin: 0; font-size: 13.5px; line-height: 21px; color: var(--muted); }

/* 팀 */
.after { max-width: 62ch; margin: 28px 0 0; color: var(--muted); }
.team { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.team .three { grid-template-columns: 1fr; margin-top: 24px; }

/* 재무 — J커브. 선은 SVG 비율, 점·글자는 HTML */
.jc { max-width: 760px; margin: 40px 0 28px; }
.jc-plot { position: relative; height: 320px; border-bottom: 2px solid var(--line-2); }
.jc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jl { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
      stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ja { fill: var(--green); opacity: 0; }
.jd { position: absolute; left: var(--x); bottom: var(--y); translate: -50% 50%; }
.jd i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 3px solid var(--green); transform: scale(0); }
.jd b { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; white-space: nowrap; font-size: 15px; font-weight: 800; color: var(--green); opacity: 0; }
.jd.on i { width: 16px; height: 16px; background: var(--green); }
.jd.on b { font-size: 20px; }
.jx { position: absolute; left: var(--x); bottom: var(--y); translate: -100% 0; margin: 0 6px 34px 0; opacity: 0; }
.jx span { display: inline-block; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; white-space: nowrap; }
.jc-axis { position: relative; height: 46px; margin-top: 10px; }
.jc-axis span { position: absolute; left: var(--x); translate: -50% 0; text-align: center; line-height: 1.35; white-space: nowrap; }
.jc-axis span:first-child { translate: 0 0; text-align: left; }
.jc-axis span:last-child { translate: -100% 0; text-align: right; }
.jc-axis b { display: block; font-weight: 700; }
.jc-axis small { color: var(--muted); font-size: 13px; }

/* 마지막 */
.last { background: var(--ink); color: var(--paper); border-top: 0; }
.last h2 { color: #fff; } .last .lead { color: rgba(246,239,228,.72); } .last .k { color: var(--cheetah); }
.last .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.last .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(246,239,228,.4); }
.last-img { width: min(100%, 720px); margin: 40px 0 0; }

@media (max-width: 960px) {
  .three, .eng-l, .rm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt { grid-template-columns: 1fr; }
  .rm::before, .rm::after { display: none; }
  .rm li::before { display: none; } .rm li { padding-top: 0; }
  .team { grid-template-columns: 1fr; }
  .eng-svg { display: none; }
}
@media (max-width: 640px) {
  .about-main .sl { min-height: 0; padding: 72px 0; }
  .about-idx { display: none; }
  .three, .eng-l, .rm { grid-template-columns: 1fr; }
  .shift .row { grid-template-columns: 1fr; gap: 6px; } .shift i { display: none; }
  .rings { height: 300px; } .ring.r1 { width: 300px; height: 300px; } .ring.r2 { width: 190px; height: 190px; } .ring.r3 { width: 90px; height: 90px; }
  .tl::before { left: 6px; } .tl li { grid-template-columns: 1fr; gap: 0; padding-left: 26px; } .tl li::before { left: 1px; } .tl time { text-align: left; }
  .jc-plot { height: 240px; } .jd b { font-size: 13px; } .jd.on b { font-size: 16px; } .jx span { font-size: 12.5px; padding: 6px 10px; } .jc-axis small { font-size: 12px; }
  .track .zc { flex-basis: 260px; }
  .cmp { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .split .w > span { transform: none; } .cover-img { opacity: 1; } .words .w { opacity: 1; } .ring { transform: scale(1); }
  .jl { stroke-dashoffset: 0; } .jd i { transform: scale(1); } .jd b, .jx { opacity: 1; } .ja { opacity: .07; }
  .eng-svg .draw { stroke-dashoffset: 0; } .cmp td span { opacity: 1; transform: none; } .fb i { transform: none; } .fb b { opacity: 1; } .cue::after { animation: none; }
}

/* 정지 모드(?static·라이브러리 없음·reduce) — 장 높이를 풀어 그냥 읽히게 */
body.static .about-main .sl, body.static .pin, body.static .pinwrap { min-height: 0; }
body.static .track { flex-wrap: wrap; padding-right: max(var(--gut), calc((100vw - var(--col)) / 2)); }
body.static .track .zc { flex: 1 1 200px; }