Hugging Face's logo

Spaces:
ginigen
/
StealthMark
Sleeping

App Files Community
StealthMark / index.html
openfree's picture
openfree
Update index.html
76ba145 verified
raw
history blame contribute delete
65.5 kB
<!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>