Hugging Face's logo

Spaces:
fantos
/
KORAIL
Running

App Files Community
fantos commited on
Commit
6e4c236
Β·
verified Β·
1 Parent(s): 0629fa8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +815 -18
index.html CHANGED
@@ -1,19 +1,816 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>μ½”λ ˆμΌ 예맀 + μ‹€μ œ AI μ—μ΄μ „νŠΈ</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
9
+ * { margin:0; padding:0; box-sizing:border-box; }
10
+ :root {
11
+ --blue: #003087; --red: #e31837; --border: #cdd5e0;
12
+ --ai: #6c47ff; --ai-glow: rgba(108,71,255,0.25);
13
+ --hi: rgba(108,71,255,0.1);
14
+ }
15
+ body { font-family:'Noto Sans KR',sans-serif; background:#e8ecf0; min-height:100vh; }
16
+
17
+ /* HEADER */
18
+ .kh { background:var(--blue); }
19
+ .kh-top { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; border-bottom:1px solid rgba(255,255,255,0.1); }
20
+ .logo { display:flex; align-items:center; gap:10px; }
21
+ .logo-box { width:40px;height:40px;background:white;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--blue);font-size:11px; }
22
+ .logo-txt { color:white;font-size:22px;font-weight:700;letter-spacing:2px; }
23
+ .gnb { display:flex; background:white; border-bottom:3px solid var(--red); }
24
+ .gnb-i { padding:13px 22px;font-size:14px;font-weight:500;color:#333;cursor:pointer;border-right:1px solid #eee; }
25
+ .gnb-i.on { background:var(--blue);color:white;font-weight:700; }
26
+
27
+ /* LAYOUT */
28
+ .wrap { max-width:1100px;margin:20px auto;padding:0 15px;display:grid;grid-template-columns:240px 1fr;gap:15px; }
29
+ .sidebar { background:white;border:1px solid var(--border);border-radius:4px;overflow:hidden; }
30
+ .sb-title { background:var(--blue);color:white;padding:12px 15px;font-size:14px;font-weight:700; }
31
+ .sb-menu { list-style:none; }
32
+ .sb-menu li { border-bottom:1px solid #f0f0f0;padding:10px 15px;font-size:13px;color:#444;cursor:pointer; }
33
+ .sb-menu li.on { color:var(--blue);font-weight:700;background:#f0f4ff; }
34
+ .sb-menu li::before { content:'β–Ά';font-size:8px;color:#bbb;margin-right:6px; }
35
+ .sb-menu li.on::before { color:var(--blue); }
36
+
37
+ /* FORM */
38
+ .book { display:flex;flex-direction:column;gap:12px; }
39
+ .ptitle { background:white;border:1px solid var(--border);padding:12px 18px;border-radius:4px;display:flex;align-items:center; }
40
+ .ptitle h2 { font-size:16px;font-weight:700;color:var(--blue); }
41
+ .fs { background:white;border:1px solid var(--border);border-radius:4px;overflow:hidden; }
42
+ .fsh { background:#f5f7fa;border-bottom:1px solid var(--border);padding:10px 18px;font-size:13px;font-weight:700;color:#333;display:flex;align-items:center;gap:6px; }
43
+ .fsh::before { content:'';width:3px;height:14px;background:var(--blue);border-radius:2px; }
44
+ .fsb { padding:15px 18px; }
45
+ .fr { display:grid;grid-template-columns:110px 1fr;align-items:center;margin-bottom:11px;gap:10px; }
46
+ .fr:last-child { margin-bottom:0; }
47
+ .fl { font-size:12px;color:#555;font-weight:500; }
48
+ .req { color:var(--red); }
49
+
50
+ /* INPUTS */
51
+ .sw { display:flex;align-items:center;gap:8px; }
52
+ .sb { flex:1;border:1px solid var(--border);border-radius:3px;padding:8px 12px;font-size:14px;font-family:'Noto Sans KR',sans-serif;color:#333;background:white;min-height:36px;transition:all 0.3s;cursor:pointer; }
53
+ .sb.filled { background:#fffbf0;border-color:#f0a500;font-weight:500; }
54
+ .sb.ai-on { border-color:var(--ai)!important;box-shadow:0 0 0 3px var(--ai-glow)!important;background:var(--hi)!important; }
55
+ .swap { width:28px;height:28px;border:1px solid var(--border);border-radius:50%;background:white;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
56
+
57
+ .dw { display:flex;gap:8px; }
58
+ .db { border:1px solid var(--border);border-radius:3px;padding:8px 12px;font-size:13px;font-family:'Noto Sans KR',sans-serif;color:#333;background:white;min-width:130px;min-height:36px;transition:all 0.3s; }
59
+ .db.filled { background:#fffbf0;border-color:#f0a500; }
60
+ .db.ai-on { border-color:var(--ai)!important;box-shadow:0 0 0 3px var(--ai-glow)!important;background:var(--hi)!important; }
61
+
62
+ .chips { display:flex;gap:6px;flex-wrap:wrap; }
63
+ .chip { padding:5px 12px;border:1px solid var(--border);border-radius:15px;font-size:12px;cursor:pointer;transition:all 0.3s;color:#555; }
64
+ .chip.sel { background:var(--blue);border-color:var(--blue);color:white;font-weight:700; }
65
+ .chip.sel-red { background:var(--red);border-color:var(--red);color:white;font-weight:700; }
66
+ .chip.sel-green { background:#16a34a;border-color:#16a34a;color:white;font-weight:700; }
67
+ .chip.sel-orange { background:#ea580c;border-color:#ea580c;color:white;font-weight:700; }
68
+ .chip.ai-flash { animation:flash 0.4s ease; }
69
+ @keyframes flash { 0%{transform:scale(1)} 50%{transform:scale(1.12);box-shadow:0 0 14px var(--ai-glow)} 100%{transform:scale(1)} }
70
+
71
+ .pw { display:flex;align-items:center;gap:8px; }
72
+ .cb { width:26px;height:26px;border:1px solid var(--border);border-radius:3px;background:#f5f5f5;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;font-weight:700; }
73
+ .cn { font-size:16px;font-weight:700;min-width:22px;text-align:center;transition:all 0.3s; }
74
+ .cn.ai-up { color:var(--ai);transform:scale(1.4); }
75
+
76
+ .search-btn-wrap { text-align:center;padding:16px; }
77
+ .search-btn { background:var(--blue);color:white;border:none;padding:13px 60px;font-size:15px;font-family:'Noto Sans KR',sans-serif;font-weight:700;border-radius:3px;cursor:pointer;letter-spacing:1px;transition:all 0.3s; }
78
+ .search-btn:hover { background:#002070; }
79
+ .search-btn.ai-ready { background:var(--ai)!important;box-shadow:0 0 20px var(--ai-glow);animation:btn-pulse 1s infinite alternate; }
80
+ @keyframes btn-pulse { from{box-shadow:0 0 10px var(--ai-glow)} to{box-shadow:0 0 30px rgba(108,71,255,0.5)} }
81
+
82
+ /* ===== AI AGENT PANEL ===== */
83
+ #ai-panel {
84
+ position:fixed; bottom:20px; right:20px; width:380px;
85
+ background:white; border-radius:18px;
86
+ box-shadow:0 8px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(108,71,255,0.15);
87
+ z-index:9999; overflow:hidden;
88
+ transform:translateY(30px); opacity:0;
89
+ transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
90
+ display:none;
91
+ }
92
+ #ai-panel.show { display:block; transform:translateY(0); opacity:1; }
93
+
94
+ .ap-header {
95
+ background:linear-gradient(135deg, #6c47ff, #9b59b6);
96
+ padding:14px 18px; display:flex; align-items:center; gap:10px;
97
+ }
98
+ .ap-icon { width:34px;height:34px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px; }
99
+ .ap-title { color:white;font-weight:700;font-size:14px; }
100
+ .ap-badge { margin-left:auto;background:rgba(255,255,255,0.2);color:white;font-size:10px;padding:3px 10px;border-radius:10px; }
101
+ .vidraft-tag { display:none;font-size:9px;color:rgba(255,255,255,0.45);text-align:center;padding:3px 0 5px;letter-spacing:0.5px; }
102
+ .vidraft-tag.show { display:block; }
103
+
104
+ /* INPUT AREA */
105
+ .ap-input-area { padding:14px 16px; border-bottom:1px solid #f0f0f0; }
106
+ .ap-input-label { font-size:10px;color:#888;letter-spacing:1px;margin-bottom:6px; }
107
+ .ap-input-wrap { display:flex;gap:8px;align-items:flex-end; }
108
+ #user-command {
109
+ flex:1; border:1px solid #e0daff; border-radius:10px; padding:10px 14px;
110
+ font-size:13px; font-family:'Noto Sans KR',sans-serif; color:#333;
111
+ resize:none; min-height:60px; outline:none;
112
+ transition:border-color 0.2s;
113
+ }
114
+ #user-command:focus { border-color:var(--ai); box-shadow:0 0 0 3px var(--ai-glow); }
115
+ .run-btn {
116
+ background:var(--ai); color:white; border:none;
117
+ width:42px; height:42px; border-radius:10px;
118
+ font-size:18px; cursor:pointer; flex-shrink:0;
119
+ transition:all 0.2s;
120
+ }
121
+ .run-btn:hover { background:#5535e0; transform:scale(1.05); }
122
+ .run-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
123
+
124
+ /* THINKING */
125
+ #ap-thinking { padding:12px 16px; border-bottom:1px solid #f0f0f0; display:none; }
126
+ .think-label { font-size:10px;color:var(--ai);font-weight:700;margin-bottom:6px;letter-spacing:1px; }
127
+ .think-text { font-size:12px;color:#555;line-height:1.7;max-height:80px;overflow-y:auto; }
128
+
129
+ /* LOG */
130
+ #ap-log { padding:12px 16px; max-height:180px; overflow-y:auto; display:none; }
131
+ .log-item { display:flex;gap:8px;padding:5px 0;font-size:12px;color:#555;border-bottom:1px dashed #f0f0f0;opacity:0;transform:translateX(-8px);transition:all 0.35s; }
132
+ .log-item.vis { opacity:1;transform:translateX(0); }
133
+
134
+ /* PROGRESS */
135
+ .ap-progress { padding:10px 16px 14px; border-top:1px solid #f0f0f0; }
136
+ .pb-bg { background:#f0f0f0;border-radius:4px;height:6px;overflow:hidden; }
137
+ .pb-fill { height:100%;background:linear-gradient(90deg,var(--ai),#a78bfa);border-radius:4px;width:0%;transition:width 0.5s ease; }
138
+ .pb-label { display:flex;justify-content:space-between;font-size:10px;color:#999;margin-top:5px; }
139
+
140
+ /* PRESETS */
141
+ .ap-presets { padding:10px 16px; border-bottom:1px solid #f0f0f0; }
142
+ .preset-label { font-size:10px;color:#888;margin-bottom:6px; }
143
+ .preset-btns { display:flex;flex-wrap:wrap;gap:5px; }
144
+ .preset-btn {
145
+ font-size:11px;padding:4px 10px;border:1px solid #e0daff;border-radius:8px;
146
+ background:#f8f6ff;color:#6c47ff;cursor:pointer;font-family:'Noto Sans KR',sans-serif;
147
+ transition:all 0.2s;
148
+ }
149
+ .preset-btn:hover { background:#ede8ff; }
150
+
151
+ /* FLOATING TOGGLE */
152
+ #ai-toggle {
153
+ position:fixed; bottom:20px; left:20px; z-index:9999;
154
+ background:linear-gradient(135deg,#6c47ff,#9b59b6);
155
+ color:white; border:none; padding:13px 20px; border-radius:50px;
156
+ font-size:14px; font-weight:700; font-family:'Noto Sans KR',sans-serif;
157
+ cursor:pointer; box-shadow:0 4px 20px var(--ai-glow);
158
+ display:flex; align-items:center; gap:8px;
159
+ animation:float 3s ease-in-out infinite;
160
+ }
161
+ @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
162
+ .dot { width:8px;height:8px;background:#4ade80;border-radius:50%;animation:blink 1.2s infinite; }
163
+ @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
164
+
165
+ /* SUCCESS */
166
+ #success { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99999;align-items:center;justify-content:center;backdrop-filter:blur(4px); }
167
+ #success.show { display:flex; }
168
+ .sc { background:white;border-radius:20px;padding:36px;text-align:center;max-width:400px;width:90%;animation:popin 0.5s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden; }
169
+ @keyframes popin { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
170
+ .sc-bar { position:absolute;top:0;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,var(--red) 0 20px,var(--blue) 20px 40px,#f0a500 40px 60px,#22c55e 60px 80px); }
171
+ .sc-emoji { font-size:56px;display:block;margin-bottom:10px; }
172
+ .sc-title { font-size:22px;font-weight:900;color:#1a1a2e;margin-bottom:6px; }
173
+ .sc-sub { font-size:13px;color:#666;line-height:1.7; }
174
+ .sc-ticket { background:#f8f6ff;border-radius:12px;padding:15px;margin:18px 0;text-align:left;border:2px dashed #d4cafe; }
175
+ .tr { display:flex;justify-content:space-between;font-size:13px;padding:3px 0; }
176
+ .tk { color:#888; } .tv { font-weight:700;color:#333; }
177
+ .t-route { font-size:20px;font-weight:900;color:var(--blue);text-align:center;padding:8px 0;border-bottom:1px dashed #e0daff;margin-bottom:8px; }
178
+ .sc-speed { font-size:11px;color:#22c55e;font-weight:700;margin-top:6px; }
179
+ .sc-close { background:var(--ai);color:white;border:none;padding:11px 28px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Noto Sans KR',sans-serif;margin-top:10px; }
180
+ .restart { position:fixed;top:10px;right:15px;background:white;border:1px solid var(--border);padding:7px 14px;border-radius:4px;font-size:12px;font-family:'Noto Sans KR',sans-serif;cursor:pointer;z-index:9999;color:#555; }
181
+
182
+ /* β‘  μΉ΄μš΄νŠΈλ‹€μš΄ */
183
+ #countdown-wrap { display:none;position:fixed;inset:0;background:rgba(0,0,20,0.88);z-index:99990;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(6px); }
184
+ #countdown-wrap.show { display:flex; }
185
+ .cd-label { color:rgba(255,255,255,0.6);font-size:13px;letter-spacing:3px;margin-bottom:16px; }
186
+ .cd-num { font-size:110px;font-weight:900;color:white;line-height:1;transition:all 0.15s; }
187
+ .cd-num.flash { color:var(--ai);transform:scale(1.08); }
188
+ .cd-sub { color:rgba(255,255,255,0.4);margin-top:14px;font-size:12px; }
189
+
190
+ /* β‘‘ 타이핑 μ»€μ„œ */
191
+ .typing-cursor { display:inline-block;width:2px;height:14px;background:var(--ai);margin-left:2px;animation:cursor-blink 0.6s infinite; vertical-align:middle; }
192
+ @keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }
193
+
194
+ /* β‘’ μž„νŒ©νŠΈ μΉ΄λ“œ */
195
+ .impact-card { background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;padding:14px;margin:14px 0;display:flex;gap:0;overflow:hidden; }
196
+ .impact-item { flex:1;text-align:center;padding:8px 6px;border-right:1px solid rgba(255,255,255,0.08); }
197
+ .impact-item:last-child { border:none; }
198
+ .impact-val { font-size:22px;font-weight:900;color:#a78bfa;line-height:1; }
199
+ .impact-val.green { color:#4ade80; }
200
+ .impact-val.red { color:#f87171; }
201
+ .impact-lbl { font-size:9px;color:rgba(255,255,255,0.45);margin-top:4px;letter-spacing:0.5px; }
202
+
203
+ /* β‘£ λ©€ν‹°μ—μ΄μ „νŠΈ ν˜‘λ ₯ μ‹œκ°ν™” */
204
+ .agent-flow { padding:10px 14px 8px;border-bottom:1px solid #f0f0f0;display:none; }
205
+ .agent-flow.show { display:block; }
206
+ .af-label { font-size:9px;color:#aaa;letter-spacing:0.5px;margin-bottom:7px; }
207
+ .af-nodes { display:flex;align-items:center;gap:0; }
208
+ .af-node { flex:1;display:flex;flex-direction:column;align-items:center;position:relative; }
209
+ .af-node::after { content:'β†’';position:absolute;right:-6px;top:10px;font-size:10px;color:#ddd;z-index:1; }
210
+ .af-node:last-child::after { display:none; }
211
+ .af-dot { width:28px;height:28px;border-radius:50%;background:#f0f0f0;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all 0.4s;position:relative; }
212
+ .af-dot.active { background:var(--ai);border-color:var(--ai);box-shadow:0 0 12px var(--ai-glow);animation:node-pulse 0.8s infinite alternate; }
213
+ .af-dot.done { background:#22c55e;border-color:#22c55e;box-shadow:none;animation:none; }
214
+ .af-dot.waiting { background:#f59e0b;border-color:#f59e0b;animation:node-wait 1s infinite alternate; }
215
+ @keyframes node-pulse { from{box-shadow:0 0 6px var(--ai-glow)} to{box-shadow:0 0 18px rgba(108,71,255,0.6)} }
216
+ @keyframes node-wait { from{opacity:0.6} to{opacity:1} }
217
+ .af-name { font-size:8px;color:#999;margin-top:4px;text-align:center;line-height:1.2; }
218
+ .af-node.active .af-name { color:var(--ai);font-weight:700; }
219
+ .af-node.done .af-name { color:#22c55e; }
220
+ .af-connect { width:12px;height:2px;background:#e0e0e0;flex-shrink:0;margin-top:-14px; }
221
+ .af-connect.lit { background:linear-gradient(90deg,#22c55e,var(--ai));animation:flow-anim 0.6s linear; }
222
+ @keyframes flow-anim { from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }
223
+ </style>
224
+ </head>
225
+ <body>
226
+
227
+ <!-- KORAIL UI -->
228
+ <div class="kh">
229
+ <div class="kh-top">
230
+ <div class="logo">
231
+ <div class="logo-box">μ½”λ ˆμΌ</div>
232
+ <div class="logo-txt">KORAIL</div>
233
+ </div>
234
+ </div>
235
+ <div class="gnb">
236
+ <div class="gnb-i on">승차ꢌ 예맀</div>
237
+ <div class="gnb-i">κΈ°μ°¨μ—¬ν–‰</div>
238
+ <div class="gnb-i">할인/이벀트</div>
239
+ <div class="gnb-i">κ³ κ°μ„œλΉ„μŠ€</div>
240
+ <div class="gnb-i">μ½”λ ˆμΌλ©€λ²„μ‹­</div>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="wrap">
245
+ <div class="sidebar">
246
+ <div class="sb-title">승차ꢌ 예맀</div>
247
+ <ul class="sb-menu">
248
+ <li class="on">일반 승차ꢌ</li>
249
+ <li>KTX νŠΉμ‹€</li>
250
+ <li>μžμœ μ„ 승차ꢌ</li>
251
+ <li>μ •κΈ°κΆŒ ꡬ맀</li>
252
+ <li>단체 예맀</li>
253
+ <li>μ˜ˆλ§€ν™•μΈ/μ·¨μ†Œ</li>
254
+ </ul>
255
+ </div>
256
+
257
+ <div class="book">
258
+ <div class="ptitle"><h2>πŸš„ 일반 승차ꢌ 예맀</h2></div>
259
+
260
+ <div class="fs">
261
+ <div class="fsh">좜발/도착 정보</div>
262
+ <div class="fsb">
263
+ <div class="fr">
264
+ <div class="fl">ꡬ간 <span class="req">*</span></div>
265
+ <div class="sw">
266
+ <div class="sb" id="dep" data-field="μΆœλ°œμ—­">μΆœλ°œμ—­ 선택</div>
267
+ <div class="swap">⇄</div>
268
+ <div class="sb" id="arr" data-field="도착역">도착역 선택</div>
269
+ </div>
270
+ </div>
271
+ <div class="fr">
272
+ <div class="fl">좜발일 <span class="req">*</span></div>
273
+ <div class="dw">
274
+ <div class="db" id="dep-date" data-field="좜발일">좜발일 선택</div>
275
+ <div class="db" id="dep-time" data-field="μΆœλ°œμ‹œκ°„">μΆœλ°œμ‹œκ°„ 선택</div>
276
+ </div>
277
+ </div>
278
+ <div class="fr">
279
+ <div class="fl">μ‹œκ°„λŒ€</div>
280
+ <div class="chips" id="time-chips">
281
+ <div class="chip" data-val="전체">전체</div>
282
+ <div class="chip" data-val="00~06μ‹œ">00~06μ‹œ</div>
283
+ <div class="chip" data-val="06~09μ‹œ">06~09μ‹œ</div>
284
+ <div class="chip" data-val="09~12μ‹œ">09~12μ‹œ</div>
285
+ <div class="chip" data-val="12~15μ‹œ">12~15μ‹œ</div>
286
+ <div class="chip" data-val="15~18μ‹œ">15~18μ‹œ</div>
287
+ <div class="chip" data-val="18μ‹œμ΄ν›„">18μ‹œμ΄ν›„</div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="fs">
294
+ <div class="fsh">μ—΄μ°¨ μ’…λ₯˜ 및 μ’Œμ„</div>
295
+ <div class="fsb">
296
+ <div class="fr">
297
+ <div class="fl">μ—΄μ°¨ μ’…λ₯˜</div>
298
+ <div class="chips" id="train-chips">
299
+ <div class="chip" data-val="KTX">KTX</div>
300
+ <div class="chip" data-val="SRT">SRT</div>
301
+ <div class="chip" data-val="ITX-μƒˆλ§ˆμ„">ITX-μƒˆλ§ˆμ„</div>
302
+ <div class="chip" data-val="λ¬΄κΆν™”ν˜Έ">λ¬΄κΆν™”ν˜Έ</div>
303
+ </div>
304
+ </div>
305
+ <div class="fr">
306
+ <div class="fl">μ’Œμ„ λ“±κΈ‰</div>
307
+ <div class="chips" id="grade-chips">
308
+ <div class="chip" data-val="νŠΉμ‹€">νŠΉμ‹€</div>
309
+ <div class="chip" data-val="μΌλ°˜μ‹€">μΌλ°˜μ‹€</div>
310
+ <div class="chip" data-val="전체">전체</div>
311
+ </div>
312
+ </div>
313
+ <div class="fr">
314
+ <div class="fl">μ’Œμ„ μœ„μΉ˜</div>
315
+ <div class="chips" id="pos-chips">
316
+ <div class="chip" data-val="μ°½μΈ‘">μ°½μΈ‘</div>
317
+ <div class="chip" data-val="λ‚΄μΈ‘">λ‚΄μΈ‘</div>
318
+ <div class="chip" data-val="μƒκ΄€μ—†μŒ">μƒκ΄€μ—†μŒ</div>
319
+ </div>
320
+ </div>
321
+ <div class="fr">
322
+ <div class="fl">진행방ν–₯</div>
323
+ <div class="chips" id="dir-chips">
324
+ <div class="chip" data-val="순방ν–₯">순방ν–₯</div>
325
+ <div class="chip" data-val="μ—­λ°©ν–₯">μ—­λ°©ν–₯</div>
326
+ <div class="chip" data-val="μƒκ΄€μ—†μŒ">μƒκ΄€μ—†μŒ</div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="fs">
333
+ <div class="fsh">인원 및 할인 정보</div>
334
+ <div class="fsb">
335
+ <div class="fr">
336
+ <div class="fl">인원 <span class="req">*</span></div>
337
+ <div class="pw">
338
+ <span style="font-size:12px;color:#888">성인</span>
339
+ <div class="cb" onclick="changeCount('adult',-1)">βˆ’</div>
340
+ <div class="cn" id="adult">1</div>
341
+ <div class="cb" onclick="changeCount('adult',1)">+</div>
342
+ <span style="font-size:12px;color:#888;margin-left:10px">어린이</span>
343
+ <div class="cb" onclick="changeCount('child',-1)">βˆ’</div>
344
+ <div class="cn" id="child">0</div>
345
+ <div class="cb" onclick="changeCount('child',1)">+</div>
346
+ </div>
347
+ </div>
348
+ <div class="fr">
349
+ <div class="fl">할인 μ’…λ₯˜</div>
350
+ <div class="chips" id="disc-chips">
351
+ <div class="chip" data-val="μ½”λ ˆμΌλ©€λ²„μ‹­">μ½”λ ˆμΌλ©€λ²„μ‹­</div>
352
+ <div class="chip" data-val="μ‹ ν•œμΉ΄λ“œ">μ‹ ν•œμΉ΄λ“œ</div>
353
+ <div class="chip" data-val="KBμΉ΄λ“œ">KBμΉ΄λ“œ</div>
354
+ <div class="chip" data-val="λ‘―λ°μΉ΄λ“œ">λ‘―λ°μΉ΄λ“œ</div>
355
+ <div class="chip" data-val="μ²­μ†Œλ…„λ“œλ¦Ό">μ²­μ†Œλ…„λ“œλ¦Ό</div>
356
+ <div class="chip" data-val="λ‹€μžλ…€">λ‹€μžλ…€</div>
357
+ </div>
358
+ </div>
359
+ <div class="fr">
360
+ <div class="fl">λŒ€μ•ˆ λ…Έμ„ </div>
361
+ <div class="chips" id="alt-chips">
362
+ <div class="chip" data-val="SRT λ™μ‹œκ²€μƒ‰">SRT λ™μ‹œκ²€μƒ‰</div>
363
+ <div class="chip" data-val="경유 포함">경유 포함</div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <div class="fs">
370
+ <div class="search-btn-wrap">
371
+ <button class="search-btn" id="search-btn">μ—΄μ°¨ 쑰회</button>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- β‘  μΉ΄μš΄νŠΈλ‹€μš΄ -->
378
+ <div id="countdown-wrap">
379
+ <div class="cd-label">πŸ€– MARL 자율 μ—μ΄μ „νŠΈ 가동</div>
380
+ <div class="cd-num" id="cd-num">3</div>
381
+ <div class="cd-sub">μ—μ΄μ „νŠΈ ν˜‘λ ₯ μ‹œμŠ€ν…œ μ΄ˆκΈ°ν™” 쀑...</div>
382
+ </div>
383
+
384
+ <!-- TOGGLE BUTTON -->
385
+ <button id="ai-toggle" onclick="startCountdown()">
386
+ <div class="dot"></div>πŸ€– AI μžλ™μ˜ˆλ§€
387
+ </button>
388
+ <button class="restart" onclick="location.reload()">β†Ί μ΄ˆκΈ°ν™”</button>
389
+
390
+ <!-- AI AGENT PANEL -->
391
+ <div id="ai-panel">
392
+ <div class="ap-header">
393
+ <div class="ap-icon">πŸ€–</div>
394
+ <div>
395
+ <div class="ap-title">MARL미듀웨어 X 봇: 자율 지λŠ₯ μˆ˜ν–‰</div>
396
+ <div class="ap-sub">자율 뢄석 β†’ μžλ™ μž…λ ₯ μ‹€ν–‰</div>
397
+ </div>
398
+ <div class="ap-badge" id="ap-status">λŒ€κΈ°μ€‘</div>
399
+ </div>
400
+ <div class="vidraft-tag" id="vidraft-tag">⚑ 개발: VIDRAFT.net</div>
401
+
402
+ <!-- β‘£ λ©€ν‹°μ—μ΄μ „νŠΈ ν˜‘λ ₯ μ‹œκ°ν™” -->
403
+ <div class="agent-flow" id="agent-flow">
404
+ <div class="af-label">βš™ 자율 μ—μ΄μ „νŠΈ ν˜‘λ ₯ ν˜„ν™©</div>
405
+ <div class="af-nodes">
406
+ <div class="af-node" id="af-observer">
407
+ <div class="af-dot" id="dot-observer">πŸ‘</div>
408
+ <div class="af-name">κ΄€μ°°μž<br>Observer</div>
409
+ </div>
410
+ <div class="af-node" id="af-planner">
411
+ <div class="af-dot" id="dot-planner">🧠</div>
412
+ <div class="af-name">κ³„νšμž<br>Planner</div>
413
+ </div>
414
+ <div class="af-node" id="af-orchestrator">
415
+ <div class="af-dot" id="dot-orchestrator">🎯</div>
416
+ <div class="af-name">쑰율자<br>Orch.</div>
417
+ </div>
418
+ <div class="af-node" id="af-executor">
419
+ <div class="af-dot" id="dot-executor">⚑</div>
420
+ <div class="af-name">μ‹€ν–‰μž<br>Executor</div>
421
+ </div>
422
+ <div class="af-node" id="af-validator">
423
+ <div class="af-dot" id="dot-validator">βœ…</div>
424
+ <div class="af-name">κ²€μ¦μž<br>Validator</div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="ap-presets">
430
+ <div class="preset-label">⚑ λΉ λ₯Έ λͺ…λ Ή μ˜ˆμ‹œ</div>
431
+ <div class="preset-btns">
432
+ <button class="preset-btn" onclick="setCmd('좔석 9μ›”12일 μ„œμšΈβ†’λΆ€μ‚°, μ˜€μ „ 6~9μ‹œ, KTX, μ°½μΈ‘, 순방ν–₯, μ‹ ν•œμΉ΄λ“œ, 성인2λͺ…, SRT도 같이 봐쀘')">좔석 λΆ€μ‚°ν–‰</button>
433
+ <button class="preset-btn" onclick="setCmd('μ„€ 1μ›”28일 μ„œμšΈβ†’κ΄‘μ£Ό, μ˜€ν›„ 3~6μ‹œ, KTX, μΌλ°˜μ‹€, KBμΉ΄λ“œ, 성인1λͺ… 어린이1λͺ…')">μ„€ κ΄‘μ£Όν–‰</button>
434
+ <button class="preset-btn" onclick="setCmd('3μ›”15일 μ„œμšΈβ†’κ°•λ¦‰, KTX, μ°½μΈ‘ 순방ν–₯, 아무 μ‹œκ°„λŒ€, μ½”λ ˆμΌλ©€λ²„μ‹­')">강릉 μ—¬ν–‰</button>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="ap-input-area">
439
+ <div class="ap-input-label">πŸŽ™οΈ μžμ—°μ–΄λ‘œ 예맀 쑰건을 λ§ν•˜μ„Έμš”</div>
440
+ <div class="ap-input-wrap">
441
+ <textarea id="user-command" placeholder="예) 좔석 9μ›”12일 μ„œμšΈβ†’λΆ€μ‚°, μ˜€μ „ 6~9μ‹œ, KTX, μ°½μΈ‘, μ‹ ν•œμΉ΄λ“œ 할인, 성인 2λͺ…"></textarea>
442
+ <button class="run-btn" id="run-btn" onclick="runAgent()">β–Ά</button>
443
+ </div>
444
+ </div>
445
+
446
+ <div id="ap-thinking">
447
+ <div class="think-label">🧠 자율 지λŠ₯ 뢄석쀑</div>
448
+ <div class="think-text" id="think-text">MARL봇이 νŽ˜μ΄μ§€ ꡬ쑰λ₯Ό νŒŒμ•…ν•˜κ³  μ•‘μ…˜ κ³„νšμ„ μˆ˜λ¦½ν•˜λŠ” 쀑...</div>
449
+ </div>
450
+
451
+ <div id="ap-log"></div>
452
+
453
+ <div class="ap-progress">
454
+ <div class="pb-bg"><div class="pb-fill" id="pb-fill"></div></div>
455
+ <div class="pb-label">
456
+ <span id="pb-label">λͺ…령을 μž…λ ₯ν•˜κ³  β–Ά λ₯Ό λˆ„λ₯΄μ„Έμš”</span>
457
+ <span id="pb-pct">0%</span>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <!-- SUCCESS -->
463
+ <div id="success">
464
+ <div class="sc">
465
+ <div class="sc-bar"></div>
466
+ <span class="sc-emoji">πŸŽ‰</span>
467
+ <div class="sc-title">예맀 μ™„λ£Œ!</div>
468
+ <div class="sc-sub">MARL 자율 μ—μ΄μ „νŠΈκ°€ <strong id="elapsed-time">?</strong>초 λ§Œμ—<br>μ’ŒοΏ½οΏ½οΏ½μ„ μžλ™μœΌλ‘œ μ„ μ ν–ˆμŠ΅λ‹ˆλ‹€</div>
469
+ <!-- β‘’ μž„νŒ©νŠΈ μΉ΄λ“œ -->
470
+ <div class="impact-card">
471
+ <div class="impact-item">
472
+ <div class="impact-val red" id="manual-time">8λΆ„</div>
473
+ <div class="impact-lbl">μˆ˜λ™ 예맀</div>
474
+ </div>
475
+ <div class="impact-item">
476
+ <div class="impact-val green" id="ai-time">?초</div>
477
+ <div class="impact-lbl">AI 처리</div>
478
+ </div>
479
+ <div class="impact-item">
480
+ <div class="impact-val" id="speed-mult">?λ°°</div>
481
+ <div class="impact-lbl">속도 ν–₯상</div>
482
+ </div>
483
+ </div>
484
+ <div class="sc-ticket" id="ticket-content"></div>
485
+ <button class="sc-close" onclick="document.getElementById('success').classList.remove('show')">확인</button>
486
+ </div>
487
+ </div>
488
+
489
+ <script>
490
+ // ===== STATE =====
491
+ let panelOpen = false;
492
+ let startTime = 0;
493
+
494
+ // ===== β‘  μΉ΄μš΄νŠΈλ‹€μš΄ =====
495
+ function startCountdown() {
496
+ if (panelOpen) { togglePanel(); return; }
497
+ const wrap = document.getElementById('countdown-wrap');
498
+ const numEl = document.getElementById('cd-num');
499
+ wrap.classList.add('show');
500
+ let n = 3;
501
+ numEl.textContent = n;
502
+ const iv = setInterval(() => {
503
+ numEl.classList.add('flash');
504
+ setTimeout(() => numEl.classList.remove('flash'), 150);
505
+ n--;
506
+ if (n <= 0) {
507
+ clearInterval(iv);
508
+ wrap.classList.remove('show');
509
+ togglePanel();
510
+ } else {
511
+ numEl.textContent = n;
512
+ }
513
+ }, 800);
514
+ }
515
+
516
+ // ===== TOGGLE =====
517
+ function togglePanel() {
518
+ const panel = document.getElementById('ai-panel');
519
+ panelOpen = !panelOpen;
520
+ if (panelOpen) {
521
+ panel.style.display = 'block';
522
+ setTimeout(() => panel.classList.add('show'), 30);
523
+ } else {
524
+ panel.classList.remove('show');
525
+ setTimeout(() => panel.style.display = 'none', 400);
526
+ }
527
+ }
528
+
529
+ function setCmd(txt) { document.getElementById('user-command').value = txt; }
530
+
531
+ function changeCount(type, delta) {
532
+ const el = document.getElementById(type);
533
+ let val = parseInt(el.textContent) + delta;
534
+ if (val < 0) val = 0;
535
+ el.textContent = val;
536
+ }
537
+
538
+ // ===== DOM SNAPSHOT =====
539
+ function getPageSnapshot() {
540
+ const fields = {};
541
+ document.querySelectorAll('[data-field]').forEach(el => {
542
+ fields[el.dataset.field] = el.textContent.trim();
543
+ });
544
+ const chips = {};
545
+ document.querySelectorAll('[id$="-chips"]').forEach(group => {
546
+ const name = group.id.replace('-chips','');
547
+ chips[name] = Array.from(group.querySelectorAll('.chip')).map(c => ({
548
+ value: c.dataset.val,
549
+ selected: c.classList.contains('sel')
550
+ }));
551
+ });
552
+ return { fields, chips,
553
+ counts: { adult: parseInt(document.getElementById('adult').textContent),
554
+ child: parseInt(document.getElementById('child').textContent) }
555
+ };
556
+ }
557
+
558
+ // ===== GROQ API =====
559
+ const GROQ_API_KEY = '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';
560
+
561
+ async function callClaude(command, snapshot) {
562
+ const systemPrompt = `당신은 μ›ΉνŽ˜μ΄μ§€ DOM을 λΆ„ζžν•˜μ—¬ μ‚¬μš©μžμ˜ μžμ—°μ–΄ λͺ…령에 따라 폼 ν•„λ“œλ₯Ό μžλ™μœΌλ‘œ μ±„μ›Œμ£ΌλŠ” AI μ—μ΄μ „νŠΈμž…λ‹ˆλ‹€.
563
+
564
+ νŽ˜μ΄μ§€ ꡬ쑰:
565
+ - fields: ν…μŠ€νŠΈ μž…λ ₯ ν•„λ“œλ“€ (μΆœλ°œμ—­, 도착역, 좜발일, μΆœλ°œμ‹œκ°„)
566
+ - chips: 선택 λ²„νŠΌ κ·Έλ£Ή (time=μ‹œκ°„λŒ€, train=μ—΄μ°¨μ’…λ₯˜, grade=μ’Œμ„λ“±κΈ‰, pos=μ’Œμ„μœ„μΉ˜, dir=진행방ν–₯, disc=할인쒅λ₯˜, alt=λŒ€μ•ˆλ…Έμ„ )
567
+ - counts: 성인/어린이 수
568
+
569
+ ν˜„μž¬ νŽ˜μ΄μ§€ μƒνƒœ: ${JSON.stringify(snapshot, null, 2)}
570
+
571
+ μ‚¬μš©μž λͺ…령을 λΆ„ζžν•˜μ—¬ λ‹€μŒ JSON ν˜•μ‹μœΌλ‘œλ§Œ μ‘λ‹΅ν•˜μ„Έμš”. λ‹€λ₯Έ ν…μŠ€νŠΈ 없이 JSON만 좜λ ₯:
572
+
573
+ {
574
+ "thinking": "λͺ…λ Ή λΆ„ζž 및 μ‹€ν–‰ κ³„νš (ν•œκ΅­μ–΄, 2-3λ¬Έμž₯)",
575
+ "actions": [
576
+ {"type": "fill", "field": "μΆœλ°œμ—­", "value": "μ„œμšΈ", "emoji": "πŸ”", "desc": "μΆœλ°œμ—­μ„ μ„œμšΈλ‘œ μ„€μ •"},
577
+ {"type": "fill", "field": "도착역", "value": "λΆ€μ‚°", "emoji": "πŸ”", "desc": "도착역을 λΆ€μ‚°μœΌλ‘œ μ„€μ •"},
578
+ {"type": "fill", "field": "좜발일", "value": "2025λ…„ 09μ›” 12일 (금)", "emoji": "πŸ“…", "desc": "좜발일 μ„€μ •"},
579
+ {"type": "chip", "group": "time", "value": "06~09μ‹œ", "emoji": "⏰", "desc": "μ˜€μ „ 6~9μ‹œ 선택"},
580
+ {"type": "chip", "group": "train", "value": "KTX", "emoji": "πŸš„", "desc": "KTX 선택"},
581
+ {"type": "count", "field": "adult", "value": 2, "emoji": "πŸ‘₯", "desc": "성인 2λͺ… μ„€μ •"}
582
+ ],
583
+ "result": {
584
+ "route": "μ„œμšΈ β†’ λΆ€μ‚°",
585
+ "date": "2025.09.12 (금)",
586
+ "time": "07:15 β†’ 09:45",
587
+ "train": "KTX 121",
588
+ "seat": "5호차 12A (창츑·순방ν–₯)",
589
+ "passengers": "성인 2λͺ…",
590
+ "discount": "μ‹ ν•œμΉ΄λ“œ 10% 적용",
591
+ "price": "117,800원"
592
+ }
593
+ }
594
+
595
+ chip group 이름: time(μ‹œκ°„λŒ€), train(μ—΄μ°¨μ’…λ₯˜), grade(μ’Œμ„λ“±κΈ‰), pos(μ’Œμ„μœ„μΉ˜), dir(진행방ν–₯), disc(할인쒅λ₯˜), alt(λŒ€μ•ˆλ…Έμ„ )
596
+ chip valueλŠ” λ°˜λ“œμ‹œ νŽ˜μ΄μ§€μ— μžˆλŠ” κ°’κ³Ό μ •ν™•νžˆ μΌμΉ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.`;
597
+
598
+ const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
599
+ method: 'POST',
600
+ headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${GROQ_API_KEY}` },
601
+ body: JSON.stringify({
602
+ model: 'openai/gpt-oss-120b',
603
+ messages: [
604
+ { role: 'system', content: systemPrompt },
605
+ { role: 'user', content: command }
606
+ ],
607
+ temperature: 1, max_tokens: 8192, top_p: 1, stream: false, stop: null
608
+ })
609
+ });
610
+ if (!response.ok) { const err = await response.text(); throw new Error(`Groq ${response.status}: ${err}`); }
611
+ const data = await response.json();
612
+ const raw = data.choices[0].message.content.trim();
613
+ return JSON.parse(raw.replace(/```json|```/g, '').trim());
614
+ }
615
+
616
+ // ===== β‘£ λ©€ν‹°μ—μ΄μ „νŠΈ μ‹œκ°ν™” =====
617
+ const AGENT_NODES = ['observer','planner','orchestrator','executor','validator'];
618
+
619
+ function resetAgentFlow() {
620
+ AGENT_NODES.forEach(n => {
621
+ const dot = document.getElementById('dot-'+n);
622
+ const node = document.getElementById('af-'+n);
623
+ dot.classList.remove('active','done','waiting');
624
+ node.classList.remove('active','done');
625
+ });
626
+ }
627
+
628
+ function activateAgent(index) {
629
+ AGENT_NODES.forEach((n, i) => {
630
+ const dot = document.getElementById('dot-'+n);
631
+ const node = document.getElementById('af-'+n);
632
+ dot.classList.remove('active','done','waiting');
633
+ node.classList.remove('active','done');
634
+ if (i < index) { dot.classList.add('done'); node.classList.add('done'); }
635
+ else if (i === index) { dot.classList.add('active'); node.classList.add('active'); }
636
+ });
637
+ }
638
+
639
+ function completeAllAgents() {
640
+ AGENT_NODES.forEach(n => {
641
+ document.getElementById('dot-'+n).classList.remove('active','waiting');
642
+ document.getElementById('dot-'+n).classList.add('done');
643
+ document.getElementById('af-'+n).classList.add('done');
644
+ });
645
+ }
646
+
647
+ // ===== β‘‘ 타이핑 μ΄νŽ™νŠΈ =====
648
+ async function typeInto(el, text, speed = 55) {
649
+ el.textContent = '';
650
+ const cursor = document.createElement('span');
651
+ cursor.className = 'typing-cursor';
652
+ el.appendChild(cursor);
653
+ for (const ch of text) {
654
+ cursor.before(ch);
655
+ await sleep(speed + Math.random() * 30);
656
+ }
657
+ cursor.remove();
658
+ }
659
+
660
+ // ===== EXECUTE ACTIONS =====
661
+ async function executeAction(action, actionIndex, total) {
662
+ // μ—μ΄μ „νŠΈ 단계 맀핑
663
+ const agentPhase = Math.floor((actionIndex / total) * 3) + 1; // planner~executor
664
+ activateAgent(Math.min(agentPhase, 3));
665
+ await sleep(350);
666
+
667
+ if (action.type === 'fill') {
668
+ const el = document.querySelector(`[data-field="${action.field}"]`);
669
+ if (!el) return;
670
+ el.classList.add('ai-on');
671
+ await sleep(200);
672
+ // β‘‘ 타이핑 μ΄νŽ™νŠΈ
673
+ await typeInto(el, action.value, 45);
674
+ el.classList.remove('ai-on');
675
+ el.classList.add('filled');
676
+ }
677
+ else if (action.type === 'chip') {
678
+ const group = document.getElementById(action.group + '-chips');
679
+ if (!group) return;
680
+ const chip = Array.from(group.querySelectorAll('.chip')).find(c => c.dataset.val === action.value);
681
+ if (!chip) return;
682
+ chip.classList.add('ai-flash');
683
+ await sleep(300);
684
+ group.querySelectorAll('.chip').forEach(c => c.classList.remove('sel','sel-red','sel-green','sel-orange'));
685
+ chip.classList.add('sel');
686
+ }
687
+ else if (action.type === 'count') {
688
+ const el = document.getElementById(action.field);
689
+ if (!el) return;
690
+ el.classList.add('ai-up');
691
+ await sleep(300);
692
+ el.textContent = action.value;
693
+ el.classList.remove('ai-up');
694
+ }
695
+ }
696
+
697
+ // ===== MAIN RUN =====
698
+ async function runAgent() {
699
+ const command = document.getElementById('user-command').value.trim();
700
+ if (!command) return;
701
+
702
+ const runBtn = document.getElementById('run-btn');
703
+ runBtn.disabled = true;
704
+ startTime = Date.now();
705
+
706
+ // μ΄ˆκΈ°ν™”
707
+ document.getElementById('ap-log').innerHTML = '';
708
+ document.getElementById('ap-log').style.display = 'none';
709
+ document.getElementById('pb-fill').style.width = '0%';
710
+ setStatus('λΆ„ζžμ€‘', '#f59e0b');
711
+ document.getElementById('vidraft-tag').classList.add('show');
712
+
713
+ // β‘£ μ—μ΄μ „νŠΈ ν”Œλ‘œμš° ν‘œμ‹œ + Observer ν™œμ„±ν™”
714
+ const flowEl = document.getElementById('agent-flow');
715
+ flowEl.classList.add('show');
716
+ resetAgentFlow();
717
+ activateAgent(0); // Observer
718
+
719
+ // Thinking
720
+ const thinkDiv = document.getElementById('ap-thinking');
721
+ const thinkText = document.getElementById('think-text');
722
+ thinkDiv.style.display = 'block';
723
+ thinkText.textContent = 'MARL봇이 νŽ˜μ΄μ§€ ꡬ쑰λ₯Ό νŒŒμ•…ν•˜κ³  μ•‘μ…˜ κ³„νšμ„ μˆ˜λ¦½ν•˜λŠ” 쀑...';
724
+ setProgress(10, '자율 지λŠ₯ λΆ„ζžμ€‘...');
725
+
726
+ let plan;
727
+ try {
728
+ activateAgent(1); // Planner
729
+ const snapshot = getPageSnapshot();
730
+ plan = await callClaude(command, snapshot);
731
+ activateAgent(2); // Orchestrator
732
+ } catch(e) {
733
+ thinkText.textContent = '❌ API 였λ₯˜: ' + e.message;
734
+ runBtn.disabled = false;
735
+ setStatus('였λ₯˜', '#ef4444');
736
+ return;
737
+ }
738
+
739
+ thinkText.textContent = plan.thinking;
740
+ setProgress(20, 'μ•‘μ…˜ μ‹€ν–‰ μ€€λΉ„...');
741
+ await sleep(500);
742
+
743
+ thinkDiv.style.display = 'none';
744
+ const logDiv = document.getElementById('ap-log');
745
+ logDiv.style.display = 'block';
746
+ setStatus('싀행쀑', '#6c47ff');
747
+ activateAgent(3); // Executor
748
+
749
+ for (let i = 0; i < plan.actions.length; i++) {
750
+ const action = plan.actions[i];
751
+ const pct = Math.round(20 + ((i+1)/plan.actions.length)*70);
752
+ setProgress(pct, action.desc);
753
+
754
+ const item = document.createElement('div');
755
+ item.className = 'log-item';
756
+ item.innerHTML = `<span>${action.emoji}</span><span>${action.desc}</span>`;
757
+ logDiv.appendChild(item);
758
+ logDiv.scrollTop = logDiv.scrollHeight;
759
+ setTimeout(() => item.classList.add('vis'), 50);
760
+
761
+ await executeAction(action, i, plan.actions.length);
762
+ }
763
+
764
+ activateAgent(4); // Validator
765
+ await sleep(400);
766
+ completeAllAgents();
767
+
768
+ document.getElementById('search-btn').classList.add('ai-ready');
769
+ setProgress(100, 'βœ… μ™„λ£Œ!');
770
+ setStatus('μ™„λ£Œ', '#22c55e');
771
+
772
+ await sleep(500);
773
+ const elapsed = ((Date.now() - startTime)/1000).toFixed(1);
774
+ showSuccess(plan.result, elapsed);
775
+ runBtn.disabled = false;
776
+ }
777
+
778
+ // ===== β‘’ μž„νŒ©νŠΈ μΉ΄λ“œ 포함 SUCCESS =====
779
+ function showSuccess(result, elapsed) {
780
+ document.getElementById('elapsed-time').textContent = elapsed;
781
+ const manualSec = 8 * 60;
782
+ const mult = Math.round(manualSec / elapsed);
783
+ document.getElementById('ai-time').textContent = elapsed + '초';
784
+ document.getElementById('speed-mult').textContent = mult + 'λ°°';
785
+
786
+ const t = document.getElementById('ticket-content');
787
+ t.innerHTML = `
788
+ <div class="t-route">${result.route}</div>
789
+ <div class="tr"><span class="tk">λ‚ μ§œ</span><span class="tv">${result.date}</span></div>
790
+ <div class="tr"><span class="tk">μ‹œκ°„</span><span class="tv">${result.time}</span></div>
791
+ <div class="tr"><span class="tk">μ—΄μ°¨</span><span class="tv">${result.train}</span></div>
792
+ <div class="tr"><span class="tk">μ’Œμ„</span><span class="tv">${result.seat}</span></div>
793
+ <div class="tr"><span class="tk">인원</span><span class="tv">${result.passengers}</span></div>
794
+ <div class="tr"><span class="tk">할인</span><span class="tv">${result.discount}</span></div>
795
+ <div class="tr"><span class="tk">κ²°μ œκΈˆμ•‘</span><span class="tv" style="color:var(--red)">${result.price}</span></div>
796
+ `;
797
+ document.getElementById('success').classList.add('show');
798
+ }
799
+
800
+ function setStatus(text, color) {
801
+ const el = document.getElementById('ap-status');
802
+ el.textContent = text;
803
+ el.style.background = color || 'rgba(255,255,255,0.2)';
804
+ }
805
+
806
+ function setProgress(pct, label) {
807
+ document.getElementById('pb-fill').style.width = pct + '%';
808
+ document.getElementById('pb-pct').textContent = pct + '%';
809
+ document.getElementById('pb-label').textContent = label;
810
+ }
811
+
812
+ function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
813
+ </script>
814
+
815
+ </body>
816
  </html>