/* components/illustrations/illust.css — 설명형 애니메이션 일러스트(청사진 라인 → 완성 시 오렌지).
   규칙(ILLUSTRATION-PLAN): 부품 조합, 선이 그려지고 완성되면 오렌지 강조, 1회 재생, 30KB↓,
   JS 없음/ reduced-motion → 완성 정지 그림(기본 상태가 이미 완성). 색은 site.css 토큰 사용. */

.illust {
  /* 모션 토큰 (ILLUSTRATION-PLAN §1 → 여기서 확정) */
  --il-line:      var(--blue, #A9D4F5);
  --il-line-2:    var(--blue-deep, #4E7EA6);
  --il-accent:    var(--accent, #FF5A1F);
  --il-stroke:    1.75;
  --il-stroke-bold: 2.5;
  --il-draw-dur:  900ms;
  --il-fill-dur:  360ms;
  --il-ease:      cubic-bezier(.22, 1, .36, 1);
  --il-stagger:   210ms;

  position: relative;
  margin: 0;
  width: 100%;
}
.illust svg, .il-static svg { display: block; width: 100%; height: auto; overflow: visible; }
.il-static { --il-line: var(--blue,#A9D4F5); --il-line-2: var(--blue-deep,#4E7EA6); --il-accent: var(--accent,#FF5A1F); --il-stroke:1.75; --il-stroke-bold:2.5; margin:0; }
.illust figcaption, .illust__cap {
  margin-top: 12px; text-align: center; color: var(--paper-dim, #93A6BA);
  font-size: 13.5px; line-height: 1.6; word-break: keep-all;
}

/* ── 부품 공통 선/면 스타일 (애니메이션 .illust + 정적 .il-static 공용) ── */
.illust .d, .il-static .d { fill: none; stroke: var(--il-line); stroke-width: var(--il-stroke);
  stroke-linecap: round; stroke-linejoin: round; }
.illust .d.dim, .il-static .d.dim { stroke: var(--il-line-2); opacity: .8; }
.illust .ink, .il-static .ink { fill: var(--il-line); opacity: .16; }
.illust .acc, .il-static .acc { fill: var(--il-accent); }
.illust .acc-line, .il-static .acc-line { fill: none; stroke: var(--il-accent); stroke-width: var(--il-stroke-bold);
  stroke-linecap: round; stroke-linejoin: round; }
.illust text.il-label, .il-static text.il-label { fill: var(--paper, #E9F1F8); font-family: inherit; font-weight: 600; }
.illust text.il-sub, .il-static text.il-sub { fill: var(--paper-dim, #93A6BA); font-family: inherit; }

/* pop 대상(강조 요소) 변형 기준점 */
.illust .acc, .illust .acc-line, .illust .pop { transform-box: fill-box; transform-origin: center; }

/* ── 기본 상태 = 완성(정지). JS가 .anim 을 붙였을 때만 리셋 후 재생 ── */
.illust.anim .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.illust.anim .acc, .illust.anim .acc-line, .illust.anim .pop, .illust.anim text.il-label, .illust.anim text.il-sub { opacity: 0; }

/* step 단위로 순차 재생(--i: 단계 인덱스, .il-step 에서 상속) */
.illust.anim.is-playing .il-step .d {
  animation: il-draw var(--il-draw-dur) var(--il-ease) forwards;
  animation-delay: calc(var(--i, 0) * var(--il-stagger));
}
.illust.anim.is-playing .il-step .acc,
.illust.anim.is-playing .il-step .acc-line,
.illust.anim.is-playing .il-step .pop,
.illust.anim.is-playing .il-step text.il-label,
.illust.anim.is-playing .il-step text.il-sub {
  animation: il-pop var(--il-fill-dur) var(--il-ease) forwards;
  animation-delay: calc((var(--i, 0) + 0.55) * var(--il-stagger));
}
@keyframes il-draw { to { stroke-dashoffset: 0; } }
@keyframes il-pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }

/* ── 기획 → 사업영역 신호 흐름(WHAT WE DO) — 반응형, 각 분야 미니 장면 ── */
.il-flow { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center; padding: 8px 2px; }
.il-flow__hub { text-align: center; }
.il-flow__hub svg { width: 104px; height: 104px; display: block; margin: 0 auto; }
.il-flow__hub b { display: block; margin-top: 8px; font-size: 19px; font-weight: 800; color: var(--paper, #E9F1F8); }
.il-flow__hub small { color: var(--paper-dim, #93A6BA); font-size: 11px; }
.il-flow__branches { display: flex; flex-direction: column; gap: 14px; }
.il-flow__branch { display: grid; grid-template-columns: 70px 138px 1fr; align-items: center; gap: 16px; }
.il-flow__wire { position: relative; height: 3px; border-radius: 2px; background: rgba(150,195,230,.16); overflow: hidden; }
.il-flow__wire::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--il-accent) 0 5px, transparent 5px 16px);
  animation: il-wire .9s linear infinite; }
@keyframes il-wire { to { background-position: 16px 0; } }
.il-flow__scene svg { width: 100%; height: auto; display: block; }
.il-flow__cap b { display: block; color: var(--paper, #E9F1F8); font-size: 14px; font-weight: 700; word-break: keep-all; }
.il-flow__cap small { color: var(--paper-dim, #93A6BA); font-size: 12px; }
@media (max-width: 920px) {
  .il-flow { grid-template-columns: 1fr; gap: 16px; }
  .il-flow__branch { grid-template-columns: 108px 1fr; gap: 14px; }
  .il-flow__wire { display: none; }
}
@media (max-width: 400px) { .il-flow__branch { grid-template-columns: 92px 1fr; } }
/* 허브·브랜치 등장(fade-rise) */
.illust.anim .il-flow__branch, .illust.anim .il-flow__hub { opacity: 0; }
.illust.anim.is-playing .il-flow__branch, .illust.anim.is-playing .il-flow__hub {
  animation: il-rise var(--il-fill-dur) var(--il-ease) forwards; animation-delay: calc(var(--i,0) * var(--il-stagger)); }
@keyframes il-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 소상공인: 가게가 바뀌는 4단계(휴대폰 4개, 모바일 2×2) ── */
.il-biz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; padding: 6px 2px; }
.il-biz__step { position: relative; text-align: center; }
.il-biz__phone svg { width: 100%; max-width: 128px; height: auto; display: block; margin: 0 auto; }
.il-biz__cap { margin-top: 10px; }
.il-biz__cap b { display: block; color: var(--paper, #E9F1F8); font-size: 13.5px; font-weight: 700; word-break: keep-all; }
.il-biz__cap small { color: var(--paper-dim, #93A6BA); font-size: 11.5px; }
/* 단계 사이 화살표(데스크톱) — 청사진 라인 색 chevron */
.il-biz__step:not(:last-child)::after {
  content: ""; position: absolute; top: 30%; right: -9px; width: 12px; height: 12px;
  border-top: 2px solid var(--il-line-2); border-right: 2px solid var(--il-line-2);
  transform: rotate(45deg); opacity: .7;
}
.il-biz .il-toast text { font-weight: 700; }
@media (max-width: 640px) {
  .il-biz { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .il-biz__phone svg { max-width: 120px; }
  .il-biz__step:not(:last-child)::after { display: none; }
}

/* ── 전/후 비교 슬라이더 ── */
.il-slider { position: relative; width: 100%; max-width: 520px; margin: 0 auto; touch-action: none; user-select: none; }
.il-slider__base, .il-slider__top { display: block; width: 100%; }
.il-slider__top { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.il-slider__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--il-accent);
  transform: translateX(-1px); }
.il-slider__grip { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%);
  border-radius: 999px; background: var(--il-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255,90,31,.4); cursor: ew-resize; }
.il-slider__lab { position: absolute; top: 10px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(7,9,13,.6); color: var(--paper, #E9F1F8); }
.il-slider__lab--l { left: 10px; } .il-slider__lab--r { right: 10px; color: var(--il-accent); }

@media (prefers-reduced-motion: reduce) {
  .illust .d { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .illust .acc, .illust .acc-line, .illust .pop, .illust text, .illust .il-flow__branch, .illust .il-flow__hub { opacity: 1 !important; animation: none !important; transform: none !important; }
  .il-flow__wire::after { animation: none !important; }
}