Spaces:
Sleeping
Sleeping
File size: 65,535 Bytes
288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 4f24d70 288c0eb 4f24d70 0f678dd 4f24d70 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 4f24d70 0f678dd 4f24d70 0f678dd 4f24d70 0f678dd 4f24d70 0f678dd 4f24d70 0f678dd 4f24d70 0f678dd 4f24d70 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 937d9ca 288c0eb 937d9ca 288c0eb 4f24d70 288c0eb 0f678dd 288c0eb 937d9ca 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 0f678dd 288c0eb 76ba145 | 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 | <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StealthMark — 콘텐츠 보호 플랫폼</title>
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css" rel="stylesheet">
<style>
:root{--mint:#00b894;--purple:#7c3aed;--red:#e53e3e;--orange:#dd6b20;--yellow:#d69e2e;--blue:#3182ce;--pink:#d53f8c;--bg:#f4f7ff;--card:#ffffff;--card2:#f0f4ff;--border:#e2e8f0;--text-main:#1e293b;--text-sub:#475569;--text-muted:#94a3b8;--shadow:0 2px 12px rgba(99,102,241,.06),0 1px 3px rgba(15,23,42,.08);}
*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text-main);font-family:'Pretendard',-apple-system,sans-serif;line-height:1.5;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 45% at 15% 8%,rgba(0,184,148,.04),transparent 55%),radial-gradient(ellipse 55% 35% at 85% 92%,rgba(124,58,237,.03),transparent 50%);}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#c7d2e0;border-radius:3px}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 15px rgba(127,255,219,.2)}50%{box-shadow:0 0 35px rgba(127,255,219,.3)}}
@keyframes sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes barFill{from{width:0}}@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes blipPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.8);opacity:.3}}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}
.fi{animation:fadeIn .6s ease both}.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 1px 12px rgba(99,102,241,.06)}
.ni{max-width:1200px;margin:0 auto;display:flex;align-items:center;height:56px;padding:0 24px}
.logo{display:flex;align-items:center;gap:10px;margin-right:40px}
.li{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--mint),var(--purple));display:flex;align-items:center;justify-content:center;font-size:14px}
.tb{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;background:transparent;color:var(--text-muted);transition:all .2s;font-family:inherit}
.tb:hover{color:var(--text-main);background:rgba(0,184,148,.06)}.tb.a{background:rgba(0,184,148,.1);color:var(--mint);font-weight:700}
main{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}section{display:none}section.a{display:block}
.cd{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .3s;box-shadow:var(--shadow)}
.mc{width:150px;padding:28px 18px;border-radius:16px;background:linear-gradient(135deg,var(--card),var(--card2));text-align:center;animation:pulse 3s ease infinite;box-shadow:var(--shadow)}
.sr{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sl{color:var(--text-muted);font-size:11px;width:80px;text-align:right}.st{flex:1;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}
.sf{height:100%;border-radius:4px;animation:barFill 1.2s cubic-bezier(.4,0,.2,1) both}.sn{font-size:12px;font-weight:700;width:32px;text-align:right}
.lh{display:grid;grid-template-columns:40px 1fr 56px repeat(6,48px) 52px;padding:12px 16px;background:linear-gradient(90deg,#f0f4ff,#eef2ff);border-bottom:1px solid var(--border);gap:4px}
.lh span{color:var(--text-sub);font-size:10px;font-weight:700}
.lr{display:grid;grid-template-columns:40px 1fr 56px repeat(6,48px) 52px;padding:12px 16px;gap:4px;align-items:center;cursor:pointer;border-bottom:1px solid rgba(226,232,240,.8);border-left:3px solid transparent;transition:all .2s}
.lr:hover{background:rgba(0,184,148,.04)}.lr.sel{background:rgba(0,184,148,.06);border-left-color:var(--mint)}
.ag{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ac{padding:20px;border-radius:16px;cursor:pointer;transition:all .3s;background:var(--card);box-shadow:var(--shadow)}.ac:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(99,102,241,.1)}
.at{padding:2px 8px;border-radius:6px;background:#f0f4ff;color:var(--text-sub);font-size:10px;font-weight:600;display:inline-block;margin:2px;border:1px solid #e2e8f0}
.svr{display:flex;gap:12px;padding-top:10px;border-top:1px solid #e2e8f0}
.svi{text-align:center;flex:1}.svl{font-size:10px;color:var(--text-sub);margin-bottom:2px}.svv{font-size:14px}
.pl{position:absolute;left:24px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--mint),var(--purple),var(--red));border-radius:1px;opacity:.6}
.ps{display:flex;gap:20px;margin-bottom:20px;position:relative}
.pn{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;position:relative;z-index:1}
.rs{position:relative;width:240px;height:240px;margin:0 auto 48px}
.rr{position:absolute;border-radius:50%;border:1px solid}
.rw{position:absolute;top:0;left:0;width:100%;height:100%;animation:sweep 4s linear infinite;opacity:.7}
.ra{position:absolute;top:50%;left:50%;width:50%;height:2px;transform-origin:left center;background:linear-gradient(90deg,var(--mint),transparent);opacity:.7}
.rc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px var(--mint)}
.rb{position:absolute;transform:translate(-50%,-50%)}
.rd{width:8px;height:8px;border-radius:50%;animation:blipPulse 2s ease infinite}
.rl{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;font-weight:700}
.story{color:var(--text-sub);font-size:14px;line-height:1.9}.story strong{color:var(--text-main)}
@media(max-width:768px){.ag{grid-template-columns:1fr}.lh,.lr{grid-template-columns:32px 1fr 44px repeat(6,36px) 44px;font-size:10px}.mc{width:130px}}
footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;color:var(--text-muted);font-size:11px;background:var(--card)}
</style>
</head>
<body>
<nav><div class="ni">
<div class="logo"><div class="li">🔒</div><div style="font-weight:800;font-size:16px;letter-spacing:-.5px"><span style="color:var(--mint)">Stealth</span><span style="color:var(--text-main)">Mark</span><span style="color:var(--text-sub);font-size:11px;margin-left:6px">Platform</span></div></div>
<div id="tabs" style="display:flex;gap:4px">
<button class="tb a" data-t="hero">⚡ 홈</button><button class="tb" data-t="lb">🏆 기술 비교</button><button class="tb" data-t="atk">🛡️ 위협 대응</button><button class="tb" data-t="pipe">📡 비즈니스</button>
</div></div></nav>
<main>
<!-- ═══════════════ HERO ═══════════════ -->
<section id="hero" class="a">
<div style="padding:80px 0 40px;text-align:center;position:relative">
<div style="position:absolute;top:20px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,148,.06),rgba(124,58,237,.03) 40%,transparent 70%);pointer-events:none"></div>
<div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:16px">TEXT · IMAGE · VIDEO — FULL SPECTRUM PROTECTION</div>
<h1 style="font-size:clamp(32px,6vw,52px);font-weight:900;line-height:1.15;margin-bottom:20px;letter-spacing:-2px"><span style="color:var(--text-main)">텍스트 · 이미지 · 영상</span><br><span style="background:linear-gradient(135deg,var(--mint),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent">완전한 콘텐츠 보호 플랫폼</span></h1>
<p class="story" style="max-width:720px;margin:0 auto 28px;font-size:17px">
삽입 전 <span style="color:var(--orange);font-weight:700">AI 유사성 판정</span>으로 기존 콘텐츠 즉시 보호<br>
삽입 후 <span style="color:var(--mint);font-weight:700">다계층 워터마크 + 이중축 판정</span>으로 법적 증거 확보<br>
<span style="color:var(--purple);font-weight:700">텍스트 4계층 + 이미지 DCT + 영상 시간축 전파</span> — 세계 유일 풀스펙<br>
<span style="color:var(--red);font-weight:700">AI 기본법 워터마크 의무화</span> — 사전 규제 대응까지 한 번에
</p>
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:48px">
<span style="padding:7px 18px;border-radius:20px;background:rgba(127,255,219,.08);border:1px solid rgba(127,255,219,.2);color:var(--mint);font-size:12px;font-weight:700">📝 텍스트 4계층</span>
<span style="padding:7px 18px;border-radius:20px;background:rgba(244,114,182,.08);border:1px solid rgba(244,114,182,.2);color:var(--pink);font-size:12px;font-weight:700">🖼️ 이미지 DCT</span>
<span style="padding:7px 18px;border-radius:20px;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);color:var(--blue);font-size:12px;font-weight:700">🎬 영상 시간축</span>
<span style="padding:7px 18px;border-radius:20px;background:rgba(255,170,102,.08);border:1px solid rgba(255,170,102,.2);color:var(--orange);font-size:12px;font-weight:700">🛡️ Day 0 즉시 보호</span>
<span style="padding:7px 18px;border-radius:20px;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.25);color:var(--red);font-size:12px;font-weight:700">⚖️ AI 기본법 대응</span>
</div>
<!-- AI 기본법 Alert -->
<div style="max-width:680px;margin:0 auto 28px;padding:14px 22px;border-radius:12px;background:linear-gradient(135deg,rgba(255,107,107,.05),rgba(255,170,102,.03));border:1px solid rgba(255,107,107,.2);backdrop-filter:blur(8px)">
<div style="display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap">
<span style="font-size:11px;padding:4px 10px;border-radius:6px;background:rgba(255,107,107,.12);color:var(--red);font-weight:800;letter-spacing:1px">2026.1.26 시행</span>
<span style="color:var(--text-sub);font-size:13px;font-weight:600">한국 AI 기본법 — 생성 AI 사업자 <span style="color:var(--orange);font-weight:800">워터마크 의무화</span></span>
<span style="color:var(--text-muted);font-size:11px">위반 시 과태료 3,000만 원</span>
</div>
</div>
<div id="metrics" style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px"></div>
</div>
<!-- ★ THREE PILLARS — 3대 축 ★ -->
<div style="padding:40px 0 50px">
<div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--mint);font-weight:700;letter-spacing:3px">THREE PILLARS OF PROTECTION</span></div>
<h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:var(--text-main)">세계 유일 <span style="color:var(--mint)">3대 축</span> 통합 보호</h2>
<p style="text-align:center;color:var(--text-muted);font-size:14px;margin-bottom:36px">모든 형태의 콘텐츠를 하나의 플랫폼에서 보호합니다</p>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto">
<!-- Pillar 1: TEXT -->
<div class="cd fi" style="border-color:rgba(127,255,219,.25);background:linear-gradient(160deg,rgba(127,255,219,.05),var(--card) 40%);position:relative;overflow:hidden">
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.06),transparent);pointer-events:none"></div>
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">📝</div><div style="color:var(--mint);font-weight:800;font-size:18px">텍스트</div><div style="font-size:11px;color:var(--text-muted)">TEXT PROTECTION</div></div>
<div style="padding:14px;border-radius:10px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.1);margin-bottom:14px">
<div class="story" style="font-size:12px;line-height:1.8">
<span style="color:var(--mint)">삽입 전 →</span> Radar™ 7모드 표절 판정<br>
<span style="color:var(--mint)">삽입 후 →</span> 4계층 스텔스 워터마크<br>
<span style="color:var(--mint)">검증 →</span> DualAxis™ 이중축 판정
</div></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
<div style="padding:10px;border-radius:8px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">4</div><div style="font-size:9px;color:var(--text-muted)">방어 계층</div></div>
<div style="padding:10px;border-radius:8px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">34</div><div style="font-size:9px;color:var(--text-muted)">공격 대응</div></div>
</div>
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(127,255,219,.06);color:var(--mint);font-size:10px;font-weight:700">✅ 운용 중</span></div>
</div>
<!-- Pillar 2: IMAGE -->
<div class="cd fi d1" style="border-color:rgba(244,114,182,.25);background:linear-gradient(160deg,rgba(244,114,182,.05),var(--card) 40%);position:relative;overflow:hidden">
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.06),transparent);pointer-events:none"></div>
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🖼️</div><div style="color:var(--pink);font-weight:800;font-size:18px">이미지</div><div style="font-size:11px;color:var(--text-muted)">IMAGE PROTECTION</div></div>
<div style="padding:14px;border-radius:10px;background:rgba(244,114,182,.03);border:1px solid rgba(244,114,182,.1);margin-bottom:14px">
<div class="story" style="font-size:12px;line-height:1.8">
<span style="color:var(--pink)">삽입 전 →</span> pHash+SSIM+색상+특징점<br>
<span style="color:var(--pink)">삽입 후 →</span> DCT 주파수 영역 워터마크<br>
<span style="color:var(--pink)">검증 →</span> 워터마크 추출 & 유사성 대조
</div></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
<div style="padding:10px;border-radius:8px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">5</div><div style="font-size:9px;color:var(--text-muted)">분석 모드</div></div>
<div style="padding:10px;border-radius:8px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">38+</div><div style="font-size:9px;color:var(--text-muted)">dB PSNR</div></div>
</div>
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(244,114,182,.06);color:var(--pink);font-size:10px;font-weight:700">✅ 운용 중</span></div>
</div>
<!-- Pillar 3: VIDEO -->
<div class="cd fi d2" style="border-color:rgba(96,165,250,.25);background:linear-gradient(160deg,rgba(96,165,250,.05),var(--card) 40%);position:relative;overflow:hidden">
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.06),transparent);pointer-events:none"></div>
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🎬</div><div style="color:var(--blue);font-weight:800;font-size:18px">영상</div><div style="font-size:11px;color:var(--text-muted)">VIDEO PROTECTION</div></div>
<div style="padding:14px;border-radius:10px;background:rgba(96,165,250,.03);border:1px solid rgba(96,165,250,.1);margin-bottom:14px">
<div class="story" style="font-size:12px;line-height:1.8">
<span style="color:var(--blue)">삽입 전 →</span> 키프레임 핑거프린트+DTW<br>
<span style="color:var(--blue)">삽입 후 →</span> 시간축 전파 워터마크<br>
<span style="color:var(--blue)">검증 →</span> 코덱 강건성 + 플랫폼 레이더
</div></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
<div style="padding:10px;border-radius:8px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">4</div><div style="font-size:9px;color:var(--text-muted)">분석 모드</div></div>
<div style="padding:10px;border-radius:8px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">DTW</div><div style="font-size:9px;color:var(--text-muted)">시간축 매칭</div></div>
</div>
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(96,165,250,.06);color:var(--blue);font-size:10px;font-weight:700">✅ 운용 중</span></div>
</div>
</div>
<!-- Image Protection Detail -->
<div style="max-width:960px;margin:36px auto 0">
<div class="cd fi d3" style="border-color:rgba(244,114,182,.15);background:linear-gradient(135deg,rgba(244,114,182,.03),rgba(192,132,252,.02))">
<div style="text-align:center;margin-bottom:20px"><div style="color:var(--pink);font-weight:800;font-size:18px">🖼️ 이미지 보호 — 이렇게 작동합니다</div><div style="color:var(--text-muted);font-size:12px;margin-top:4px">AI가 재생성한 이미지도, 편집된 복사본도 — 모두 잡아냅니다</div></div>
<div style="display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:stretch">
<div style="padding:16px;border-radius:12px;background:rgba(255,170,102,.03);border:1px solid rgba(255,170,102,.12)">
<div style="color:var(--orange);font-weight:800;font-size:14px;margin-bottom:10px">📡 삽입 전 보호</div>
<div class="story" style="font-size:12px;line-height:1.8">
<strong>Perceptual Hash</strong> — 크롭·압축에 강건한 지문<br>
<strong>SSIM 구조 분석</strong> — 휘도·대비·구조 3축 비교<br>
<strong>색상 히스토그램</strong> — RGB 분포 교차 검증<br>
<strong>특징점 매칭</strong> — Edge 기반 유사 구조 탐지<br>
<strong>종합 AI 판정</strong> — 가중 다층 유사도 점수
</div></div>
<div style="display:flex;align-items:center;justify-content:center"><div style="color:var(--text-sub);font-size:18px;animation:breathe 2s ease infinite">＋</div></div>
<div style="padding:16px;border-radius:12px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.12)">
<div style="color:var(--mint);font-weight:800;font-size:14px;margin-bottom:10px">🔏 삽입 후 보호</div>
<div class="story" style="font-size:12px;line-height:1.8">
<strong>DCT 주파수 삽입</strong> — 중간 대역에 비가시 인코딩<br>
<strong>PSNR 38+ dB</strong> — 육안 구별 불가 화질<br>
<strong>SSIM 99%+</strong> — 원본과 동일한 시각 품질<br>
<strong>JPEG 강건</strong> — 압축·리사이즈 생존<br>
<strong>증거 패키지</strong> — SHA-256 해시 + 타임스탬프
</div></div>
</div>
</div>
</div>
</div>
<!-- ★ DUAL SHIELD -->
<div style="padding:40px 0 60px">
<div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--orange);font-weight:700;letter-spacing:3px">DUAL SHIELD ARCHITECTURE</span></div>
<h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:var(--text-main)">경쟁사에는 없는 <span style="color:var(--mint)">이중 보호</span> 체계</h2>
<p style="text-align:center;color:var(--text-muted);font-size:14px;margin-bottom:36px">워터마크가 없는 기존 콘텐츠도 AI가 지켜드립니다</p>
<div style="display:grid;grid-template-columns:1fr 50px 1fr;gap:16px;max-width:920px;margin:0 auto;align-items:stretch">
<!-- Shield A -->
<div class="cd fi" style="background:linear-gradient(160deg,rgba(255,170,102,.04),var(--card) 40%);border-color:rgba(255,170,102,.25);position:relative;overflow:hidden">
<div style="position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,102,.06),transparent);pointer-events:none"></div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(255,170,102,.15),rgba(255,170,102,.05));display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(255,170,102,.2)">📡</div>
<div><div style="color:var(--orange);font-weight:800;font-size:17px">StealthMark <span style="letter-spacing:-.3px">Radar</span>™</div>
<div style="color:var(--text-muted);font-size:11px">삽입 전 보호 — 워터마크 없이도 즉시 작동</div></div>
</div>
<div style="padding:16px;border-radius:12px;background:rgba(255,170,102,.03);border:1px solid rgba(255,170,102,.1);margin-bottom:14px">
<div class="story" style="font-size:13px;line-height:1.9">
당신의 기사가 어딘가에 무단으로 복제되었다면?<br>
<strong>Radar™</strong>는 <span style="color:var(--orange)">텍스트 7모드 + 이미지 5모드</span>로 찾아냅니다.<br><br>
<span style="color:var(--orange)">▸</span> <strong>텍스트 어구 지문</strong> — 글의 N-gram을 대조합니다<br>
<span style="color:var(--orange)">▸</span> <strong>이미지 Perceptual Hash</strong> — 편집된 복사본도 탐지<br>
<span style="color:var(--orange)">▸</span> <strong>SSIM 구조 분석</strong> — 이미지 구조 유사도 비교<br>
<span style="color:var(--orange)">▸</span> <strong>AI 재작성/재생성 감별</strong> — AI가 바꾼 것도 알아챕니다
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
<div style="padding:12px;border-radius:10px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">12</div><div style="font-size:10px;color:#94a3b8">분석 모드 (7+5)</div></div>
<div style="padding:12px;border-radius:10px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">Day 0</div><div style="font-size:10px;color:#94a3b8">즉시 보호 시작</div></div>
</div>
<div style="padding:12px 14px;border-radius:10px;background:rgba(127,255,219,.04);border:1px solid rgba(127,255,219,.1)">
<div style="color:var(--mint);font-size:12px;font-weight:700;margin-bottom:4px">💡 이것이 차별점입니다</div>
<div style="color:var(--text-sub);font-size:12px;line-height:1.7">계약 순간부터 고객사의 <strong style="color:var(--text-main)">기존 텍스트와 이미지 아카이브 전체</strong>가 보호 대상이 됩니다. 텍스트 표절도, 이미지 도용도 — 워터마크 삽입을 기다릴 필요 없습니다.</div>
</div>
</div>
<!-- Center -->
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px">
<div style="width:2px;flex:1;background:linear-gradient(180deg,rgba(255,170,102,.3),rgba(127,255,219,.3));border-radius:1px"></div>
<div style="width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(255,170,102,.15),rgba(127,255,219,.15));display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid rgba(255,255,255,.1);animation:pulse 3s ease infinite">🤝</div>
<div style="font-size:10px;color:var(--text-muted);font-weight:700;text-align:center;line-height:1.3">통합<br>보호</div>
<div style="width:2px;flex:1;background:linear-gradient(180deg,rgba(127,255,219,.3),rgba(192,132,252,.3));border-radius:1px"></div>
</div>
<!-- Shield B -->
<div class="cd fi d2" style="background:linear-gradient(160deg,rgba(127,255,219,.04),var(--card) 40%);border-color:rgba(127,255,219,.25);position:relative;overflow:hidden">
<div style="position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.06),transparent);pointer-events:none"></div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(127,255,219,.15),rgba(127,255,219,.05));display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(127,255,219,.2)">🔏</div>
<div><div style="color:var(--mint);font-weight:800;font-size:17px">StealthMark <span style="letter-spacing:-.3px">Shield</span>™</div>
<div style="color:var(--text-muted);font-size:11px">삽입 후 보호 — 4중 특허 방어 기술</div></div>
</div>
<div style="padding:16px;border-radius:12px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.1);margin-bottom:14px">
<div class="story" style="font-size:13px;line-height:1.9">
눈에 보이지 않는 4겹의 보호막이 글 속에 숨습니다.<br>
공격자가 하나를 제거하면 <span style="color:var(--mint)">다른 층이 증거를 생성</span>합니다.<br><br>
<span style="color:var(--mint)">▸</span> <strong>StealthMark Phantom™</strong> — 유령처럼 숨어있는 마크<br>
<span style="color:var(--purple)">▸</span> <strong>StealthMark StyleDNA™</strong> — 글쓰기에도 DNA가 있습니다<br>
<span style="color:var(--yellow)">▸</span> <strong>StealthMark Seal™</strong> — 법정에서 열리는 디지털 봉인<br>
<span style="color:var(--blue)">▸</span> <strong>StealthMark MicroGlyph™</strong> — 눈에 안 보이는 미세 각인
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
<div style="padding:12px;border-radius:10px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">34</div><div style="font-size:10px;color:#94a3b8">공격 시나리오 대응</div></div>
<div style="padding:12px;border-radius:10px;background:#f4f7ff;text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">0px</div><div style="font-size:10px;color:#94a3b8">가시성 제로</div></div>
</div>
<div style="padding:12px 14px;border-radius:10px;background:rgba(192,132,252,.04);border:1px solid rgba(192,132,252,.1)">
<div style="color:var(--purple);font-size:12px;font-weight:700;margin-bottom:4px">💡 CrossGuard™ 원리</div>
<div style="color:var(--text-sub);font-size:12px;line-height:1.7">은행 금고의 이중 잠금장치처럼, <strong style="color:var(--text-main)">한쪽 방패가 깨지면 다른 방패가 자동으로 증거를 남깁니다.</strong> 어떤 단일 공격으로도 동시에 무력화할 수 없습니다.</div>
</div>
</div>
</div>
<!-- Dual Shield Flow -->
<div style="text-align:center;margin-top:28px">
<div style="display:inline-block;padding:18px 36px;border-radius:16px;background:linear-gradient(135deg,rgba(255,170,102,.05),rgba(127,255,219,.05),rgba(192,132,252,.05));border:1px solid rgba(255,255,255,.08)">
<div style="display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap">
<div><span style="color:var(--orange);font-weight:800;font-size:15px">Day 0</span><br><span style="color:var(--text-muted);font-size:11px">텍스트+이미지 Radar™</span></div>
<span style="color:#334155;font-size:18px">→</span>
<div><span style="color:var(--mint);font-weight:800;font-size:15px">Shield™ 삽입</span><br><span style="color:var(--text-muted);font-size:11px">4중 보호 활성화</span></div>
<span style="color:#334155;font-size:18px">→</span>
<div><span style="color:var(--purple);font-weight:800;font-size:15px">DualAxis™ 검출</span><br><span style="color:var(--text-muted);font-size:11px">이중축 교차 판정</span></div>
<span style="color:#334155;font-size:18px">→</span>
<div><span style="color:var(--red);font-weight:800;font-size:15px">Seal™ 인계</span><br><span style="color:var(--text-muted);font-size:11px">법적 증거 패키지</span></div>
</div></div>
</div>
</div>
<!-- ★ 4중 보호 스토리텔링 -->
<div style="padding:40px 0 50px">
<!-- ★ AI 기본법 규제 대응 -->
<div style="max-width:900px;margin:0 auto 50px;padding:36px 32px;border-radius:20px;background:linear-gradient(160deg,rgba(255,107,107,.04),rgba(255,170,102,.02),var(--card) 60%);border:1px solid rgba(255,107,107,.15);position:relative;overflow:hidden">
<div style="position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,107,.06),transparent);pointer-events:none"></div>
<div style="text-align:center;margin-bottom:8px"><span style="font-size:13px;color:var(--red);font-weight:700;letter-spacing:3px">REGULATORY COMPLIANCE</span></div>
<h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:6px;color:var(--text-main)">한국 <span style="color:var(--red)">AI 기본법</span> 시행, 준비되셨습니까?</h2>
<p style="text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:28px">2026년 1월 26일 시행 — 모든 생성 AI 사업자의 워터마크 삽입 의무</p>
<div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:16px;align-items:start;margin-bottom:24px">
<!-- 법률 요구사항 -->
<div style="padding:20px;border-radius:14px;background:rgba(255,107,107,.04);border:1px solid rgba(255,107,107,.12)">
<div style="font-weight:800;color:var(--red);font-size:14px;margin-bottom:14px;display:flex;align-items:center;gap:8px"><span style="font-size:18px">⚖️</span> 법률이 요구하는 것</div>
<div style="font-size:12px;color:#94a3b8;line-height:2">
<div><span style="color:var(--red);font-weight:700">①</span> AI 생성 콘텐츠에 워터마크 삽입 <span style="color:var(--orange);font-weight:700">의무</span></div>
<div><span style="color:var(--red);font-weight:700">②</span> 가시 또는 비가시 워터마크 모두 인정</div>
<div><span style="color:var(--red);font-weight:700">③</span> 텍스트 · 이미지 · 영상 전 매체 대상</div>
<div><span style="color:var(--red);font-weight:700">④</span> 위반 시 과태료 <span style="color:var(--orange);font-weight:700">3,000만 원</span></div>
<div><span style="color:var(--text-muted);font-weight:600">⏳</span> <span style="color:var(--text-muted)">계도 기간 1년 유예 (2027.1.25까지)</span></div>
</div>
</div>
<!-- Arrow -->
<div style="display:flex;align-items:center;justify-content:center;height:100%;padding-top:60px"><div style="font-size:28px;color:var(--mint);animation:float 2s ease infinite">→</div></div>
<!-- StealthMark 해결 -->
<div style="padding:20px;border-radius:14px;background:rgba(127,255,219,.04);border:1px solid rgba(127,255,219,.15)">
<div style="font-weight:800;color:var(--mint);font-size:14px;margin-bottom:14px;display:flex;align-items:center;gap:8px"><span style="font-size:18px">✅</span> StealthMark의 대응</div>
<div style="font-size:12px;color:#94a3b8;line-height:2">
<div><span style="color:var(--mint);font-weight:700">①</span> 4계층 비가시 워터마크 — <span style="color:var(--mint)">법적 요건 충족</span></div>
<div><span style="color:var(--mint);font-weight:700">②</span> 비가시 + 가시 동시 지원 (선택 가능)</div>
<div><span style="color:var(--mint);font-weight:700">③</span> 텍스트 + 이미지 DCT + 영상 DTW <span style="color:var(--mint)">풀스펙</span></div>
<div><span style="color:var(--mint);font-weight:700">④</span> SHA-256 Seal™ — <span style="color:var(--mint)">법적 증거 자동 생성</span></div>
<div><span style="color:var(--mint);font-weight:700">⑤</span> 34종 위협 대응 — <span style="color:var(--mint)">제거 시도도 입증</span></div>
</div>
</div>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
<div style="text-align:center;padding:16px 12px;border-radius:12px;background:rgba(255,170,102,.04);border:1px solid rgba(255,170,102,.1)">
<div style="font-size:24px;margin-bottom:6px">🏢</div>
<div style="color:var(--orange);font-weight:800;font-size:13px;margin-bottom:4px">생성 AI 사업자</div>
<div style="color:var(--text-muted);font-size:11px;line-height:1.5">법률 준수 의무 대상<br>워터마크 미삽입 = 과태료</div>
</div>
<div style="text-align:center;padding:16px 12px;border-radius:12px;background:rgba(192,132,252,.04);border:1px solid rgba(192,132,252,.1)">
<div style="font-size:24px;margin-bottom:6px">📰</div>
<div style="color:var(--purple);font-weight:800;font-size:13px;margin-bottom:4px">미디어 · 콘텐츠 기업</div>
<div style="color:var(--text-muted);font-size:11px;line-height:1.5">AI 생성물 판별 필요<br>원본 증명 의무 확대</div>
</div>
<div style="text-align:center;padding:16px 12px;border-radius:12px;background:rgba(127,255,219,.04);border:1px solid rgba(127,255,219,.1)">
<div style="font-size:24px;margin-bottom:6px">👤</div>
<div style="color:var(--mint);font-weight:800;font-size:13px;margin-bottom:4px">개인 창작자</div>
<div style="color:var(--text-muted);font-size:11px;line-height:1.5">내 콘텐츠 vs AI 콘텐츠<br>원작자 권리 보호 강화</div>
</div>
</div>
<div style="text-align:center;margin-top:20px;padding:12px 20px;border-radius:10px;background:rgba(255,107,107,.03)">
<span style="color:var(--text-muted);font-size:12px">계도 기간은 </span><span style="color:var(--orange);font-weight:800;font-size:12px">준비 기간</span><span style="color:var(--text-muted);font-size:12px">입니다. </span><span style="color:var(--mint);font-weight:800;font-size:12px">지금 도입하면 시행 첫날부터 완벽 대응.</span>
</div>
</div>
<h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:12px"><span style="color:var(--mint)">4중 보호</span>는 어떻게 작동하나요?</h2>
<p style="text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:36px">전문 지식 없이도 이해할 수 있습니다</p>
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto">
<div class="cd fi" style="border-color:rgba(96,165,250,.2);background:linear-gradient(160deg,rgba(96,165,250,.03),var(--card) 50%)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
<div style="width:44px;height:44px;border-radius:12px;background:rgba(96,165,250,.1);display:flex;align-items:center;justify-content:center;font-size:22px">👻</div>
<div><div style="color:var(--blue);font-weight:800;font-size:15px">StealthMark Phantom™</div><div style="color:var(--text-muted);font-size:10px;letter-spacing:1px">INVISIBLE MARK</div></div>
</div>
<div class="story" style="font-size:13px">종이에 <strong>비밀 잉크</strong>로 서명하는 것과 같습니다. 맨눈으로는 절대 보이지 않지만, 특수 장비를 갖다 대면 서명이 선명하게 드러납니다. 복사해도, 스캔해도, 서명은 따라갑니다.</div>
</div>
<div class="cd fi d1" style="border-color:rgba(127,255,219,.2);background:linear-gradient(160deg,rgba(127,255,219,.03),var(--card) 50%)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
<div style="width:44px;height:44px;border-radius:12px;background:rgba(127,255,219,.1);display:flex;align-items:center;justify-content:center;font-size:22px">🧬</div>
<div><div style="color:var(--mint);font-weight:800;font-size:15px">StealthMark StyleDNA™</div><div style="color:var(--text-muted);font-size:10px;letter-spacing:1px">STYLISTIC FINGERPRINT</div></div>
</div>
<div class="story" style="font-size:13px">사람마다 <strong>걸음걸이</strong>가 다르듯, 글에도 고유한 리듬이 있습니다. StyleDNA™는 이 리듬을 살짝 조율하여 고유 지문을 만듭니다. AI가 아무리 다시 써도, 리듬의 흔적은 남습니다.</div>
</div>
<div class="cd fi d2" style="border-color:rgba(255,224,102,.2);background:linear-gradient(160deg,rgba(255,224,102,.03),var(--card) 50%)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
<div style="width:44px;height:44px;border-radius:12px;background:rgba(255,224,102,.1);display:flex;align-items:center;justify-content:center;font-size:22px">📋</div>
<div><div style="color:var(--yellow);font-weight:800;font-size:15px">StealthMark Seal™</div><div style="color:var(--text-muted);font-size:10px;letter-spacing:1px">FORENSIC EVIDENCE</div></div>
</div>
<div class="story" style="font-size:13px">공증사무소의 <strong>확인 도장</strong>과 같습니다. "이 글은 2025년 3월 15일 14:23에 보호되었다"는 기록이 변조 불가능한 형태로 봉인됩니다. 법정에서 증거로 제출할 수 있습니다.</div>
</div>
<div class="cd fi d3" style="border-color:rgba(192,132,252,.2);background:linear-gradient(160deg,rgba(192,132,252,.03),var(--card) 50%)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
<div style="width:44px;height:44px;border-radius:12px;background:rgba(192,132,252,.1);display:flex;align-items:center;justify-content:center;font-size:22px">🔬</div>
<div><div style="color:var(--purple);font-weight:800;font-size:15px">StealthMark MicroGlyph™</div><div style="color:var(--text-muted);font-size:10px;letter-spacing:1px">MICRO ENGRAVING</div></div>
</div>
<div class="story" style="font-size:13px">보석에 새기는 <strong>미세 각인</strong>과 같습니다. 구두점 하나하나에 눈에 보이지 않는 미세 코드를 새깁니다. Phantom™이 공격당하면 MicroGlyph™가 살아남고, 그 반대도 마찬가지입니다.</div>
</div>
</div>
<div style="max-width:900px;margin:28px auto 0">
<div class="cd" style="text-align:center;border-color:rgba(127,255,219,.15);background:linear-gradient(135deg,rgba(127,255,219,.03),rgba(192,132,252,.03))">
<div style="font-size:20px;margin-bottom:6px">⚖️</div>
<div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:10px">StealthMark CrossGuard™</div>
<div class="story" style="font-size:13px;max-width:600px;margin:0 auto"><strong>금고의 이중 잠금장치</strong> 원리입니다. Phantom™과 MicroGlyph™는 서로 다른 기술 계층에 존재합니다. 공격자가 한쪽을 제거하면 — <span style="color:var(--red)">제거한 흔적 자체가 증거</span>가 됩니다. <span style="color:var(--mint)">양쪽을 동시에 죽이는 것은 물리적으로 불가능합니다.</span></div>
</div>
</div>
</div>
<!-- ★ DualAxis -->
<div style="padding:40px 0 50px">
<h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:8px">StealthMark <span style="color:var(--mint)">DualAxis</span>™</h2>
<p style="text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:32px">워터마크가 살아있어도, 죽어있어도 — 판정은 유효합니다</p>
<div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:16px;max-width:700px;margin:0 auto;align-items:center">
<div class="cd fi" style="text-align:center;background:linear-gradient(135deg,var(--card),rgba(127,255,219,.03));border-color:rgba(127,255,219,.2)"><div style="font-size:36px;margin-bottom:8px">📡</div><div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:8px">신호 (Signal)</div><div class="story" style="font-size:12px">워터마크가 살아있다면<br><strong>직접 검출</strong>로 소유권 입증</div></div>
<div style="text-align:center;font-size:28px;color:var(--text-sub);animation:breathe 2s ease infinite">＋</div>
<div class="cd fi d2" style="text-align:center;background:linear-gradient(135deg,var(--card),rgba(192,132,252,.03));border-color:rgba(192,132,252,.2)"><div style="font-size:36px;margin-bottom:8px">🔍</div><div style="color:var(--purple);font-weight:800;font-size:16px;margin-bottom:8px">흔적 (Trace)</div><div class="story" style="font-size:12px">워터마크가 공격당했다면<br><strong>공격의 흔적</strong>이 곧 증거</div></div>
</div>
<div style="text-align:center;margin-top:20px"><div style="display:inline-block;padding:14px 28px;border-radius:12px;background:linear-gradient(135deg,rgba(127,255,219,.06),rgba(192,132,252,.06));border:1px solid rgba(127,255,219,.2)"><span style="color:var(--text-main);font-weight:700;font-size:14px">살아있으면 →</span><span style="color:var(--mint);font-weight:800"> 직접 증거</span><span style="color:var(--text-sub);margin:0 8px">|</span><span style="color:var(--text-main);font-weight:700;font-size:14px">죽어있으면 →</span><span style="color:var(--red);font-weight:800"> 죽인 흔적이 증거</span></div></div>
</div>
<!-- ★ Competitive Edge -->
<div style="padding:30px 0 50px">
<h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:28px">왜 <span style="color:var(--mint)">StealthMark</span>인가요?</h2>
<div style="max-width:820px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--border)">
<table style="width:100%;border-collapse:collapse;font-size:13px">
<thead><tr style="background:#f0f4ff"><th style="padding:14px 16px;text-align:left;color:#94a3b8;font-weight:700;border-bottom:2px solid var(--border)">보호 기능</th><th style="padding:14px 16px;text-align:center;border-bottom:2px solid rgba(127,255,219,.3)"><span style="color:var(--mint);font-weight:800">StealthMark</span></th><th style="padding:14px 16px;text-align:center;color:var(--text-muted);font-weight:700;border-bottom:2px solid var(--border)">경쟁사 A</th><th style="padding:14px 16px;text-align:center;color:var(--text-muted);font-weight:700;border-bottom:2px solid var(--border)">경쟁사 B</th></tr></thead>
<tbody id="compTb"></tbody>
</table>
</div>
</div>
<!-- ★ Customer Journey -->
<div style="padding:20px 0 80px">
<h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:32px">고객 여정 <span style="color:var(--orange)">타임라인</span></h2>
<div style="max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
<div class="cd fi" style="text-align:center;border-color:rgba(255,170,102,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">📋</div><div style="color:var(--orange);font-weight:800;font-size:20px;margin-bottom:4px">Day 0</div><div style="color:var(--text-main);font-weight:700;font-size:13px;margin-bottom:6px">계약 즉시</div><div style="color:var(--text-muted);font-size:11px;line-height:1.6">Radar™ 가동<br>텍스트+이미지 아카이브<br>즉시 모니터링 시작<br><span style="color:var(--red);font-weight:700">⚖️ AI 기본법 준수 개시</span></div></div>
<div class="cd fi d1" style="text-align:center;border-color:rgba(127,255,219,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">🔏</div><div style="color:var(--mint);font-weight:800;font-size:20px;margin-bottom:4px">Week 1</div><div style="color:var(--text-main);font-weight:700;font-size:13px;margin-bottom:6px">Shield™ 삽입 완료</div><div style="color:var(--text-muted);font-size:11px;line-height:1.6">텍스트 4계층 보호<br>이미지 DCT 워터마크<br>가시성 제로</div></div>
<div class="cd fi d2" style="text-align:center;border-color:rgba(192,132,252,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">🎯</div><div style="color:var(--purple);font-weight:800;font-size:20px;margin-bottom:4px">Month 1</div><div style="color:var(--text-main);font-weight:700;font-size:13px;margin-bottom:6px">첫 적발 리포트</div><div style="color:var(--text-muted);font-size:11px;line-height:1.6">무단 사용 색출<br>DualAxis™ 분석<br>증거 패키지 생성</div></div>
<div class="cd fi d3" style="text-align:center;border-color:rgba(255,107,107,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">⚖️</div><div style="color:var(--red);font-weight:800;font-size:20px;margin-bottom:4px">Month 2+</div><div style="color:var(--text-main);font-weight:700;font-size:13px;margin-bottom:6px">법적 대응</div><div style="color:var(--text-muted);font-size:11px;line-height:1.6">Seal™ 증거로<br>합의·소송 진행<br>ROI 회수 시작</div></div>
</div>
<div style="text-align:center;margin-top:24px"><div style="display:inline-block;padding:14px 28px;border-radius:14px;background:var(--card);border:1px solid var(--border)"><span style="color:var(--text-muted);font-size:13px">월 1건의 무단 사용만 잡아도 →</span><span style="color:var(--mint);font-weight:800;font-size:15px"> 연간 수억 원의 콘텐츠 가치 보호</span><br><span style="color:var(--text-muted);font-size:11px;margin-top:4px;display:inline-block">+ AI 기본법 워터마크 의무 준수 →</span><span style="color:var(--orange);font-weight:700;font-size:11px"> 과태료 3,000만 원 리스크 제거</span></div></div>
</div>
</section>
<!-- ═══════════════ LEADERBOARD ═══════════════ -->
<section id="lb">
<div style="padding:40px 0 80px">
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">TECHNOLOGY BENCHMARK</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:var(--text-main)">콘텐츠 보호 </span><span style="color:var(--mint)">기술 비교</span></h2><p style="color:var(--text-muted);font-size:14px;margin-top:8px">텍스트 워터마킹 6축 정량 비교 + 이미지·영상 멀티모달 지원 현황</p></div>
<div style="display:grid;grid-template-columns:1fr 280px;gap:24px">
<div class="cd fi" style="padding:0;overflow:hidden"><div class="lh"><span>#</span><span>기술</span><span>유형</span><span style="text-align:center">🛡️</span><span style="text-align:center">🏗️</span><span style="text-align:center">🇰🇷</span><span style="text-align:center">⚡</span><span style="text-align:center">🔍</span><span style="text-align:center">⚖️</span><span style="text-align:center">종합</span></div><div id="lbb"></div></div>
<div class="cd fi d2" id="lbd" style="text-align:center"></div>
</div>
<div style="display:flex;gap:16px;justify-content:center;margin-top:20px;flex-wrap:wrap"><span style="font-size:11px;color:var(--text-muted)">🛡️위협대응 🏗️방어체계 🇰🇷한국어 ⚡실시간 🔍흔적검출 ⚖️법적증거</span><span style="font-size:11px;color:#334155">|</span><span style="font-size:11px;color:var(--mint)">●80+</span><span style="font-size:11px;color:var(--yellow)">●50+</span><span style="font-size:11px;color:var(--orange)">●25+</span><span style="font-size:11px;color:var(--red)">●0+</span></div>
</div>
</section>
<!-- ═══════════════ THREATS ═══════════════ -->
<section id="atk">
<div style="padding:40px 0">
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--red);font-weight:700;letter-spacing:3px;margin-bottom:8px">STEALTHMARK THREATMATRIX™</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px">34종 위협 <span style="color:var(--mint)">대응 현황</span></h2><p style="color:var(--text-muted);font-size:14px;margin-top:8px">7개 위협 그룹 × 34종 시나리오 — 계층별 생존 현황</p></div>
<div class="ag" id="agg"></div>
<div class="cd fi" style="margin-top:32px">
<h3 style="font-size:16px;font-weight:800;text-align:center;margin-bottom:20px;color:var(--text-main)">StealthMark <span style="color:var(--mint)">CrossGuard™</span> 이중 방패</h3>
<div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:center;max-width:600px;margin:0 auto">
<div style="text-align:center;padding:16px;border-radius:12px;background:rgba(255,107,107,.06);border:1px solid rgba(255,107,107,.2)"><div style="font-weight:800;color:var(--red);margin-bottom:6px">Phantom™ 공격 시</div><div style="font-size:20px;margin-bottom:4px">❌ → ✅</div><div style="font-size:11px;color:#94a3b8">Phantom 무력화 → MicroGlyph 생존</div></div>
<div style="text-align:center;font-size:28px;animation:float 2s ease infinite">⚖️<div style="font-size:10px;color:var(--mint);font-weight:700;margin-top:4px">시소</div></div>
<div style="text-align:center;padding:16px;border-radius:12px;background:rgba(192,132,252,.06);border:1px solid rgba(192,132,252,.2)"><div style="font-weight:800;color:var(--purple);margin-bottom:6px">MicroGlyph™ 공격 시</div><div style="font-size:20px;margin-bottom:4px">✅ → ❌</div><div style="font-size:11px;color:#94a3b8">MicroGlyph 무력화 → Phantom 생존</div></div>
</div>
<div style="text-align:center;margin-top:16px;padding:10px 20px;border-radius:10px;background:rgba(127,255,219,.04)"><span style="color:var(--mint);font-weight:800;font-size:13px">어떤 단일 공격으로도 양쪽을 동시에 제거할 수 없습니다</span> <span style="color:var(--text-muted);font-size:12px">+ StyleDNA™는 어떤 공격에도 생존</span></div>
</div>
</div>
</section>
<!-- ═══════════════ PIPELINE ═══════════════ -->
<section id="pipe">
<div style="padding:40px 0 80px">
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">BUSINESS PIPELINE</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:var(--orange)">Radar™</span> → <span style="color:var(--mint)">Shield™</span> → <span style="color:var(--red)">Seal™</span></h2><p style="color:var(--text-muted);font-size:14px;margin-top:8px">텍스트 · 이미지 · 영상 — 콘텐츠 보호의 전체 라이프사이클</p></div>
<div class="rs">
<div class="rr" style="top:35%;left:35%;width:30%;height:30%;border-color:rgba(127,255,219,.12)"></div>
<div class="rr" style="top:22.5%;left:22.5%;width:55%;height:55%;border-color:rgba(127,255,219,.1)"></div>
<div class="rr" style="top:10%;left:10%;width:80%;height:80%;border-color:rgba(127,255,219,.08)"></div>
<div class="rr" style="top:0;left:0;width:100%;height:100%;border-color:rgba(127,255,219,.15)"></div>
<div class="rw"><div class="ra"></div></div><div class="rc"></div>
<div class="rb" style="top:25%;left:30%"><div class="rd" style="background:var(--red);box-shadow:0 0 8px var(--red)"></div><div class="rl" style="color:var(--red)">AI 플랫폼 A</div></div>
<div class="rb" style="top:35%;left:70%"><div class="rd" style="background:var(--orange);box-shadow:0 0 8px var(--orange);animation-delay:.5s"></div><div class="rl" style="color:var(--orange)">데이터셋 B</div></div>
<div class="rb" style="top:72%;left:55%"><div class="rd" style="background:var(--yellow);box-shadow:0 0 8px var(--yellow);animation-delay:1s"></div><div class="rl" style="color:var(--yellow)">경쟁사 C</div></div>
<div class="rb" style="top:65%;left:20%"><div class="rd" style="background:var(--red);box-shadow:0 0 8px var(--red);animation-delay:1.5s"></div><div class="rl" style="color:var(--red)">크롤러 D</div></div>
<div style="position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--mint);font-weight:700">📡 StealthMark Radar™</div>
</div>
<div style="position:relative;max-width:700px;margin:0 auto" id="psteps"><div class="pl"></div></div>
<div style="text-align:center;margin-top:48px">
<div class="cd" style="display:inline-block;padding:24px 40px;border-radius:20px;background:linear-gradient(135deg,var(--card),var(--card2));border-color:rgba(127,255,219,.2)">
<div style="font-size:18px;font-weight:800;color:var(--text-main);margin-bottom:8px">콘텐츠 ID별 <span style="color:var(--mint)">자동 색출</span> → <span style="color:var(--red)">법무팀 인계</span></div>
<div style="color:var(--text-muted);font-size:13px;line-height:1.7">Radar™가 주요 타깃을 주기적으로 스캔 → DualAxis™로 교차 검증<br>Seal™이 증거 패키지를 자동 생성 → 법무팀에 인계</div>
<div style="display:flex;gap:12px;justify-content:center;margin-top:16px">
<span style="padding:6px 14px;border-radius:8px;background:rgba(127,255,219,.08);color:var(--mint);font-size:12px;font-weight:700">무단 학습 색출</span>
<span style="padding:6px 14px;border-radius:8px;background:rgba(192,132,252,.08);color:var(--purple);font-size:12px;font-weight:700">저작권 침해 입증</span>
<span style="padding:6px 14px;border-radius:8px;background:rgba(255,107,107,.08);color:var(--red);font-size:12px;font-weight:700">합의·소송 지원</span>
</div></div></div>
</div>
</section>
</main>
<footer>StealthMark — 텍스트 · 이미지 · 영상 통합 콘텐츠 보호 플랫폼 | Phantom™ · StyleDNA™ · Seal™ · MicroGlyph™ · CrossGuard™ · DualAxis™ · Radar™ | © 2025 Ginigen AI</footer>
<script>
const D=[
{r:1,b:"🥇",n:"StealthMark",c:"🇰🇷",t:"상용",d:"4중 특허 방어 + DualAxis™ + Radar™",s:[100,100,100,95,100,95],T:98,cl:"var(--mint)",h:["ThreatMatrix™ 34종 대응","CrossGuard™ 이중 방패","DualAxis™ 흔적 판정"]},
{r:2,b:"🥈",n:"임베딩 기반 학술",c:"🇰🇷",t:"학술",d:"의미 벡터 유사도 기반",s:[70,50,60,30,40,45],T:49,cl:"#94a3b8",h:["패러프레이징 부분 대응","실시간 어려움","GPU 필수"]},
{r:3,b:"🥉",n:"SynthID-Text",c:"🇺🇸",t:"상용",d:"Google — LLM 전용",s:[65,25,10,80,0,30],T:35,cl:"#94a3b8",h:["LLM 출력만 가능","한국어 미지원"]},
{r:4,b:"4",n:"통계 기반 WM",c:"🇺🇸",t:"학술",d:"토큰 확률 분포 조작",s:[55,25,20,70,0,25],T:33,cl:"#64748b",h:["패러프레이징 취약","모델 접근 필요"]},
{r:5,b:"5",n:"단일 채널 WM",c:"🌐",t:"오픈소스",d:"단일 비가시 문자만 사용",s:[40,25,50,90,0,15],T:37,cl:"#64748b",h:["단일 공격으로 전멸","증거력 없음"]},
{r:6,b:"6",n:"OpenAI Text WM",c:"🇺🇸",t:"상용",d:"통계 기반 — 프로젝트 중단",s:[50,25,15,75,10,35],T:35,cl:"#64748b",h:["패러프레이징 약함","프로젝트 중단"]}
];
const AX=["위협대응","방어체계","한국어","실시간","흔적","법적"],IC=["🛡️","🏗️","🇰🇷","⚡","🔍","⚖️"];
const AG=[
{i:"🔤",n:"정규화 공격",c:4,rk:"중",cl:"var(--blue)",a:["NFC","NFKC","NFD","NFKD"],sv:["✅","⚠️","✅"],d:"텍스트를 표준 형태로 변환하는 공격"},
{i:"👻",n:"비가시 제거",c:5,rk:"상",cl:"var(--red)",a:["부분 제거","전체 제거","카테고리별","결합 제거","인쇄가능만"],sv:["❌→흔적","✅","✅"],d:"Phantom™을 직접 노리는 공격"},
{i:"🎯",n:"미세 표적",c:3,rk:"최상",cl:"var(--purple)",a:["전체 제거","부분 A","부분 B"],sv:["✅","✅","❌→흔적"],d:"MicroGlyph™를 직접 노리는 공격"},
{i:"✏️",n:"편집 정리",c:5,rk:"하~상",cl:"var(--yellow)",a:["공백","줄바꿈","구두점통일","구두점제거","클린업"],sv:["✅","✅","✅"],d:"일반적인 텍스트 편집 정리"},
{i:"🧩",n:"극한 정제",c:5,rk:"최상",cl:"var(--orange)",a:["기본문자만","영숫자만","소문자화","동형이체","이모지제거"],sv:["⚠️","✅","⚠️"],d:"텍스트를 극단적으로 정제하는 공격"},
{i:"🧠",n:"의미 재작성",c:8,rk:"1군 위협",cl:"var(--pink)",a:["패러프레이징","요약","역번역","재배열","발췌","문체변환","분할","콜라주"],sv:["⚠️","✅","✅"],d:"AI가 의미를 보존하며 다시 쓰는 공격"}
];
const PS=[
{i:"📡",t:"Radar™ 가동",d:"기존 콘텐츠 즉시 모니터링 시작",dt:"계약 Day 0 — 아카이브 전체 보호",cl:"var(--orange)"},
{i:"🔏",t:"Shield™ 삽입",d:"신규 콘텐츠에 4중 보호 활성화",dt:"Phantom + StyleDNA + Seal + MicroGlyph",cl:"var(--mint)"},
{i:"📡",t:"콘텐츠 배포",d:"워터마크는 완전 비가시 — 정상 배포",dt:"독자와 이용자에게 일체 영향 없음",cl:"var(--blue)"},
{i:"🔍",t:"DualAxis™ 검출",d:"신호 + 흔적 이중축 교차 판정",dt:"다중 파이프라인으로 공격 프로파일링",cl:"var(--purple)"},
{i:"📋",t:"Seal™ 증거",d:"법적 증거력 리포트 자동 생성",dt:"디지털 봉인 + 타임스탬프 + 분석 로그",cl:"var(--yellow)"},
{i:"⚖️",t:"법무팀 인계",d:"증거 패키지를 법무팀에 전달",dt:"저작권 침해 소송 및 합의 및 시정 요구",cl:"var(--red)"}
];
const COMP=[
{f:"텍스트 삽입 전 보호",sm:"✅ Radar™ 7모드",a:"❌",b:"❌",h:true},
{f:"텍스트 워터마크",sm:"✅ 4중 특허 기술",a:"⚠️ 단일 채널",b:"⚠️ 통계 기반"},
{f:"🖼️ 이미지 유사성 탐지",sm:"✅ 5모드 AI 분석",a:"❌",b:"❌",h:true},
{f:"🖼️ 이미지 워터마크",sm:"✅ DCT 주파수 영역",a:"❌",b:"⚠️ 픽셀만"},
{f:"🎬 영상 보호",sm:"✅ DTW + DCT 전파",a:"❌",b:"❌"},
{f:"한국어 최적화",sm:"✅ 형태소 분석 기반",a:"❌",b:"❌"},
{f:"위협 대응 범위",sm:"✅ 34종 100%",a:"⚠️ 5~10종",b:"⚠️ 취약"},
{f:"이중축 판정",sm:"✅ DualAxis™",a:"❌",b:"❌"},
{f:"법적 증거 패키지",sm:"✅ Seal™ 자동",a:"❌",b:"⚠️ 수동"},
{f:"멀티모달 통합",sm:"✅ 텍스트+이미지+영상",a:"❌ 텍스트만",b:"❌ 이미지만",h:true},
{f:"⚖️ AI 기본법 준수",sm:"✅ 즉시 대응 가능",a:"⚠️ 부분 충족",b:"⚠️ 텍스트 미지원",h:true}
];
const ctb=document.getElementById('compTb');
if(ctb)ctb.innerHTML=COMP.map(c=>{const hl=c.h?'background:rgba(255,170,102,.03);':'';const fc=c.h?'color:var(--orange);font-weight:700':'color:var(--text-sub)';return `<tr style="${hl}border-bottom:1px solid var(--border)"><td style="padding:10px 16px;${fc};font-size:13px">${c.f}</td><td style="padding:10px 16px;text-align:center;font-size:12px;font-weight:600;color:${c.sm.startsWith('✅')?'var(--mint)':'#94a3b8'}">${c.sm}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:var(--text-muted)">${c.a}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:var(--text-muted)">${c.b}</td></tr>`}).join('');
document.querySelectorAll('.tb').forEach(b=>{b.onclick=()=>{document.querySelectorAll('.tb').forEach(x=>x.classList.remove('a'));b.classList.add('a');document.querySelectorAll('section').forEach(s=>s.classList.remove('a'));document.getElementById(b.dataset.t).classList.add('a')}});
const MET=[{v:34,s:"종",l:"텍스트 위협",u:"ThreatMatrix™ 100%",cl:"var(--mint)"},{v:4,s:"중",l:"텍스트 계층",u:"CrossGuard™ 이중방패",cl:"var(--purple)"},{v:5,s:"모드",l:"이미지 분석",u:"Hash+SSIM+색상+특징점",cl:"var(--pink)"},{v:7,s:"모드",l:"Radar™",u:"삽입 전 즉시 보호",cl:"var(--orange)"},{v:3,s:"축",l:"멀티모달",u:"텍스트+이미지+영상",cl:"var(--blue)"},{v:0,s:"px",l:"가시성",u:"완전 투명",cl:"var(--red)",fix:"0"}];
document.getElementById('metrics').innerHTML=MET.map((m,i)=>`<div class="mc fi d${i+1}" style="border:1px solid color-mix(in srgb,${m.cl} 15%,transparent)"><div style="font-size:36px;font-weight:900;color:${m.cl}">${m.fix||'<span class="ctr" data-e="'+m.v+'">0</span>'}${m.s}</div><div style="font-size:13px;font-weight:700;color:#fff;margin-bottom:2px">${m.l}</div><div style="font-size:10px;color:var(--text-muted)">${m.u}</div></div>`).join('');
const obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting)e.target.querySelectorAll('.ctr').forEach(el=>{if(el.dataset.done)return;el.dataset.done='1';const end=+el.dataset.e,st=performance.now();(function f(n){const p=Math.min((n-st)/1500,1);el.textContent=Math.round((1-Math.pow(1-p,3))*end);if(p<1)requestAnimationFrame(f)})(st)})})},{threshold:.3});
document.querySelectorAll('.mc').forEach(e=>obs.observe(e));
let sel=0;
function sc(v){return v>=80?'var(--mint)':v>=50?'var(--yellow)':v>=25?'var(--orange)':'var(--red)'}
function tc(t){return t==='상용'?'var(--mint)':t==='학술'?'var(--purple)':'#94a3b8'}
function tbc(t){return t==='상용'?'rgba(127,255,219,.08)':t==='학술'?'rgba(192,132,252,.08)':'#1e293b'}
function bLB(){document.getElementById('lbb').innerHTML=D.map((c,i)=>`<div class="lr${i===sel?' sel':''}" onclick="sel=${i};bLB();bDt()"><span style="font-size:${c.r<=3?18:13}px;font-weight:800;${c.r>3?'color:var(--text-muted)':''}">${c.b}</span><div><div style="font-weight:700;font-size:13px;color:${c.r===1?'var(--mint)':'var(--text-main)'}">${c.c} ${c.n}</div><div style="font-size:10px;color:var(--text-muted);margin-top:1px">${c.d}</div></div><span style="font-size:10px;padding:2px 6px;border-radius:4px;background:${tbc(c.t)};color:${tc(c.t)};font-weight:600;text-align:center">${c.t}</span>${c.s.map(s=>`<span style="text-align:center;font-size:12px;font-weight:700;color:${sc(s)}">${s}</span>`).join('')}<span style="text-align:center;font-size:16px;font-weight:900;color:${c.r===1?'var(--mint)':c.cl}">${c.T}</span></div>`).join('')}
function bDt(){const c=D[sel],m=c.r===1,bc=m?'var(--mint)':'#94a3b8';const sz=200,cx=100,cy=100,r=76,st=Math.PI/3;const pt=(v,i)=>({x:cx+(r*v/100)*Math.cos(st*i*2-Math.PI/2),y:cy+(r*v/100)*Math.sin(st*i*2-Math.PI/2)});let svg='';[25,50,75,100].forEach(lv=>{const ps=Array.from({length:6},(_,i)=>pt(lv,i));svg+=`<polygon points="${ps.map(p=>p.x+','+p.y).join(' ')}" fill="none" stroke="#c7d2e0" stroke-width="${lv===100?1.5:.5}" ${lv<100?'stroke-dasharray="2,3"':''}/>`;});Array.from({length:6},(_,i)=>{const p=pt(100,i);svg+=`<line x1="${cx}" y1="${cy}" x2="${p.x}" y2="${p.y}" stroke="#c7d2e0" stroke-width=".5"/>`;});const dp=c.s.map((s,i)=>pt(s,i));svg+=`<polygon points="${dp.map(p=>p.x+','+p.y).join(' ')}" fill="${m?'rgba(127,255,219,.12)':'rgba(148,163,184,.12)'}" stroke="${bc}" stroke-width="2"/>`;dp.forEach(p=>{svg+=`<circle cx="${p.x}" cy="${p.y}" r="3.5" fill="${bc}" stroke="var(--bg)" stroke-width="1.5"/>`;});IC.forEach((ic,i)=>{const p=pt(120,i);svg+=`<text x="${p.x}" y="${p.y}" text-anchor="middle" dominant-baseline="middle" fill="#64748b" font-size="10">${ic}</text>`;});document.getElementById('lbd').innerHTML=`<div style="font-size:28px;margin-bottom:4px">${c.b}</div><div style="font-weight:800;font-size:16px;color:${m?'var(--mint)':'#fff'}">${c.n}</div><div style="font-size:11px;color:var(--text-muted);margin:4px 0 12px">${c.d}</div><div style="display:flex;justify-content:center;margin-bottom:12px"><svg width="${sz}" height="${sz}" viewBox="0 0 ${sz} ${sz}">${svg}</svg></div>${AX.map((a,i)=>`<div class="sr"><span class="sl">${IC[i]} ${a}</span><div class="st"><div class="sf" style="width:${c.s[i]}%;background:linear-gradient(90deg,${bc}88,${bc});animation-delay:${i*80}ms"></div></div><span class="sn" style="color:${bc}">${c.s[i]}</span></div>`).join('')}<div style="margin-top:16px;text-align:left">${c.h.map(h=>`<div style="padding:3px 0;font-size:11px;color:#94a3b8"><span style="color:${m?'var(--mint)':'#64748b'};margin-right:6px">→</span>${h}</div>`).join('')}</div>`}
bLB();bDt();
const SL=["Phantom™","StyleDNA™","MicroGlyph™"];
document.getElementById('agg').innerHTML=AG.map((g,i)=>`<div class="ac fi" style="animation-delay:${i*.08}s;border:1px solid color-mix(in srgb,${g.cl} 20%,transparent)"><div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px"><div><span style="font-size:24px;margin-right:8px">${g.i}</span><span style="font-weight:800;font-size:15px;color:var(--text-main)">${g.n}</span></div><span style="padding:3px 10px;border-radius:8px;background:color-mix(in srgb,${g.cl} 8%,#ffffff);color:${g.cl};font-size:11px;font-weight:700">${g.rk}</span></div><div style="font-size:12px;color:var(--text-sub);margin-bottom:12px;line-height:1.5">${g.d}</div><div style="margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px">${g.a.map(a=>`<span class="at">${a}</span>`).join('')}</div><div class="svr">${SL.map((l,j)=>`<div class="svi"><div class="svl">${l}</div><div class="svv">${g.sv[j]}</div></div>`).join('')}</div><div style="text-align:center;margin-top:8px"><span style="font-size:22px;font-weight:900;color:${g.cl}">${g.c}</span><span style="font-size:11px;color:var(--text-muted);margin-left:4px">종</span></div></div>`).join('');
document.getElementById('psteps').innerHTML='<div class="pl"></div>'+PS.map((s,i)=>`<div class="ps fi" style="animation-delay:${i*.1}s"><div class="pn" style="background:color-mix(in srgb,${s.cl} 8%,transparent);border:2px solid color-mix(in srgb,${s.cl} 30%,transparent)">${s.i}</div><div class="cd" style="flex:1;padding:14px 20px;border-color:color-mix(in srgb,${s.cl} 15%,transparent)"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="color:${s.cl};font-weight:800;font-size:14px">${s.t}</span><span style="font-size:10px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,${s.cl} 8%,transparent);color:${s.cl};font-weight:700">Step ${i+1}</span></div><div style="color:var(--text-main);font-size:13px;margin-bottom:4px">${s.d}</div><div style="color:var(--text-muted);font-size:11px">${s.dt}</div></div></div>`).join('');
</script>
</body>
</html>
|