/* =========================================================
   Tabion AgentWorks 제품 페이지 — AgentWorks 전용 도식
   · 페이지 틀과 카드·도식 스타일은 Tabion Yurika와 공통 (style.css 슬라이드 틀 + yurika.css의 .yk 컴포넌트)
   · 여기에는 AgentWorks에만 있는 SVG 애니메이션 도식만 둔다
   · 색: 제품 포인트 청록(var(--blue)) · 연청록 #8fa5bd · 오렌지 #ff5a1f
   ========================================================= */

/* 제품 포인트 색 — Tabion Yurika(네이비)와 구분되는 밝은 청록 #22B8C7.
   강조 글자·아이콘·도식·표시줄 제품명에 쓰이고, 사이트 전체 톤은 그대로 둔다 */
.yk.aw {
  --yk-accent: #22B8C7;
  --blue: #22B8C7; --blue-deep: #137f8a; --blue-mid: #3ac6d4;
  --sky: #8fd8e0; --sky-tint: #ecf9fa; --sky-2: #cdeff2;
}

/* 첫 화면 제목 — 제품명이 길어 Yurika보다 작게, "Tabion AgentWorks / Platform" 두 줄로 */
.yk .hero h1.aw-title { font-size: clamp(34px, 4.4vw, 62px); white-space: nowrap; }

/* 도식 공통 */
.aw-svg { display: block; width: 100%; height: auto; overflow: visible; }
.aw-svg text { font-family: var(--font-sans); }
.aw-svg .t-strong { font-size: 13px; font-weight: 700; fill: #0a0a0a; }
.aw-svg .t-sub { font-size: 10.5px; font-weight: 500; fill: #6b6b6b; }
.aw-svg .t-white { font-size: 13px; font-weight: 700; fill: #fff; }
.aw-svg .t-white-sub { font-size: 10px; font-weight: 500; fill: #c8d3e0; }
.aw-svg .box { fill: #fff; stroke: #e2e2e2; stroke-width: 1; }
.aw-svg .box-tint { fill: #f1f4f8; stroke: #dfe5ec; stroke-width: 1; }
.aw-svg .box-navy { fill: var(--blue); }

/* 흐르는 연결선 — 점선이 한 방향으로 흘러간다 */
@keyframes awFlow { to { stroke-dashoffset: -24; } }
.aw-svg .flow-line { fill: none; stroke: #8fa5bd; stroke-width: 1.6; stroke-dasharray: 5 7; animation: awFlow 1.2s linear infinite; }
.aw-svg .flow-line.accent { stroke: #ff5a1f; }

/* 차례로 강조되는 노드 */
@keyframes awNode { 0%, 100% { stroke: #e2e2e2; } 12% { stroke: var(--blue); } 28% { stroke: #e2e2e2; } }
.aw-svg .pulse { animation: awNode 5s ease-in-out infinite; stroke-width: 1.5; }
.aw-svg .pulse.d1 { animation-delay: 0.8s; }
.aw-svg .pulse.d2 { animation-delay: 1.6s; }
.aw-svg .pulse.d3 { animation-delay: 2.4s; }
.aw-svg .pulse.d4 { animation-delay: 3.2s; }

/* 가운데 허브에서 퍼지는 고리 */
@keyframes awRing { 0% { transform: scale(1); opacity: 0.45; } 100% { transform: scale(1.7); opacity: 0; } }
.aw-svg .ring { fill: none; stroke: var(--blue); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: awRing 3s ease-out infinite; }
.aw-svg .ring.late { animation-delay: 1.5s; }

/* 데이터 분석: 막대가 아래에서 자라나는 차트 */
@keyframes awBar { 0%, 12% { transform: scaleY(0); } 40%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.aw-bars .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: awBar 6s cubic-bezier(0.6, 0.02, 0.2, 1) infinite; }
.aw-bars .bar.b2 { animation-delay: 0.12s; }
.aw-bars .bar.b3 { animation-delay: 0.24s; }
.aw-bars .bar.b4 { animation-delay: 0.36s; }
.aw-bars .bar.b5 { animation-delay: 0.48s; }
.aw-bars .bar.b6 { animation-delay: 0.6s; }
.aw-sql {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #111418;
  color: #d0d4da;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
}
.aw-sql .k { color: #ff9d8a; }
.aw-sql .f { color: #8ab6ff; }

/* 가드레일: 민감 정보가 가려지는 표시 */
@keyframes awRaw { 0%, 30% { opacity: 1; } 42%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes awHid { 0%, 30% { opacity: 0; } 42%, 88% { opacity: 1; } 100% { opacity: 0; } }
.aw-mask { position: relative; display: inline-block; }
.aw-mask .raw { animation: awRaw 5s ease-in-out infinite; }
.aw-mask .hid { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--red-deep); font-weight: 700; animation: awHid 5s ease-in-out infinite; }

/* 권한 계층 (전사 > 팀 > 개인) */
.aw-rbac { display: flex; flex-direction: column; gap: 8px; }
.aw-rbac span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.aw-rbac span:nth-child(2) { margin-left: 18px; }
.aw-rbac span:nth-child(3) { margin-left: 36px; }
.aw-rbac span small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.aw-log { margin-top: 12px; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.85; color: var(--ink-2); }
.aw-log b { color: var(--blue); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .aw-svg .flow-line, .aw-svg .pulse, .aw-svg .ring, .aw-bars .bar, .aw-mask .raw, .aw-mask .hid { animation: none; }
  .aw-mask .hid { opacity: 0; }
}

/* 가드레일 입력 칸 안의 가림 표시(.yu-mask / .aw-mask)는 칸 모양(.gwin span)을 이어받지 않게 — 이중 테두리 방지 */
.yk .gwin span .yu-mask, .yk .gwin span .yu-mask span,
.yk .gwin span .aw-mask, .yk .gwin span .aw-mask span { border: 0; background: none; padding: 0; border-radius: 0; font-size: inherit; text-align: left; }