/* ─────────────────────────────────────────────
   visuals.css — 구축 사례 카드 속 그림(움직임은 visuals.js)
   ───────────────────────────────────────────── */
.vis { position: absolute; inset: 0; overflow: hidden; }
.vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.hud { position: absolute; z-index: 2; font-size: 12px; line-height: 1.6; color: var(--text-3); }
.hud b { display: block; font-weight: 600; color: var(--gold-ink); }
.hud--tl { left: 24px; top: 22px; }
.hud--br { right: 24px; bottom: 20px; text-align: right; }

/* ── 개발 방식: 작업 현황 창 ── */
.vis--office { display: grid; place-items: center; padding: 8% 7%; }
.win {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(20, 20, 18, .1); border-radius: 14px; background: #fff;
  box-shadow: 0 30px 60px -34px rgba(20, 20, 18, .35);
}
.win__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(20, 20, 18, .07); font-family: var(--f-sans); font-size: 11px; color: var(--text-3); }
.win__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(20, 20, 18, .12); }
.win__bar span { margin-left: 10px; }
.win__bar em { margin-left: auto; font-family: var(--f-sans); font-size: 11px; font-weight: 600; color: var(--gold-ink); }
.win__body { flex: 1; display: grid; grid-template-columns: 42% 58%; min-height: 0; }
.staff { padding: 10px 0; border-right: 1px solid rgba(20, 20, 18, .06); }
.staff li { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 7px 14px; align-items: center; }
.staff b {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  color: var(--gold-ink); border: 1px solid rgba(160, 125, 67, .35); background: var(--gold-soft);
}
.staff span { font-size: 11.5px; color: var(--text); line-height: 1.3; }
.staff .st { font-size: 10.5px; color: var(--text-3); line-height: 1.4; transition: color .5s; }
.staff .st::before { content: "○ "; }
.staff .st--run { color: var(--gold-ink); }
.staff .st--run::before { content: "● "; }
.staff .st--rev { color: var(--text); }
.staff .st--rev::before { content: "◐ "; }
.log { position: relative; overflow: hidden; padding: 12px 14px; background: #FBFAF7; font-family: var(--f-sans); font-size: 11px; line-height: 1.9; color: var(--text-2); display: flex; flex-direction: column; justify-content: flex-end; }
.log::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, #FBFAF7, rgba(251, 250, 247, 0)); z-index: 1; pointer-events: none; }
.log p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: logline .6s var(--ease) both; }
.log p b { font-weight: 500; color: var(--gold-ink); margin-right: 8px; }
.log p.sys b { color: var(--text); }
.log p.ok { color: var(--gold-ink); }
@keyframes logline { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.log .caret { display: inline-block; width: 6px; height: 11px; background: var(--gold-deco); vertical-align: -1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ── 무인 운영: 알림 ── */
.toast {
  position: absolute; z-index: 3; right: 22px; top: 20px; max-width: 64%;
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(20, 20, 18, .08); background: #fff; box-shadow: 0 16px 34px -20px rgba(20, 20, 18, .35);
  font-size: 12px; color: var(--text-2);
  opacity: 0; transform: translateY(-10px); transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.toast.is-on { opacity: 1; transform: none; }
.toast b { font-size: 11px; font-weight: 700; color: var(--gold-ink); }
.toast.is-warn b { color: var(--warn); }

/* ── 콘텐츠 자동화: 흐름도 ── */
.vis--flow { display: grid; place-items: center; }
.flow { position: relative; z-index: 1; width: 88%; height: auto; overflow: visible; }
.flow .edge { fill: none; stroke: rgba(20, 20, 18, .14); stroke-width: 1; }
.flow .edge-run { fill: none; stroke: #C8A465; stroke-width: 1.2; stroke-dasharray: 3 7; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.flow .node rect { fill: #fff; stroke: rgba(20, 20, 18, .14); stroke-width: 1; transition: stroke .5s; }
.flow .node.is-on rect { stroke: #B8914F; }
.flow .node .ic { fill: none; stroke: #A07D43; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.flow .node .t1 { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; fill: #86672F; }
.flow .node .t2 { font-family: var(--f-sans); font-size: 13px; fill: #141412; }
.flow .packet { fill: #C8A465; }

@media (max-width: 1023px), (max-height: 639px) {
  .work__visual:has(.vis--office) { aspect-ratio: 1 / 1; }
  .vis--office { padding: 6% 5%; }
}
@media (max-width: 767px) {
  .hud--tl { left: 16px; top: 14px; }
  .hud--br { right: 16px; bottom: 12px; }
  .staff li { padding: 6px 10px; grid-template-columns: 28px 1fr; }
  .staff b { width: 26px; height: 26px; font-size: 10px; }
  .staff span { font-size: 10.5px; }
  .toast { max-width: 78%; right: 12px; top: 12px; }
}