/* IR 장 — site.css 위에 얹는다. 장마다 화면 하나, 왼쪽 위 번호, 위쪽 진행 막대. */
body.ir .top { background: rgba(246,239,228,.7); }
.ir-bar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 30; pointer-events: none; }
.ir-bar i { display: block; height: 100%; width: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); }
.ir-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; }
.ir-idx b { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.ir-main .sl { min-height: 100vh; display: flex; align-items: center; padding: 96px 0; border-top: 1px solid var(--line); }
.ir-main .sl .wrap { width: 100%; }
.ir-main .k { font-size: 13px; font-weight: 700; color: var(--green); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; }
.ir-main .k::before { content: attr(data-n); }
.ir-main .sl h2 { max-width: 820px; }
.ir-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 로 민다) */
.ir-main .then { margin-top: 56px; }

/* 해법 — 셋이 오른쪽에서 들어온다 */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0 24px; }
.tri { text-align: center; padding: 22px 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.tri span { color: var(--c); font-weight: 600; }
.tri img { width: 54%; margin: 0 auto 8px; }
.tri b { display: block; font-size: 18px; }
.tri span { font-size: 13px; color: var(--muted); }
.three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.three li { padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 15px; line-height: 23px; color: var(--muted); }
.three li b { display: block; color: var(--ink); font-size: 16px; 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); }

/* 시장 — 동그라미 셋 */
.rings { position: relative; height: 380px; margin-top: 40px; }
.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; }
.ir-main .chips { margin-top: 32px; }

/* 사업 모델 */
.unit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.u { padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.u b { display: block; font-size: 13px; color: var(--green); margin-bottom: 6px; }
.u span { font-size: 15px; line-height: 23px; }

/* 지금까지 — 세로 타임라인 */
.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(5, 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: 14px; line-height: 22px; 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; }

/* 재무 — 막대 셋 */
.fin { display: flex; align-items: flex-end; gap: 40px; height: 340px; margin: 40px 0 12px; padding: 0 8px; border-bottom: 2px solid var(--line-2); max-width: 720px; }
.fb { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.fb b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 8px; opacity: 0; }
.fb i { display: block; width: 100%; max-width: 140px; height: calc(var(--h) * 100% - 90px); background: var(--green); border-radius: 10px 10px 0 0; transform-origin: bottom; transform: scaleY(0); }
.fb span { font-weight: 700; margin-top: 10px; }
.fb 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, .unit, .rm { grid-template-columns: repeat(2, 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) {
  .ir-main .sl { min-height: 0; padding: 72px 0; }
  .ir-idx { display: none; }
  .trio, .three, .eng-l, .unit, .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; }
  .fin { gap: 16px; height: 260px; }
  .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); }
  .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 .ir-main .sl, body.static .pin, body.static .pinwrap { min-height: 0; }
body.static .track { flex-wrap: wrap; }