/* v104 · 세 조직 시너지 벤 다이어그램 (Step 1 벤 다이어그램과 같은 언어) */
#services .syn{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center;margin-top:clamp(90px,10vw,150px)}
.syn-fig{position:relative;aspect-ratio:600/560;width:100%;max-width:620px}
.syn-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sy-c{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.34);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .8s}
.sy-a{transform:translate(-50px,-30px)}.sy-b{transform:translate(50px,-30px)}.sy-cc{transform:translateY(55px)}
.sy-l{fill:rgba(253,69,51,.16);opacity:0;transition:opacity .6s ease .9s,fill .4s}
.sy-core{opacity:0;transform-box:fill-box;transition:opacity .8s ease 1.3s;filter:drop-shadow(0 0 16px rgba(253,69,51,.25))}
.syn.in .sy-c{opacity:1;transform:none}
.syn.in .sy-l{opacity:1}
.syn.in .sy-core{opacity:1}
.syn[data-hl="ab"] .sy-l[data-l="ab"],.syn[data-hl="ac"] .sy-l[data-l="ac"],.syn[data-hl="bc"] .sy-l[data-l="bc"]{fill:rgba(253,69,51,.42)}
.sy-t,.sy-k,.sy-core-t{position:absolute;transform:translate(-50%,-50%);text-align:center;transition:opacity .8s ease .6s,color .3s}
.syn:not(.in) .sy-t,.syn:not(.in) .sy-k,.syn:not(.in) .sy-core-t{opacity:0}
.sy-t{display:flex;flex-direction:column;gap:4px}
.sy-t b{font:600 clamp(14px,1.3vw,19px)/1 var(--en);letter-spacing:-.02em;color:#fff;white-space:nowrap}
.sy-t span{font:400 12px/1 var(--kr);color:rgba(255,255,255,.5)}
.sy-k{font:600 clamp(11px,.9vw,13px)/1.2 var(--kr);color:rgba(255,255,255,.72);white-space:nowrap;transition-delay:1s}
.syn[data-hl="ab"] .sy-k[data-k="ab"],.syn[data-hl="ac"] .sy-k[data-k="ac"],.syn[data-hl="bc"] .sy-k[data-k="bc"]{color:#fff}
.sy-core-t{transition-delay:1.5s}
.sy-core-t b{font:700 clamp(13px,1.2vw,17px)/1 var(--en);letter-spacing:-.01em;color:#fff}
.syn-kicker{margin:0 0 12px;font:600 12px/1 var(--en);letter-spacing:.16em;text-transform:uppercase;color:#fd4533}
.syn-copy h4{margin:0;font:750 clamp(30px,3.2vw,50px)/1.25 var(--kr);letter-spacing:-.055em;color:#fff}
.syn-copy h4 mark{padding:0 .08em}
.syn-lead{margin:18px 0 0;font:400 16px/1.65 var(--kr);color:rgba(255,255,255,.62);max-width:30em}
.syn-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.syn-list li{display:grid;grid-template-columns:120px 1fr;column-gap:20px;row-gap:4px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);cursor:default;transition:background .3s}
.syn-list span{grid-row:1/3;font:600 12px/1.5 var(--en);letter-spacing:.04em;color:#fd4533}
.syn-list b{font:700 16px/1.4 var(--kr);color:#fff}
.syn-list p{margin:0;font:400 14px/1.55 var(--kr);color:rgba(255,255,255,.6)}
.syn-list li:hover p{color:rgba(255,255,255,.9)}
.syn-go{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:13px 20px;border-radius:999px;background:#fff;color:#0b0b0d;font:600 14px/1 var(--kr);text-decoration:none;transition:background .3s,color .3s}
.syn-go:hover,.syn-go:focus-visible{background:#fd4533;color:#fff}
@media (max-width:900px){#services .syn{grid-template-columns:1fr}.syn-fig{margin:0 auto}.syn-list li{grid-template-columns:1fr}.syn-list span{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.sy-c,.sy-l,.sy-core,.sy-t,.sy-k,.sy-core-t{transition:none}}