-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.ko.html
More file actions
1299 lines (1248 loc) · 117 KB
/
index.ko.html
File metadata and controls
1299 lines (1248 loc) · 117 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="ko">
<head>
<script>
(function(){
var t = localStorage.getItem('theme') || 'system';
if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}
})();
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Moltis — 신뢰할 수 있는 Rust 네이티브 claw</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<meta name="description" content="신뢰할 수 있는 Rust 네이티브 claw. 단일 바이너리, 샌드박스 실행, 멀티 프로바이더 LLM, 음성, 메모리, Telegram, WhatsApp, Discord, Teams, MCP 도구. 보안 설계, 당신의 하드웨어에서 실행.">
<meta property="og:title" content="Moltis — 신뢰할 수 있는 Rust 네이티브 claw">
<meta property="og:description" content="신뢰할 수 있는 Rust 네이티브 claw. 단일 바이너리, 샌드박스 실행, 멀티 프로바이더 LLM, 음성, 메모리, Telegram, WhatsApp, Discord, Teams, MCP 도구. 보안 설계, 당신의 하드웨어에서 실행.">
<meta property="og:site_name" content="Moltis">
<meta property="og:locale" content="ko_KR">
<meta property="og:image" content="https://moltis.org/og-social.png?v=8">
<meta property="og:image:secure_url" content="https://moltis.org/og-social.png?v=8">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Moltis — 신뢰할 수 있는 Rust 네이티브 claw">
<meta property="og:type" content="website">
<meta property="og:url" content="https://moltis.org">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://moltis.org/og-social.png?v=8">
<meta name="twitter:image:alt" content="Moltis — 신뢰할 수 있는 Rust 네이티브 claw">
<meta name="twitter:title" content="Moltis — 신뢰할 수 있는 Rust 네이티브 claw">
<meta name="twitter:description" content="신뢰할 수 있는 Rust 네이티브 claw. 단일 바이너리, 샌드박스 실행, 멀티 프로바이더 LLM, 음성, 메모리, Telegram, WhatsApp, Discord, Teams, MCP 도구. 보안 설계, 당신의 하드웨어에서 실행.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&family=Outfit:wght@700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Space Grotesk', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
},
},
}
function applyTheme(mode) {
if (mode === 'dark' || (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
const savedTheme = localStorage.getItem('theme') || 'system';
applyTheme(savedTheme);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if ((localStorage.getItem('theme') || 'system') === 'system') applyTheme('system');
});
</script>
<style>
@keyframes pulse-slow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.animation-delay-2s { animation-delay: 2s; }
.font-outfit { font-family: 'Outfit', sans-serif; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
</style>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-white min-h-screen relative transition-colors duration-300 overflow-x-hidden w-full">
<!-- Toast notification -->
<div id="toast" class="fixed bottom-6 left-1/2 -translate-x-1/2 px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-sm font-medium rounded-lg shadow-lg opacity-0 pointer-events-none transition-opacity duration-300 z-50">
Fly 명령어가 복사되었습니다
</div>
<!-- Background gradient blobs -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-64 h-64 sm:w-96 sm:h-96 bg-orange-300/20 dark:bg-orange-600/15 rounded-full blur-3xl animate-pulse-slow"></div>
<div class="absolute bottom-1/4 right-1/4 w-64 h-64 sm:w-96 sm:h-96 bg-red-300/20 dark:bg-red-600/15 rounded-full blur-3xl animate-pulse-slow animation-delay-2s"></div>
</div>
<!-- Sticky Navigation Bar -->
<nav class="sticky top-0 z-40 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200/50 dark:border-gray-800/50">
<div class="max-w-4xl mx-auto px-4 sm:px-6">
<div class="flex items-center justify-between h-14 gap-4">
<!-- Logo -->
<a href="#home" class="flex items-center gap-2 shrink-0" onclick="navigateTo('home')">
<img src="favicon.svg" alt="Moltis" width="32" height="26">
<span class="text-xl sm:text-2xl font-bold bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-400 dark:to-red-400 bg-clip-text text-transparent font-outfit">Moltis</span>
</a>
<!-- Nav tabs (desktop) -->
<div class="hidden sm:flex items-center gap-1" id="nav-tabs">
<a href="#home" data-page="home" class="nav-tab px-3 py-1.5 text-sm font-medium rounded-md transition-colors">홈</a>
<a href="#install" data-page="install" class="nav-tab px-3 py-1.5 text-sm font-medium rounded-md transition-colors">설치</a>
<a href="#features" data-page="features" class="nav-tab px-3 py-1.5 text-sm font-medium rounded-md transition-colors">기능</a>
<a href="#security" data-page="security" class="nav-tab px-3 py-1.5 text-sm font-medium rounded-md transition-colors">보안</a>
<a href="#compare" data-page="compare" class="nav-tab px-3 py-1.5 text-sm font-medium rounded-md transition-colors">비교</a>
</div>
<!-- Right side: theme toggle + GitHub stars -->
<div class="flex items-center gap-1 shrink-0">
<!-- Theme cycle button -->
<button id="theme-toggle" title="Toggle theme" class="p-1.5 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg id="theme-icon-light" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
<svg id="theme-icon-system" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
<svg id="theme-icon-dark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
</button>
<!-- 언어 selector -->
<div class="relative" id="lang-switcher">
<button onclick="this.nextElementSibling.classList.toggle('hidden')" class="flex items-center gap-0.5 px-2 py-1 rounded-md text-xs font-semibold text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" title="언어 변경">
KO
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="hidden absolute right-0 mt-1 min-w-[8rem] bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50">
<button onclick="setLang('en')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">English</button>
<button onclick="setLang('fr')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Français</button>
<button onclick="setLang('zh')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">中文</button>
<button onclick="setLang('es')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Español</button>
<button onclick="setLang('de')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Deutsch</button>
<button onclick="setLang('it')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Italiano</button>
<button onclick="setLang('pt')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Português</button>
<button onclick="setLang('ja')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">日本語</button>
<button onclick="setLang('ko')" class="w-full text-left px-3 py-1.5 text-xs font-semibold text-orange-600 dark:text-orange-400 hover:bg-gray-100 dark:hover:bg-gray-700">한국어</button>
<button onclick="setLang('ru')" class="w-full text-left px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Русский</button>
</div>
</div>
<!-- GitHub stars -->
<a href="https://github.com/moltis-org/moltis" target="_blank" rel="noopener" class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-xs font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" id="github-stars-link">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
<span id="github-stars"></span>
</a>
</div>
</div>
<!-- Mobile nav tabs -->
<div class="flex sm:hidden items-center gap-1 pb-2 overflow-x-auto hide-scrollbar -mx-1 px-1" id="nav-tabs-mobile">
<a href="#home" data-page="home" class="nav-tab shrink-0 px-3 py-1.5 text-xs font-medium rounded-md transition-colors">홈</a>
<a href="#install" data-page="install" class="nav-tab shrink-0 px-3 py-1.5 text-xs font-medium rounded-md transition-colors">설치</a>
<a href="#features" data-page="features" class="nav-tab shrink-0 px-3 py-1.5 text-xs font-medium rounded-md transition-colors">기능</a>
<a href="#security" data-page="security" class="nav-tab shrink-0 px-3 py-1.5 text-xs font-medium rounded-md transition-colors">보안</a>
<a href="#compare" data-page="compare" class="nav-tab shrink-0 px-3 py-1.5 text-xs font-medium rounded-md transition-colors">비교</a>
</div>
</div>
</nav>
<!-- Lightbox overlay -->
<div id="lightbox" class="hidden fixed inset-0 z-50 bg-black/90 flex items-center justify-center" onclick="if(event.target===this)closeLightbox()">
<button onclick="closeLightbox()" class="absolute top-4 right-4 text-white/70 hover:text-white transition-colors" aria-label="Close">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
<button id="lb-prev" onclick="prevImage()" class="absolute left-4 text-white/70 hover:text-white transition-colors" aria-label="Previous">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<img id="lb-img" src="" alt="Screenshot" class="max-w-[90vw] max-h-[85vh] object-contain rounded-lg">
<button id="lb-next" onclick="nextImage()" class="absolute right-4 text-white/70 hover:text-white transition-colors" aria-label="Next">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</div>
<!-- ============================================================ -->
<!-- PAGE: Home -->
<!-- ============================================================ -->
<div id="page-home" class="page-content">
<div class="relative z-10 text-center px-4 sm:px-6 w-full max-w-2xl mx-auto pt-12 pb-8">
<!-- Announcement banner -->
<a href="#features" onclick="navigateTo('features')" class="group inline-flex items-center gap-2 px-4 py-2 mb-6 rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-200 dark:border-orange-800 hover:border-orange-400 dark:hover:border-orange-500 transition-all hover:shadow-md">
<span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full bg-orange-500 text-white text-[10px] font-bold uppercase tracking-wide">신규</span>
<span class="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-200">OpenClaw 전체 가져오기 — 한 번의 클릭으로 전환</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-orange-500 dark:text-orange-400 group-hover:translate-x-0.5 transition-transform"><polyline points="9 18 15 12 9 6"/></svg>
</a>
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-2 text-gray-800 dark:text-gray-100">신뢰할 수 있는 Rust 네이티브 claw</h1>
<p class="text-sm sm:text-base text-gray-400 dark:text-gray-500 mb-6">One binary — sandboxed, secure, yours.</p>
<!-- CTA buttons -->
<div class="flex items-center justify-center gap-3 mb-6">
<a href="#install" onclick="navigateTo('install')" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-gradient-to-r from-orange-500 to-red-500 text-white hover:from-orange-600 hover:to-red-600 transition-all text-sm font-medium shadow-md hover:shadow-lg">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>
Get Started
</a>
<a href="https://docs.moltis.org" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:border-orange-400 dark:hover:border-orange-500 hover:text-orange-600 dark:hover:text-orange-400 transition-colors text-sm font-medium">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
Documentation
</a>
</div>
<!-- Screenshot gallery -->
<div class="max-w-3xl mx-auto mb-8 relative">
<div class="absolute left-0 top-0 bottom-0 w-6 sm:w-10 bg-gradient-to-r from-white dark:from-gray-950 to-transparent z-10 pointer-events-none"></div>
<div class="absolute right-0 top-0 bottom-0 w-6 sm:w-10 bg-gradient-to-l from-white dark:from-gray-950 to-transparent z-10 pointer-events-none"></div>
<div class="flex overflow-x-auto gap-3 hide-scrollbar px-6 sm:px-10">
<img src="screenshots/thumbs/1.png" alt="Onboarding — secure your instance with passkey or password" class="h-24 sm:h-32 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-orange-400 dark:hover:border-orange-500 hover:shadow-md transition-all shrink-0" onclick="openLightbox(0)">
<img src="screenshots/thumbs/2.png" alt="Onboarding — setup summary with identity, LLM and channel config" class="h-24 sm:h-32 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-orange-400 dark:hover:border-orange-500 hover:shadow-md transition-all shrink-0" onclick="openLightbox(1)">
<img src="screenshots/thumbs/3.png" alt="음성 settings — speech-to-text and text-to-speech providers" class="h-24 sm:h-32 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-orange-400 dark:hover:border-orange-500 hover:shadow-md transition-all shrink-0" onclick="openLightbox(2)">
<img src="screenshots/thumbs/4.png" alt="Chat with voice, map and tool use" class="h-24 sm:h-32 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-orange-400 dark:hover:border-orange-500 hover:shadow-md transition-all shrink-0" onclick="openLightbox(3)">
<img src="screenshots/thumbs/5.png" alt="샌드박스ed shell execution in Docker container" class="h-24 sm:h-32 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-orange-400 dark:hover:border-orange-500 hover:shadow-md transition-all shrink-0" onclick="openLightbox(4)">
<img src="screenshots/thumbs/6.png" alt="Telegram bot channel with voice and events" class="h-24 sm:h-32 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-orange-400 dark:hover:border-orange-500 hover:shadow-md transition-all shrink-0" onclick="openLightbox(5)">
<img src="screenshots/thumbs/7.png" alt="Web UI showing Telegram channel messages" class="h-24 sm:h-32 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-orange-400 dark:hover:border-orange-500 hover:shadow-md transition-all shrink-0" onclick="openLightbox(6)">
</div>
</div>
<!-- 3 value proposition cards -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-3xl mx-auto mb-8 text-left">
<a href="#security" onclick="navigateTo('security')" class="group p-4 sm:p-5 rounded-xl bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 hover:border-orange-400 dark:hover:border-orange-500 transition-all hover:shadow-md">
<div class="flex items-center gap-2 mb-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</span>
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">Secure by design</h3>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Your keys and private data never leave your machine. 샌드박스ed by default — your AI can't touch your filesystem unless you say so.</p>
</a>
<a href="#install" onclick="navigateTo('install')" class="group p-4 sm:p-5 rounded-xl bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 hover:border-orange-400 dark:hover:border-orange-500 transition-all hover:shadow-md">
<div class="flex items-center gap-2 mb-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6v6H9z"/></svg>
</span>
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">Your hardware</h3>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Runs on a <img src="images/apple.svg" alt="" width="11" height="11" class="inline -mt-0.5 dark:invert opacity-60"> Mac Mini, a Raspberry Pi, or any server you own. Always on, always local — like a house elf for your digital life.</p>
<div class="flex items-center gap-3 mt-2">
<span class="flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500"><img src="images/apple.svg" alt="" width="12" height="12" class="dark:invert opacity-50">macOS</span>
<span class="flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500"><img src="images/linux.svg" alt="" width="12" height="12" class="dark:invert opacity-50">Linux</span>
<span class="flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500"><img src="images/windows.svg" alt="" width="12" height="12" class="dark:invert opacity-50">Windows</span>
</div>
</a>
<a href="#features" onclick="navigateTo('features')" class="group p-4 sm:p-5 rounded-xl bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 hover:border-orange-400 dark:hover:border-orange-500 transition-all hover:shadow-md">
<div class="flex items-center gap-2 mb-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</span>
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">Full-featured</h3>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Telegram, WhatsApp, Discord, Teams, voice, memory, scheduling, tools — all built-in. No plugin marketplace to get supply-chain attacked through.</p>
</a>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- PAGE: Install -->
<!-- ============================================================ -->
<div id="page-install" class="page-content hidden">
<div class="relative z-10 px-4 sm:px-6 w-full max-w-3xl mx-auto pt-12 pb-8">
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-2 text-center text-gray-900 dark:text-white font-outfit">Get Started</h1>
<p class="text-sm sm:text-base text-gray-500 dark:text-gray-400 mb-8 text-center">Install Moltis and start your AI assistant in minutes</p>
<!-- Installation tabs -->
<div class="text-left mb-8">
<div class="bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden shadow-lg">
<div class="flex items-center gap-2 px-4 py-2.5 bg-gray-200 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700">
<span class="w-3 h-3 rounded-full bg-red-400"></span>
<span class="w-3 h-3 rounded-full bg-yellow-400"></span>
<span class="w-3 h-3 rounded-full bg-green-400"></span>
<span class="ml-2 text-xs font-mono text-gray-400 dark:text-gray-500">~ quickstart</span>
</div>
<div class="flex gap-1 px-4 pt-3 pb-2 border-b border-gray-200 dark:border-gray-800 overflow-x-auto hide-scrollbar" id="install-tabs">
<button data-tab="curl" class="shrink-0 px-3 py-1 text-xs font-medium rounded-md transition-colors">설치</button>
<button data-tab="brew" class="shrink-0 px-3 py-1 text-xs font-medium rounded-md transition-colors">Homebrew</button>
<button data-tab="docker" class="shrink-0 px-3 py-1 text-xs font-medium rounded-md transition-colors">Docker</button>
<button data-tab="source" class="shrink-0 px-3 py-1 text-xs font-medium rounded-md transition-colors">소스</button>
<button data-tab="others" class="shrink-0 px-3 py-1 text-xs font-medium rounded-md transition-colors">기타</button>
</div>
<div class="p-4 font-mono text-xs sm:text-sm leading-relaxed overflow-x-auto">
<div id="tab-curl" class="install-content">
<p class="text-gray-500 dark:text-gray-500">$ <span class="text-gray-700 dark:text-gray-300">curl -fsSL https://www.moltis.org/install.sh | sh</span></p>
</div>
<div id="tab-brew" class="install-content hidden">
<p class="text-gray-500 dark:text-gray-500">$ <span class="text-gray-700 dark:text-gray-300">brew install moltis-org/tap/moltis</span></p>
</div>
<div id="tab-docker" class="install-content hidden">
<p class="text-gray-500 dark:text-gray-500 mb-1"># Multi-arch: amd64/arm64</p>
<p class="text-gray-500 dark:text-gray-500 mb-1">$ <span class="text-gray-700 dark:text-gray-300">docker run -d \</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-1"> <span class="text-gray-700 dark:text-gray-300">--name moltis -p 13131:13131 -p 1455:1455 \</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-1"> <span class="text-gray-700 dark:text-gray-300">-v moltis-config:/home/moltis/.config/moltis \</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-1"> <span class="text-gray-700 dark:text-gray-300">-v moltis-data:/home/moltis/.moltis \</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-1"> <span class="text-gray-700 dark:text-gray-300">-v /var/run/docker.sock:/var/run/docker.sock \</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-3"> <span class="text-gray-700 dark:text-gray-300">ghcr.io/moltis-org/moltis:latest</span></p>
<p class="text-gray-500 dark:text-gray-500"># Open <span class="text-gray-700 dark:text-gray-300">http://localhost:13131</span> and complete the setup</p>
</div>
<div id="tab-source" class="install-content hidden">
<p class="text-gray-500 dark:text-gray-500 mb-1"># Build from source</p>
<p class="text-gray-500 dark:text-gray-500">$ <span class="text-gray-700 dark:text-gray-300">cargo install moltis --git https://github.com/moltis-org/moltis</span></p>
</div>
<div id="tab-others" class="install-content hidden">
<p class="text-gray-500 dark:text-gray-500 mb-3"># Download packages from <a href="https://github.com/moltis-org/moltis/releases" class="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-300 underline">GitHub Releases</a></p>
<p class="text-gray-500 dark:text-gray-500 mb-2"># Debian/Ubuntu (.deb)</p>
<p class="text-gray-500 dark:text-gray-500 mb-3">$ <span class="text-gray-700 dark:text-gray-300">sudo dpkg -i moltis_*_amd64.deb</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-2"># Fedora/RHEL (.rpm)</p>
<p class="text-gray-500 dark:text-gray-500 mb-3">$ <span class="text-gray-700 dark:text-gray-300">sudo dnf install moltis-*.x86_64.rpm</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-2"># Arch Linux (.pkg.tar.zst)</p>
<p class="text-gray-500 dark:text-gray-500 mb-3">$ <span class="text-gray-700 dark:text-gray-300">sudo pacman -U moltis-*-x86_64.pkg.tar.zst</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-2"># Snap</p>
<p class="text-gray-500 dark:text-gray-500 mb-3">$ <span class="text-gray-700 dark:text-gray-300">sudo snap install moltis</span></p>
<p class="text-gray-500 dark:text-gray-500 mb-2"># AppImage</p>
<p class="text-gray-500 dark:text-gray-500">$ <span class="text-gray-700 dark:text-gray-300">./moltis-*-x86_64.AppImage</span></p>
</div>
</div>
</div>
</div>
<!-- Supported platforms -->
<div class="mb-8 text-left">
<div class="flex flex-wrap items-center justify-between gap-2 mb-4">
<h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">Supported Platforms</h2>
<span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 px-2.5 py-1 text-[11px] font-medium text-gray-500 dark:text-gray-400">Pre-built releases</span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
<a href="https://github.com/moltis-org/moltis/releases" target="_blank" rel="noopener" class="group relative overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-800 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-950 p-4 sm:p-5 transition-all hover:-translate-y-0.5 hover:border-orange-300 dark:hover:border-orange-700 hover:shadow-lg">
<div class="absolute -top-16 -right-16 w-36 h-36 rounded-full bg-orange-200/40 dark:bg-orange-700/20 blur-2xl pointer-events-none"></div>
<div class="relative">
<div class="flex items-center gap-2 mb-2">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white/70 dark:bg-gray-900/70 border border-gray-200 dark:border-gray-800">
<img src="images/apple.svg" alt="" width="17" height="17" class="dark:invert">
</span>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white tracking-tight">macOS</h3>
</div>
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Apple Silicon & Intel</p>
</div>
</a>
<a href="https://github.com/moltis-org/moltis/releases" target="_blank" rel="noopener" class="group relative overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-800 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-950 p-4 sm:p-5 transition-all hover:-translate-y-0.5 hover:border-orange-300 dark:hover:border-orange-700 hover:shadow-lg">
<div class="absolute -top-16 -right-16 w-36 h-36 rounded-full bg-red-200/40 dark:bg-red-700/20 blur-2xl pointer-events-none"></div>
<div class="relative">
<div class="flex items-center gap-2 mb-2">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white/70 dark:bg-gray-900/70 border border-gray-200 dark:border-gray-800">
<img src="images/linux.svg" alt="" width="17" height="17" class="dark:invert">
</span>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white tracking-tight">Linux</h3>
</div>
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">x86_64 & ARM64</p>
</div>
</a>
<a href="https://github.com/moltis-org/moltis/releases" target="_blank" rel="noopener" class="group relative overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-800 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-950 p-4 sm:p-5 transition-all hover:-translate-y-0.5 hover:border-orange-300 dark:hover:border-orange-700 hover:shadow-lg sm:col-span-2 lg:col-span-1">
<div class="absolute -top-16 -right-16 w-36 h-36 rounded-full bg-orange-200/40 dark:bg-orange-700/20 blur-2xl pointer-events-none"></div>
<div class="relative">
<div class="flex items-center gap-2 mb-2">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white/70 dark:bg-gray-900/70 border border-gray-200 dark:border-gray-800">
<img src="images/windows.svg" alt="" width="17" height="17" class="dark:invert">
</span>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white tracking-tight">Windows</h3>
</div>
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">x86_64</p>
</div>
</a>
</div>
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400">Install with one command, or pick a release artifact for your platform from <a href="https://github.com/moltis-org/moltis/releases" target="_blank" rel="noopener" class="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-300 underline">GitHub Releases</a>.</p>
</div>
<!-- Cloud deploy section -->
<div id="cloud-deploy" class="mb-8 text-left">
<div class="p-4 sm:p-5 rounded-xl bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex flex-wrap items-center justify-between gap-2 mb-3">
<div class="inline-flex items-center gap-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"/><path d="m8 17 4 4 4-4"/><path d="M12 12v9"/></svg>
</span>
<h2 class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-200">Try it in the cloud</h2>
</div>
<span class="inline-flex items-center rounded-full bg-orange-100 dark:bg-orange-900/40 border border-orange-200 dark:border-orange-800 px-2 py-0.5 text-[10px] sm:text-[11px] font-semibold text-orange-700 dark:text-orange-300">Ready in under a minute</span>
</div>
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-4">Cloud is a great way to try Moltis. For the full experience, run it on your Mac, a VM, or any dedicated host.</p>
<div class="flex flex-wrap items-center gap-2 mb-4">
<a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/moltis-org/moltis/tree/main" target="_blank" rel="noopener" class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md border border-sky-200 dark:border-sky-900/70 bg-sky-50 dark:bg-sky-950/30 text-sky-700 dark:text-sky-300 hover:border-sky-400 dark:hover:border-sky-600 transition-colors text-[11px] sm:text-xs font-medium" aria-label="Deploy Moltis to DigitalOcean">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<circle cx="12" cy="12" r="10" fill="#0080FF"/>
<rect x="10" y="5" width="4" height="14" fill="white"/>
<rect x="5" y="10" width="14" height="4" fill="white"/>
</svg>
Deploy on DigitalOcean
</a>
</div>
<div id="fly-command" class="mb-1 flex w-full flex-col gap-2 px-3 py-2 rounded-md bg-orange-50 dark:bg-orange-950/40 border border-orange-200 dark:border-orange-800 cursor-pointer hover:bg-orange-100 dark:hover:bg-orange-950/60 transition-colors" title="Click to copy">
<div class="flex items-center gap-3">
<span class="shrink-0 text-[10px] font-semibold uppercase tracking-wide text-orange-700 dark:text-orange-300">Fly.io</span>
<code id="fly-code" class="min-w-0 flex-1 font-mono text-[11px] sm:text-xs text-orange-800 dark:text-orange-200 break-all"></code>
</div>
<code id="fly-logs-hint" class="font-mono text-[11px] sm:text-xs text-orange-600/70 dark:text-orange-300/50"></code>
</div>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Need setup details? See <a href="https://docs.moltis.org/cloud-deploy.html" class="text-orange-500 dark:text-orange-400 hover:text-orange-600 dark:hover:text-orange-300 underline">Cloud Deploy docs</a>.</p>
</div>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- PAGE: Features -->
<!-- ============================================================ -->
<div id="page-features" class="page-content hidden">
<div class="relative z-10 px-4 sm:px-6 w-full max-w-3xl mx-auto pt-12 pb-8">
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-2 text-center text-gray-900 dark:text-white font-outfit">기능</h1>
<p class="text-sm sm:text-base text-gray-500 dark:text-gray-400 mb-8 text-center">필요한 모든 것 in one binary</p>
<!-- Feature highlights (12 cards) -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4 mb-10 text-left">
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Single Binary</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">One self-contained binary. No runtime dependencies, just download and run.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6v6H9z"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Local LLMs</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Run your own models locally. Automatic download and setup included.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">인증entication</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">HTTPS by default. Password, token, and passkeys access.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 20h8"/><path d="M12 18v2"/><path d="M7 9h10"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">샌드박스ed Browsing</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Run browser sessions in isolated Docker containers for safer automation.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">SSRF Protected</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Blocks loopback, private, and link-local IPs from LLM fetch.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Streaming-first</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">First token appears instantly. Smooth replies, even during long runs.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Skills, 훅 & MCP</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Plugins, hooks, MCP tool servers with O인증 2.1. Stdio or HTTP/SSE, auto-restart.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">FS or 샌드박스</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Full filesystem or per-session Docker, Podman, Apple Container, or WASM isolation.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Long-term Memory</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Hybrid vector + full-text search. Your agent remembers context.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Pi-Inspired Self-Extension</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Pi-inspired self-extension: creates its own skills at runtime. Session branching, hot-reload.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Multi-Channel</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Web UI, Telegram, WhatsApp, Discord, Teams, or API. One agent, every frontend.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">음성</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Talk to your assistant with multiple cloud and local TTS/STT providers.</p>
</div>
</div>
<!-- New major features -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4 mb-10 text-left">
<div class="p-3 sm:p-4 rounded-lg bg-orange-50 dark:bg-orange-950/20 border border-orange-200 dark:border-orange-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">OpenClaw Import</p>
<span class="px-1.5 py-0.5 rounded-full bg-orange-500 text-white text-[9px] font-bold uppercase">신규</span>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Full read-only import of your OpenClaw workspace — conversations, skills, and settings. Switch in one click.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Multi-Agent Personas</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Create multiple agent personas with distinct personalities and capabilities. Full CRUD management UI.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><circle cx="12" cy="16" r="1"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Encryption Vault</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Encryption-at-rest vault for API keys and secrets. Your credentials are encrypted on disk, not just in memory.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">iOS Companion</p>
<span class="px-1.5 py-0.5 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-[9px] font-bold uppercase">Soon</span>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Native iOS app with push notifications via APNS relay. Coming soon to the App Store.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">GraphQL API</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Full GraphQL API exposing all RPC methods. Build your own integrations and frontends.</p>
</div>
<div class="p-3 sm:p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-1.5 sm:mb-2">
<span class="text-orange-500 dark:text-orange-400 shrink-0">
<svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</span>
<p class="text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-200">Internationalization</p>
</div>
<p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 leading-relaxed">완전한 i18n 지원. 현재 10개 언어가 기본 탑재되어 있습니다.</p>
</div>
</div>
<!-- Extended features checklist -->
<div class="mb-8 text-left">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4 text-center">And much more...</h2>
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
<!-- Security -->
<div>
<h3 class="text-sm font-semibold text-orange-500 dark:text-orange-400 mb-2 uppercase tracking-wide">보안</h3>
<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Passkeys (Web인증n)</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Scoped API keys</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Encryption-at-rest vault</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Secrets zeroed on drop</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Human-in-the-loop approval</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Origin validation (CSWSH)</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> No unsafe code</li>
</ul>
</div>
<!-- LLM Providers -->
<div>
<h3 class="text-sm font-semibold text-orange-500 dark:text-orange-400 mb-2 uppercase tracking-wide">LLM Providers</h3>
<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Anthropic, OpenAI, Gemini</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> DeepSeek, Mistral, Groq, xAI</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> OpenRouter, Ollama, Local LLM</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Custom OpenAI-compatible endpoints</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Provider fallback chains</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Per-provider metrics</li>
</ul>
</div>
<!-- Memory -->
<div>
<h3 class="text-sm font-semibold text-orange-500 dark:text-orange-400 mb-2 uppercase tracking-wide">Memory</h3>
<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Hybrid search (vector + FTS)</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Local embeddings (GGUF)</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> OpenAI batch API (50% off)</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Embedding cache</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> File watching / live sync</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Session export</li>
</ul>
</div>
<!-- Extensibility -->
<div>
<h3 class="text-sm font-semibold text-orange-500 dark:text-orange-400 mb-2 uppercase tracking-wide">Extensibility</h3>
<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> MCP server support</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> GraphQL API</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> CalDAV calendar integration</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Hook system (lifecycle)</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Cron job scheduling</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> i18n (10개 언어)</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> <a href="https://docs.moltis.org/openclaw-import.html" class="hover:text-orange-500 transition-colors">OpenClaw 가져오기</a></li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> TOML configuration</li>
</ul>
</div>
<!-- 채널 -->
<div>
<h3 class="text-sm font-semibold text-orange-500 dark:text-orange-400 mb-2 uppercase tracking-wide">채널</h3>
<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Web UI</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Telegram bot</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> WhatsApp</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Discord</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Microsoft Teams</li>
<li class="flex items-center gap-2"><span class="text-gray-400 dark:text-gray-500">○</span> <span class="text-gray-400 dark:text-gray-500">iOS companion app (coming soon)</span></li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> JSON-RPC + GraphQL API</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Push notifications</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Multi-device sync</li>
</ul>
</div>
<!-- Observability -->
<div>
<h3 class="text-sm font-semibold text-orange-500 dark:text-orange-400 mb-2 uppercase tracking-wide">Observability</h3>
<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Prometheus metrics</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> OpenTelemetry tracing</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Structured logging</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Per-provider charts</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> SQLite persistence</li>
<li class="flex items-center gap-2"><span class="text-orange-500">✓</span> Real-time WebSocket</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- PAGE: Security -->
<!-- ============================================================ -->
<div id="page-security" class="page-content hidden">
<div class="relative z-10 px-4 sm:px-6 w-full max-w-3xl mx-auto pt-12 pb-8">
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-2 text-center text-gray-900 dark:text-white font-outfit">보안 최우선 설계</h1>
<p class="text-sm sm:text-base text-gray-500 dark:text-gray-400 mb-10 text-center">당신의 기기에서 신뢰할 수 있는 AI 어시스턴트</p>
<!-- Why Rust -->
<div class="mb-10 text-left">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3 flex items-center gap-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</span>
왜 신뢰해야 할까요?
</h2>
<div class="space-y-3">
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
Moltis는 하나의 파일입니다. 다운로드하고 실행하면 끝. 플러그인 스토어도, 패키지 매니저도, 침해될 수 있는 런타임도 없습니다. 전체 애플리케이션은 검증 가능한 단일 바이너리입니다.
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
AI는 기본적으로 샌드박스에서 실행됩니다. 명시적으로 허용하지 않는 한 파일 읽기, 명령 실행, 웹 브라우징이 불가합니다. 모든 도구 작업에 승인을 요구할 수 있으며, 신뢰하는 특정 작업을 사전 승인할 수 있습니다.
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
비밀번호와 API 키는 실수로 기록되지 않도록 래핑되며, 더 이상 필요하지 않은 순간 메모리가 제로화됩니다. 사용된 프로그래밍 언어(Rust)는 컴파일러 수준에서 전체 보안 버그 클래스를 불가능하게 만듭니다.
</p>
<div class="mt-4 p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<p class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">여기서 찾을 수 없는 것</p>
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">침해될 플러그인 마켓플레이스 없음. JavaScript 런타임 없음. 검토할 수 없는 1,200개 패키지의 의존성 트리 없음. 처음부터 끝까지 감사할 수 있는 하나의 바이너리.</p>
</div>
</div>
</div>
<!-- Threat defense table -->
<div class="mb-10 text-left">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 .5-.87l8-4.5a1 1 0 0 1 1 0l8 4.5A1 1 0 0 1 20 6z"/><path d="m9 12 2 2 4-4"/></svg>
</span>
우리가 당신을 보호하는 방법
</h2>
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-800">
<table class="w-full text-xs sm:text-sm text-left">
<thead>
<tr class="bg-gray-50 dark:bg-gray-900/50">
<th class="px-4 py-3 font-semibold text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-800">만약...</th>
<th class="px-4 py-3 font-semibold text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-800">Moltis의 대처 방법</th>
</tr>
</thead>
<tbody class="text-gray-600 dark:text-gray-400">
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">누군가 당신의 인스턴스를 발견</td>
<td class="px-4 py-3">첫 실행부터 비밀번호 또는 패스키 필요, 자동 HTTPS, 속도 제한</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">AI가 위험한 코드를 실행하려 함</td>
<td class="px-4 py-3">모든 것이 샌드박스에서 실행(Docker 또는 Apple Container). 각 작업에 먼저 승인 필요</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">의존성이 침해됨</td>
<td class="px-4 py-3">침해할 npm/pip 패키지 없음. 하나의 바이너리, 감사 가능한 의존성. Telegram 등의 통합은 내장된 테스트 코드</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">AI가 내부 네트워크에 접근</td>
<td class="px-4 py-3">내부 및 프라이빗 네트워크 주소 자동 차단</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">누군가 키를 훔치려 함</td>
<td class="px-4 py-3">API 키와 비밀번호는 로그에서 숨겨지고 사용 후 메모리에서 제로화</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">세션이 하이재킹됨</td>
<td class="px-4 py-3">오리진 확인으로 크로스 사이트 공격 방지, 기본 HTTPS 활성화</td>
</tr>
<tr>
<td class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">무단 접근</td>
<td class="px-4 py-3">패스키, 범위 지정 API 키, 도구별 권한 정책</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 샌드박스 section -->
<div class="mb-10 text-left">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>
</span>
샌드박스 실행
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-2">
<img src="images/docker.svg" alt="Docker" width="20" height="20">
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Docker & Podman</h3>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">각 대화마다 자체 격리 컨테이너. 셸 명령과 웹 브라우징은 샌드박스 내에서 실행되며 실제 시스템에는 영향 없음.</p>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-2">
<img src="images/apple.svg" alt="Apple" width="20" height="20" class="dark:invert opacity-60">
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Apple Containers</h3>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Mac에서는 Apple의 내장 가상화를 사용한 경량 격리 — Docker 불필요.</p>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 mb-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
</span>
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200">WASM 샌드박스</h3>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">범용 페일오버가 있는 Wasmtime 기반 샌드박스. 컨테이너 없는 경량 격리.</p>
</div>
</div>
</div>
<!-- Auditable codebase section -->
<div class="mb-8 text-left">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
</span>
완전 오픈 소스
</h2>
<div class="grid grid-cols-3 gap-3">
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 text-center">
<p class="text-2xl font-bold text-orange-500 dark:text-orange-400 mb-1">0</p>
<p class="text-xs text-gray-500 dark:text-gray-400">코어의 unsafe*</p>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 text-center">
<p class="text-2xl font-bold text-orange-500 dark:text-orange-400 mb-1">0</p>
<p class="text-xs text-gray-500 dark:text-gray-400">npm 의존성</p>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 text-center">
<p class="text-2xl font-bold text-orange-500 dark:text-orange-400 mb-1">~5K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">에이전트 코어 LoC</p>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 text-center">
<p class="text-2xl font-bold text-orange-500 dark:text-orange-400 mb-1">~150K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Rust 라인 수 (전체)</p>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 text-center">
<p class="text-2xl font-bold text-orange-500 dark:text-orange-400 mb-1">85%</p>
<p class="text-xs text-gray-500 dark:text-gray-400">테스트 포함 파일</p>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 text-center">
<p class="text-2xl font-bold text-orange-500 dark:text-orange-400 mb-1">MIT</p>
<p class="text-xs text-gray-500 dark:text-gray-400">라이선스</p>
</div>
</div>
<p class="mt-2 text-[11px] text-gray-400 dark:text-gray-500">*2 <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">unsafe impl Send/Sync</code> exist for the llama.cpp FFI wrapper, only compiled with the optional <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">local-llm</code> feature.</p>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- PAGE: Compare -->
<!-- ============================================================ -->
<div id="page-compare" class="page-content hidden">
<div class="relative z-10 px-4 sm:px-6 w-full max-w-3xl mx-auto pt-12 pb-8">
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-2 text-center text-gray-900 dark:text-white font-outfit">Moltis 비교</h1>
<p class="text-sm sm:text-base text-gray-500 dark:text-gray-400 mb-10 text-center">셀프 호스팅 가능한 오픈 소스 AI 어시스턴트</p>
<!-- Feature comparison -->
<div class="mb-10 text-left">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
</span>
한눈에 보기
</h2>
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-800">
<table class="w-full text-[11px] sm:text-xs text-left whitespace-nowrap">
<thead>
<tr class="bg-gray-50 dark:bg-gray-900/50">
<th class="px-3 py-2.5 font-semibold text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-800 sticky left-0 bg-gray-50 dark:bg-gray-900/80 z-10"></th>
<th class="px-3 py-2.5 font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800"><a href="https://github.com/openclaw/openclaw" target="_blank" rel="noopener" class="hover:text-orange-500 transition-colors">OpenClaw</a></th>
<th class="px-3 py-2.5 font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800"><a href="https://github.com/qwibitai/nanoclaw" target="_blank" rel="noopener" class="hover:text-orange-500 transition-colors">NanoClaw</a></th>
<th class="px-3 py-2.5 font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800"><a href="https://github.com/zeroclaw-labs/zeroclaw" target="_blank" rel="noopener" class="hover:text-orange-500 transition-colors">ZeroClaw</a></th>
<th class="px-3 py-2.5 font-semibold text-orange-600 dark:text-orange-400 border-b border-orange-200 dark:border-orange-800 bg-orange-50/50 dark:bg-orange-950/20">Moltis</th>
</tr>
</thead>
<tbody class="text-gray-600 dark:text-gray-400">
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">언어</td>
<td class="px-3 py-2">TypeScript</td>
<td class="px-3 py-2">TypeScript</td>
<td class="px-3 py-2">Rust</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Rust</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-gray-50/50 dark:bg-gray-900/20 z-10">런타임</td>
<td class="px-3 py-2">Node.js + npm</td>
<td class="px-3 py-2">Node.js</td>
<td class="px-3 py-2">Single binary</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Single binary</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">샌드박스</td>
<td class="px-3 py-2">App-level</td>
<td class="px-3 py-2">Docker</td>
<td class="px-3 py-2">Docker</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Docker/Podman + Apple + WASM</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-gray-50/50 dark:bg-gray-900/20 z-10">인증</td>
<td class="px-3 py-2">Basic password</td>
<td class="px-3 py-2">None</td>
<td class="px-3 py-2">Token + O인증</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Password + Passkey + API keys</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">음성</td>
<td class="px-3 py-2">Plugin</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Built-in (15+ providers)</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-gray-50/50 dark:bg-gray-900/20 z-10">MCP</td>
<td class="px-3 py-2">Via plugin</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Yes (stdio + HTTP/SSE)</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">메모리 / RAG</td>
<td class="px-3 py-2">Plugin</td>
<td class="px-3 py-2">Per-group files</td>
<td class="px-3 py-2">SQLite + FTS</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">SQLite + FTS + vector</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">훅</td>
<td class="px-3 py-2">Limited</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">15 event types</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-gray-50/50 dark:bg-gray-900/20 z-10">채널</td>
<td class="px-3 py-2">Web, Telegram</td>
<td class="px-3 py-2">Web, Telegram</td>
<td class="px-3 py-2">Web, Discord</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Web, Telegram, WhatsApp, Discord, Teams</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">API</td>
<td class="px-3 py-2">REST</td>
<td class="px-3 py-2">REST</td>
<td class="px-3 py-2">REST + gRPC</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">JSON-RPC + GraphQL</td>
</tr>
<tr>
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">OpenClaw 가져오기</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Full (read-only, safe)</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 보안 비교 -->
<div class="mb-10 text-left">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</span>
보안 비교
</h2>
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-800">
<table class="w-full text-[11px] sm:text-xs text-left whitespace-nowrap">
<thead>
<tr class="bg-gray-50 dark:bg-gray-900/50">
<th class="px-3 py-2.5 font-semibold text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-800 sticky left-0 bg-gray-50 dark:bg-gray-900/80 z-10"></th>
<th class="px-3 py-2.5 font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800">OpenClaw</th>
<th class="px-3 py-2.5 font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800">NanoClaw</th>
<th class="px-3 py-2.5 font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800">ZeroClaw</th>
<th class="px-3 py-2.5 font-semibold text-orange-600 dark:text-orange-400 border-b border-orange-200 dark:border-orange-800 bg-orange-50/50 dark:bg-orange-950/20">Moltis</th>
</tr>
</thead>
<tbody class="text-gray-600 dark:text-gray-400">
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">코드 샌드박스</td>
<td class="px-3 py-2">App-level</td>
<td class="px-3 py-2">Docker</td>
<td class="px-3 py-2">Docker</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Docker/Podman + Apple + WASM</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-gray-50/50 dark:bg-gray-900/20 z-10">시크릿 관리</td>
<td class="px-3 py-2">환경 변수</td>
<td class="px-3 py-2">환경 변수</td>
<td class="px-3 py-2">암호화된 프로파일</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">암호화된 볼트, 수정됨, 제로화</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">SSRF 보호</td>
<td class="px-3 py-2">Plugin</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2">DNS 검증</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">Blocks loopback/private/CGNAT</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/20">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-gray-50/50 dark:bg-gray-900/20 z-10">WebSocket 오리진</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">크로스 오리진 거부</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/50">
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">훅 제어</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2">스킬 기반</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">검사 / 수정 / 차단</td>
</tr>
<tr>
<td class="px-3 py-2 font-medium text-gray-700 dark:text-gray-300 sticky left-0 bg-white dark:bg-gray-950 z-10">속도 제한</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 text-gray-400 dark:text-gray-600">—</td>
<td class="px-3 py-2 bg-orange-50/30 dark:bg-orange-950/10 font-medium text-gray-700 dark:text-gray-200">IP별 스로틀 + 로그인 제한</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 성능 comparison -->
<div class="mb-10 text-left">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
<span class="text-orange-500 dark:text-orange-400">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</span>