:root {
  --lw-navy: #15243d;
  --lw-text: #43516a;
  --lw-blue: #378ef5;
  --lw-blue-dark: #2563d8;
  --lw-purple: #8b6be8;
  --lw-line: #dfe8f5;
  --lw-soft: #f5f8fd;
  --lw-white: #fff;
  /* 신호 그라디언트 양 끝 (DESIGN.md gradient-start/end). 흰 글자·흰 바탕 모두 4.5:1 이상 */
  --lw-gradient-start: #1e74d5;
  --lw-gradient-end: #7b5fdb;
  --lw-signal-gradient: linear-gradient(102deg, var(--lw-gradient-start), var(--lw-gradient-end));
  /* 보조 텍스트 (DESIGN.md quiet-slate / muted-slate) */
  --lw-quiet: #5d6c80;
  --lw-muted: #616c7c;
}

.workflow-home {
  overflow-x: hidden;
  background: #fff;
  color: var(--lw-navy);
  word-break: keep-all;
}

/* 하단에 붙인 기존 소개 섹션(.legacy-sections)은 원래 박스 모델을 유지해야 카드·배너 크기가 변하지 않음.
 * :where()로 감싸 기존 명시도(0,1,0)를 그대로 유지 */
.workflow-home :where(*:not(.legacy-sections, .legacy-sections *)) { box-sizing: border-box; }
.workflow-home a { text-decoration: none; }
/* 원래 목적은 푸터 .container 상단 여백 제거. 범위를 푸터로 한정해야 하단 기존 섹션의 160px 여백이 유지됨 */
.workflow-home #footer .container { padding-top: 0; }

.workflow-home .header__menu .menu-more { position: relative; }
.workflow-home .header__menu .menu-more__button { display: block; margin: 0 10px; padding: 8px 0; border: 0; background: transparent; color: #111; font: inherit; font-size: 16px; font-weight: 600; line-height: 24px; cursor: pointer; }
.workflow-home .header__menu .menu-more__button:hover { color: #4068b8; }
.workflow-home .header__menu .menu-more__list { position: absolute; top: 100%; right: 0; z-index: 50; display: none; min-width: 170px; padding: 10px; border: 1px solid rgba(90,101,119,.15); border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(15,23,42,.12); }
.workflow-home .header__menu .menu-more:hover .menu-more__list,
.workflow-home .header__menu .menu-more:focus-within .menu-more__list { display: block; }
.workflow-home .header__menu .menu-more__list li { border: 0; }
.workflow-home .header__menu .menu-more__list a { margin: 0; padding: 9px 10px; border-radius: 6px; font-size: 14px; white-space: nowrap; }
.workflow-home .header__menu .menu-more__list a:hover { background: #f8fafc; }

.workflow-shell {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
}

.workflow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2e68c5;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
}

.workflow-eyebrow::before {
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--lw-blue), var(--lw-purple));
  content: "";
}

.workflow-hero {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  background:
    radial-gradient(circle at 84% 18%, rgba(139,107,232,.15), transparent 25%),
    radial-gradient(circle at 67% 73%, rgba(55,142,245,.13), transparent 27%),
    linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}

.workflow-hero::before {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: linear-gradient(rgba(87,128,185,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(87,128,185,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
  content: "";
}

.workflow-hero .workflow-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(470px, .8fr);
  gap: 70px;
  align-items: center;
  min-height: 720px;
  padding: 84px 0 96px;
}

.workflow-hero__copy { max-width: 760px; }

.workflow-hero h1 {
  margin: 22px 0 24px;
  color: var(--lw-navy);
  font-size: clamp(50px, 5.2vw, 76px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.055em;
}

.workflow-hero h1 b {
  color: transparent;
  background: linear-gradient(102deg, var(--lw-gradient-start) 0%, var(--lw-gradient-end) 92%);
  background-clip: text;
  -webkit-background-clip: text;
}

.workflow-hero__lead {
  margin: 0;
  color: #203552;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 750;
  line-height: 1.55;
}

.workflow-hero__description {
  max-width: 700px;
  margin: 18px 0 0;
  color: #59677d;
  font-size: 17px;
  line-height: 1.85;
}

.workflow-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.workflow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
}

.workflow-button--primary {
  background: var(--lw-signal-gradient);
  box-shadow: 0 12px 28px rgba(67,112,208,.2);
  color: #fff;
}

.workflow-button--primary:hover,
.workflow-button--primary:focus-visible { box-shadow: 0 16px 34px rgba(67,112,208,.3); color: #fff; }
.workflow-button--ghost { border-color: #cad7e8; background: rgba(255,255,255,.75); color: #2b4770; }
.workflow-button--ghost:hover,
.workflow-button--ghost:focus-visible { border-color: #6a95d4; color: #225faa; }

.workflow-hero__map {
  position: relative;
  min-height: 520px;
  isolation: isolate;
}

.workflow-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(72,123,194,.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.workflow-orbit--outer { width: 430px; height: 430px; animation: workflow-spin 38s linear infinite; }
.workflow-orbit--inner { width: 292px; height: 292px; border-color: rgba(139,107,232,.32); animation: workflow-spin-reverse 30s linear infinite; }

.workflow-orbit--outer::after,
.workflow-orbit--inner::after {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lw-blue);
  box-shadow: 0 0 0 5px rgba(55,142,245,.13);
  content: "";
}

.workflow-orbit--inner::after { background: var(--lw-purple); }

.workflow-hero__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 210px;
  height: 210px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(95,129,190,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.93);
  box-shadow: 0 28px 70px rgba(31,64,116,.16);
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.workflow-hero__core span { color: #476ba7; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.workflow-hero__core strong { margin-top: 10px; color: #172a46; font-size: 27px; line-height: 1.28; }
.workflow-hero__core small { margin-top: 9px; color: #5c6b82; font-size: 12px; }

.workflow-hero__node {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid #dfe7f3;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 26px rgba(36,64,108,.11);
  color: #31547f;
  font-size: 13px;
  font-weight: 800;
}

.workflow-hero__node::before { width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: linear-gradient(135deg,var(--lw-blue),var(--lw-purple)); content: ""; }
.workflow-hero__node--one { top: 7%; left: 38%; }
.workflow-hero__node--two { top: 28%; right: 1%; }
.workflow-hero__node--three { right: 2%; bottom: 22%; }
.workflow-hero__node--four { bottom: 5%; left: 24%; }
.workflow-hero__node--five { top: 31%; left: 0; }

.workflow-section { padding: 112px 0; }
.workflow-section__head { max-width: 760px; min-width: 0; margin: 0 auto 52px; text-align: center; }
.workflow-section__head .workflow-eyebrow { justify-content: center; }
.workflow-section__head h2,
.workflow-service-cta h2,
.workflow-contact h2 {
  margin: 18px 0 16px;
  color: var(--lw-navy);
  font-size: clamp(34px, 3.3vw, 48px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.035em;
}
.workflow-section__head p,
.workflow-service-cta p { margin: 0; color: #5d6c80; font-size: 17px; line-height: 1.8; }

.workflow-steps { background: #fff; }
.workflow-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }

.workflow-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 470px;
  flex-direction: column;
  padding: 27px 24px 24px;
  border: 1px solid #dce6f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 15px 42px rgba(25,61,107,.06);
  outline: 0;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  z-index: 1;
}

.workflow-card:not(:last-child)::before {
  position: absolute;
  top: 82px;
  left: calc(100% + 1px);
  width: 18px;
  height: 1px;
  background: #bcd0eb;
  content: "";
  z-index: 3;
}

.workflow-card:not(:last-child)::after {
  position: absolute;
  top: 78px;
  left: calc(100% + 1px);
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #4d94ee;
  box-shadow: 0 0 0 3px rgba(77,148,238,.12);
  content: "";
  opacity: 0;
}

.workflow-track.is-in-view .workflow-card:not(:last-child)::after { animation: workflow-point 4.2s ease-in-out infinite; }
.workflow-track.is-in-view .workflow-card:nth-child(2)::after { animation-delay: .8s; }
.workflow-track.is-in-view .workflow-card:nth-child(3)::after { animation-delay: 1.6s; }
.workflow-track.is-in-view .workflow-card:nth-child(4)::after { animation-delay: 2.4s; }

.workflow-card:hover,
.workflow-card:focus-within,
.workflow-card:focus,
.workflow-card.is-active {
  border-color: #6d9fe6;
  box-shadow: 0 22px 52px rgba(49,101,177,.14);
  transform: translateY(-4px);
}

.workflow-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workflow-card__top > span { color: #5e6c82; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.workflow-card__top > span b { margin-left: 3px; color: #2968c3; font-size: 19px; letter-spacing: 0; }
.workflow-card__icon { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 13px; background: #f0f5fc; color: #456ba8; transition: background .2s ease, color .2s ease; }
.workflow-card__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workflow-card:hover .workflow-card__icon,
.workflow-card:focus .workflow-card__icon,
.workflow-card.is-active .workflow-card__icon { background: linear-gradient(135deg,var(--lw-blue),var(--lw-purple)); color: #fff; }
.workflow-card h3 { margin: 24px 0 17px; color: #152945; font-size: 23px; font-weight: 800; line-height: 1.3; letter-spacing: -.025em; }
.workflow-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.workflow-card li { position: relative; padding-left: 15px; color: #344c6d; font-size: 14px; font-weight: 700; line-height: 1.5; }
.workflow-card li::before { position: absolute; top: .62em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #6f91c3; content: ""; }
.workflow-card > p { margin: 20px 0 22px; color: #5f6b7e; font-size: 14px; line-height: 1.72; }
.workflow-card > a { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid #e8eef6; color: #2d6ac0; font-size: 13px; font-weight: 800; }
.workflow-card > a span { transition: transform .2s ease; }
.workflow-card > a:hover span,
.workflow-card > a:focus-visible span { transform: translateX(3px); }

.workflow-connections { background: linear-gradient(180deg,#f7f9fd,#f3f7fc); }
.connection-grid { display: grid; grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr); align-items: stretch; max-width: 1100px; margin: 0 auto; }
.connection-card { padding: 36px; border: 1px solid #dbe5f2; border-radius: 18px; background: #fff; box-shadow: 0 16px 42px rgba(31,62,108,.06); }
.connection-card--accent { border-color: #cbd9f6; background: linear-gradient(145deg,#fff,#f7f6ff); }
.connection-card__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.connection-card__label span { padding: 6px 11px; border-radius: 999px; background: #edf4fd; color: #316bb9; font-size: 12px; font-weight: 800; }
.connection-card__label em { color: #5f6c7d; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.connection-card h3 { margin: 24px 0 12px; color: #172b47; font-size: 28px; font-weight: 800; }
.connection-card > p { margin: 0; color: #5b6b82; font-size: 15px; line-height: 1.75; }
.connection-card ul { display: grid; gap: 11px; margin: 23px 0 0; padding: 20px 0 0; border-top: 1px solid #e7edf5; list-style: none; }
.connection-card li { position: relative; padding-left: 20px; color: #354d6e; font-size: 14px; font-weight: 700; line-height: 1.55; }
.connection-card li::before { position: absolute; top: 5px; left: 0; width: 8px; height: 5px; border-bottom: 2px solid #4a87db; border-left: 2px solid #4a87db; transform: rotate(-45deg); content: ""; }
.connection-card a { display: inline-flex; margin-top: 24px; color: #2b69c0; font-size: 14px; font-weight: 800; }
.connection-divider { display: flex; align-items: center; justify-content: center; }
.connection-divider::before { width: 100%; height: 1px; background: #bfd0e8; content: ""; }
.connection-divider span { position: absolute; display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid #cbd9ea; border-radius: 50%; background: #f5f8fd; color: #5a6c83; font-size: 9px; font-weight: 900; }
.connection-note { max-width: 1100px; margin: 18px auto 0; padding: 14px 18px; border: 1px solid #d9e4f2; border-radius: 10px; background: rgba(255,255,255,.7); color: #5d6b80; font-size: 13px; line-height: 1.65; text-align: center; }
.connection-note strong { margin-right: 7px; color: #385f91; }

.workflow-service-cta { padding: 112px 0; text-align: center; }
.workflow-service-cta .workflow-shell { max-width: 960px; padding: 64px 40px; border: 1px solid #dce6f3; border-radius: 24px; background: radial-gradient(circle at 50% -20%,rgba(84,150,239,.15),transparent 47%),#fff; box-shadow: 0 24px 60px rgba(27,65,117,.08); }
.workflow-service-cta .workflow-button { margin-top: 30px; }

.workflow-contact { padding: 90px 0; background: linear-gradient(120deg,#152d51,#263764 56%,#4e4180); color: #fff; }
.workflow-contact .workflow-shell { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(340px,.7fr); gap: 70px; align-items: center; }
.workflow-contact .workflow-eyebrow { color: #bcd7ff; }
.workflow-contact h2 { color: #fff; }
.workflow-contact p { margin: 0; color: #d7dfec; font-size: 16px; line-height: 1.8; }
.workflow-contact__actions { display: grid; gap: 10px; }
.workflow-button--light { background: #fff; color: #284a7a; }
.workflow-button--outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.workflow-contact__legacy { display: inline-flex; justify-content: center; margin-top: 9px; color: #d5e5ff; font-size: 13px; font-weight: 700; }
.workflow-contact__legacy span { margin-left: 7px; }

html.has-reveal [data-reveal] { opacity: 0; transform: translateY(18px); }
html.has-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity .65s ease, transform .65s ease; }
.workflow-track [data-reveal]:nth-child(2) { transition-delay: .07s; }
.workflow-track [data-reveal]:nth-child(3) { transition-delay: .14s; }
.workflow-track [data-reveal]:nth-child(4) { transition-delay: .21s; }
.workflow-track [data-reveal]:nth-child(5) { transition-delay: .28s; }

@keyframes workflow-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes workflow-spin-reverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes workflow-point { 0%,18% { opacity: 0; transform: translateX(0); } 35%,65% { opacity: 1; } 82%,100% { opacity: 0; transform: translateX(10px); } }

@media (max-width: 1200px) {
  .workflow-hero .workflow-shell { grid-template-columns: minmax(0,1fr) 430px; gap: 35px; }
  .workflow-track { gap: 12px; }
  .workflow-card { min-height: 485px; padding: 24px 18px 22px; }
  .workflow-card:not(:last-child)::before { width: 12px; }
}

@media (max-width: 1080px) {
  .workflow-hero { min-height: 0; }
  .workflow-hero .workflow-shell { grid-template-columns: 1fr; padding-top: 76px; }
  .workflow-hero__copy { max-width: 820px; margin: 0 auto; text-align: center; }
  .workflow-hero__actions { justify-content: center; }
  .workflow-hero__map { width: min(560px,100%); margin: 0 auto; }
  .workflow-track { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .workflow-card { min-height: 405px; }
  .workflow-card:not(:last-child)::before,
  .workflow-card:not(:last-child)::after { display: none; }
}

@media (max-width: 760px) {
  .workflow-shell,
  .workflow-hero__copy,
  .workflow-hero__preview,
  .workflow-timeline,
  .roadmap-grid { min-width: 0; max-width: calc(100vw - 32px); }
  .workflow-hero__copy,
  .workflow-hero__preview,
  .workflow-timeline,
  .roadmap-grid { width: 100%; }
  .workflow-hero__lead,
  .workflow-hero__description { overflow-wrap: anywhere; }
  .workflow-shell { width: min(100% - 32px, 640px); }
  .workflow-hero .workflow-shell { gap: 20px; padding: 58px 0 68px; }
  .workflow-hero h1 { margin-top: 17px; font-size: 42px; }
  .workflow-hero__lead { font-size: 19px; }
  .workflow-hero__description { font-size: 15px; line-height: 1.75; }
  .workflow-hero__actions { display: grid; }
  .workflow-hero__map { min-height: 390px; transform: scale(.88); }
  .workflow-orbit--outer { width: 350px; height: 350px; }
  .workflow-orbit--inner { width: 238px; height: 238px; }
  .workflow-hero__core { width: 170px; height: 170px; }
  .workflow-hero__core strong { font-size: 22px; }
  .workflow-hero__node { min-height: 37px; padding: 0 12px; font-size: 11px; }
  .workflow-section { padding: 76px 0; }
  .workflow-section__head { margin-bottom: 36px; text-align: left; }
  .workflow-section__head .workflow-eyebrow { justify-content: flex-start; }
  .workflow-section__head h2,
  .workflow-service-cta h2,
  .workflow-contact h2 { font-size: 31px; }
  .workflow-section__head p,
  .workflow-service-cta p { font-size: 15px; }
  .workflow-track { grid-template-columns: 1fr; gap: 32px; }
  .workflow-card { min-height: 0; padding: 25px 22px; }
  .workflow-card:not(:last-child)::before { display: block; top: calc(100% + 1px); left: 34px; width: 1px; height: 32px; background: linear-gradient(#a8c2e5,#d7e3f1); }
  .workflow-card:not(:last-child)::after { display: block; top: calc(100% + 4px); left: 30px; }
  .workflow-track.is-in-view .workflow-card:not(:last-child)::after { animation: workflow-point-mobile 4.2s ease-in-out infinite; }
  .workflow-card:hover,
  .workflow-card:focus-within,
  .workflow-card:focus,
  .workflow-card.is-active { transform: none; }
  .connection-grid { grid-template-columns: 1fr; gap: 0; }
  .connection-card { padding: 27px 23px; }
  .connection-divider { min-height: 58px; }
  .connection-divider::before { width: 1px; height: 100%; }
  .connection-card h3 { font-size: 24px; }
  .connection-note { text-align: left; }
  .workflow-service-cta { padding: 76px 0; }
  .workflow-service-cta .workflow-shell { padding: 45px 24px; }
  .workflow-contact { padding: 70px 0; }
  .workflow-contact .workflow-shell { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 920px) {
  .workflow-home .header__menu--active .menu-more__button { width: 100%; margin: 0; padding: 8px 0; text-align: left; }
  .workflow-home .header__menu--active .menu-more__list { position: static; display: block; min-width: 0; margin: 6px 0 0; padding: 0 0 0 14px; border: 0; border-radius: 0; box-shadow: none; }
  .workflow-home .header__menu--active .menu-more__list li { padding: 0; border-bottom: 0; }
  .workflow-home .header__menu--active .menu-more__list a { padding: 7px 0; color: #4b5563; }
}

@media (max-width: 430px) {
  .workflow-hero__map { left: 50%; width: 430px; margin-left: -215px; transform: scale(.79); }
  .workflow-hero__node--one { left: 34%; }
  .workflow-hero__node--four { left: 19%; }
  .workflow-button { width: 100%; }
}

@keyframes workflow-point-mobile { 0%,18% { opacity: 0; transform: translateY(0); } 35%,65% { opacity: 1; } 82%,100% { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  .workflow-home *,
  .workflow-home *::before,
  .workflow-home *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.has-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* 2026-11 vertical workflow refinement */
.workflow-hero__preview {
  position: relative;
  min-width: 0;
  min-height: 500px;
  padding: 62px 28px 56px;
}

.workflow-preview__window {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: min(100%, 540px);
  margin: 0 auto;
  border: 1px solid rgba(118,142,178,.25);
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 32px 78px rgba(31,65,116,.17);
}

.workflow-preview__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #e4ebf4;
  background: #f8faff;
}

.workflow-preview__bar > span { display: flex; gap: 5px; }
.workflow-preview__bar > span i { width: 7px; height: 7px; border-radius: 50%; background: #cad6e5; }
.workflow-preview__bar > span i:nth-child(2) { background: #a7c9f1; }
.workflow-preview__bar > span i:nth-child(3) { background: #c7baf0; }
.workflow-preview__bar strong { color: #304c73; font-size: 11px; letter-spacing: .05em; }
.workflow-preview__bar em { justify-self: end; color: #606c7d; font-size: 10px; font-style: normal; }
.workflow-preview__body { padding: 23px; }
.workflow-preview__case-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 19px; border-bottom: 1px solid #e8eef6; }
.workflow-preview__case-head div { min-width: 0; }
.workflow-preview__case-head div > span { display: block; margin-bottom: 6px; color: #3f6cab; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.workflow-preview__case-head strong { display: block; overflow: hidden; color: #172b48; font-size: 17px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.workflow-preview__case-head small { display: block; margin-top: 6px; color: #5f6c7c; font-size: 11px; }
.workflow-preview__case-head > em { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #edf5ff; color: #2c6abc; font-size: 10px; font-style: normal; font-weight: 850; }
.workflow-preview__summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 17px; }
.workflow-preview__summary article { min-width: 0; padding: 15px 12px; border: 1px solid #e5ebf4; border-radius: 11px; background: #fbfcfe; }
.workflow-preview__summary span,
.workflow-preview__summary small { display: block; color: #5e6b7c; font-size: 9px; }
.workflow-preview__summary strong { display: block; overflow: hidden; margin: 7px 0 6px; color: #284362; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-preview__activity { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px; border-radius: 11px; background: linear-gradient(100deg,#eef6ff,#f5f1ff); }
.workflow-preview__activity > i { flex: 0 0 auto; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: #4c8fe7; box-shadow: 0 0 0 4px rgba(76,143,231,.15); }
.workflow-preview__activity span,
.workflow-preview__activity strong { display: block; }
.workflow-preview__activity span { color: #5a6c86; font-size: 9px; }
.workflow-preview__activity strong { margin-top: 4px; color: #2d4c73; font-size: 11px; }

.workflow-preview__signal {
  position: absolute;
  z-index: 3;
  display: flex;
  min-width: 170px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #dce6f2;
  border-radius: 12px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 14px 34px rgba(35,69,115,.12);
}
.workflow-preview__signal > span { display: flex; flex: 0 0 auto; min-width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0 7px; border-radius: 9px; background: #eef5ff; color: #2b6abb; font-size: 10px; font-weight: 900; }
.workflow-preview__signal b,
.workflow-preview__signal small { display: block; }
.workflow-preview__signal b { color: #284261; font-size: 11px; }
.workflow-preview__signal small { margin-top: 3px; color: #616c7c; font-size: 9px; }
.workflow-preview__signal--one { top: 20px; right: 4px; }
.workflow-preview__signal--two { bottom: 21px; left: 0; }
.workflow-preview__signal--three { right: 5px; bottom: 4px; }
.workflow-hero__preview.is-visible .workflow-preview__window { animation: workflow-preview-in .6s ease both; }
.workflow-hero__preview.is-visible .workflow-preview__signal { animation: workflow-signal-in .52s ease both; }
.workflow-hero__preview.is-visible .workflow-preview__signal--one { animation-delay: .18s; }
.workflow-hero__preview.is-visible .workflow-preview__signal--two { animation-delay: .3s; }
.workflow-hero__preview.is-visible .workflow-preview__signal--three { animation-delay: .42s; }

.workflow-steps { position: relative; background: linear-gradient(180deg,#fff 0%,#f8faff 48%,#fff 100%); }
.workflow-timeline { --timeline-progress: 0; position: relative; max-width: 1200px; margin: 0 auto; padding: 10px 0; }
.workflow-timeline__rail { position: absolute; top: 42px; bottom: 42px; left: 42px; width: 4px; overflow: hidden; border-radius: 999px; background: #dfe8f4; }
.workflow-timeline__rail i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(180deg,#3998f4 0%,#6e80eb 54%,#956be1 100%); box-shadow: 0 0 14px rgba(68,132,230,.35); transform: scaleY(var(--timeline-progress)); transform-origin: center top; transition: transform .12s linear; will-change: transform; }
.workflow-step { position: relative; display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: start; min-width: 0; }
.workflow-step + .workflow-step { margin-top: 60px; }
.workflow-step__node { position: relative; grid-column: 1; grid-row: 1; display: flex; z-index: 3; width: 54px; height: 54px; align-items: center; justify-content: center; justify-self: center; margin-top: 36px; border: 5px solid #f8faff; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #cbd9ea,0 8px 22px rgba(36,72,121,.1); color: #5a6c83; transition: background .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease; }
.workflow-step__node::after { position: absolute; inset: -10px; border: 1px solid rgba(73,137,226,.36); border-radius: 50%; opacity: 0; content: ""; transform: scale(.78); transition: opacity .38s ease,transform .38s ease; }
/* 노드 안 STEP 아이콘: stroke가 currentColor라 기본(#71839b)·지나간 단계(#326fc3)·활성(#fff) 색이 노드 color를 그대로 따라감 */
.workflow-step__node svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workflow-step--left .workflow-step__card,
.workflow-step--right .workflow-step__card { grid-column: 2; grid-row: 1; width: 100%; justify-self: stretch; }
.workflow-step__card { position: relative; display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 36px; min-width: 0; padding: 34px; border: 1px solid #dce6f2; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 16px 44px rgba(29,64,111,.07); outline: none; transition: border-color .3s ease,box-shadow .3s ease,transform .3s ease; }
.workflow-step--left .workflow-step__card::after,
.workflow-step--right .workflow-step__card::after { position: absolute; top: 62px; left: -45px; width: 44px; height: 1px; background: #cbd9ea; content: ""; }
.workflow-step__content,
.workflow-step__visual { min-width: 0; }
.workflow-step__visual { display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.workflow-step__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workflow-step__heading > span { color: #316bb8; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.workflow-step h3 { margin: 18px 0 14px; color: #172b47; font-size: 28px; font-weight: 850; letter-spacing: -.03em; }
.workflow-step ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.workflow-step li { position: relative; padding-left: 15px; color: #354e6e; font-size: 15px; font-weight: 700; line-height: 1.55; }
.workflow-step li::before { position: absolute; top: .62em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #628ac2; content: ""; }
.workflow-step__content > p { margin: 17px 0 18px; color: #5d6b7f; font-size: 15px; line-height: 1.65; }
.workflow-step__content > .workflow-step__message { margin: -2px 0 19px; color: #29496e; font-size: 17px; font-weight: 800; line-height: 1.55; }
.workflow-step__content > .workflow-step__notice { margin: -3px 0 15px; padding: 11px 13px; border-radius: 9px; background: #f6f8fb; color: #5e6c81; font-size: 12px; line-height: 1.55; }
.workflow-step__feature-groups { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 16px; border-top: 1px solid #e2eaf4; }
.workflow-step__feature-groups section { min-width: 0; padding: 15px 0; border-bottom: 1px solid #e2eaf4; }
.workflow-step__feature-groups section > b { display: block; margin-bottom: 9px; color: #2b6bba; font-size: 15px; font-weight: 900; }
.workflow-step__feature-groups ul { gap: 5px; }
.workflow-step__feature-groups li { padding-left: 13px; color: #405673; font-size: 15px; font-weight: 700; line-height: 1.55; }
.workflow-step__feature-groups li::before { top: .6em; width: 4px; height: 4px; }
.workflow-step__feature-groups--single { grid-template-columns: 1fr; }
.workflow-step__feature-groups--three section:last-child { grid-column: auto; }
.workflow-step__planned { display: flex; align-items: center; gap: 9px; margin: 16px 0 0 !important; padding: 11px 13px; border: 1px dashed #d7e1ee; border-radius: 10px; background: #fafbfd; color: #5c6c7f !important; font-size: 13px !important; font-weight: 750; line-height: 1.45 !important; }
.workflow-step__planned span { flex: 0 0 auto; padding: 5px 8px; border: 1px solid #d7e1ed; border-radius: 999px; background: #f3f6fa; color: #586c86; font-size: 11px; font-weight: 900; }
.workflow-step__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 17px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e8eef6; }
.workflow-step__links a { min-width: 0; color: #426d9a; font-size: 14px; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; }
.workflow-step__links a:first-child { color: #296ac1; }
.workflow-step__links a span { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
.workflow-step__links a:hover span,
.workflow-step__links a:focus-visible span { transform: translateX(4px); }
.workflow-step:hover .workflow-step__card,
.workflow-step:focus .workflow-step__card,
.workflow-step:focus-within .workflow-step__card,
.workflow-step.is-active .workflow-step__card { border-color: #78a5df; box-shadow: 0 22px 56px rgba(43,92,160,.14); transform: translateY(-4px); }
.workflow-step.is-active .workflow-step__node { background: linear-gradient(135deg,var(--lw-gradient-start),var(--lw-gradient-end)); box-shadow: 0 0 0 1px #789ee0,0 0 0 8px rgba(77,137,226,.14),0 0 24px rgba(74,125,225,.28),0 12px 26px rgba(52,103,179,.2); color: #fff; transform: scale(1.05); }
.workflow-step.is-active .workflow-step__node::after { opacity: 1; transform: scale(1); }
.workflow-step.is-past .workflow-step__node { border-color: #f8faff; background: #eaf3ff; color: #2d6abe; }
html.has-timeline-motion .workflow-step__card { opacity: 0; will-change: opacity,transform; }
html.has-timeline-motion .workflow-step--left .workflow-step__card,
html.has-timeline-motion .workflow-step--right .workflow-step__card { transform: translate(18px,24px); }
html.has-timeline-motion .workflow-step.is-visible .workflow-step__card { opacity: 1; transform: translate(0,0); transition: opacity .56s cubic-bezier(.2,.75,.25,1) .08s,transform .56s cubic-bezier(.2,.75,.25,1) .08s,border-color .3s ease,box-shadow .3s ease; }
html.has-timeline-motion .workflow-step.is-visible:hover .workflow-step__card,
html.has-timeline-motion .workflow-step.is-visible:focus .workflow-step__card,
html.has-timeline-motion .workflow-step.is-visible:focus-within .workflow-step__card,
html.has-timeline-motion .workflow-step.is-visible.is-active .workflow-step__card { transform: translateY(-4px); }

.workflow-mini { display: flex; align-items: stretch; gap: 8px; padding: 11px; border: 1px solid #e4ebf4; border-radius: 12px; background: #f8faff; }
.workflow-mini > span { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: center; padding: 9px 10px; border-radius: 9px; background: #fff; }
.workflow-mini b,
.workflow-mini small { display: block; }
.workflow-mini b { color: #2c496d; font-size: 11px; line-height: 1.35; }
.workflow-mini small { margin-top: 4px; color: #616c7c; font-size: 9px; line-height: 1.4; }
.workflow-mini > i { display: flex; flex: 0 0 auto; align-items: center; color: #526c8d; font-size: 12px; font-style: normal; }
.workflow-mini--briefing span { align-items: center; text-align: center; }
.workflow-mini--briefing b { color: #266ac0; font-size: 19px; }
.workflow-mini--collaboration em { align-self: flex-start; margin-bottom: 6px; padding: 3px 6px; border-radius: 999px; background: #edf4ff; color: #2a6abc; font-size: 8px; font-style: normal; font-weight: 850; }
.workflow-mini--documents span:last-child { background: #f4f0ff; }

.workflow-demo { min-width: 0; overflow: hidden; border: 1px solid #dfe8f3; border-radius: 13px; background: #f7f9fd; color: #314d6f; }
.workflow-demo__label { display: block; margin-bottom: 13px; color: #2f6ab8; font-size: 13px; font-weight: 900; letter-spacing: .03em; }
.workflow-demo--case { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1px; background: #dfe8f3; }
.workflow-demo--case > section { min-width: 0; padding: 21px; background: #f9fbfe; }
.workflow-demo__fields { display: grid; gap: 8px; }
.workflow-demo__fields span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 8px; background: #fff; }
.workflow-demo__fields small { color: #606c7c; font-size: 12px; }
.workflow-demo__fields b { overflow: hidden; color: #294563; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-demo__case-register em { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #edf5ff; color: #326bb6; font-size: 13px; font-style: normal; font-weight: 850; text-align: center; }
.workflow-demo__case-sources > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.workflow-demo__case-sources > div span { padding: 13px 6px; border: 1px solid #e4ebf4; border-radius: 8px; background: #fff; color: #3d5878; font-size: 13px; font-weight: 800; text-align: center; }
.workflow-demo__case-sources > small { display: block; margin-top: 12px; color: #616c7c; font-size: 12px; line-height: 1.5; }

.workflow-demo--calendar { padding: 20px; }
.workflow-demo--calendar header { display: flex; align-items: center; gap: 8px; padding-bottom: 15px; border-bottom: 1px solid #e2e9f3; }
.workflow-demo--calendar header div { min-width: 0; flex: 1; }
.workflow-demo--calendar header b,
.workflow-demo--calendar header small { display: block; }
.workflow-demo--calendar header b { color: #294765; font-size: 15px; }
.workflow-demo--calendar header small { margin-top: 3px; color: #616b7a; font-size: 12px; }
.workflow-demo--calendar header > span { padding: 8px 10px; border: 1px solid #dce6f2; border-radius: 8px; background: #fff; color: #4c6d94; font-size: 12px; font-weight: 800; }
.workflow-demo--calendar header i { color: #286abd; font-style: normal; }
.workflow-calendar__week { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin: 15px 0 11px; }
.workflow-calendar__week span { padding: 10px 5px; border-radius: 8px; background: #fff; color: #566c87; font-size: 14px; font-weight: 850; text-align: center; }
.workflow-calendar__week small { display: block; margin-bottom: 4px; color: #616c78; font-size: 11px; }
.workflow-calendar__week .is-today { background: #eaf4ff; color: #276bbe; box-shadow: inset 0 0 0 1px #bfd8f5; }
.workflow-calendar__events { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.workflow-calendar__events p { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; margin: 0; padding: 12px; border-radius: 9px; background: #fff; }
.workflow-calendar__events i { grid-row: 1/3; width: 7px; height: 32px; border-radius: 999px; background: #4b90e8; }
.workflow-calendar__events i.is-work { background: #8b72e7; }
.workflow-calendar__events b { color: #3b536f; font-size: 13px; }
.workflow-calendar__events small { color: #626c79; font-size: 11px; }
.workflow-calendar__notice { margin-top: 9px; padding: 10px 12px; border-radius: 8px; background: #fff8e9; color: #78684a; font-size: 12px; }
.workflow-calendar__notice span { margin-right: 6px; color: #935f00; font-weight: 900; }
.workflow-demo__note { margin: 11px 2px 0 !important; color: #606c7b !important; font-size: 12px !important; line-height: 1.55 !important; }

.workflow-demo--briefing { padding: 20px; }
.workflow-demo--briefing header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.workflow-demo--briefing header b { color: #294765; font-size: 15px; }
.workflow-demo--briefing header span { padding: 5px 8px; border-radius: 999px; background: #eef3f9; color: #5e6c7d; font-size: 11px; font-weight: 800; }
.workflow-briefing__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.workflow-briefing__grid span { min-width: 0; padding: 14px 7px; border-radius: 9px; background: #fff; text-align: center; }
.workflow-briefing__grid b,
.workflow-briefing__grid small { display: block; }
.workflow-briefing__grid b { color: #276abd; font-size: 22px; }
.workflow-briefing__grid small { margin-top: 5px; color: #5f6b7d; font-size: 12px; line-height: 1.4; }
.workflow-demo--briefing > p { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 12px; border-radius: 9px; background: #fff5e7; }
.workflow-demo--briefing > p i { display: flex; flex: 0 0 auto; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: #f2b654; color: #fff; font-size: 13px; font-style: normal; font-weight: 900; }
.workflow-demo--briefing > p span,
.workflow-demo--briefing > p b,
.workflow-demo--briefing > p small { display: block; }
.workflow-demo--briefing > p b { color: #705b39; font-size: 13px; }
.workflow-demo--briefing > p small { margin-top: 3px; color: #7a684c; font-size: 11px; line-height: 1.4; }

.workflow-demo--collaboration { background: #f8faff; }
.workflow-demo-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 8px; border-bottom: 1px solid #dfe8f3; background: #fff; }
.workflow-demo-tabs button { min-width: 0; min-height: 40px; padding: 8px 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #5c6c7f; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; transition: background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease; }
.workflow-demo-tabs button:hover { background: #f4f7fb; color: #3f668f; }
.workflow-demo-tabs button:focus-visible { outline: 2px solid #4d8ddd; outline-offset: 2px; }
.workflow-demo-tabs button.is-active { border-color: #cfe0f4; background: #edf5ff; box-shadow: 0 4px 12px rgba(54,112,181,.08); color: #296abe; }
.workflow-demo-panels { min-height: 254px; }
.workflow-demo-panel { min-width: 0; padding: 20px; }
.workflow-demo-panel[hidden] { display: none; }
.workflow-demo-panel.is-active { animation: workflow-panel-switch .34s cubic-bezier(.2,.75,.25,1) both; }
.workflow-collaboration-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: -20px; background: #dfe8f3; }
.workflow-collaboration-grid > section { min-width: 0; padding: 20px; background: #f8faff; }
.workflow-task-card,
.workflow-chat p { margin: 0; padding: 15px; border-radius: 10px; background: #fff; }
.workflow-task-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workflow-task-card em { padding: 5px 8px; border-radius: 999px; background: #eaf3ff; color: #2a6bbc; font-size: 11px; font-style: normal; font-weight: 900; }
.workflow-task-card header small { color: #616c7b; font-size: 11px; }
.workflow-task-card > b { display: block; margin: 14px 0 11px; color: #294563; font-size: 14px; }
.workflow-task-card > p { display: flex; gap: 5px; margin: 0; padding: 0; }
.workflow-task-card > p span { padding: 6px 8px; border-radius: 6px; background: #f2f5f9; color: #596c84; font-size: 11px; }
.workflow-chat { display: grid; gap: 8px; }
.workflow-chat p:first-child { margin-right: 15px; border-bottom-left-radius: 3px; }
.workflow-chat p:last-child { margin-left: 15px; border-bottom-right-radius: 3px; background: #f0ecff; }
.workflow-chat b,
.workflow-chat small { display: block; }
.workflow-chat b { color: #3e5470; font-size: 13px; line-height: 1.45; }
.workflow-chat small { margin-top: 5px; color: #606c7b; font-size: 11px; }
.workflow-document-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.workflow-document-head > span { display: flex; min-width: 0; align-items: center; gap: 9px; }
.workflow-document-head i { display: flex; flex: 0 0 auto; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 9px; background: #eaf3ff; color: #2a6bbc; font-size: 9px; font-style: normal; font-weight: 900; }
.workflow-document-head b { overflow: hidden; color: #324d6d; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-document-head em { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #f0ecff; color: #715abf; font-size: 11px; font-style: normal; font-weight: 900; }
.workflow-document-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: document-step; }
.workflow-document-flow li { position: relative; min-width: 0; padding: 29px 7px 10px; border: 1px solid #e1e8f2; border-radius: 9px; background: #fff; text-align: center; }
.workflow-document-flow li::before { position: absolute; top: 8px; left: 50%; display: flex; width: 17px; height: 17px; align-items: center; justify-content: center; border-radius: 50%; background: #eaf3ff; color: #2a6bbb; content: counter(document-step); counter-increment: document-step; font-size: 9px; font-weight: 900; transform: translateX(-50%); }
.workflow-document-flow b,
.workflow-document-flow small { display: block; }
.workflow-document-flow b { color: #3b5573; font-size: 11px; line-height: 1.35; }
.workflow-document-flow small { margin-top: 4px; color: #616c7c; font-size: 9px; line-height: 1.35; }
.workflow-document-comment { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; margin: 12px 0 0; padding: 11px 12px; border-radius: 9px; background: #fff; }
.workflow-document-comment > span { grid-row: 1/3; display: flex; width: 27px; height: 27px; align-items: center; justify-content: center; border-radius: 50%; background: #edf7f3; color: #0c7a59; font-weight: 900; }
.workflow-document-comment b { color: #425a76; font-size: 12px; }
.workflow-document-comment small { color: #606c7b; font-size: 10px; line-height: 1.4; }
.workflow-message-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.workflow-message-head > span { display: flex; gap: 5px; }
.workflow-message-head b { padding: 6px 8px; border-radius: 7px; background: #f8e968; color: #544b1e; font-size: 10px; }
.workflow-message-head b:last-child { background: #edf3fa; color: #556d8a; }
.workflow-message-head em { color: #616c7b; font-size: 9px; font-style: normal; }
.workflow-message-preview { display: grid; grid-template-columns: .78fr 1.22fr; gap: 9px; }
.workflow-message-preview section,
.workflow-message-preview > p { margin: 0; padding: 13px; border-radius: 9px; background: #fff; }
.workflow-message-preview section { display: grid; grid-template-columns: auto 1fr; gap: 6px 9px; }
.workflow-message-preview section small { color: #616c7c; font-size: 9px; }
.workflow-message-preview section b { color: #405976; font-size: 11px; text-align: right; }
.workflow-message-preview > p { color: #526984; font-size: 11px; line-height: 1.55; }
.workflow-message-status { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.workflow-message-status span { padding: 10px 11px; border: 1px solid #e1e8f2; border-radius: 8px; background: #fff; }
.workflow-message-status b,
.workflow-message-status small { display: block; }
.workflow-message-status b { color: #3d5878; font-size: 11px; }
.workflow-message-status small { margin-top: 3px; color: #616c7b; font-size: 9px; }
.workflow-message-note { margin: 9px 1px 0; color: #5e6b7d; font-size: 10px; line-height: 1.45; }

.workflow-demo--documents { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 16px; }
.workflow-demo--documents > i { display: none; }
.workflow-demo--documents section { display: grid; min-width: 0; grid-template-columns: auto 1fr; gap: 3px 9px; align-items: center; padding: 15px; border-radius: 10px; background: #fff; }
.workflow-demo--documents section > span { grid-row: 1/3; display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 9px; background: #edf5ff; color: #276bbc; font-size: 11px; font-weight: 900; }
.workflow-demo--documents section > div { min-width: 0; }
.workflow-demo--documents b,
.workflow-demo--documents small { display: block; }
.workflow-demo--documents b { color: #334e6e; font-size: 13px; }
.workflow-demo--documents small { overflow: hidden; margin-top: 4px; color: #606c7b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-demo--documents em { grid-column: 1/-1; margin-top: 9px; padding-top: 9px; border-top: 1px solid #edf1f6; color: #566c89; font-size: 11px; font-style: normal; font-weight: 800; text-align: right; }

/* Workflow step narrative motion: one-shot on entry, replayed only on pointer re-entry. */
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__heading { animation: workflow-content-in .42s cubic-bezier(.2,.75,.25,1) .08s both; }
html.has-demo-motion .workflow-step.is-content-visible h3 { animation: workflow-content-in .44s cubic-bezier(.2,.75,.25,1) .16s both; }
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__message { animation: workflow-content-in .44s cubic-bezier(.2,.75,.25,1) .23s both; }
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__feature-groups { animation: workflow-content-in .46s cubic-bezier(.2,.75,.25,1) .3s both; }
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__content > p:not(.workflow-step__message):not(.workflow-step__planned) { animation: workflow-content-in .46s cubic-bezier(.2,.75,.25,1) .36s both; }
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__planned,
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__links { animation: workflow-content-in .46s cubic-bezier(.2,.75,.25,1) .43s both; }
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__visual { animation: workflow-content-in .5s cubic-bezier(.2,.75,.25,1) .5s both; }

html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__case-sources > div span { animation: workflow-demo-item-in .34s cubic-bezier(.2,.75,.25,1) both; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__case-sources > div span:nth-child(1) { animation-delay: .25s; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__case-sources > div span:nth-child(2) { animation-delay: .37s; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__case-sources > div span:nth-child(3) { animation-delay: .49s; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__case-sources > div span:nth-child(4) { animation-delay: .61s; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__case-sources > small { animation: workflow-demo-item-in .34s ease .7s both; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__case-register em { animation: workflow-demo-highlight .56s ease .82s both; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__fields span { animation: workflow-demo-field-in .38s cubic-bezier(.2,.75,.25,1) both; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__fields span:nth-child(1) { animation-delay: 1.02s; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__fields span:nth-child(2) { animation-delay: 1.14s; }
html.has-demo-motion #workflow-step-01.is-demo-active .workflow-demo__fields span:nth-child(3) { animation-delay: 1.26s; }

html.has-demo-motion #workflow-step-02.is-demo-active .workflow-demo--calendar { animation: workflow-demo-panel-in .42s cubic-bezier(.2,.75,.25,1) .18s both; }
html.has-demo-motion #workflow-step-02.is-demo-active .workflow-demo--calendar header > span:first-of-type { animation: workflow-import-in .4s ease .55s both; }
html.has-demo-motion #workflow-step-02.is-demo-active .workflow-demo--calendar header > span:last-of-type { animation: workflow-export-in .4s ease .7s both; }
html.has-demo-motion #workflow-step-02.is-demo-active .workflow-calendar__week .is-today { animation: workflow-demo-highlight .58s ease .72s both; }
html.has-demo-motion #workflow-step-02.is-demo-active .workflow-calendar__events p:first-child { animation: workflow-demo-item-in .38s ease .88s both; }
html.has-demo-motion #workflow-step-02.is-demo-active .workflow-calendar__events p:last-child { animation: workflow-demo-item-in .38s ease 1s both; }
html.has-demo-motion #workflow-step-02.is-demo-active .workflow-calendar__notice { animation: workflow-demo-item-in .4s ease 1.14s both; }

html.has-demo-motion #workflow-step-03.is-demo-active .workflow-briefing__grid span { animation: workflow-demo-item-in .34s cubic-bezier(.2,.75,.25,1) both; }
html.has-demo-motion #workflow-step-03.is-demo-active .workflow-briefing__grid span:nth-child(1) { animation-delay: .2s; }
html.has-demo-motion #workflow-step-03.is-demo-active .workflow-briefing__grid span:nth-child(2) { animation: workflow-demo-item-in .34s .3s both,workflow-demo-highlight .55s 1.12s both; }
html.has-demo-motion #workflow-step-03.is-demo-active .workflow-briefing__grid span:nth-child(3) { animation-delay: .4s; }
html.has-demo-motion #workflow-step-03.is-demo-active .workflow-briefing__grid span:nth-child(4) { animation-delay: .5s; }
html.has-demo-motion #workflow-step-03.is-demo-active .workflow-briefing__grid span:nth-child(5) { animation: workflow-demo-item-in .34s .6s both,workflow-demo-highlight .55s 1.28s both; }
html.has-demo-motion #workflow-step-03.is-demo-active .workflow-briefing__grid span:nth-child(6) { animation-delay: .7s; }
html.has-demo-motion #workflow-step-03.is-demo-active .workflow-demo--briefing > p { animation: workflow-demo-item-in .38s .86s both,workflow-demo-highlight .58s 1.45s both; }

html.has-demo-motion #workflow-step-04.is-demo-active .workflow-task-card { animation: workflow-demo-panel-in .42s ease .2s both; }
html.has-demo-motion #workflow-step-04.is-demo-active .workflow-task-card header small { animation: workflow-demo-item-in .34s ease .48s both; }
html.has-demo-motion #workflow-step-04.is-demo-active .workflow-task-card em { animation: workflow-demo-highlight .5s ease .62s both; }
html.has-demo-motion #workflow-step-04.is-demo-active .workflow-chat p:first-child { animation: workflow-chat-in-left .42s cubic-bezier(.2,.75,.25,1) .88s both; }
html.has-demo-motion #workflow-step-04.is-demo-active .workflow-chat p:last-child { animation: workflow-chat-in-right .42s cubic-bezier(.2,.75,.25,1) 1.12s both; }
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="document"].is-active .workflow-document-flow li { animation: workflow-demo-item-in .32s cubic-bezier(.2,.75,.25,1) both; }
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="document"].is-active .workflow-document-flow li:nth-child(2) { animation-delay: .08s; }
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="document"].is-active .workflow-document-flow li:nth-child(3) { animation-delay: .16s; }
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="document"].is-active .workflow-document-flow li:nth-child(4) { animation-delay: .24s; }
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="document"].is-active .workflow-document-flow li:nth-child(5) { animation-delay: .32s; }
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="message"].is-active .workflow-message-preview,
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="message"].is-active .workflow-message-status,
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="message"].is-active .workflow-message-note { animation: workflow-demo-item-in .34s cubic-bezier(.2,.75,.25,1) both; }
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="message"].is-active .workflow-message-status { animation-delay: .12s; }
html.has-demo-motion #workflow-step-04 .workflow-demo-panel[data-workflow-demo-panel="message"].is-active .workflow-message-note { animation-delay: .22s; }

html.has-demo-motion #workflow-step-05.is-demo-active .workflow-demo--documents section:first-of-type { animation: workflow-file-in .42s cubic-bezier(.2,.75,.25,1) .24s both; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-demo--documents section:first-of-type > span { animation: workflow-file-icon-in .55s ease .42s both; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-demo--documents section:first-of-type em { animation: workflow-demo-highlight .48s ease .66s both; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-demo--documents section:nth-of-type(2) { animation: workflow-demo-item-in .4s ease .88s both; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-demo--documents section:nth-of-type(3) { animation: workflow-demo-item-in .4s ease 1.12s both; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-demo--documents section:nth-of-type(3) em { animation: workflow-demo-highlight .48s ease 1.35s both; }

@keyframes workflow-content-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workflow-demo-item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workflow-demo-field-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes workflow-demo-panel-in { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workflow-demo-highlight { 0% { box-shadow: none; transform: translateY(0); } 55% { box-shadow: 0 0 0 3px rgba(63,137,228,.16),0 10px 22px rgba(45,105,178,.12); transform: translateY(-2px); } 100% { box-shadow: 0 0 0 1px rgba(63,137,228,.08); transform: translateY(0); } }
@keyframes workflow-import-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workflow-export-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workflow-chat-in-left { from { opacity: 0; transform: translateX(-13px); } to { opacity: 1; transform: translateX(0); } }
@keyframes workflow-chat-in-right { from { opacity: 0; transform: translateX(13px); } to { opacity: 1; transform: translateX(0); } }
@keyframes workflow-file-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes workflow-file-icon-in { 0% { opacity: 0; transform: translateX(-12px) scale(.9); } 65% { opacity: 1; transform: translateX(5px) scale(1.04); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes workflow-panel-switch { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.workflow-roadmap { border-top: 1px solid #e8eef6; background: linear-gradient(180deg,#f6f9fd,#fff); }
.roadmap-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.roadmap-card { min-width: 0; padding: 28px; overflow: hidden; border: 1px solid #dfe7f2; border-radius: 17px; background: rgba(255,255,255,.93); box-shadow: 0 15px 40px rgba(31,65,112,.06); }
.roadmap-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roadmap-card__top span { padding: 6px 10px; border: 1px solid #d7e2f1; border-radius: 999px; background: #f4f7fb; color: #546d8b; font-size: 11px; font-weight: 850; }
.roadmap-card__top i { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: #f0f4fa; color: #546c8d; }
.roadmap-card__top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.roadmap-card h3 { margin: 20px 0 12px; color: #263b59; font-size: 21px; font-weight: 850; line-height: 1.4; }
.roadmap-card p { margin: 0; color: #5f6c7e; font-size: 13px; line-height: 1.75; }
.roadmap-card ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.roadmap-card li { padding: 6px 9px; border-radius: 7px; background: #f3f6fa; color: #546b8a; font-size: 11px; font-weight: 750; }
.roadmap-note { margin: 22px 0 0; color: #5f6c7c; font-size: 12px; line-height: 1.6; text-align: center; }

@keyframes workflow-preview-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workflow-signal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .workflow-hero__preview { width: min(100%,620px); margin: 0 auto; }
  .roadmap-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .roadmap-card:last-child { grid-column: 1/-1; max-width: calc(50% - 9px); justify-self: center; }
}

@media (max-width: 960px) {
  .workflow-step__card { grid-template-columns: 1fr; gap: 28px; }
  .workflow-step__visual { padding-top: 26px; border-top: 1px solid #e5ecf5; }
}

@media (max-width: 760px) {
  .workflow-section__head h2,
  .workflow-section__head p,
  .workflow-step h3,
  .workflow-step li,
  .workflow-step__content > p,
  .roadmap-card h3,
  .roadmap-card p { overflow-wrap: anywhere; }
  .workflow-hero__preview { min-height: 430px; padding: 45px 0 68px; }
  .workflow-preview__body { padding: 18px; }
  .workflow-preview__summary { grid-template-columns: 1fr; }
  .workflow-preview__summary article { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3px 8px; padding: 11px; }
  .workflow-preview__summary strong { margin: 0; text-align: right; }
  .workflow-preview__summary small { grid-column: 2; text-align: right; }
  .workflow-preview__signal { min-width: 145px; padding: 9px 10px; }
  .workflow-preview__signal--one { top: 8px; right: -7px; }
  .workflow-preview__signal--two { bottom: 19px; left: -5px; }
  .workflow-preview__signal--three { right: -8px; bottom: 2px; }
  .workflow-timeline { padding-left: 0; }
  .workflow-timeline__rail { top: 50px; bottom: 50px; left: 25px; width: 3px; }
  .workflow-step { width: 100%; max-width: 100%; grid-template-columns: 54px calc(100% - 54px); }
  .workflow-step + .workflow-step { margin-top: 40px; }
  .workflow-step__node { width: 42px; height: 42px; margin-top: 29px; border-width: 4px; }
  .workflow-step__node svg { width: 17px; height: 17px; }
  .workflow-step--left .workflow-step__card::after,
  .workflow-step--right .workflow-step__card::after { top: 49px; left: -30px; width: 29px; }
  .workflow-step__card { width: 100%; max-width: calc(100vw - 86px); grid-template-columns: 1fr; gap: 24px; padding: 23px 20px; overflow: hidden; justify-self: start; border-radius: 15px; }
  .workflow-step h3 { font-size: 23px; }
  .workflow-step li { font-size: 13px; }
  .workflow-step__content > p { font-size: 13px; }
  .workflow-step__content > .workflow-step__message { font-size: 15px; }
  .workflow-step__feature-groups { grid-template-columns: 1fr; }
  .workflow-step__feature-groups--three section:last-child { grid-column: auto; }
  .workflow-step__feature-groups section > b { font-size: 13px; }
  .workflow-step__feature-groups li { font-size: 13px; }
  .workflow-step__visual { padding-top: 22px; }
  .workflow-demo--case { grid-template-columns: 1fr; }
  .workflow-collaboration-grid { grid-template-columns: 1fr; }
  .workflow-collaboration-grid > section + section { border-top: 1px solid #dfe8f3; }
  .workflow-demo-tabs button { min-height: 38px; font-size: 10px; }
  .workflow-demo-panels { min-height: 0; }
  .workflow-document-flow { grid-template-columns: 1fr; }
  .workflow-document-flow li { display: grid; grid-template-columns: 24px 1fr 1fr; gap: 7px; align-items: center; padding: 9px 10px; text-align: left; }
  .workflow-document-flow li::before { position: static; grid-row: 1; grid-column: 1; transform: none; }
  .workflow-document-flow b { grid-column: 2; }
  .workflow-document-flow small { grid-column: 3; margin: 0; text-align: right; }
  .workflow-message-head { align-items: flex-start; flex-direction: column; }
  .workflow-message-preview { grid-template-columns: 1fr; }
  .workflow-calendar__events { grid-template-columns: 1fr; }
  .workflow-briefing__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workflow-demo--documents { grid-template-columns: 1fr; }
  .workflow-demo--calendar header { flex-wrap: wrap; }
  .workflow-demo--calendar header div { flex-basis: 100%; }
  .workflow-step__planned { align-items: flex-start; }
  html.has-demo-motion .workflow-step.is-content-visible .workflow-step__content > *,
  html.has-demo-motion .workflow-step.is-content-visible .workflow-step__visual { animation-duration: .3s !important; animation-delay: .06s !important; }
  html.has-demo-motion .workflow-step.is-demo-active .workflow-demo * { animation-duration: .26s !important; animation-delay: .08s !important; }
  html.has-timeline-motion .workflow-step--left .workflow-step__card,
  html.has-timeline-motion .workflow-step--right .workflow-step__card { transform: translateY(22px); }
  .workflow-mini { flex-wrap: wrap; }
  .workflow-mini > span { flex-basis: calc(50% - 8px); }
  .workflow-mini--briefing > span { flex-basis: calc(33.333% - 6px); }
  .workflow-mini > i { display: none; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .roadmap-card:last-child { grid-column: auto; max-width: none; }
  .roadmap-card { width: 100%; max-width: calc(100vw - 32px); padding: 24px 21px; }
  .roadmap-note { text-align: left; }
}

@media (max-width: 430px) {
  .workflow-hero__copy { width: 100%; min-width: 0; }
  .workflow-hero h1 { font-size: 36px; }
  .workflow-hero .workflow-eyebrow { max-width: 100%; flex-wrap: wrap; justify-content: center; font-size: 8px; letter-spacing: .035em; overflow-wrap: anywhere; }
  .workflow-hero .workflow-eyebrow::before { width: 16px; }
  .workflow-hero__description { overflow-wrap: anywhere; }
  .workflow-preview__case-head strong { font-size: 14px; }
  .workflow-preview__signal { display: none; }
  .workflow-preview__signal > span { min-width: 30px; height: 30px; }
  .workflow-preview__signal b { font-size: 10px; }
  .workflow-preview__signal small { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html.has-timeline-motion .workflow-step__card { opacity: 1; transform: none; }
  .workflow-timeline__rail i { transform: scaleY(1); }
  html.has-demo-motion .workflow-step .workflow-step__content > *,
  html.has-demo-motion .workflow-step .workflow-step__visual,
  html.has-demo-motion .workflow-step .workflow-demo * { opacity: 1; animation: none !important; transform: none; }
  .workflow-hero__preview.is-visible .workflow-preview__window,
  .workflow-hero__preview.is-visible .workflow-preview__signal { animation: none; }
}

/* LawWare-centered workflow mind map */
html { scroll-behavior: smooth; }
.workflow-hero .workflow-shell {
  grid-template-columns: minmax(420px,.82fr) minmax(600px,1.18fr);
  gap: 34px;
  padding-top: 78px;
  padding-bottom: 84px;
}

.workflow-hero__mindmap {
  position: relative;
  width: min(100%,720px);
  min-width: 0;
  min-height: 560px;
  justify-self: end;
  isolation: isolate;
}

.workflow-hero__mindmap::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 360px;
  height: 270px;
  border-radius: 42%;
  opacity: .58;
  background: radial-gradient(ellipse,rgba(85,151,238,.14),rgba(141,107,232,.07) 48%,transparent 72%);
  content: "";
  transform: translate(-50%,-50%);
  filter: blur(12px);
}

.workflow-mindmap__connections {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(100% - 20px);
  overflow: visible;
  pointer-events: none;
}

.workflow-mindmap__line,
.workflow-mindmap__flow { fill: none; vector-effect: non-scaling-stroke; }
.workflow-mindmap__line {
  stroke: #a9c6e9;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .78;
  animation: workflow-mindmap-line-draw .82s cubic-bezier(.3,.7,.25,1) both;
  transition: stroke .25s ease,stroke-width .25s ease,opacity .25s ease;
}
.workflow-mindmap__line[data-mindmap-line="01"] { animation-delay: .56s; }
.workflow-mindmap__line[data-mindmap-line="02"] { animation-delay: .68s; }
.workflow-mindmap__line[data-mindmap-line="03"] { animation-delay: .8s; }
.workflow-mindmap__line[data-mindmap-line="04"] { animation-delay: .92s; }
.workflow-mindmap__line[data-mindmap-line="05"] { animation-delay: 1.04s; }
.workflow-mindmap__line[data-mindmap-line="06"] { animation-delay: 1.16s; }
.workflow-mindmap__line.is-active { stroke: url(#workflowMindmapGradient); stroke-width: 3; opacity: 1; }

.workflow-mindmap__flow {
  stroke: #4f9bea;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .022 .978;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: workflow-mindmap-data-flow 6.4s linear infinite;
  animation-play-state: paused;
}
.workflow-mindmap__flow[data-mindmap-line="01"] { animation-delay: 2.3s; }
.workflow-mindmap__flow[data-mindmap-line="03"] { animation-delay: 4.1s; }
.workflow-mindmap__flow[data-mindmap-line="06"] { animation-delay: 5.9s; }
.workflow-hero__mindmap.is-in-view .workflow-mindmap__flow { animation-play-state: running; }
.workflow-mindmap__flow.is-active { stroke: #786fe1; stroke-width: 4; opacity: 1; }

.workflow-mindmap__endpoints circle {
  fill: #fff;
  stroke: #76a6df;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: workflow-mindmap-point-in .32s ease 1.72s both;
}
.workflow-mindmap__endpoints circle:nth-child(2) { animation-delay: 1.82s; }
.workflow-mindmap__endpoints circle:nth-child(3) { animation-delay: 1.92s; }
.workflow-mindmap__endpoints circle:nth-child(4) { animation-delay: 2.02s; }
.workflow-mindmap__endpoints circle:nth-child(5) { animation-delay: 2.12s; }
.workflow-mindmap__endpoints circle:nth-child(6) { animation-delay: 2.22s; }

.workflow-mindmap__hub {
  position: absolute;
  top: 46.5%;
  left: 50%;
  z-index: 4;
  width: 188px;
  height: 138px;
  transform: translate(-50%,-50%);
}

.workflow-mindmap__hub-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid rgba(72,135,216,.5);
  border-radius: 28px;
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,255,.98));
  box-shadow: 0 24px 60px rgba(35,78,137,.17),0 0 0 7px rgba(72,140,228,.055);
  opacity: 0;
  scale: .93;
  animation: workflow-mindmap-hub-in .55s cubic-bezier(.2,.8,.25,1) .12s both;
}

.workflow-mindmap__hub-card::after {
  position: absolute;
  inset: -9px;
  z-index: -1;
  border: 1px solid rgba(69,145,237,.25);
  border-radius: 34px;
  opacity: .35;
  box-shadow: 0 0 26px rgba(75,144,232,.16);
  content: "";
  animation: workflow-mindmap-hub-glow 5.4s ease-in-out 2.4s infinite;
  animation-play-state: paused;
}
.workflow-hero__mindmap.is-in-view .workflow-mindmap__hub-card::after { animation-play-state: running; }
.workflow-mindmap__hub-card img { display: block; width: 148px; max-width: 100%; height: auto; }
.workflow-mindmap__hub-card strong { margin-top: 12px; color: #29486f; font-size: 14px; font-weight: 850; }
.workflow-mindmap__hub-card small { margin-top: 5px; color: #586c87; font-size: 8px; font-weight: 800; letter-spacing: .13em; }

.workflow-mindmap__node {
  position: absolute;
  z-index: 3;
  display: block;
  width: 31%;
  min-width: 0;
  color: inherit;
  opacity: 0;
  translate: 0 12px;
  scale: 1;
  animation: workflow-mindmap-node-in .46s cubic-bezier(.2,.78,.25,1) var(--node-delay) both;
  transition: scale .24s ease,opacity .24s ease;
}
.workflow-mindmap__node--01 { top: 5%; left: 0; }
.workflow-mindmap__node--02 { top: 2.5%; right: 0; }
.workflow-mindmap__node--03 { top: 38%; left: 0; }
.workflow-mindmap__node--04 { top: 37.5%; right: 0; }
.workflow-mindmap__node--05 { bottom: 5%; left: 4%; }
.workflow-mindmap__node--06 { right: 0; bottom: 3.5%; width: 33%; }

.workflow-mindmap__node-card {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #dce7f3;
  border-radius: 15px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(30,67,116,.09);
  transform: translateY(0);
  animation: workflow-mindmap-float 7s ease-in-out var(--float-delay) infinite;
  animation-play-state: paused;
  transition: border-color .24s ease,box-shadow .24s ease,background .24s ease;
}
.workflow-hero__mindmap.is-in-view .workflow-mindmap__node-card { animation-play-state: running; }
.workflow-mindmap__node i {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg,#edf6ff,#f2efff);
  color: #366bb4;
}
.workflow-mindmap__node:nth-of-type(even) i { color: #6d5bc1; }
.workflow-mindmap__node svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workflow-mindmap__node strong,
.workflow-mindmap__node small { display: block; }
.workflow-mindmap__node-card > span:last-child { min-width: 0; }
.workflow-mindmap__node strong { color: #233d5d; font-size: 14px; font-weight: 900; line-height: 1.35; }
.workflow-mindmap__node small { margin-top: 5px; color: #5e6c7f; font-size: 10px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.workflow-mindmap__node:hover,
.workflow-mindmap__node:focus-visible,
.workflow-mindmap__node.is-active { z-index: 5; outline: none; scale: 1.04; }
.workflow-mindmap__node:hover .workflow-mindmap__node-card,
.workflow-mindmap__node:focus-visible .workflow-mindmap__node-card,
.workflow-mindmap__node.is-active .workflow-mindmap__node-card { border-color: #75a6e0; background: #fff; box-shadow: 0 18px 38px rgba(40,91,158,.17),0 0 0 3px rgba(75,145,232,.08); }
.workflow-hero__mindmap.has-active-node .workflow-mindmap__node:not(.is-active) { opacity: .7; }

.workflow-mindmap__note {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  color: #5f6c7d;
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

#workflow-step-01,
#workflow-step-02,
#workflow-step-03,
#workflow-step-04,
#workflow-step-05,
#case-information-connections { scroll-margin-top: 96px; }

@keyframes workflow-mindmap-hub-in { from { opacity: 0; scale: .93; } to { opacity: 1; scale: 1; } }
@keyframes workflow-mindmap-line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes workflow-mindmap-node-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes workflow-mindmap-point-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes workflow-mindmap-data-flow { 0% { opacity: 0; stroke-dashoffset: 1; } 12%,38% { opacity: .75; } 50%,100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes workflow-mindmap-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes workflow-mindmap-hub-glow { 0%,100% { opacity: .28; transform: scale(.98); } 50% { opacity: .62; transform: scale(1.03); } }

@media (max-width: 1280px) and (min-width: 1081px) {
  .workflow-hero .workflow-shell { grid-template-columns: minmax(390px,.88fr) minmax(540px,1.12fr); gap: 24px; }
  .workflow-mindmap__node strong { font-size: 13px; }
  .workflow-mindmap__node small { font-size: 9px; }
}

@media (max-width: 1080px) {
  .workflow-hero .workflow-shell { grid-template-columns: 1fr; gap: 24px; padding-top: 76px; }
  .workflow-hero__mindmap { width: min(720px,100%); margin: 0 auto; justify-self: center; }
}

@media (max-width: 760px) {
  .workflow-hero .workflow-shell { gap: 28px; padding: 58px 0 68px; }
  .workflow-hero__mindmap {
    display: grid;
    width: 100%;
    min-height: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    padding: 22px 0 0;
  }
  .workflow-hero__mindmap::before { top: 88px; width: 260px; height: 180px; transform: translate(-50%,0); }
  .workflow-hero__mindmap::after { position: absolute; top: 146px; bottom: 38px; left: 50%; z-index: -1; width: 1px; background: linear-gradient(#a9c8eb,#d7e4f3); content: ""; }
  .workflow-mindmap__connections { display: none; }
  .workflow-mindmap__hub { position: relative; top: auto; left: auto; grid-column: 1/-1; width: 176px; height: 126px; justify-self: center; margin-bottom: 18px; transform: none; }
  .workflow-mindmap__hub-card { padding: 17px; border-radius: 24px; }
  .workflow-mindmap__hub-card img { width: 138px; }
  .workflow-mindmap__hub-card strong { margin-top: 9px; font-size: 13px; }
  .workflow-mindmap__node,
  .workflow-mindmap__node--01,
  .workflow-mindmap__node--02,
  .workflow-mindmap__node--03,
  .workflow-mindmap__node--04,
  .workflow-mindmap__node--05,
  .workflow-mindmap__node--06 { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; }
  .workflow-mindmap__node::after { position: absolute; top: 50%; z-index: -1; width: 10px; height: 1px; background: #b6cee9; content: ""; }
  .workflow-mindmap__node:nth-of-type(odd)::after { right: -10px; }
  .workflow-mindmap__node:nth-of-type(even)::after { left: -10px; }
  .workflow-mindmap__node-card { min-height: 82px; grid-template-columns: 36px minmax(0,1fr); gap: 9px; padding: 12px; border-radius: 13px; animation: none; }
  .workflow-mindmap__node i { width: 36px; height: 36px; border-radius: 10px; }
  .workflow-mindmap__node svg { width: 20px; height: 20px; }
  .workflow-mindmap__node strong { font-size: 12px; overflow-wrap: anywhere; }
  .workflow-mindmap__node small { font-size: 10px; }
  .workflow-mindmap__note { position: static; grid-column: 1/-1; margin-top: 5px; }
}

@media (max-width: 380px) {
  .workflow-hero__mindmap { grid-template-columns: 1fr; }
  .workflow-hero__mindmap::after { left: 20px; }
  .workflow-mindmap__hub { grid-column: 1; }
  .workflow-mindmap__node,
  .workflow-mindmap__node--06 { width: calc(100% - 38px); margin-left: 38px; }
  .workflow-mindmap__node::after,
  .workflow-mindmap__node:nth-of-type(odd)::after,
  .workflow-mindmap__node:nth-of-type(even)::after { right: auto; left: -18px; width: 18px; }
  .workflow-mindmap__note { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .workflow-mindmap__hub-card,
  .workflow-mindmap__node,
  .workflow-mindmap__node-card,
  .workflow-mindmap__endpoints circle { opacity: 1; translate: none; scale: 1; transform: none; animation: none !important; }
  .workflow-mindmap__line { stroke-dashoffset: 0; animation: none !important; }
  .workflow-mindmap__flow { display: none; }
}

/* Horizontal LawWare workflow canvas
 * 구조: 7칸(시작 · STEP 01~05 · 도달) × 3행(상단 보조 · 메인 · 하단 보조)
 * - 가로 위치는 칸 단위 %(1칸 = 100/7 = 14.2857%, 카드 폭 12.2857%, 좌우 여백 1%)
 * - 세로 위치는 px 고정 → index.html SVG viewBox(1400×600)의 y좌표와 1:1로 대응
 * - 주의: 카드 top/height를 바꾸면 SVG 분기선 y좌표(226/130, 374/470)도 같이 바꿔야 선이 카드에 닿음
 */
.workflow-hero { min-height: 0; }
.workflow-hero .workflow-shell { display: block; min-height: 0; padding: 76px 0 92px; }
.workflow-hero__copy { max-width: 1080px; margin: 0 auto; text-align: center; }
.workflow-hero__copy .workflow-eyebrow { justify-content: center; }
.workflow-hero h1 { margin: 18px 0 19px; font-size: clamp(46px,4.8vw,68px); line-height: 1.16; }
.workflow-hero__lead { font-size: clamp(20px,1.8vw,25px); }
.workflow-hero__description { max-width: 900px; margin: 15px auto 0; font-size: 16px; line-height: 1.78; }
.workflow-hero__actions { justify-content: center; margin-top: 26px; }

.workflow-hero__pipeline {
  /* 셸(최대 1440px)보다 넓게 펼치기 위해 음수 좌우 margin으로 화면 폭 기준 확장 */
  --pipeline-width: min(1760px, calc(100vw - 64px));
  --pipeline-slot: 14.2857%;
  --pipeline-card: 12.2857%;
  position: relative;
  width: var(--pipeline-width);
  height: 600px;
  margin: 56px calc((100% - var(--pipeline-width)) / 2) 36px;
  isolation: isolate;
}
/* 반복 재생(JS initializePipelineReplay):
 * 1) is-replay-out  → 캔버스 전체를 .5s 페이드아웃
 * 2) is-replay-reset → 내부 애니메이션을 잠시 none으로 끊었다가 해제 → 조립 애니메이션이 delay 포함 처음부터 다시 시작
 * 주의: 노드는 fill-mode both로 opacity가 고정돼 transition이 먹지 않으므로, 개별 요소가 아닌 캔버스(aside) 단위로 페이드함 */
.workflow-hero__pipeline { transition: opacity .5s ease; }
.workflow-hero__pipeline.is-replay-out { opacity: 0; }
.workflow-hero__pipeline.is-replay-reset *,
.workflow-hero__pipeline.is-replay-reset *::before,
.workflow-hero__pipeline.is-replay-reset *::after { animation: none !important; }
.workflow-hero__pipeline::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 92%;
  height: 340px;
  border-radius: 50%;
  opacity: .85;
  background: radial-gradient(ellipse,rgba(64,154,242,.14),rgba(145,108,231,.07) 52%,transparent 74%);
  content: "";
  transform: translate(-50%,-50%);
  filter: blur(14px);
}
.workflow-pipeline__connections { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.workflow-pipeline__line,
.workflow-pipeline__branch,
.workflow-pipeline__flow { fill: none; vector-effect: non-scaling-stroke; }
.workflow-pipeline__line,
.workflow-pipeline__branch {
  stroke: #a9c5e8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .95;
  /* fade-in 병행: 그려지기 전 round linecap이 점으로 남는 현상, 마지막 선 화살표(marker)가 먼저 보이는 현상 방지 */
  animation: workflow-pipeline-line-in .42s cubic-bezier(.25,.7,.3,1) both,workflow-pipeline-fade-in .16s ease both;
  transition: stroke .25s ease,stroke-width .25s ease,opacity .25s ease;
}
/* 메인 선은 노드 등장 직전에 그려지도록 node-delay보다 .3s 앞서 시작 */
.workflow-pipeline__main-lines .workflow-pipeline__line:nth-child(1) { animation-delay: .42s; }
.workflow-pipeline__main-lines .workflow-pipeline__line:nth-child(2) { animation-delay: .87s; }
.workflow-pipeline__main-lines .workflow-pipeline__line:nth-child(3) { animation-delay: 1.32s; }
.workflow-pipeline__main-lines .workflow-pipeline__line:nth-child(4) { animation-delay: 1.77s; }
.workflow-pipeline__main-lines .workflow-pipeline__line:nth-child(5) { animation-delay: 2.22s; }
.workflow-pipeline__main-lines .workflow-pipeline__line:nth-child(6) { animation-delay: 2.67s; }
/* pathLength=1 기준이라 점선(4 4 등)을 주면 그리기 애니메이션이 무효화됨 → 실선으로 '뻗어나가게' 그림 */
.workflow-pipeline__branch { stroke-width: 1.6; opacity: .8; animation-duration: .5s; }
.workflow-pipeline__branch-lines .workflow-pipeline__branch:nth-child(1) { animation-delay: 3.1s; }
.workflow-pipeline__branch-lines .workflow-pipeline__branch:nth-child(2) { animation-delay: 3.22s; }
.workflow-pipeline__branch-lines .workflow-pipeline__branch:nth-child(3) { animation-delay: 3.34s; }
.workflow-pipeline__branch-lines .workflow-pipeline__branch:nth-child(4) { animation-delay: 3.46s; }
.workflow-pipeline__branch-lines .workflow-pipeline__branch:nth-child(5) { animation-delay: 3.58s; }
.workflow-pipeline__branch-lines .workflow-pipeline__branch:nth-child(6) { animation-delay: 3.7s; }
.workflow-pipeline__line.is-active,
.workflow-pipeline__branch.is-active { stroke: url(#workflowPipelineGradient); stroke-width: 3.5; opacity: 1; }
.workflow-pipeline__flow {
  stroke: #4b9cf1;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: .008 .992;
  stroke-dashoffset: 1;
  opacity: 0;
  /* 점이 경로 끝(도달 카드 왼쪽)에 닿는 시점 = 주기의 48% → arrive 펄스와 같은 주기·지연을 써서 동기화 */
  animation: workflow-pipeline-data 7.6s linear 4.1s infinite;
  animation-play-state: paused;
}
.workflow-hero__pipeline.is-in-view .workflow-pipeline__flow { animation-play-state: running; }

.workflow-pipeline__start,
.workflow-pipeline__main-node,
.workflow-pipeline__aux,
.workflow-pipeline__end {
  position: absolute;
  z-index: 2;
  left: calc(var(--col) * var(--pipeline-slot) + 1%);
  width: var(--pipeline-card);
  min-width: 0;
  opacity: 0;
  translate: 0 12px;
  scale: 1;
  animation: workflow-pipeline-node-in .46s cubic-bezier(.2,.78,.25,1) var(--node-delay,var(--aux-delay)) both;
  transition: scale .22s ease,filter .22s ease;
}

/* 시작 · 도달 카드: 메인 카드보다 위아래로 크게(북엔드) */
.workflow-pipeline__start,
.workflow-pipeline__end { --col: 0; top: 200px; height: 200px; }
.workflow-pipeline__end { --col: 6; }
.workflow-pipeline__start-card,
.workflow-pipeline__end-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  border-radius: 22px;
  text-align: center;
}
.workflow-pipeline__start-card {
  border: 1px solid rgba(65,139,225,.58);
  background: linear-gradient(145deg,#fff,#f1f7ff);
  box-shadow: 0 22px 50px rgba(38,84,145,.16),0 0 0 7px rgba(66,144,234,.06);
}
.workflow-pipeline__start-card::after { position: absolute; inset: -9px; z-index: -1; border: 1px solid rgba(74,147,235,.22); border-radius: 28px; opacity: .3; content: ""; animation: workflow-pipeline-glow 5.8s ease-in-out 3.7s infinite; animation-play-state: paused; }
.workflow-hero__pipeline.is-in-view .workflow-pipeline__start-card::after { animation-play-state: running; }
.workflow-pipeline__start img { width: clamp(118px,8.4vw,158px); max-width: 100%; height: auto; }
.workflow-pipeline__start strong { margin-top: 12px; color: #233f64; font-size: clamp(15px,1vw,19px); font-weight: 900; line-height: 1.35; }
.workflow-pipeline__start small,
.workflow-pipeline__end small.workflow-pipeline__end-label { margin-top: 6px; color: #586c86; font-size: 11px; font-weight: 850; letter-spacing: .14em; }

/* 도달 카드: 시작 카드와 대비되도록 그라디언트 채움 + 흐름 점 도착 시 링 펄스 */
.workflow-pipeline__end-card {
  border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(150deg,#1e6fd0 0%,#4f5fd6 55%,#7656d0 100%);
  box-shadow: 0 24px 54px rgba(74,96,214,.3),0 0 0 7px rgba(126,112,232,.1);
  color: #fff;
}
.workflow-pipeline__end-card::after { position: absolute; inset: -10px; z-index: -1; border: 2px solid rgba(124,114,234,.55); border-radius: 30px; opacity: 0; content: ""; animation: workflow-pipeline-arrive 7.6s ease-out 4.1s infinite; animation-play-state: paused; }
.workflow-hero__pipeline.is-in-view .workflow-pipeline__end-card::after { animation-play-state: running; }
/* flex-shrink:0 → 세로 flex 안에서 카드가 좁아질 때 아이콘이 납작해지는 현상 방지 */
.workflow-pipeline__end-icon { display: flex; flex-shrink: 0; width: clamp(42px,2.8vw,54px); height: clamp(42px,2.8vw,54px); align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.workflow-pipeline__end-icon svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.workflow-pipeline__end strong { margin-top: 12px; color: #fff; font-size: clamp(15px,1vw,19px); font-weight: 900; line-height: 1.35; }
.workflow-pipeline__end small { display: block; margin-top: 6px; color: rgba(255,255,255,.94); font-size: clamp(12px,.72vw,13.5px); font-weight: 650; line-height: 1.5; }
.workflow-pipeline__end small.workflow-pipeline__end-label { margin-top: 10px; color: rgba(255,255,255,.88); }

/* 연결점(작은 원): 메인 선 양 끝 */
.workflow-pipeline__start::after,
.workflow-pipeline__main-node::before,
.workflow-pipeline__main-node::after { position: absolute; top: 50%; z-index: 3; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #6b9edb; box-shadow: 0 0 0 1px #9ebce0; content: ""; transform: translateY(-50%); }
.workflow-pipeline__start::after { right: -6px; }
.workflow-pipeline__main-node::before { left: -6px; }
.workflow-pipeline__main-node::after { right: -6px; background: #8a79dc; }

.workflow-pipeline__main-node {
  top: 226px;
  display: flex;
  height: 148px;
  flex-direction: column;
  padding: clamp(14px,1vw,20px);
  border: 1px solid #d9e5f2;
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 38px rgba(30,67,116,.1);
  color: inherit;
}
.workflow-pipeline__main-node--01 { --col: 1; }
.workflow-pipeline__main-node--02 { --col: 2; }
.workflow-pipeline__main-node--03 { --col: 3; }
.workflow-pipeline__main-node--04 { --col: 4; }
.workflow-pipeline__main-node--05 { --col: 5; }
.workflow-pipeline__step { color: #3a6ca8; font-size: clamp(11px,.66vw,12.5px); font-weight: 900; letter-spacing: .1em; }
.workflow-pipeline__main-node i { position: absolute; top: clamp(12px,.9vw,18px); right: clamp(12px,.9vw,18px); display: flex; width: clamp(38px,2.4vw,46px); height: clamp(38px,2.4vw,46px); align-items: center; justify-content: center; border-radius: 13px; background: linear-gradient(135deg,#eaf4ff,#efebff); color: #366bb4; }
.workflow-pipeline__main-node:nth-of-type(even) i { color: #6c5ac1; }
.workflow-pipeline__main-node svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workflow-pipeline__main-node strong,
.workflow-pipeline__main-node small { display: block; min-width: 0; }
/* margin-top:auto → 제목·설명을 카드 하단에 붙여, 줄 수가 달라도 카드 간 기준선이 맞도록 함 */
.workflow-pipeline__main-node strong { margin-top: auto; color: #1f3858; font-size: clamp(16px,1.06vw,21px); font-weight: 900; line-height: 1.3; letter-spacing: -.01em; }
.workflow-pipeline__main-node small { margin-top: 6px; color: #5d6c81; font-size: clamp(12.5px,.75vw,14.5px); font-weight: 650; line-height: 1.45; }

.workflow-pipeline__aux {
  display: flex;
  height: 130px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(13px,.9vw,18px) clamp(14px,1vw,20px);
  border: 1px dashed #c6d9ee;
  border-radius: 16px;
  background: rgba(250,252,255,.97);
  box-shadow: 0 12px 28px rgba(35,73,123,.07);
  color: inherit;
}
/* 보조 카드는 연결된 STEP과 같은 칸에 정렬 → 분기선이 곧게 수직으로 뻗음 */
.workflow-pipeline__aux--01 { --col: 1; top: 0; }
.workflow-pipeline__aux--mcp { --col: 6; top: 0; }
.workflow-pipeline__aux--02 { --col: 2; top: 470px; }
/* 03·04는 위쪽 줄로 → 히어로 상단 가운데가 비지 않도록 위(01·03·04·MCP)/아래(02·05)로 나눠 배치 */
.workflow-pipeline__aux--03 { --col: 3; top: 0; }
.workflow-pipeline__aux--04-bottom { --col: 4; top: 0; }
.workflow-pipeline__aux--05 { --col: 5; top: 470px; }
.workflow-pipeline__aux span,
.workflow-pipeline__aux strong,
.workflow-pipeline__aux small { display: block; }
.workflow-pipeline__aux span { color: #2c5585; font-size: clamp(14px,.92vw,17.5px); font-weight: 900; line-height: 1.35; }
.workflow-pipeline__aux strong { margin-top: 8px; color: #415c7b; font-size: clamp(12.5px,.74vw,14.5px); font-weight: 750; line-height: 1.45; }
.workflow-pipeline__aux small { margin-top: 4px; color: #5d6b7d; font-size: clamp(11.5px,.68vw,13px); line-height: 1.45; }
.workflow-pipeline__aux em { display: inline-flex; align-self: flex-start; margin-bottom: 9px; padding: 4px 9px; border: 1px solid #d8e1ec; border-radius: 999px; background: #f2f5f9; color: #596c84; font-size: 11px; font-style: normal; font-weight: 900; }
.workflow-pipeline__aux.is-planned { background: rgba(248,249,252,.96); }
.workflow-pipeline__aux.is-planned span { color: #556982; }

.workflow-pipeline__main-node:hover,
.workflow-pipeline__main-node:focus-visible,
.workflow-pipeline__aux:hover,
.workflow-pipeline__aux:focus-visible,
.workflow-pipeline__start:focus-visible,
.workflow-pipeline__end:focus-visible,
.workflow-pipeline__main-node.is-active,
.workflow-pipeline__aux.is-active,
.workflow-pipeline__start.is-active,
.workflow-pipeline__end.is-active { z-index: 5; outline: none; scale: 1.035; filter: drop-shadow(0 14px 22px rgba(43,92,158,.15)); }
.workflow-pipeline__main-node:hover,
.workflow-pipeline__main-node:focus-visible,
.workflow-pipeline__main-node.is-active { border-color: #75a6e0; box-shadow: 0 20px 44px rgba(40,91,158,.17),0 0 0 3px rgba(75,145,232,.08); }
.workflow-pipeline__aux:hover,
.workflow-pipeline__aux:focus-visible,
.workflow-pipeline__aux.is-active { border-color: #7fa9dc; background: #fff; }
.workflow-hero__pipeline.is-in-view .workflow-pipeline__main-node i { animation: workflow-pipeline-icon 12s ease-in-out infinite; animation-play-state: running; }
.workflow-hero__pipeline.is-in-view .workflow-pipeline__main-node--02 i { animation-delay: 2.4s; }
.workflow-hero__pipeline.is-in-view .workflow-pipeline__main-node--03 i { animation-delay: 4.8s; }
.workflow-hero__pipeline.is-in-view .workflow-pipeline__main-node--04 i { animation-delay: 7.2s; }
.workflow-hero__pipeline.is-in-view .workflow-pipeline__main-node--05 i { animation-delay: 9.6s; }

/* 1280~1599px: 카드 폭이 150~190px로 좁아져 영문 라벨 자간을 줄여 줄바꿈을 최소화 */
@media (max-width: 1599px) {
  .workflow-pipeline__start small,
  .workflow-pipeline__end small.workflow-pipeline__end-label { font-size: 11px; letter-spacing: .06em; }
}

.workflow-pipeline__note { position: absolute; right: 0; bottom: -34px; left: 0; margin: 0; color: #5f6c7d; font-size: 12.5px; line-height: 1.4; text-align: center; }

@keyframes workflow-pipeline-line-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* to 생략 → 각 선의 원래 opacity(.95/.8, hover 시 1)로 자연스럽게 이어짐 */
@keyframes workflow-pipeline-fade-in { from { opacity: 0; } }
@keyframes workflow-pipeline-node-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes workflow-pipeline-data { 0% { opacity: 0; stroke-dashoffset: 1; } 10%,34% { opacity: .85; } 48%,100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes workflow-pipeline-glow { 0%,100% { opacity: .24; transform: scale(.98); } 50% { opacity: .62; transform: scale(1.03); } }
@keyframes workflow-pipeline-arrive { 0%,44% { opacity: 0; transform: scale(.97); } 50% { opacity: .9; transform: scale(1); } 68%,100% { opacity: 0; transform: scale(1.07); } }
@keyframes workflow-pipeline-icon { 0%,8%,100% { box-shadow: none; transform: translateY(0); } 3% { box-shadow: 0 0 0 4px rgba(72,139,225,.1); transform: translateY(-1px); } }

/* 태블릿·소형 노트북: 7칸 가로 배치는 카드가 너무 좁아지므로 3열 지그재그 그리드로 전환 */
@media (max-width: 1279px) and (min-width: 761px) {
  .workflow-hero .workflow-shell { padding-bottom: 70px; }
  .workflow-hero__pipeline { --pipeline-width: 100%; display: grid; height: auto; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 44px 0 20px; }
  .workflow-hero__pipeline::before { top: 42%; width: 90%; height: 460px; }
  .workflow-pipeline__connections { display: none; }
  .workflow-pipeline__start,
  .workflow-pipeline__main-node,
  .workflow-pipeline__aux,
  .workflow-pipeline__end { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; min-height: 112px; }
  .workflow-pipeline__start { grid-row: 2; grid-column: 1; min-height: 150px; }
  .workflow-pipeline__main-node { min-height: 128px; }
  .workflow-pipeline__main-node strong { margin-top: 22px; }
  .workflow-pipeline__main-node--01 { grid-row: 2; grid-column: 2; }
  .workflow-pipeline__main-node--02 { grid-row: 2; grid-column: 3; }
  .workflow-pipeline__main-node--03 { grid-row: 3; grid-column: 3; }
  .workflow-pipeline__main-node--04 { grid-row: 3; grid-column: 2; }
  .workflow-pipeline__main-node--05 { grid-row: 3; grid-column: 1; }
  .workflow-pipeline__aux--01 { grid-row: 1; grid-column: 2; }
  .workflow-pipeline__aux--02 { grid-row: 1; grid-column: 3; }
  .workflow-pipeline__aux--03 { grid-row: 4; grid-column: 3; }
  .workflow-pipeline__aux--mcp { grid-row: 6; grid-column: 1/-1; }
  .workflow-pipeline__aux--04-bottom { grid-row: 4; grid-column: 2; }
  .workflow-pipeline__aux--05 { grid-row: 4; grid-column: 1; }
  /* 도달 카드는 맨 아래 전체 폭 배너로 → 흐름의 결론으로 읽히도록 */
  .workflow-pipeline__end { grid-row: 5; grid-column: 1/-1; min-height: 0; }
  .workflow-pipeline__end-card { flex-direction: row; justify-content: center; gap: 16px; padding: 22px 26px; text-align: left; }
  .workflow-pipeline__end-card > div { display: flex; flex-direction: column; }
  .workflow-pipeline__end strong { margin-top: 0; }
  .workflow-pipeline__end small.workflow-pipeline__end-label { order: -1; margin: 0 0 4px; }
  .workflow-pipeline__note { position: static; grid-row: 7; grid-column: 1/-1; margin-top: 4px; }
  .workflow-pipeline__start::after,
  .workflow-pipeline__end::before,
  .workflow-pipeline__main-node::before,
  .workflow-pipeline__main-node::after { display: none; }
  .workflow-pipeline__start::before,
  .workflow-pipeline__main-node::after { position: absolute; z-index: 4; display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1px solid #c6d7ea; border-radius: 50%; background: #fff; color: #3f6da5; font-size: 13px; font-weight: 900; box-shadow: 0 5px 12px rgba(38,77,129,.08); }
  .workflow-pipeline__start::before { top: 50%; right: -22px; content: "→"; transform: translateY(-50%); }
  .workflow-pipeline__main-node--01::after { display: flex; top: 50%; right: -22px; content: "→"; transform: translateY(-50%); }
  .workflow-pipeline__main-node--02::after { display: flex; right: 50%; bottom: -22px; top: auto; content: "↓"; transform: translateX(50%); }
  .workflow-pipeline__main-node--03::after,
  .workflow-pipeline__main-node--04::after { display: flex; top: 50%; right: auto; left: -22px; content: "←"; transform: translateY(-50%); }
  .workflow-pipeline__main-node--05::after { display: none; }
}

@media (max-width: 760px) {
  .workflow-hero .workflow-shell { padding-top: 58px; padding-bottom: 66px; }
  .workflow-hero h1 { font-size: 39px; }
  .workflow-hero h1 b { display: block; }
  .workflow-hero__lead { font-size: 18px; }
  .workflow-hero__description { font-size: 14px; }
  .workflow-hero__pipeline { --pipeline-width: 100%; display: flex; height: auto; flex-direction: column; gap: 12px; margin: 38px 0 0; padding-left: 28px; }
  .workflow-hero__pipeline::before { top: 120px; left: 18px; width: 150px; height: 720px; transform: none; }
  .workflow-hero__pipeline::after { position: absolute; top: 50px; bottom: 48px; left: 16px; z-index: -1; width: 2px; border-radius: 999px; background: linear-gradient(#4a9bf0,#9170e7); content: ""; opacity: .48; }
  .workflow-pipeline__connections { display: none; }
  .workflow-pipeline__start,
  .workflow-pipeline__main-node,
  .workflow-pipeline__aux,
  .workflow-pipeline__end { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: auto; min-height: 0; }
  .workflow-pipeline__start { order: 1; height: 112px; }
  .workflow-pipeline__main-node--01 { order: 2; }
  .workflow-pipeline__aux--01 { order: 3; }
  .workflow-pipeline__main-node--02 { order: 4; }
  .workflow-pipeline__aux--02 { display: none; }
  .workflow-pipeline__main-node--03 { order: 5; }
  .workflow-pipeline__aux--03 { display: none; }
  .workflow-pipeline__main-node--04 { order: 6; }
  .workflow-pipeline__aux--04-bottom { order: 8; }
  .workflow-pipeline__main-node--05 { order: 9; }
  .workflow-pipeline__aux--05 { order: 10; }
  .workflow-pipeline__end { order: 11; }
  .workflow-pipeline__aux--mcp { order: 12; }
  .workflow-pipeline__note { position: static; order: 13; margin-top: 4px; text-align: left; }
  .workflow-pipeline__main-node { min-height: 118px; padding: 16px 18px; }
  .workflow-pipeline__main-node i { top: 14px; right: 14px; width: 42px; height: 42px; }
  .workflow-pipeline__main-node strong { margin-top: 14px; font-size: 18px; }
  .workflow-pipeline__main-node small { font-size: 13.5px; }
  .workflow-pipeline__aux { width: calc(100% - 26px); height: auto; min-height: 76px; margin-left: 26px; padding: 13px 15px; }
  .workflow-pipeline__aux span { font-size: 15px; }
  .workflow-pipeline__aux strong { margin-top: 4px; font-size: 13px; }
  .workflow-pipeline__aux small { font-size: 12px; }
  .workflow-pipeline__aux em { margin: 0 7px 6px 0; }
  .workflow-pipeline__end-card { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 18px 20px; text-align: left; }
  .workflow-pipeline__end-card > div { display: flex; flex-direction: column; }
  .workflow-pipeline__end strong { margin-top: 0; font-size: 17px; }
  .workflow-pipeline__end small.workflow-pipeline__end-label { order: -1; margin: 0 0 4px; }
  .workflow-pipeline__start::after,
  .workflow-pipeline__end::before,
  .workflow-pipeline__main-node::before,
  .workflow-pipeline__main-node::after { display: none; }
  .workflow-pipeline__start::before,
  .workflow-pipeline__main-node::before,
  .workflow-pipeline__end::after { position: absolute; top: 50%; left: -18px; display: block; width: 18px; height: 1px; border: 0; border-radius: 0; background: #87add8; content: ""; transform: none; }
  .workflow-pipeline__start-card { align-items: flex-start; padding-left: 20px; text-align: left; }
  .workflow-pipeline__start strong { margin-top: 8px; font-size: 16px; }
  .workflow-pipeline__start img { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-pipeline__start,
  .workflow-pipeline__main-node,
  .workflow-pipeline__aux,
  .workflow-pipeline__end { opacity: 1; translate: none; scale: 1; animation: none !important; }
  .workflow-pipeline__line,
  .workflow-pipeline__branch { stroke-dashoffset: 0; animation: none !important; }
  .workflow-pipeline__flow { display: none; }
  .workflow-pipeline__start-card::after,
  .workflow-pipeline__end-card::after,
  .workflow-pipeline__main-node i { animation: none !important; }
}

/* ==========================================================================
 * 타임라인 카드 정리 (2026-11-05)
 * - STEP 04: 탭을 본문 쪽으로 옮겨 설명·예시를 함께 전환 (한 번에 한 기능만 노출)
 * - STEP 05: 첨부파일 이관 → 청구·수납 흐름 예시
 * ========================================================================== */
/* 본문 쪽 탭: 기존 .workflow-demo-tabs 버튼 스타일을 재사용하고 틀만 카드형으로 */
.workflow-step__tabs { margin: 2px 0 16px; border: 1px solid #dfe8f3; border-radius: 12px; background: #f7f9fc; }
.workflow-step__tabs button { font-size: 13px; }
.workflow-step__tab-copy[hidden] { display: none; }
.workflow-step__tab-copy.is-active { animation: workflow-panel-switch .34s cubic-bezier(.2,.75,.25,1) both; }
.workflow-step__tab-copy ul { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; }
.workflow-step__tab-copy li { position: relative; padding-left: 13px; color: #405673; font-size: 15px; font-weight: 700; line-height: 1.55; }
.workflow-step__tab-copy li::before { position: absolute; top: .62em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #6d9bd8; content: ""; }
.workflow-step__tab-copy > p:not(.workflow-step__notice) { margin: 0 0 4px; color: #5a6b83; font-size: 15px; line-height: 1.7; }
.workflow-step__tab-copy > .workflow-step__notice { margin: 0 0 4px; padding: 11px 13px; border-radius: 9px; background: #f6f8fb; color: #5e6c81; font-size: 12px; line-height: 1.55; }
.workflow-step__tab-copy .workflow-step__links { margin-top: 14px; }
.workflow-step--tabbed .workflow-step__planned { margin-top: 14px !important; }
/* 탭이 빠진 예시 영역: 패널 최소 높이 해제 */
.workflow-step--tabbed .workflow-demo--collaboration .workflow-demo-panels { min-height: 0; }
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__tabs { animation: workflow-content-in .46s cubic-bezier(.2,.75,.25,1) .3s both; }
html.has-demo-motion .workflow-step.is-content-visible .workflow-step__tab-copies { animation: workflow-content-in .46s cubic-bezier(.2,.75,.25,1) .36s both; }

/* STEP 05 예시: 첨부파일 선택·이관 + 청구 → 입금 → 수납 */
.workflow-demo--docbill { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 12px; padding: 16px; }
.workflow-docbill__files,
.workflow-docbill__billing { min-width: 0; padding: 16px; border-radius: 12px; background: #fff; }
.workflow-docbill__files ul,
.workflow-docbill__billing ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
/* 카드 공통 불릿(li::before 점)·들여쓰기가 예시 목록에 상속되지 않도록 초기화 */
.workflow-demo--docbill li { padding-left: 0; }
.workflow-demo--docbill li::before { content: none; display: none; }
.workflow-docbill__files li { display: grid; grid-template-columns: 20px 1fr; gap: 1px 9px; align-items: center; padding: 9px 10px; border: 1px solid #e6edf6; border-radius: 9px; }
.workflow-docbill__files li i { grid-row: 1/3; display: flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 1.5px solid #c3d2e5; border-radius: 5px; color: #fff; font-size: 11px; font-style: normal; font-weight: 900; }
.workflow-docbill__files li.is-checked { border-color: #cfe0f4; background: #f4f8fe; }
.workflow-docbill__files li.is-checked i { border-color: #3d84de; background: #3d84de; }
.workflow-docbill__files b { color: #2f4766; font-size: 13px; }
.workflow-docbill__files small { color: #606c7c; font-size: 11px; }
.workflow-docbill__files em { display: block; margin-top: 11px; padding: 9px 10px; border-radius: 9px; background: #edf5ff; color: #296abe; font-size: 12px; font-style: normal; font-weight: 850; text-align: center; }
.workflow-docbill__billing li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid #e6edf6; border-radius: 9px; }
.workflow-docbill__billing li small { grid-column: 1/-1; color: #566c89; font-size: 11px; font-weight: 850; }
.workflow-docbill__billing li b { color: #405673; font-size: 13px; }
.workflow-docbill__billing li strong { color: #1f3858; font-size: 14px; font-weight: 900; }
.workflow-docbill__billing li.is-done { border-color: #cdeedd; background: #f2fbf6; }
.workflow-docbill__billing li.is-done small { color: #147a48; }
.workflow-docbill__note { grid-column: 1/-1; margin: 0; color: #5f6b7b; font-size: 12px; line-height: 1.5; text-align: right; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__files li { animation: workflow-file-in .42s cubic-bezier(.2,.75,.25,1) both; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__files li:nth-child(1) { animation-delay: .2s; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__files li:nth-child(2) { animation-delay: .32s; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__files li:nth-child(3) { animation-delay: .44s; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__files em { animation: workflow-demo-highlight .48s ease .7s both; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__billing li { animation: workflow-demo-item-in .4s ease both; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__billing li:nth-child(1) { animation-delay: .9s; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__billing li:nth-child(2) { animation-delay: 1.1s; }
html.has-demo-motion #workflow-step-05.is-demo-active .workflow-docbill__billing li.is-done { animation: workflow-demo-item-in .4s ease 1.3s both, workflow-demo-highlight .48s ease 1.65s both; }
@media (max-width: 760px) {
  .workflow-step__tabs button { font-size: 11px; }
  .workflow-step__tab-copy li,
  .workflow-step__tab-copy > p:not(.workflow-step__notice) { font-size: 14px; }
  .workflow-demo--docbill { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-step__tab-copy.is-active,
  html.has-demo-motion .workflow-step .workflow-step__tabs,
  html.has-demo-motion .workflow-step .workflow-step__tab-copies { animation: none !important; opacity: 1; transform: none; }
}

/* AI MCP 배지 묶음 (2026-11-06): '개발 예정' + '프리미엄 서버' 두 배지를 한 줄로 */
.wf-badges { display: flex !important; margin-bottom: 9px; flex-wrap: wrap; gap: 5px; }
.wf-badges em { margin-bottom: 0 !important; }
.wf-badges em.is-premium { border-color: #e6d6a8; background: #fff7e0; color: #906100; }

/* 연동 서비스 로고 (2026-11-06): 로고 원본 비율 유지(object-fit: contain), 색 변경 없이 그대로 표시
 * 주의: 보조 카드의 '.workflow-pipeline__aux span { display:block; 글자 스타일 }'보다 우선하도록 카드 클래스를 앞에 붙임 */
.workflow-pipeline__aux .wf-extra { font-style: normal; }
.workflow-pipeline__aux .wf-logo-row { display: flex; margin-top: 10px; flex-wrap: wrap; gap: 6px; }
.workflow-pipeline__aux .wf-logo { display: inline-flex; height: 26px; padding: 0 8px 0 6px; border: 1px solid #dde6f1; border-radius: 7px; background: #fff; align-items: center; gap: 5px; color: inherit; font-size: 11px; line-height: 1; }
.workflow-pipeline__aux .wf-logo img { width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; }
.workflow-pipeline__aux .wf-logo b { color: #4f6078; font-size: 11px; font-weight: 800; white-space: nowrap; }
@media (min-width: 1280px) {
  .workflow-hero__pipeline { height: 626px; }
  .workflow-pipeline__aux { height: 156px; }
  /* 위쪽 줄(사건정보 연동·데일리 브리핑·알림톡·AI MCP)은 아래로만 늘어나도 메인 카드(top 200~226)와 겹치지 않으므로 내용만큼 늘어나게 */
  .workflow-pipeline__aux--01, .workflow-pipeline__aux--03, .workflow-pipeline__aux--04-bottom, .workflow-pipeline__aux--mcp { height: auto; min-height: 156px; }
  /* 외부 캘린더 카드는 폭이 좁아 로고 3개를 이름까지 넣으면 3줄이 되므로 데스크톱에서는 로고만 (이름은 title·숨김 텍스트) */
  .workflow-pipeline__aux--02 .wf-logo { width: 28px; padding: 0; justify-content: center; }
  .workflow-pipeline__aux--02 .wf-logo b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 카드가 좁은 화면(1280~1599px)에서는 로고만 표시하고 이름은 title로 */
@media (min-width: 1280px) and (max-width: 1599px) {
  /* AI MCP 카드가 도달 카드에 닿지 않도록 문장 뒤 '프리미엄 서버 전용'은 숨김 (같은 내용이 배지에 있음) */
  .workflow-pipeline__aux--mcp .wf-extra { display: none; }
  .workflow-pipeline__aux .wf-logo { width: 28px; padding: 0; justify-content: center; }
  .workflow-pipeline__aux .wf-logo b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}