/* =============================================
   DIAGRAM COMMON: 재사용 다이어그램 엔진 공통 스타일
   좌표 시스템: 0~1 비율 + 중심점(center) 기준
   ============================================= */

/* ── Section / Scene ── */
.diag-sec{background:#F9FAFB;padding:0 0 88px}
.diag-sec-head{text-align:center;padding:0 24px 52px}
.diag-sec-title{font-size:1.35rem;font-weight:700;color:#0B1629;margin-bottom:8px}
.diag-sec-sub{font-size:.875rem;color:#4B5563;line-height:1.65;max-width:560px;margin:0 auto}

/* 섹션 제목 앞 번호 접두사 (title 요소에 data-diagram-no="01" 지정) */
.diag-sec-title[data-diagram-no]::before{
  content:attr(data-diagram-no);
  display:inline-block;
  margin-right:10px;
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:800;
  color:#6366F1;
  letter-spacing:.02em;
}

.diag-scene{
  position:relative;
  width:100%;
  max-width:960px;
  height:520px;
  margin:0 auto;
  isolation:isolate;
}

/* ── SVG overlay ── */
.diag-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.diag-svg .edge-path{
  fill:none;
  stroke:#9CA3AF;
  stroke-width:1.5;
}
.diag-svg .edge-path.dashed{
  stroke-dasharray:4 4;
}
/* hidden: 선·화살표 없이 파티클만 흐르는 가상 엣지 */
.diag-svg .edge-path.edge-hidden{
  stroke:transparent !important;
}
/* faded: 평상시 연하게 보이는 엣지 (보조적/가상 흐름 등) */
.diag-svg .edge-path.edge-faded{
  opacity:0.3;
}
.diag-svg .edge-hit{
  fill:none;
  stroke:transparent;
  stroke-width:14;
}
.diag-svg .particle-dot{
  filter:url(#diag-glow);
}
.diag-svg .arrow-label{
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,'Noto Sans KR',sans-serif;
  font-size:11px;
  font-weight:600;
}

/* ── Node (DOM div, center-anchored) ── */
.dnode{
  position:absolute;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  z-index:10;
  transition:filter .35s ease, box-shadow .35s ease, border-color .35s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  box-sizing:border-box;
}
.dnode-label{
  text-align:center;
  line-height:1.25;
  pointer-events:none;
}
.dnode-title{
  font-size:.82rem;
  font-weight:700;
  color:#1F2937;
  letter-spacing:.01em;
}
.dnode-sub{
  display:block;
  font-size:.7rem;
  font-weight:500;
  color:#6B7280;
  margin-top:2px;
}

/* shape 에 얹히는 로고 이미지: 기본 높이 22px, 상황별로 config 에서 logoHeight 로 재정의 */
.dnode-logo{
  display:block;
  height:22px;
  width:auto;
  max-width:88%;
  margin:0 auto;
  object-fit:contain;
}
.dnode.shape-group .dnode-logo{
  height:18px;
}
.dnode-logo + .dnode-sub{
  margin-top:6px;
}

/* shape: ellipse (circle) */
.dnode.shape-ellipse{
  border:1.5px solid #E5E7EB;
  border-radius:50%;
}

/* shape: rect (rounded rectangle) */
.dnode.shape-rect{
  border:1.5px solid #E5E7EB;
  border-radius:10px;
  padding:10px 14px;
}

/* shape: image (SVG 아이콘만 표시: 배경/테두리 없음) */
.dnode.shape-image{
  background:transparent;
  border:none;
  box-shadow:none;
  z-index:5;            /* 출발지/도착지 노드(10) 뒤로 지나가도록 */
}
.dnode.shape-image svg,
.dnode.shape-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

/* shape: group (다른 노드를 감싸는 배경 박스): 엣지·노드 모두 뒤에 깔림 */
.dnode.shape-group{
  background:#E6F1F7;
  border:1.5px solid #B8D0E0;
  border-radius:14px;
  box-shadow:none;
  z-index:0;
}

/* style: ieum: 요소 IEUM 노드 배경(파스텔 하늘색) + 한 단계 진한 테두리 */
.dnode.style-ieum{
  background:#E6F1F7;
  border-color:#B8D0E0;
}
.dnode.shape-group .dnode-label{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  line-height:1.2;
}
.dnode.shape-group .dnode-title{
  font-size:.85rem;
  color:#6B7280;
  font-weight:700;
}

/* shape: token (small filled circle, e.g. KSC / ₩ / $) */
.dnode.shape-token{
  background:#A8A8FF;
  color:#fff;
  border:none;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(168,168,255,.45);
  z-index:5;            /* 출발지/도착지 노드(10) 뒤로 지나가도록 */
}
.dnode.shape-token .dnode-title{
  color:#fff;
  font-size:.72rem;
}
.dnode.shape-token .dnode-sub{
  color:rgba(255,255,255,.75);
  font-size:.62rem;
}
/* style: big-symbol: 단일 기호(₩, $, ⇄ 등) 가독성 확보 */
.dnode.shape-token.style-big-symbol .dnode-title{
  font-size:1rem;
  line-height:1;
}

/* Active state (for animation) */
.dnode.is-active{
  border-color:#6366F1;
  box-shadow:0 0 0 3px rgba(99,102,241,.15), 0 4px 16px rgba(99,102,241,.25);
}

/* 도착 순간 임팩트 펄스: 토큰이 도착지에 닿을 때 일시 적용.
 * duration 은 엔진이 inline style 로 stepDelay 에 맞춰 주입 (없으면 700ms 기본) */
.dnode.is-arrived{
  animation: arrive-pulse 700ms cubic-bezier(.4,0,.2,1);
}
@keyframes arrive-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.55), 0 4px 16px rgba(99,102,241,.25); }
  35%  { box-shadow: 0 0 0 7px rgba(99,102,241,.18), 0 0 14px rgba(99,102,241,.55); transform: translate(-50%,-50%) scale(1.08); }
  70%  { box-shadow: 0 0 0 11px rgba(99,102,241,0),  0 0 8px rgba(99,102,241,.25); transform: translate(-50%,-50%) scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0),     0 4px 16px rgba(99,102,241,.25); transform: translate(-50%,-50%) scale(1); }
}

/* 통화 변환(conversion) 펄스: tok_swap 같은 corner 토큰에 일시 적용 */
.dnode.is-converting{
  animation: convert-pulse 700ms cubic-bezier(.4,0,.2,1);
}
@keyframes convert-pulse{
  0%   { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 2px 6px rgba(168,168,255,.45); }
  35%  { transform: translate(-50%,-50%) scale(1.45); box-shadow: 0 0 0 8px rgba(99,102,241,.18), 0 0 24px rgba(99,102,241,.55); }
  70%  { transform: translate(-50%,-50%) scale(1.15); box-shadow: 0 0 0 4px rgba(99,102,241,.10), 0 0 14px rgba(99,102,241,.30); }
  100% { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 2px 6px rgba(168,168,255,.45); }
}

/* ── Active edge (during animation) ── */
.diag-svg .edge-path.is-active{
  stroke:#6366F1;
  stroke-width:2;
}

/* ── Responsive ── */
@media (max-width:720px){
  /* config.mobile.sceneHeight 가 있으면 엔진이 inline 으로 덮어씀 */
  .diag-scene{height:640px}
  .dnode-title{font-size:.78rem}
  .dnode-sub{font-size:.66rem}
  .dnode.shape-rect{padding:6px 10px}
  .diag-sec-title{font-size:1.15rem}
  .diag-sec-sub{font-size:.82rem; padding:0 16px}
  .diag-svg .arrow-label{font-size:10.5px}
}
@media (max-width:420px){
  .diag-sec{padding:0 0 56px}
  .diag-sec-head{padding:0 16px 36px}
}