https://cloudbro.ai/assets/konduo-CFLo_ADb.js

1var e=`
2:root {
3  /* Colors · v1.1 */
4  --color-navy-deep:#0A0F26;
5  --color-navy:#0F1531;
6  --color-navy-wash:#12204A;
7  --color-brand-blue:#0059AC;
8  --color-blue-bright:#4A8FE0;
9  --color-blue-tint:#EAF1F9;
10  --color-ink:#0F1531;
11  --color-ink-muted:rgba(15,21,49,.62);
12  --color-ink-faint:rgba(15,21,49,.35);
13  --color-white-muted:rgba(232,238,255,.62);
14  --color-white-faint:rgba(232,238,255,.38);
15  --color-hairline:#D8DCE6;
16  --color-hairline-dark:rgba(232,238,255,.12);
17  --color-paper:#FFFFFF;
18  --color-paper-warm:#F7F8FB;
19  --color-paper-hover:#F6F9FD;
20
21  /* Typography */
22  --font-sans:"Pretendard",-apple-system,"Segoe UI",sans-serif;
23
24  /* Layout */
25  --page-max-width:1160px;
26  --section-gap:120px;
27  --card-padding:24px;
28  --element-gap:12px;
29
30  /* Radius */
31  --radius-pill:999px;
32  --radius-button:9999px;
33  --radius-doc:10px;
34  --radius-card:12px;
35  --radius-panel:14px;
36
37  /* Elevation · doc only */
38  --shadow-doc:0 8px 32px rgba(15,21,49,.15);
39}
40
41*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
42html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
43body{
44  font-family:var(--font-sans);
45  background:var(--color-paper);
46  color:var(--color-ink);
47  font-size:16.5px;line-height:1.6;letter-spacing:-.01em;
48  -webkit-font-smoothing:antialiased;overflow-x:hidden;
49}
50a{color:inherit;text-decoration:none}
51button{font:inherit;cursor:pointer}
52
53.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 32px}
54section{padding:120px 0}
55
56/* Eyebrow · mono */
57.kicker{
58  display:inline-block;
59  font-size:11px;font-weight:500;
60  letter-spacing:.08em;text-transform:uppercase;
61  color:var(--color-brand-blue);
62}
63.on-dark .kicker{color:var(--color-blue-bright)}
64
65h2{
66  font-family:var(--font-sans);
67  font-size:clamp(26px,3.4vw,32px);
68  font-weight:600;
69  letter-spacing:-.025em;
70  line-height:1.28;
71  margin:14px 0 16px;
72  color:var(--color-ink);
73}
74.on-dark h2{color:#fff}
75.lead{
76  font-size:16.5px;line-height:1.6;
77  color:var(--color-ink-muted);
78  max-width:640px;
79}
80.on-dark .lead{color:var(--color-white-muted)}
81
82/* Buttons · match main page (pill, weight 600, translateY hover) */
83.btn{
84  display:inline-flex;align-items:center;justify-content:center;
85  font-size:15px;font-weight:600;
86  padding:12px 26px;min-height:44px;
87  border-radius:var(--radius-button);
88  border:none;
89  transition:transform .18s,box-shadow .18s,background-color .18s,border-color .18s,color .18s;
90  text-align:center;line-height:1.2;
91}
92.btn:hover{transform:translateY(-1px)}
93.btn:active{transform:translateY(0) scale(.96)}
94.btn.fill{background:var(--color-brand-blue);color:#fff}
95.btn.fill:hover{box-shadow:0 8px 24px rgba(0,89,172,.35)}
96.btn.fill-inv{background:#fff;color:var(--color-navy)}
97.btn.fill-inv:hover{box-shadow:0 8px 24px rgba(10,15,38,.3)}
98.btn.line{background:transparent;border:1.5px solid var(--color-ink);color:var(--color-ink)}
99.on-dark .btn.line{border-color:rgba(232,238,255,.4);color:#fff}
100.on-dark .btn.line:hover{border-color:#fff}
101.btn.xl{font-size:16px;padding:16px 34px;min-height:52px}
102.btn.sm{padding:9px 20px;min-height:38px;font-size:13.5px}
103
104/* Nav */
105.nav{
106  position:fixed;inset:0 0 auto 0;z-index:50;
107  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
108  background:rgba(10,15,38,.6);
109  border-bottom:1px solid var(--color-hairline-dark);
110}
111.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
112.nav .logo{display:inline-flex;align-items:center;flex-shrink:0;height:36px}
113.nav .logo img{height:100%;width:auto;display:block;transition:opacity .18s}
114.nav .logo:hover img{opacity:.85}
115.nav-r{display:flex;align-items:center;gap:16px}
116.nav-r a.plain{color:var(--color-white-muted);font-size:14px;font-weight:500}
117.nav-r a.plain:hover{color:#fff}
118
119/* Hero · dark canvas · single radial */
120.hero{
121  position:relative;overflow:hidden;
122  background:radial-gradient(70% 60% at 50% 100%,var(--color-navy-wash) 0%,var(--color-navy) 40%,var(--color-navy-deep) 100%);
123  color:#fff;
124  padding:170px 0 120px;
125}
126.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;position:relative;z-index:1}
127.brand{
128  font-family:var(--font-sans);
129  font-size:clamp(56px,9vw,88px);
130  line-height:1.04;letter-spacing:-.035em;
131  margin:22px 0 14px;color:#fff;
132}
133.brand .t{font-weight:400}
134.brand .b{font-weight:700}
135.hero-def{
136  font-size:clamp(20px,2.4vw,26px);font-weight:400;
137  letter-spacing:-.02em;line-height:1.35;
138  max-width:720px;color:#fff;
139}
140.hero-def em{font-style:normal;font-weight:600;color:var(--color-blue-bright)}
141.hero-sub{
142  font-size:15px;font-weight:400;
143  color:var(--color-white-muted);
144  margin-top:20px;max-width:600px;line-height:1.6;
145}
146.hero-cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;justify-content:center}
147.hero .foot{
148  margin-top:52px;
149  font-size:11.5px;font-weight:500;
150  letter-spacing:.06em;
151  color:var(--color-white-muted);
152}
153.hero .foot b{color:#fff;font-weight:500}
154
155/* Scenes · warm paper */
156.scenes{background:var(--color-paper-warm)}
157.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
158.scard{
159  background:var(--color-paper);
160  border:1px solid var(--color-hairline);
161  border-radius:var(--radius-card);
162  padding:24px;
163  transition:border-color .18s,background .18s;
164}
165.scard:hover{border-color:var(--color-brand-blue);background:var(--color-paper-hover)}
166.scard .no{
167  font-size:11px;font-weight:500;
168  letter-spacing:.08em;text-transform:uppercase;
169  color:var(--color-brand-blue);
170}
171.scard h3{
172  font-size:17px;font-weight:600;
173  margin:10px 0 8px;line-height:1.4;
174  color:var(--color-ink);letter-spacing:-.01em;
175}
176.scard p{
177  font-size:14.5px;line-height:1.55;
178  color:var(--color-ink-muted);
179}
180.scenes .after{
181  margin-top:36px;
182  font-size:16.5px;font-weight:600;
183  color:var(--color-ink);
184}
185
186/* Value · paper */
187.vrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
188.vcard{
189  padding:24px;
190  background:var(--color-paper);
191  border:1px solid var(--color-hairline);
192  border-radius:var(--radius-card);
193}
194.vcard h3{
195  font-size:18px;font-weight:600;
196  margin-bottom:8px;
197  color:var(--color-ink);letter-spacing:-.01em;
198}
199.vcard p{
200  font-size:14.5px;line-height:1.55;
201  color:var(--color-ink-muted);
202}
203
204/* Session Life · dark canvas · solid + hairline (no glassmorphism) */
205.life{background:var(--color-navy);color:#fff}
206.life-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
207.frame{
208  background:rgba(232,238,255,.04);
209  border:1px solid var(--color-hairline-dark);
210  border-radius:var(--radius-card);
211  padding:24px 24px 28px;
212  text-align:center;
213}
214.frame .stage{height:140px;

214display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:18px}
215.fbox{width:110px;height:110px;border:2px solid var(--color-blue-bright);border-radius:var(--radius-panel);position:relative}
216.fwin{position:absolute;inset:26px 22px 30px;background:var(--color-brand-blue);border-radius:8px}
217.fwin::before{content:"";position:absolute;top:8px;left:9px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:12px 0 0 rgba(255,255,255,.55)}
218.frame.working .fwin::after{content:"";position:absolute;left:9px;right:9px;top:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.4);box-shadow:0 11px 0 rgba(255,255,255,.28),0 22px 0 rgba(255,255,255,.18)}
219.frame.gone .fbox{border-style:dashed;border-color:var(--color-white-faint)}
220.frame.gone .fwin{display:none}
221.frame.gone .rec{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:64px;height:6px;border-radius:3px;background:var(--color-blue-bright)}
222.frame h3{font-size:16px;font-weight:600;margin-bottom:6px;color:#fff;letter-spacing:-.01em}
223.frame p{font-size:13.5px;line-height:1.55;color:var(--color-white-muted)}
224@media (prefers-reduced-motion:no-preference){
225  .frame.working .fwin{animation:pulse 2.4s ease-in-out infinite}
226  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.72}}
227}
228.life .note{margin-top:32px;font-size:13.5px;color:var(--color-white-muted);text-align:center}
229
230/* AS-IS / TO-BE · icon infographic rows */
231.shift{background:var(--color-paper)}
232.rev-list{margin-top:44px;border:1px solid var(--color-hairline);border-radius:16px;overflow:hidden;background:var(--color-paper)}
233.rev-row{display:grid;grid-template-columns:160px 1fr 40px 1fr;gap:24px;padding:22px 28px;border-bottom:1px solid var(--color-hairline);align-items:center}
234.rev-row:last-child{border-bottom:none}
235.rev-cat{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--color-navy);line-height:1.4}
236.rev-side{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;min-height:64px}
237.rev-side.rev-as{background:var(--color-paper-warm);border:1px solid var(--color-hairline)}
238.rev-side.rev-to{background:var(--color-blue-tint);border:1px solid rgba(0,89,172,.18)}
239.rev-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}
240.rev-as .rev-icon{background:rgba(220,50,50,.1);color:#C13232}
241.rev-to .rev-icon{background:var(--color-brand-blue);color:#fff}
242.rev-icon svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
243.rev-side p{margin:0;font-size:13.5px;line-height:1.5;color:var(--color-ink);font-weight:500;letter-spacing:-.005em}
244.rev-as p{color:var(--color-ink-muted);font-weight:400}
245.rev-arrow{display:flex;align-items:center;justify-content:center;color:var(--color-brand-blue)}
246.rev-arrow svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
247@media(max-width:900px){
248  .rev-row{grid-template-columns:1fr;gap:10px;padding:20px 20px}
249  .rev-arrow{transform:rotate(90deg);justify-self:center}
250}
251
252/* Fit · warm paper · 2-col */
253.fit{background:var(--color-paper-warm)}
254.fit .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
255.fcard{
256  padding:28px 24px 26px;
257  background:var(--color-paper);
258  border:1px solid var(--color-hairline);
259  border-radius:var(--radius-card);
260  transition:border-color .18s;
261}
262.fcard:hover{border-color:var(--color-brand-blue)}
263.fcard .tag{
264  display:inline-block;
265  font-size:11px;font-weight:500;
266  letter-spacing:.08em;text-transform:uppercase;
267  color:var(--color-brand-blue);
268  background:var(--color-blue-tint);
269  border-radius:6px;
270  padding:4px 10px;
271}
272.fcard h3{
273  font-size:19px;font-weight:600;
274  margin:14px 0 10px;
275  color:var(--color-ink);letter-spacing:-.01em;
276}
277.fcard p{font-size:14.5px;line-height:1.55;color:var(--color-ink-muted)}
278
279/* Process · How-It-Works numbered cards */
280.proc{background:var(--color-paper)}
281.hiw-wrap{max-width:1000px;margin:44px auto 0}
282.hiw-nums{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:28px}
283.hiw-nums::before{content:"";position:absolute;

283left:16.6667%;right:16.6667%;top:50%;height:2px;background:var(--color-hairline);transform:translateY(-50%);z-index:0}
284.hiw-num{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--color-paper-warm);border:3px solid var(--color-paper);color:var(--color-navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;justify-self:center;font-variant-numeric:tabular-nums}
285.hiw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
286.hiw-card{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:16px;padding:26px 24px 28px;transition:border-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;display:flex;flex-direction:column}
287.hiw-card:hover{border-color:rgba(0,89,172,.4);transform:translateY(-2px);box-shadow:0 20px 40px rgba(15,21,49,.08)}
288.hiw-icon{width:44px;height:44px;border-radius:10px;background:var(--color-blue-tint);color:var(--color-brand-blue);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .3s}
289.hiw-card:hover .hiw-icon{background:rgba(0,89,172,.16)}
290.hiw-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
291.hiw-card h3{font-size:19px;font-weight:600;color:var(--color-navy);margin:0 0 8px;letter-spacing:-.01em;line-height:1.3}
292.hiw-card>p{font-size:14px;color:var(--color-ink-muted);line-height:1.6;margin:0 0 22px}
293.hiw-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
294.hiw-bullets li{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--color-ink);line-height:1.5}
295.hiw-bullets .hiw-dot{width:16px;height:16px;border-radius:50%;background:rgba(0,89,172,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0}
296.hiw-bullets .hiw-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-brand-blue)}
297@media(max-width:900px){.hiw-nums,.hiw-cards{grid-template-columns:1fr;gap:14px}.hiw-nums::before{display:none}.hiw-num{margin-bottom:0}}
298
299/* FAQ · warm paper · hairline rows */
300.faq{background:var(--color-paper-warm)}
301.faq details{border-bottom:1px solid var(--color-hairline);padding:20px 4px}
302.faq details:first-of-type{border-top:1px solid var(--color-hairline);margin-top:40px}
303.faq summary{
304  font-size:16.5px;font-weight:600;
305  cursor:pointer;list-style:none;
306  display:flex;justify-content:space-between;align-items:center;
307  color:var(--color-ink);letter-spacing:-.01em;
308}
309.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--color-brand-blue)}
310.faq details[open] summary::after{content:"–"}
311.faq details p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--color-ink-muted);max-width:720px}
312
313/* Checklist · paper · interactive chips */
314.check{background:var(--color-paper)}
315.clist{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
316.citem{
317  display:flex;gap:12px;align-items:flex-start;
318  padding:16px 18px;cursor:pointer;
319  transition:border-color .18s,background .18s;
320  user-select:none;
321  background:var(--color-paper);
322  border:1px solid var(--color-hairline);
323  border-radius:var(--radius-card);
324}
325.citem:hover{border-color:var(--color-blue-bright);background:var(--color-paper-hover)}
326.citem.on{border-color:var(--color-brand-blue);background:var(--color-blue-tint)}
327.citem .tick{
328  flex:0 0 22px;width:22px;height:22px;
329  border:1.5px solid var(--color-hairline);
330  border-radius:6px;
331  margin-top:1px;
332  display:flex;align-items:center;justify-content:center;
333  font-size:13px;color:#fff;
334  transition:background .18s,border-color .18s;
335}
336.citem.on .tick{background:var(--color-brand-blue);border-color:var(--color-brand-blue)}
337.citem.on .tick::after{content:"✓"}
338.citem p{font-size:14.5px;line-height:1.5;color:var(--color-ink)}
339.cresult{
340  margin-top:28px;text-align:center;
341  font-size:16px;font-weight:600;
342  color:var(--color-ink);min-height:26px;
343}
344.cresult b{color:var(--color-brand-blue)}
345.ccta{text-align:center;margin-top:20px}

346@media(max-width:900px){.clist{grid-template-columns:1fr}}
347
348/* Contact · dark canvas */
349.contact{
350  background:radial-gradient(70% 60% at 50% 0%,var(--color-navy-wash) 0%,var(--color-navy) 40%,var(--color-navy-deep) 100%);
351  color:#fff;
352}
353.contact .box{
354  max-width:640px;margin:44px auto 0;
355  background:rgba(232,238,255,.04);
356  border:1px solid var(--color-hairline-dark);
357  border-radius:var(--radius-card);
358  padding:32px;
359}
360.contact label{
361  display:block;
362  font-size:11.5px;font-weight:500;
363  letter-spacing:.06em;
364  margin:18px 0 6px;
365  color:var(--color-white-muted);
366}
367.contact input,.contact select,.contact textarea{
368  width:100%;padding:11px 14px;
369  border-radius:var(--radius-button);
370  border:1px solid var(--color-hairline-dark);
371  background:rgba(232,238,255,.06);
372  color:#fff;
373  font:inherit;font-size:14.5px;
374  transition:border-color .18s;
375}
376.contact input:focus,.contact select:focus,.contact textarea:focus{
377  outline:none;border-color:var(--color-blue-bright);
378}
379.contact select option{color:var(--color-ink)}
380.contact input::placeholder,.contact textarea::placeholder{color:var(--color-white-faint)}
381.contact .btn{width:100%;margin-top:24px}
382.contact .alt{text-align:center;margin-top:18px;font-size:13px;color:var(--color-white-muted)}
383.contact .alt a{color:var(--color-blue-bright);font-weight:600}
384
385/* Footer */
386footer{
387  background:var(--color-navy-deep);
388  color:var(--color-white-muted);
389  padding:44px 0;font-size:13px;
390}
391footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
392footer a{color:var(--color-blue-bright)}
393
394@media(max-width:900px){
395  section{padding:80px 0}
396  .hero{padding:140px 0 90px}
397  .grid3,.vrow,.life-strip,.steps{grid-template-columns:1fr}
398  .fit .grid2{grid-template-columns:1fr}
399}
400`,t=`
401
402<nav class="nav">
403  <div class="wrap">
404    <a class="logo" href="/" aria-label="CloudBro"><img src="/__l5e/assets-v1/71c5904e-d60e-4237-bcfd-c02cf9f0b700/cloudbro-horizontal-white.png" alt="CloudBro"></a>
405    <div class="nav-r">
406      <a class="plain" href="/">← 홈으로</a>
407      <a class="btn fill sm" href="#contact">도입 문의하기</a>
408    </div>
409  </div>
410</nav>
411
412<!-- HERO -->
413<header class="hero on-dark" id="konduo">
414  <div class="wrap hero-in">
415    <h1 class="brand"><span class="t">Kon</span><span class="b">duo</span></h1>
416    <p class="hero-def">운영 흐름을<br/><em>하나로 연결하는 플랫폼</em></p>
417    <p class="hero-sub">시스템 사이를 사람이 옮겨 나르던 이관·규칙·기록을 시각 흐름으로 정의하고, 조건이 성립하면 자동으로 실행합니다. 실행 이력은 조직의 기록으로 남습니다.</p>
418    <div class="hero-cta">
419      <a class="btn fill-inv xl" href="#contact">30분 도입 진단 신청</a>
420    </div>
421    <p class="foot">커뮤니티에서 검증된 오픈소스 <b>Pletor</b>에서 출발해, CloudBro가 기업 환경에 맞게 제공합니다.</p>
422  </div>
423</header>
424
425<!-- SCENES -->
426<section class="scenes">
427  <div class="wrap">
428    <h2>이런 문제, 지금도 겪고 계신가요?</h2>
429    <div class="grid3">
430      <article class="scard">
431        <span class="no">SCENE 1</span>
432        <h3>사람이 시스템 사이를 옮겨 나릅니다</h3>
433        <p>주문 시스템에서 CSV로 내려받아 재무 시스템에 다시 올립니다. 승인 결과를 또 다른 툴에 옮겨 적습니다. 시스템은 늘어나는데, 사람의 손이 접점마다 다시 필요합니다.</p>
434      </article>
435      <article class="scard">
436        <span class="no">SCENE 2</span>
437        <h3>규칙이 사람 머릿속에만 있습니다</h3>
438        <p>담당자가 바뀌면 처리 방식도 조용히 바뀝니다. 같은 상황을 지난번엔 어떻게 처리했는지 확인하려면 사람에게 물어봐야 합니다. 문서는 늘 뒤늦게 갱신됩니다.</p>
439      </article>
440      <article class="scard">
441        <span class="no">SCENE 3</span>
442        <h3>무엇이 왜 실패했는지, 나중에 알게 됩니다</h3>
443        <p>실행이 어디서 어떻게 실패했는지 시스템마다 로그를 뒤져야 합니다. 감사 대응 때가 오면 각 시스템의 화면을 캡처해 증빙을 맞춰냅니다.</p>
444      </article>
445    </div>
446  </div>
447</section>
448
449<!-- VALUE -->
450<section>
451  <div class="wrap">
452    <h2>흩어진 운영 접점을,<br/>하나의 흐름으로 연결합니다</h2>
453    <p class="lead">시스템 사이에서 사람이 다시 실행해야 했던 이관·규칙·기록을 시각 흐름으로 정의합니다. 조건이 성립하면 그 흐름이 자동으로 실행됩니다.</p>
454    <div class="vrow">
455      <div class="vcard">
456        <h3>흐름으로 정의합니다</h3>
457        <p>이관 규칙, 조건, 액션을 시각 흐름으로 만들어 사람의 손을 대신합니다. 문서와 실행이 같은 자리에서 관리됩니다.</p>
458      </div>
459      <div class="vcard">
460        <h3>커넥터로 잇습니다</h3>
461        <p>기업이 이미 쓰는 시스템은 커넥터로 붙입니다. 신규 시스템도 표준 방식으로 연결해 흐름 안에 넣습니다.</p>
462      </div>
463      <div class="vcard">
464        <h3>기록은 자동으로 남습니다</h3>
465        <p>어떤 흐름이 언제 실행됐고 어디서 멈췄는지, 회사의 감사 로그로 남습니다. 점검·보고에 바로 쓸 수 있습니다.</p>
466      </div>
467    </div>
468  </div>
469</section>
470
471<!-- AS-IS / TO-BE · draggable comparison -->
472<section class="shift">
473  <div class="wrap">
474    <span class="kicker">도입 전과 후</span>
475    <h2>같은 업무가 이렇게 달라집니다</h2>
476    <div class="rev-list">
477      <div class="rev-row">

478        <span class="rev-cat">데이터 이관</span>
479        <div class="rev-side rev-as"><span class="rev-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span><p>사람이 CSV로 옮기고 다시 올림</p></div>
480        <span class="rev-arrow"><svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
481        <div class="rev-side rev-to"><span class="rev-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span><p>커넥터가 조건 성립 시 자동 이관</p></div>
482      </div>
483      <div class="rev-row">
484        <span class="rev-cat">규칙 관리</span>
485        <div class="rev-side rev-as"><span class="rev-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span><p>사람 머릿속·문서에 분산</p></div>
486        <span class="rev-arrow"><svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
487        <div class="rev-side rev-to"><span class="rev-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span><p>시각 흐름도에 담김 · 담당자 변경 무관</p></div>
488      </div>
489      <div class="rev-row">
490        <span class="rev-cat">오류 대응</span>
491        <div class="rev-side rev-as"><span class="rev-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span><p>사후 확인 · 시스템마다 로그 추적</p></div>
492        <span class="rev-arrow"><svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
493        <div class="rev-side rev-to"><span class="rev-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span><p>실시간 알림 + 재시도 자동 실행</p></div>
494      </div>
495      <div class="rev-row">
496        <span class="rev-cat">실행 이력</span>
497        <div class="rev-side rev-as"><span class="rev-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span><p>시스템별 분산 · 감사 대응에 수작업</p></div>
498        <span class="rev-arrow"><svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
499        <div class="rev-side rev-to"><span class="rev-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span><p>통합 감사 로그로 즉시 재현</p></div>
500      </div>
501      <div class="rev-row">
502        <span class="rev-cat">조건 변경</span>
503        <div class="rev-side rev-as"><span class="rev-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span><p>개발자 요청 · 스크립트 수정</p></div>
504        <span class="rev-arrow"><svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
505        <div class="rev-side rev-to"><span class="rev-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span><p>담당자가 GUI 흐름도에서 즉시 반영</p></div>
506      </div>
507      <div class="rev-row">
508        <span class="rev-cat">시스템 확장</span>
509        <div class="rev-side rev-as"><span class="rev-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span><p>개별 개발 · 유지관리 재필요</p></div>
510        <span class="rev-arrow"><svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
511        <div class="rev-side rev-to"><span class="rev-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span><p>표준 커넥터로 연결 · 동일 방식 관리</p></div>
512      </div>
513    </div>
514  </div>
515</section>
516
517<!-- FIT -->
518<section class="fit">
519  <div class="wrap">
520    <h2>지금 자동화 상태가 어느 쪽이든 답이 있습니다</h2>
521    <div class="grid2">
522      <article class="fcard">

523        <span class="tag">이미 워크플로 도구를 쓰고 있다면</span>
524        <h3>확장 · 통합의 관점으로 더합니다</h3>
525        <p>기존 도구가 커버하지 못하는 시스템 간 이관과 조건부 실행을 Konduo가 이어붙입니다. 담당자·감사자·개발자가 같은 흐름을 함께 보게 되어, 흩어진 자동화가 하나의 자리로 모입니다.</p>
526      </article>
527      <article class="fcard">
528        <span class="tag">아직 자동화가 없다면</span>
529        <h3>정의부터, 부담 없이 시작합니다</h3>
530        <p>가장 반복이 많은 두세 개 이관을 흐름으로 옮겨 실행부터 검증합니다. 코드 없이 시작하고, 검증된 규칙만 조직 표준으로 넓혀 나갑니다.</p>
531      </article>
532    </div>
533  </div>
534</section>
535
536<!-- PROCESS -->
537<section class="proc">
538  <div class="wrap">
539    <span class="kicker">도입 절차</span>
540    <h2>진단부터 파일럿까지, 세 단계입니다</h2>
541    <div class="hiw-wrap">
542      <div class="hiw-nums" aria-hidden="true">
543        <div class="hiw-num">1</div>
544        <div class="hiw-num">2</div>
545        <div class="hiw-num">3</div>
546      </div>
547      <div class="hiw-cards">
548        <div class="hiw-card">
549          <div class="hiw-icon"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></div>
550          <h3>30분 도입 진단</h3>
551          <p>지금 반복되는 이관과 규칙을 함께 확인합니다. 자동화 우선순위와 기대 효과를 정리합니다.</p>
552          <ul class="hiw-bullets">
553            <li><span class="hiw-dot"></span>반복 이관 목록 리뷰</li>
554            <li><span class="hiw-dot"></span>자동화 우선순위 정리</li>
555            <li><span class="hiw-dot"></span>기대 효과 정리 · 비용 없음</li>
556          </ul>
557        </div>
558        <div class="hiw-card">
559          <div class="hiw-icon"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/><path d="M7 11v4a2 2 0 0 0 2 2h4"/></svg></div>
560          <h3>무료 체험</h3>
561          <p>진단에서 확인된 흐름 1~2개를 실제 시스템에 붙여 체험을 진행합니다. 요구사항은 제품 로드맵에 반영합니다.</p>
562          <ul class="hiw-bullets">
563            <li><span class="hiw-dot"></span>실제 시스템 연결</li>
564            <li><span class="hiw-dot"></span>기간·범위 사전 합의</li>
565            <li><span class="hiw-dot"></span>전환 여부 함께 결정</li>
566          </ul>
567        </div>
568        <div class="hiw-card">
569          <div class="hiw-icon"><svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div>
570          <h3>파일럿 도입</h3>
571          <p>합의된 범위에서 파일럿을 시작합니다. 감사 로그·권한·알림 정책은 파일럿 고객과 함께 설계합니다.</p>
572          <ul class="hiw-bullets">
573            <li><span class="hiw-dot"></span>감사 로그 · 권한 설계</li>
574            <li><span class="hiw-dot"></span>알림 · 재시도 정책 확정</li>
575            <li><span class="hiw-dot"></span>단계적 흐름 확장</li>
576          </ul>
577        </div>
578      </div>
579    </div>
580  </div>
581</section>
582
583<!-- FAQ -->
584<section class="faq">
585  <div class="wrap">
586    <span class="kicker">자주 묻는 질문</span>
587    <h2>운영·보안팀이 먼저 묻는 것들</h2>
588    <details>
589      <summary>이미 쓰는 워크플로 도구와 겹치지 않나요?</summary>
590      <p>Konduo는 특정 워크플로 도구를 대체하기보다, 그 도구가 잘 다루지 못하는 시스템 간 이관과 조건부 실행, 감사 로그를 하나의 흐름으로 잇는 데 초점을 둡니다. 겹치는 영역이 있다면 도입 진단에서 어느 흐름을 어디에 두는 편이 좋은지 함께 정리합니다.</p>
591    </details>
592    <details>
593      <summary>커넥터가 없는 시스템은 붙일 수 없나요?</summary>
594      <p>표준 커넥터로 커버되지 않는 시스템은 HTTP·DB·파일 등 범용 커넥터로 연결하거나, 필요 시 커스텀 커넥터를 함께 설계해 붙입니다. 붙인 이후에는 다른 시스템과 같은 방식으로 흐름 안에서 관리됩니다.</p>
595    </details>
596    <details>
597      <summary>데이터와 실행 기록은 어디에 남나요?</summary>
598      <p>실행 이력과 감사 로그는 회사 정책에 맞는 저장소에 남깁니다. 보관 기간과 접근 권한은 도ìž

598… 과정에서 파일럿 고객과 함께 정합니다.</p>
599    </details>
600    <details>
601      <summary>오픈소스 Pletor와의 관계는 어떻게 되나요?</summary>
602      <p>Konduo는 커뮤니티에서 검증된 오픈소스 Pletor에서 출발했습니다. Pletor는 지금처럼 누구나 무료로 쓸 수 있고, Konduo는 그 위에 기업이 필요로 하는 관리·감사·지원, 그리고 문제가 생겼을 때 책임지고 대응하는 주체를 더한 것입니다.</p>
603    </details>
604  </div>
605</section>
606
607<!-- CHECKLIST -->
608<section class="check">
609  <div class="wrap">
610    <span class="kicker">도입 체크리스트</span>
611    <h2>해당하는 항목을 골라 보세요</h2>
612    <p class="lead">두 개 이상 해당한다면, 30분 진단에서 확인할 가치가 충분합니다.</p>
613    <div class="clist" id="clist">
614      <div class="citem" onclick="toggleCheck(this)"><span class="tick"></span><p>시스템 간 데이터 이관 반복 작업이 매주 발생합니다</p></div>
615      <div class="citem" onclick="toggleCheck(this)"><span class="tick"></span><p>담당자마다 처리 규칙이 조금씩 다릅니다</p></div>
616      <div class="citem" onclick="toggleCheck(this)"><span class="tick"></span><p>실행 오류가 뒤늦게 알려지고, 원인 추적에 시간이 걸립니다</p></div>
617      <div class="citem" onclick="toggleCheck(this)"><span class="tick"></span><p>감사 대응 때 각 시스템에서 증빙을 모으고 있습니다</p></div>
618      <div class="citem" onclick="toggleCheck(this)"><span class="tick"></span><p>조건 하나 바꾸는데 개발자 손을 빌려야 합니다</p></div>
619      <div class="citem" onclick="toggleCheck(this)"><span class="tick"></span><p>새 시스템 통합 프로젝트가 예정되어 있습니다</p></div>
620    </div>
621    <p class="cresult" id="cresult">항목을 눌러 확인해 보세요</p>
622    <div class="ccta"><a class="btn fill xl" href="#contact">30분 도입 진단 신청</a></div>
623  </div>
624</section>
625
626<!-- CONTACT · dark -->
627<section class="contact on-dark" id="contact">
628  <div class="wrap">
629    <div style="text-align:center">
630      <span class="kicker">도입 문의</span>
631      <h2>가장 반복이 많은 이관 목록으로<br/>30분 안에 확인해 드립니다</h2>
632      <p class="lead" style="margin:0 auto">지금 사람이 시스템 사이에서 다시 실행하고 있는 이관·조건·알림이 무엇인지 알려 주시면, Konduo 흐름으로 옮겼을 때의 그림을 만들어 드립니다.</p>
633    </div>
634    <form class="box" onsubmit="return sendInquiry(this)">
635      <label for="f-company">회사명</label>
636      <input id="f-company" name="company" placeholder="예: 클라우드브로" required/>
637      <label for="f-name">담당자 성함</label>
638      <input id="f-name" name="name" placeholder="예: 홍길동 팀장" required/>
639      <label for="f-email">업무용 이메일</label>
640      <input id="f-email" name="email" type="email" placeholder="[email protected]" required/>
641      <label for="f-env">현재 자동화 상태</label>
642      <select id="f-env" name="env">
643        <option>이미 워크플로 도구를 쓰고 있습니다</option>
644        <option>스크립트·수작업으로 처리 중입니다</option>
645        <option>

645자동화가 거의 없습니다</option>
646        <option>기타 또는 잘 모르겠습니다</option>
647      </select>
648      <label for="f-msg">문의 내용 (선택)</label>
649      <textarea id="f-msg" name="msg" rows="4" placeholder="가장 반복이 많은 이관 · 조건 · 알림이 무엇인지 적어 주세요"></textarea>
650      <button class="btn fill-inv xl" type="submit">도입 진단 신청</button>
651      <p class="alt">이메일이 편하시면 <a href="mailto:[email protected]?subject=Konduo%20도입%20문의">[email protected]</a>로 보내 주세요</p>
652    </form>
653  </div>
654</section>
655
656<footer>
657  <div class="wrap">
658    <span>© CloudBro는 상용화 이전 오픈소스의 검증·도입 전문 파트너입니다.</span>
659    <span><a href="/">CloudBro 홈</a> | <a href="https://community.cloudbro.ai" target="_blank" rel="noopener">Community ↗</a></span>
660  </div>
661</footer>
662
663
664`,n=[`
665function toggleCheck(el){
666  el.classList.toggle('on');
667  var n = document.querySelectorAll('#clist .citem.on').length;
668  var r = document.getElementById('cresult');
669  if(n === 0){ r.innerHTML = '항목을 눌러 확인해 보세요'; }
670  else if(n === 1){ r.innerHTML = '<b>1개</b> 해당. 진단에서 함께 확인해 볼 만합니다.'; }
671  else { r.innerHTML = '<b>' + n + '개</b> 해당. Konduo가 맞는 환경일 가능성이 높습니다.'; }
672}
673function sendInquiry(f){
674  var body = encodeURIComponent(
675    "회사명: " + f.company.value + "\\n" +
676    "담당자: " + f.name.value + "\\n" +
677    "이메일: " + f.email.value + "\\n" +
678    "현재 환경: " + f.env.value + "\\n\\n" +
679    (f.msg.value || "")
680  );
681  location.href = "mailto:[email protected]?subject=" + encodeURIComponent("Konduo 도입 문의 - " + f.company.value) + "&body=" + body;
682  return false;
683}
684
685`];export{t as n,n as r,e as t};