kaffa/anvil-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 개발자 터미널 스타일 UI 전면 적용

Browse Source 
- index.html: GitHub Dark 테마 터미널 스타일 랜딩 페이지
- terms.html, privacy.html, sla.html: 법적 페이지 터미널 UI 적용
- ASCII 아트 로고, vim 상태바, JSON 코드 블록
- Fira Code 모노스페이스 폰트, 터미널 그린 컬러 팔레트

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-30 07:30:07 +09:00
parent 7f71b5edb0
commit a4e9dc2dd8
4 changed files with 816 additions and 1644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1250
index.html
View File

File diff suppressed because it is too large Load Diff

309
privacy.html
View File

@@ -1,165 +1,172 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ko" class="scroll-smooth"> <html class="dark scroll-smooth" lang="ko">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>개인정보처리방침 - Anvil Hosting</title> <title>개인정보처리방침 - Anvil Hosting</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Tailwind CSS --> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link rel="stylesheet" href="style.css"> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<!-- Fonts --> <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="fonts.css"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Favicon --> <script>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230ea5e9' rx='20' width='100' height='100'/><text x='50' y='70' font-size='60' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='bold'>A</text></svg>"> tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#3fb950",
"background-dark": "#0d1117",
"terminal-bg": "#010409",
"terminal-border": "#30363d",
"terminal-text": "#c9d1d9",
"terminal-muted": "#8b949e",
"terminal-cyan": "#58a6ff",
"terminal-amber": "#d29922",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"mono": ["Fira Code", "monospace"],
},
},
},
}
</script>
</head> </head>
<body class="font-sans antialiased bg-dark-900 text-slate-300"> <body class="bg-background-dark text-terminal-text font-mono min-h-screen flex flex-col p-4 md:p-8">
<!-- Header --> <div class="w-full max-w-4xl mx-auto bg-background-dark border border-terminal-border rounded-lg overflow-hidden flex flex-col">
<nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-dark-900/80 backdrop-blur-md"> <!-- Window Title Bar -->
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> <div class="bg-[#161b22] px-4 py-3 flex items-center justify-between border-b border-terminal-border">
<a href="/" class="flex items-center gap-2 group"> <div class="flex items-center gap-2">
<div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold font-mono text-xl shadow-lg shadow-brand-500/20">A</div> <div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
<span class="font-bold text-lg tracking-tight">Anvil<span class="text-brand-400">.Hosting</span></span> <div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
</a> <div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
<a href="/" class="text-sm text-slate-400 hover:text-white transition">← 메인으로</a>
</div> </div>
</nav> <span class="text-xs text-terminal-muted">cat /etc/anvil/privacy.md</span>
<a href="/" class="text-xs text-terminal-muted hover:text-primary transition">cd ~</a>
</div>
<!-- Main Content --> <!-- Content -->
<main class="pt-24 pb-16"> <div class="p-6 md:p-8 space-y-8">
<div class="max-w-4xl mx-auto px-6"> <!-- Header -->
<div class="border-b border-terminal-border pb-6">
<!-- Page Header --> <div class="flex items-center gap-2 text-sm text-terminal-muted mb-4">
<div class="mb-12"> <span class="text-primary">$</span> cat privacy.md
<h1 class="text-4xl md:text-5xl font-bold mb-4">개인정보처리방침</h1>
<p class="text-slate-400">최종 수정일: 2026년 1월 20일</p>
</div> </div>
<h1 class="text-2xl md:text-3xl font-display font-bold text-white mb-2"># 개인정보처리방침</h1>
<!-- Privacy Content --> <p class="text-terminal-muted text-sm">// 최종 수정일: 2026년 1월 20일</p>
<div class="glass-card p-8 md:p-12 rounded-2xl space-y-12">
<!-- Section 1 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제1조 (기본 원칙)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>LIBEHAIM Inc.(이하 "회사")는 <strong class="text-brand-400">고객의 개인정보를 직접 수집, 저장, 처리하지 않습니다.</strong></p>
<p>회사는 개인정보 최소화 원칙에 따라 서비스 운영에 필요한 최소한의 정보만을 외부 플랫폼을 통해 처리하며, 자체 데이터베이스에 개인정보를 보관하지 않습니다.</p>
</div>
</section>
<!-- Section 2 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제2조 (서비스 제공 방식)</h2>
<div class="space-y-4 text-slate-300 leading-relaxed">
<p>회사의 서비스는 다음과 같은 방식으로 제공됩니다:</p>
<div class="glass-panel p-4 rounded-lg">
<p><strong class="text-white">1. 텔레그램 봇 기반 서비스</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1 mt-2">
<li>모든 고객 상호작용은 텔레그램 플랫폼을 통해 이루어집니다</li>
<li>텔레그램 계정 정보는 <a href="https://telegram.org/privacy" target="_blank" rel="noopener noreferrer" class="text-brand-400 hover:underline">텔레그램의 개인정보처리방침</a>에 따라 텔레그램에서 관리됩니다</li>
<li>회사는 텔레그램 사용자 ID만을 서비스 식별 목적으로 일시적으로 참조합니다</li>
</ul>
</div>
<div class="glass-panel p-4 rounded-lg">
<p><strong class="text-white">2. 결제 처리</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1 mt-2">
<li>결제는 외부 결제 대행사를 통해 처리됩니다</li>
<li>회사는 결제 정보(카드번호, 계좌정보 등)를 직접 수집하거나 저장하지 않습니다</li>
<li>결제 관련 개인정보는 해당 결제 대행사의 개인정보처리방침에 따라 관리됩니다</li>
</ul>
</div>
<div class="glass-panel p-4 rounded-lg">
<p><strong class="text-white">3. 정적 웹사이트</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1 mt-2">
<li>본 웹사이트(hosting.anvil.it.com)는 정적 웹사이트입니다</li>
<li>쿠키, 트래킹 코드, 분석 도구를 사용하지 않습니다</li>
<li>회원가입이나 로그인 기능이 없습니다</li>
</ul>
</div>
</div>
</section>
<!-- Section 3 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제3조 (서버 운영 관련)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>클라우드 인프라 서비스 특성상 다음 정보가 기술적으로 생성될 수 있습니다:</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li><strong class="text-white">서버 접속 로그:</strong> 고객이 생성한 서버의 시스템 로그는 해당 서버 내에만 존재하며, 고객이 직접 관리합니다</li>
<li><strong class="text-white">네트워크 로그:</strong> DDoS 방어 및 보안 목적으로 IP 주소가 일시적으로 기록될 수 있으며, 보안 목적 달성 후 자동 삭제됩니다</li>
</ul>
</div>
</section>
<!-- Section 4 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제4조 (제3자 서비스)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>회사 서비스 이용 시 다음 제3자 서비스의 개인정보처리방침이 적용될 수 있습니다:</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li><a href="https://telegram.org/privacy" target="_blank" rel="noopener noreferrer" class="text-brand-400 hover:underline">Telegram Privacy Policy</a> - 봇 서비스 이용 시</li>
<li><a href="https://www.cloudflare.com/privacypolicy/" target="_blank" rel="noopener noreferrer" class="text-brand-400 hover:underline">Cloudflare Privacy Policy</a> - 웹사이트 호스팅</li>
</ul>
</div>
</section>
<!-- Section 5 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제5조 (이용자의 권리)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>회사는 개인정보를 보유하지 않으므로 별도의 열람, 정정, 삭제 절차가 필요하지 않습니다.</p>
<p>텔레그램 계정 정보에 대한 권리 행사는 텔레그램에 직접 요청하시기 바랍니다.</p>
<p>서비스 이용 중 생성된 서버 데이터는 고객이 직접 관리하며, 서비스 해지 시 고객의 요청에 따라 완전히 삭제됩니다.</p>
</div>
</section>
<!-- Section 6 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제6조 (문의처)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>개인정보 관련 문의사항은 아래 연락처로 문의하시기 바랍니다.</p>
<ul class="list-none ml-4 space-y-2">
<li><strong class="text-white">회사명:</strong> LIBEHAIM Inc.</li>
<li><strong class="text-white">대표:</strong> Taro Tanaka</li>
<li><strong class="text-white">주소:</strong> #202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</li>
<li><strong class="text-white">고객 지원:</strong> <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="text-brand-400 hover:underline">@AnvilForgeBot</a> (Telegram)</li>
</ul>
</div>
</section>
<!-- Section 7 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제7조 (방침 변경)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>이 개인정보처리방침은 2026년 1월 20일부터 적용됩니다.</p>
<p>방침이 변경되는 경우 서비스 내 공지를 통해 안내드립니다.</p>
</div>
</section>
</div>
<!-- Back to Home -->
<div class="mt-12 text-center">
<a href="/" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 transition">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
메인 페이지로 돌아가기
</a>
</div>
</div> </div>
</main>
<!-- Footer --> <!-- Section 1 -->
<footer class="py-8 border-t border-white/5"> <section class="space-y-3">
<div class="max-w-7xl mx-auto px-6 text-center text-sm text-slate-500"> <h2 class="text-lg font-display font-bold text-terminal-cyan">## 제1조 (기본 원칙)</h2>
<p>© 2026 LIBEHAIM Inc. All rights reserved.</p> <div class="bg-primary/10 border border-primary/30 rounded p-4">
<p class="text-primary font-bold mb-2">💡 핵심: 개인정보를 직접 수집, 저장, 처리하지 않습니다.</p>
<p class="text-terminal-text text-sm">회사는 개인정보 최소화 원칙에 따라 서비스 운영에 필요한 최소한의 정보만을 외부 플랫폼을 통해 처리하며, 자체 데이터베이스에 개인정보를 보관하지 않습니다.</p>
</div>
</section>
<!-- Section 2 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제2조 (서비스 제공 방식)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 space-y-4 text-sm">
<div>
<p class="text-terminal-amber font-bold mb-2">// 1. 텔레그램 봇 기반 서비스</p>
<p class="text-terminal-muted pl-4">- 모든 고객 상호작용은 텔레그램 플랫폼을 통해 이루어집니다</p>
<p class="text-terminal-muted pl-4">- 텔레그램 계정 정보는 텔레그램에서 관리됩니다</p>
<p class="text-terminal-muted pl-4">- 회사는 텔레그램 사용자 ID만 일시적으로 참조합니다</p>
</div>
<div>
<p class="text-terminal-amber font-bold mb-2">// 2. 결제 처리</p>
<p class="text-terminal-muted pl-4">- 결제는 외부 결제 대행사를 통해 처리됩니다</p>
<p class="text-terminal-muted pl-4">- 회사는 결제 정보를 직접 수집/저장하지 않습니다</p>
</div>
<div>
<p class="text-terminal-amber font-bold mb-2">// 3. 정적 웹사이트</p>
<p class="text-terminal-muted pl-4">- 쿠키, 트래킹 코드, 분석 도구 <span class="text-primary">미사용</span></p>
<p class="text-terminal-muted pl-4">- 회원가입/로그인 기능 <span class="text-primary">없음</span></p>
</div>
</div>
</section>
<!-- Section 3 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제3조 (서버 운영 관련)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p class="text-terminal-muted mb-2"># 기술적으로 생성될 수 있는 정보:</p>
<p><span class="text-terminal-cyan">server_logs</span> = 고객 서버 내에만 존재, 고객이 직접 관리</p>
<p><span class="text-terminal-cyan">network_logs</span> = DDoS 방어/보안 목적으로 IP 일시 기록, 자동 삭제</p>
</div>
</section>
<!-- Section 4 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제4조 (제3자 서비스)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p class="text-terminal-muted mb-3"># 적용되는 제3자 개인정보처리방침:</p>
<p><span class="text-primary">→</span> <a href="https://telegram.org/privacy" target="_blank" class="text-terminal-cyan hover:underline">Telegram Privacy Policy</a> <span class="text-terminal-muted">// 봇 서비스 이용 시</span></p>
<p><span class="text-primary">→</span> <a href="https://www.cloudflare.com/privacypolicy/" target="_blank" class="text-terminal-cyan hover:underline">Cloudflare Privacy Policy</a> <span class="text-terminal-muted">// 웹사이트 호스팅</span></p>
</div>
</section>
<!-- Section 5 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제5조 (이용자의 권리)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">✓</span> 회사는 개인정보를 보유하지 않으므로 별도의 열람/정정/삭제 절차 불필요</p>
<p><span class="text-primary">✓</span> 텔레그램 계정 정보 권리 행사는 텔레그램에 직접 요청</p>
<p><span class="text-primary">✓</span> 서버 데이터는 고객이 직접 관리, 해지 시 완전 삭제</p>
</div>
</section>
<!-- Section 6 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제6조 (문의처)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p><span class="text-terminal-cyan">company</span> = <span class="text-primary">"LIBEHAIM Inc."</span></p>
<p><span class="text-terminal-cyan">ceo</span> = <span class="text-primary">"Taro Tanaka"</span></p>
<p><span class="text-terminal-cyan">address</span> = <span class="text-primary">"#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo"</span></p>
<p><span class="text-terminal-cyan">support</span> = <a href="https://t.me/AnvilForgeBot" class="text-primary hover:underline">"@AnvilForgeBot"</a></p>
</div>
</section>
<!-- Section 7 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제7조 (방침 변경)</h2>
<div class="text-terminal-text pl-4">
<p>이 개인정보처리방침은 <span class="text-primary">2026년 1월 20일</span>부터 적용됩니다.</p>
<p class="text-terminal-muted">변경 시 서비스 내 공지를 통해 안내드립니다.</p>
</div>
</section>
<!-- Back -->
<div class="pt-6 border-t border-terminal-border">
<a href="/" class="text-primary hover:underline text-sm">$ cd / # 메인으로 돌아가기</a>
</div> </div>
</footer> </div>
<!-- Vim Status Bar -->
<div class="bg-primary text-background-dark text-xs font-bold py-1 px-4 flex justify-between">
<div class="flex gap-4">
<span class="bg-background-dark/20 px-2 rounded text-white/90">NORMAL</span>
<span>privacy.md</span>
</div>
<div class="flex gap-4">
<span>utf-8</span>
<span>100%</span>
</div>
</div>
</div>
<footer class="mt-6 text-terminal-muted text-xs text-center opacity-50">
© 2026 LIBEHAIM Inc. exit 0
</footer>
</body> </body>
</html> </html>

523
sla.html
View File

@@ -1,304 +1,247 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ko" class="scroll-smooth"> <html class="dark scroll-smooth" lang="ko">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>서비스 수준 협약 (SLA) - Anvil Hosting</title> <title>서비스 수준 협약 (SLA) - Anvil Hosting</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Tailwind CSS --> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link rel="stylesheet" href="style.css"> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<!-- Fonts --> <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="fonts.css"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Favicon --> <script>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230ea5e9' rx='20' width='100' height='100'/><text x='50' y='70' font-size='60' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='bold'>A</text></svg>"> tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#3fb950",
"background-dark": "#0d1117",
"terminal-bg": "#010409",
"terminal-border": "#30363d",
"terminal-text": "#c9d1d9",
"terminal-muted": "#8b949e",
"terminal-cyan": "#58a6ff",
"terminal-amber": "#d29922",
"terminal-red": "#ff7b72",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"mono": ["Fira Code", "monospace"],
},
},
},
}
</script>
</head> </head>
<body class="font-sans antialiased bg-dark-900 text-slate-300"> <body class="bg-background-dark text-terminal-text font-mono min-h-screen flex flex-col p-4 md:p-8">
<!-- Header --> <div class="w-full max-w-4xl mx-auto bg-background-dark border border-terminal-border rounded-lg overflow-hidden flex flex-col">
<nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-dark-900/80 backdrop-blur-md"> <!-- Window Title Bar -->
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> <div class="bg-[#161b22] px-4 py-3 flex items-center justify-between border-b border-terminal-border">
<a href="/" class="flex items-center gap-2 group"> <div class="flex items-center gap-2">
<div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold font-mono text-xl shadow-lg shadow-brand-500/20">A</div> <div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
<span class="font-bold text-lg tracking-tight">Anvil<span class="text-brand-400">.Hosting</span></span> <div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
</a> <div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
<a href="/" class="text-sm text-slate-400 hover:text-white transition">← 메인으로</a>
</div> </div>
</nav> <span class="text-xs text-terminal-muted">cat /etc/anvil/sla.md</span>
<a href="/" class="text-xs text-terminal-muted hover:text-primary transition">cd ~</a>
</div>
<!-- Main Content --> <!-- Content -->
<main class="pt-24 pb-16"> <div class="p-6 md:p-8 space-y-8">
<div class="max-w-4xl mx-auto px-6"> <!-- Header -->
<div class="border-b border-terminal-border pb-6">
<!-- Page Header --> <div class="flex items-center gap-2 text-sm text-terminal-muted mb-4">
<div class="mb-12"> <span class="text-primary">$</span> cat sla.md
<h1 class="text-4xl md:text-5xl font-bold mb-4">서비스 수준 협약 (SLA)</h1>
<p class="text-slate-400">Service Level Agreement - 최종 수정일: 2026년 1월 20일</p>
</div> </div>
<h1 class="text-2xl md:text-3xl font-display font-bold text-white mb-2"># 서비스 수준 협약 (SLA)</h1>
<!-- SLA Content --> <p class="text-terminal-muted text-sm">// Service Level Agreement - 최종 수정일: 2026년 1월 20일</p>
<div class="glass-card p-8 md:p-12 rounded-2xl space-y-12">
<!-- Section 1 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제1조 (목적)</h2>
<p class="text-slate-300 leading-relaxed">
본 서비스 수준 협약(Service Level Agreement, 이하 "SLA")은 LIBEHAIM Inc.(이하 "회사")가 제공하는 Anvil Hosting 서비스(이하 "서비스")의 품질 수준 및 장애 발생 시 보상에 관한 사항을 규정함을 목적으로 합니다.
</p>
</section>
<!-- Section 2 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제2조 (가용성 보장)</h2>
<div class="space-y-4 text-slate-300 leading-relaxed">
<p>회사는 다음과 같은 가용성(Uptime) 수준을 보장합니다.</p>
<div class="glass-panel p-6 rounded-xl border border-brand-500/20">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<div class="text-brand-400 font-bold text-lg mb-2">Standard 플랜</div>
<div class="text-3xl font-bold text-white">99.5%</div>
<div class="text-sm text-slate-400 mt-1">월간 최대 3.6시간 다운타임</div>
</div>
<div>
<div class="text-brand-400 font-bold text-lg mb-2">Pro/Business 플랜</div>
<div class="text-3xl font-bold text-white">99.9%</div>
<div class="text-sm text-slate-400 mt-1">월간 최대 43분 다운타임</div>
</div>
</div>
</div>
<p class="mt-4"><strong class="text-white">가용성 측정 방식</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>가용성은 월 단위로 측정됩니다.</li>
<li>가용성(%) = (월간 총 시간 - 다운타임) / 월간 총 시간 × 100</li>
<li>다운타임은 인스턴스가 정상적으로 작동하지 않는 시간을 의미합니다.</li>
</ul>
</div>
</section>
<!-- Section 3 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제3조 (네트워크 성능 보장)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>회사는 다음과 같은 네트워크 성능을 보장합니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li><strong class="text-white">네트워크 대역폭:</strong> 각 플랜에서 명시된 대역폭을 보장합니다.</li>
<li><strong class="text-white">패킷 손실률:</strong> 1% 이하</li>
<li><strong class="text-white">네트워크 지연시간:</strong>
<ul class="list-circle list-inside ml-8 space-y-1 mt-2">
<li>서울-도쿄: 40ms 이하</li>
<li>서울-싱가포르: 70ms 이하</li>
<li>서울-홍콩: 50ms 이하</li>
</ul>
</li>
</ul>
</div>
</section>
<!-- Section 4 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제4조 (장애 대응 시간)</h2>
<div class="space-y-4 text-slate-300 leading-relaxed">
<p>회사는 장애 발생 시 다음과 같은 대응 시간을 준수합니다.</p>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b border-slate-700">
<th class="py-3 px-4 text-white font-bold">장애 등급</th>
<th class="py-3 px-4 text-white font-bold">정의</th>
<th class="py-3 px-4 text-white font-bold">초기 응답</th>
<th class="py-3 px-4 text-white font-bold">복구 목표</th>
</tr>
</thead>
<tbody class="text-sm">
<tr class="border-b border-slate-700/50">
<td class="py-3 px-4 font-bold text-red-400">긴급 (P1)</td>
<td class="py-3 px-4">전체 서비스 중단</td>
<td class="py-3 px-4">15분 이내</td>
<td class="py-3 px-4">1시간 이내</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-3 px-4 font-bold text-orange-400">높음 (P2)</td>
<td class="py-3 px-4">주요 기능 장애</td>
<td class="py-3 px-4">30분 이내</td>
<td class="py-3 px-4">4시간 이내</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-3 px-4 font-bold text-yellow-400">보통 (P3)</td>
<td class="py-3 px-4">부분 기능 장애</td>
<td class="py-3 px-4">1시간 이내</td>
<td class="py-3 px-4">24시간 이내</td>
</tr>
<tr>
<td class="py-3 px-4 font-bold text-green-400">낮음 (P4)</td>
<td class="py-3 px-4">일반 문의/요청</td>
<td class="py-3 px-4">4시간 이내</td>
<td class="py-3 px-4">72시간 이내</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4 text-sm text-slate-400">
* 초기 응답: 장애 접수 후 담당자의 첫 응답 시간<br>
* 복구 목표: 장애가 완전히 해결되어 정상 서비스가 재개되는 목표 시간
</p>
</div>
</section>
<!-- Section 5 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제5조 (보상 정책)</h2>
<div class="space-y-4 text-slate-300 leading-relaxed">
<p>회사의 귀책사유로 인한 서비스 가용성 미달 시 다음과 같은 보상을 제공합니다.</p>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b border-slate-700">
<th class="py-3 px-4 text-white font-bold">월간 가용성</th>
<th class="py-3 px-4 text-white font-bold">크레딧 비율</th>
</tr>
</thead>
<tbody class="text-sm">
<tr class="border-b border-slate-700/50">
<td class="py-3 px-4">99.0% ~ 99.5% 미만</td>
<td class="py-3 px-4 text-brand-400 font-bold">10%</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-3 px-4">95.0% ~ 99.0% 미만</td>
<td class="py-3 px-4 text-brand-400 font-bold">25%</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-3 px-4">90.0% ~ 95.0% 미만</td>
<td class="py-3 px-4 text-brand-400 font-bold">50%</td>
</tr>
<tr>
<td class="py-3 px-4">90.0% 미만</td>
<td class="py-3 px-4 text-brand-400 font-bold">100%</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4"><strong class="text-white">크레딧 지급 방식</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>크레딧은 해당 월 서비스 이용료를 기준으로 산정됩니다.</li>
<li>크레딧은 다음 달 이용료에서 자동으로 차감됩니다.</li>
<li>보상 신청은 장애 발생 익월 말일까지 가능합니다.</li>
<li>크레딧은 현금으로 환급되지 않습니다.</li>
</ul>
</div>
</section>
<!-- Section 6 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제6조 (제외 사항)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>다음의 경우 SLA 적용 대상에서 제외됩니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li><strong class="text-white">계획된 유지보수:</strong> 사전 공지된 시스템 점검 및 업그레이드 작업</li>
<li><strong class="text-white">이용자 귀책사유:</strong> 이용자의 잘못된 설정, 코드 오류, 약관 위반 등</li>
<li><strong class="text-white">외부 요인:</strong> DDoS 공격, 천재지변, 전쟁, 테러, ISP 장애, 외부 서비스 장애 등</li>
<li><strong class="text-white">베타 서비스:</strong> 명시적으로 '베타' 또는 '테스트'로 표시된 서비스</li>
<li><strong class="text-white">무료 플랜:</strong> 무료 또는 체험 플랜 이용자</li>
</ul>
</div>
</section>
<!-- Section 7 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제7조 (백업 및 데이터 보존)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p><strong class="text-white">1. 자동 백업</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>Pro 플랜 이상: 일일 자동 백업 제공 (7일 보관)</li>
<li>Starter 플랜: 선택적 백업 옵션 제공 (별도 요금)</li>
<li>백업 데이터는 별도 스토리지에 안전하게 보관됩니다.</li>
</ul>
<p class="mt-4"><strong class="text-white">2. 데이터 복구</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>회사의 귀책사유로 인한 데이터 손실 시 무상 복구 지원</li>
<li>이용자 귀책사유로 인한 데이터 손실 시 복구 불가 (백업본이 있는 경우 제외)</li>
</ul>
<p class="mt-4 text-sm text-amber-400">
⚠️ 중요: 회사는 백업 서비스를 제공하지만, 이용자는 자신의 중요 데이터에 대해 독립적인 백업을 유지할 책임이 있습니다.
</p>
</div>
</section>
<!-- Section 8 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제8조 (모니터링 및 보고)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p><strong class="text-white">1. 실시간 모니터링</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>회사는 24시간 서비스 상태를 모니터링합니다.</li>
<li>이용자는 텔레그램 봇을 통해 실시간 서버 상태를 확인할 수 있습니다.</li>
</ul>
<p class="mt-4"><strong class="text-white">2. 장애 알림</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>긴급 장애 발생 시 텔레그램을 통해 즉시 알림 발송</li>
<li>계획된 유지보수는 최소 48시간 전 사전 공지</li>
</ul>
<p class="mt-4"><strong class="text-white">3. 월간 리포트</strong></p>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>Business 플랜 이상: 월간 가용성 보고서 제공</li>
<li>리포트 포함 항목: 가용성 통계, 장애 이력, 성능 지표</li>
</ul>
</div>
</section>
<!-- Section 9 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제9조 (SLA 변경)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>회사는 서비스 개선 또는 운영 환경 변화에 따라 SLA를 변경할 수 있습니다.</p>
<p>변경 시 최소 30일 전에 공지하며, 중요한 변경사항은 이메일 또는 텔레그램을 통해 개별 통지합니다.</p>
</div>
</section>
<!-- Section 10 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제10조 (연락처)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>SLA 관련 문의 및 보상 신청은 아래 연락처로 문의하시기 바랍니다.</p>
<ul class="list-none ml-4 space-y-2">
<li><strong class="text-white">회사명:</strong> LIBEHAIM Inc.</li>
<li><strong class="text-white">대표:</strong> Taro Tanaka</li>
<li><strong class="text-white">주소:</strong> #202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</li>
<li><strong class="text-white">서비스 URL:</strong> <a href="https://hosting.anvil.it.com" class="text-brand-400 hover:underline">https://hosting.anvil.it.com</a></li>
<li><strong class="text-white">기술 지원:</strong> <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="text-brand-400 hover:underline">@AnvilForgeBot</a> (Telegram)</li>
</ul>
</div>
</section>
</div>
<!-- Back to Home -->
<div class="mt-12 text-center">
<a href="/" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 transition">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
메인 페이지로 돌아가기
</a>
</div>
</div> </div>
</main>
<!-- Footer --> <!-- Section 1 -->
<footer class="py-8 border-t border-white/5"> <section class="space-y-3">
<div class="max-w-7xl mx-auto px-6 text-center text-sm text-slate-500"> <h2 class="text-lg font-display font-bold text-terminal-cyan">## 제1조 (목적)</h2>
<p>© 2026 LIBEHAIM Inc. All rights reserved.</p> <p class="text-terminal-text leading-relaxed pl-4 border-l-2 border-terminal-border">
본 SLA는 LIBEHAIM Inc.가 제공하는 Anvil Hosting 서비스의 품질 수준 및 장애 발생 시 보상에 관한 사항을 규정합니다.
</p>
</section>
<!-- Section 2 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제2조 (가용성 보장)</h2>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-terminal-bg rounded border border-terminal-border p-4">
<p class="text-terminal-amber font-bold mb-2">Standard 플랜</p>
<p class="text-3xl font-bold text-primary">99.5%</p>
<p class="text-terminal-muted text-sm mt-1">// 월간 최대 3.6시간 다운타임</p>
</div>
<div class="bg-terminal-bg rounded border border-primary/30 p-4">
<p class="text-terminal-amber font-bold mb-2">Pro/Business 플랜</p>
<p class="text-3xl font-bold text-primary">99.9%</p>
<p class="text-terminal-muted text-sm mt-1">// 월간 최대 43분 다운타임</p>
</div>
</div>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm mt-4">
<p class="text-terminal-muted"># 가용성 계산:</p>
<p class="text-terminal-cyan mt-2">uptime = (total_hours - downtime) / total_hours * 100</p>
</div>
</section>
<!-- Section 3 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제3조 (네트워크 성능 보장)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p><span class="text-terminal-cyan">bandwidth</span> = <span class="text-primary">"플랜 명시 대역폭 보장"</span></p>
<p><span class="text-terminal-cyan">packet_loss</span> = <span class="text-primary">"&lt; 1%"</span></p>
<p><span class="text-terminal-cyan">latency</span> = <span class="text-terminal-amber">{</span></p>
<p class="pl-4"><span class="text-terminal-cyan">"seoul-tokyo"</span>: <span class="text-primary">"&lt; 40ms"</span>,</p>
<p class="pl-4"><span class="text-terminal-cyan">"seoul-singapore"</span>: <span class="text-primary">"&lt; 70ms"</span>,</p>
<p class="pl-4"><span class="text-terminal-cyan">"seoul-hongkong"</span>: <span class="text-primary">"&lt; 50ms"</span></p>
<p><span class="text-terminal-amber">}</span></p>
</div>
</section>
<!-- Section 4 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제4조 (장애 대응 시간)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border overflow-hidden text-sm">
<div class="grid grid-cols-4 gap-px bg-terminal-border">
<div class="bg-[#161b22] p-3 font-bold text-white">등급</div>
<div class="bg-[#161b22] p-3 font-bold text-white">정의</div>
<div class="bg-[#161b22] p-3 font-bold text-white">초기응답</div>
<div class="bg-[#161b22] p-3 font-bold text-white">복구목표</div>
</div>
<div class="grid grid-cols-4 gap-px bg-terminal-border">
<div class="bg-terminal-bg p-3 text-terminal-red font-bold">P1 긴급</div>
<div class="bg-terminal-bg p-3">전체 중단</div>
<div class="bg-terminal-bg p-3">15분</div>
<div class="bg-terminal-bg p-3">1시간</div>
</div>
<div class="grid grid-cols-4 gap-px bg-terminal-border">
<div class="bg-terminal-bg p-3 text-terminal-amber font-bold">P2 높음</div>
<div class="bg-terminal-bg p-3">주요 기능</div>
<div class="bg-terminal-bg p-3">30분</div>
<div class="bg-terminal-bg p-3">4시간</div>
</div>
<div class="grid grid-cols-4 gap-px bg-terminal-border">
<div class="bg-terminal-bg p-3 text-yellow-400 font-bold">P3 보통</div>
<div class="bg-terminal-bg p-3">부분 장애</div>
<div class="bg-terminal-bg p-3">1시간</div>
<div class="bg-terminal-bg p-3">24시간</div>
</div>
<div class="grid grid-cols-4 gap-px bg-terminal-border">
<div class="bg-terminal-bg p-3 text-primary font-bold">P4 낮음</div>
<div class="bg-terminal-bg p-3">일반 문의</div>
<div class="bg-terminal-bg p-3">4시간</div>
<div class="bg-terminal-bg p-3">72시간</div>
</div>
</div>
</section>
<!-- Section 5 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제5조 (보상 정책)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border overflow-hidden text-sm">
<div class="grid grid-cols-2 gap-px bg-terminal-border">
<div class="bg-[#161b22] p-3 font-bold text-white">월간 가용성</div>
<div class="bg-[#161b22] p-3 font-bold text-white">크레딧</div>
</div>
<div class="grid grid-cols-2 gap-px bg-terminal-border">
<div class="bg-terminal-bg p-3">99.0% ~ 99.5%</div>
<div class="bg-terminal-bg p-3 text-primary font-bold">10%</div>
</div>
<div class="grid grid-cols-2 gap-px bg-terminal-border">
<div class="bg-terminal-bg p-3">95.0% ~ 99.0%</div>
<div class="bg-terminal-bg p-3 text-primary font-bold">25%</div>
</div>
<div class="grid grid-cols-2 gap-px bg-terminal-border">
<div class="bg-terminal-bg p-3">90.0% ~ 95.0%</div>
<div class="bg-terminal-bg p-3 text-primary font-bold">50%</div>
</div>
<div class="grid grid-cols-2 gap-px bg-terminal-border">
<div class="bg-terminal-bg p-3">&lt; 90.0%</div>
<div class="bg-terminal-bg p-3 text-primary font-bold">100%</div>
</div>
</div>
<div class="text-sm text-terminal-muted pl-4 mt-2">
<p>// 크레딧은 다음 달 이용료에서 자동 차감</p>
<p>// 보상 신청: 장애 발생 익월 말일까지</p>
</div>
</section>
<!-- Section 6 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제6조 (제외 사항)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p class="text-terminal-muted mb-2"># SLA 적용 제외:</p>
<p class="text-terminal-muted"><span class="text-terminal-red">✗</span> 계획된 유지보수 (사전 공지된 점검)</p>
<p class="text-terminal-muted"><span class="text-terminal-red">✗</span> 이용자 귀책사유 (잘못된 설정, 코드 오류)</p>
<p class="text-terminal-muted"><span class="text-terminal-red">✗</span> 외부 요인 (DDoS, 천재지변, ISP 장애)</p>
<p class="text-terminal-muted"><span class="text-terminal-red">✗</span> 베타/테스트 서비스</p>
<p class="text-terminal-muted"><span class="text-terminal-red">✗</span> 무료/체험 플랜</p>
</div>
</section>
<!-- Section 7 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제7조 (백업 및 데이터 보존)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">Pro+</span> 일일 자동 백업 (7일 보관)</p>
<p><span class="text-terminal-muted">Starter</span> 선택적 백업 (별도 요금)</p>
<p class="text-terminal-amber mt-3">⚠️ 중요 데이터는 독립적인 백업을 유지하세요</p>
</div>
</section>
<!-- Section 8 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제8조 (모니터링 및 보고)</h2>
<div class="space-y-2 text-terminal-text pl-4 text-sm">
<p><span class="text-primary">✓</span> 24시간 서비스 상태 모니터링</p>
<p><span class="text-primary">✓</span> 텔레그램 봇으로 실시간 상태 확인</p>
<p><span class="text-primary">✓</span> 긴급 장애 시 텔레그램 알림 발송</p>
<p><span class="text-primary">✓</span> 계획된 유지보수 48시간 전 사전 공지</p>
<p><span class="text-primary">✓</span> Business+ 월간 가용성 리포트 제공</p>
</div>
</section>
<!-- Section 9-10 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제9-10조 (변경 및 연락처)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p class="text-terminal-muted mb-3"># SLA 변경 시 30일 전 공지</p>
<p><span class="text-terminal-cyan">company</span> = <span class="text-primary">"LIBEHAIM Inc."</span></p>
<p><span class="text-terminal-cyan">ceo</span> = <span class="text-primary">"Taro Tanaka"</span></p>
<p><span class="text-terminal-cyan">address</span> = <span class="text-primary">"#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo"</span></p>
<p><span class="text-terminal-cyan">url</span> = <a href="https://hosting.anvil.it.com" class="text-primary hover:underline">"https://hosting.anvil.it.com"</a></p>
<p><span class="text-terminal-cyan">support</span> = <a href="https://t.me/AnvilForgeBot" class="text-primary hover:underline">"@AnvilForgeBot"</a></p>
</div>
</section>
<!-- Back -->
<div class="pt-6 border-t border-terminal-border">
<a href="/" class="text-primary hover:underline text-sm">$ cd / # 메인으로 돌아가기</a>
</div> </div>
</footer> </div>
<!-- Vim Status Bar -->
<div class="bg-primary text-background-dark text-xs font-bold py-1 px-4 flex justify-between">
<div class="flex gap-4">
<span class="bg-background-dark/20 px-2 rounded text-white/90">NORMAL</span>
<span>sla.md</span>
</div>
<div class="flex gap-4">
<span>utf-8</span>
<span>100%</span>
</div>
</div>
</div>
<footer class="mt-6 text-terminal-muted text-xs text-center opacity-50">
© 2026 LIBEHAIM Inc. exit 0
</footer>
</body> </body>
</html> </html>

378
terms.html
View File

@@ -1,195 +1,211 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ko" class="scroll-smooth"> <html class="dark scroll-smooth" lang="ko">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>이용약관 - Anvil Hosting</title> <title>이용약관 - Anvil Hosting</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Tailwind CSS --> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link rel="stylesheet" href="style.css"> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<!-- Fonts --> <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="fonts.css"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Favicon --> <script>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230ea5e9' rx='20' width='100' height='100'/><text x='50' y='70' font-size='60' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='bold'>A</text></svg>"> tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#3fb950",
"background-dark": "#0d1117",
"terminal-bg": "#010409",
"terminal-border": "#30363d",
"terminal-text": "#c9d1d9",
"terminal-muted": "#8b949e",
"terminal-cyan": "#58a6ff",
"terminal-amber": "#d29922",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"mono": ["Fira Code", "monospace"],
},
},
},
}
</script>
<style>
.line-num { color: #484f58; user-select: none; min-width: 2.5rem; text-align: right; padding-right: 1rem; }
</style>
</head> </head>
<body class="font-sans antialiased bg-dark-900 text-slate-300"> <body class="bg-background-dark text-terminal-text font-mono min-h-screen flex flex-col p-4 md:p-8">
<!-- Header --> <div class="w-full max-w-4xl mx-auto bg-background-dark border border-terminal-border rounded-lg overflow-hidden flex flex-col">
<nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-dark-900/80 backdrop-blur-md"> <!-- Window Title Bar -->
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> <div class="bg-[#161b22] px-4 py-3 flex items-center justify-between border-b border-terminal-border">
<a href="/" class="flex items-center gap-2 group"> <div class="flex items-center gap-2">
<div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold font-mono text-xl shadow-lg shadow-brand-500/20">A</div> <div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
<span class="font-bold text-lg tracking-tight">Anvil<span class="text-brand-400">.Hosting</span></span> <div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
</a> <div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
<a href="/" class="text-sm text-slate-400 hover:text-white transition">← 메인으로</a>
</div> </div>
</nav> <span class="text-xs text-terminal-muted">cat /etc/anvil/terms.md</span>
<a href="/" class="text-xs text-terminal-muted hover:text-primary transition">cd ~</a>
</div>
<!-- Main Content --> <!-- Content -->
<main class="pt-24 pb-16"> <div class="p-6 md:p-8 space-y-8">
<div class="max-w-4xl mx-auto px-6"> <!-- Header -->
<div class="border-b border-terminal-border pb-6">
<!-- Page Header --> <div class="flex items-center gap-2 text-sm text-terminal-muted mb-4">
<div class="mb-12"> <span class="text-primary">$</span> cat terms.md
<h1 class="text-4xl md:text-5xl font-bold mb-4">이용약관</h1>
<p class="text-slate-400">최종 수정일: 2026년 1월 20일</p>
</div> </div>
<h1 class="text-2xl md:text-3xl font-display font-bold text-white mb-2"># 이용약관</h1>
<!-- Terms Content --> <p class="text-terminal-muted text-sm">// 최종 수정일: 2026년 1월 20일</p>
<div class="glass-card p-8 md:p-12 rounded-2xl space-y-12">
<!-- Section 1 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제1조 (목적)</h2>
<p class="text-slate-300 leading-relaxed">
본 약관은 LIBEHAIM Inc.(이하 "회사")가 제공하는 Anvil Hosting 서비스(이하 "서비스")의 이용과 관련하여 회사와 이용자 간의 권리, 의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로 합니다.
</p>
</section>
<!-- Section 2 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제2조 (정의)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p><strong class="text-white">1. "서비스"</strong>란 회사가 제공하는 클라우드 컨테이너 호스팅 및 관련 서비스 일체를 의미합니다.</p>
<p><strong class="text-white">2. "이용자"</strong>란 본 약관에 동의하고 회사가 제공하는 서비스를 이용하는 개인 또는 법인을 의미합니다.</p>
<p><strong class="text-white">3. "계정"</strong>이란 이용자가 서비스를 이용하기 위해 회사가 부여한 고유 식별정보를 의미합니다.</p>
<p><strong class="text-white">4. "인스턴스"</strong>란 이용자가 서비스를 통해 생성하는 가상 서버 환경을 의미합니다.</p>
</div>
</section>
<!-- Section 3 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제3조 (약관의 효력 및 변경)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 본 약관은 서비스를 이용하고자 하는 모든 이용자에 대하여 그 효력을 발생합니다.</p>
<p>2. 회사는 필요한 경우 관련 법령을 위배하지 않는 범위에서 본 약관을 변경할 수 있으며, 변경된 약관은 서비스 내 공지사항을 통해 공지됩니다.</p>
<p>3. 이용자는 변경된 약관에 동의하지 않을 경우 서비스 이용을 중단하고 탈퇴할 수 있습니다.</p>
</div>
</section>
<!-- Section 4 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제4조 (회원가입 및 계정 관리)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 서비스 이용을 위해서는 회사가 정한 절차에 따라 회원가입을 완료해야 합니다.</p>
<p>2. 이용자는 계정정보의 관리 책임을 지며, 타인에게 자신의 계정을 양도하거나 대여할 수 없습니다.</p>
<p>3. 이용자는 계정정보가 도용되거나 제3자가 사용하고 있음을 인지한 경우 즉시 회사에 통보해야 합니다.</p>
<p>4. 회사는 다음 각 호에 해당하는 경우 회원가입을 거부하거나 사후에 계정을 해지할 수 있습니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li>타인의 정보를 도용한 경우</li>
<li>허위 정보를 기재한 경우</li>
<li>법령 또는 본 약관을 위반한 경우</li>
</ul>
</div>
</section>
<!-- Section 5 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제5조 (서비스 이용료 및 결제)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 서비스 이용료는 회사가 정한 요금표에 따르며, 웹사이트 또는 공식 채널을 통해 공지됩니다.</p>
<p>2. 이용자는 선택한 결제 방식(월간/연간)에 따라 서비스 이용료를 납부해야 합니다.</p>
<p>3. 이용료는 VAT가 포함된 금액이며, 결제 시점의 환율에 따라 변동될 수 있습니다.</p>
<p>4. 이용자가 이용료를 납부하지 않을 경우 회사는 서비스 제공을 일시 중단하거나 해지할 수 있습니다.</p>
<p>5. 환불 정책은 다음과 같습니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li>서비스 이용 전: 전액 환불</li>
<li>서비스 이용 후 7일 이내: 사용일수를 제외한 금액 환불</li>
<li>서비스 이용 후 7일 이후: 환불 불가 (단, 회사의 귀책사유가 있는 경우 제외)</li>
</ul>
</div>
</section>
<!-- Section 6 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제6조 (금지 행위)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>이용자는 다음 각 호의 행위를 해서는 안 됩니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li>불법 콘텐츠(아동 학대물, 저작권 침해물 등)의 저장, 배포 또는 전송</li>
<li>스팸 메일 또는 불법 광고 발송</li>
<li>해킹, DDoS 공격 등 타인의 시스템을 공격하는 행위</li>
<li>무단 암호화폐 채굴 행위</li>
<li>과도한 네트워크 트래픽 발생으로 서비스 안정성을 저해하는 행위</li>
<li>회사의 서비스 운영을 방해하는 행위</li>
<li>관련 법령을 위반하는 행위</li>
</ul>
<p>회사는 위반 행위 발견 시 사전 통지 없이 서비스 이용을 제한하거나 계정을 해지할 수 있습니다.</p>
</div>
</section>
<!-- Section 7 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제7조 (서비스 중단 및 해지)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 회사는 다음 각 호의 경우 서비스 제공을 일시 중단할 수 있습니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li>시스템 점검, 보수, 교체 등 기술적 사유</li>
<li>천재지변, 국가비상사태 등 불가항력적 사유</li>
<li>기타 서비스 제공이 어려운 경우</li>
</ul>
<p>2. 이용자는 언제든지 서비스 해지를 요청할 수 있으며, 회사는 즉시 처리합니다.</p>
<p>3. 서비스 해지 시 이용자의 모든 데이터는 삭제되며, 복구되지 않습니다.</p>
</div>
</section>
<!-- Section 8 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제8조 (면책 조항)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 회사는 천재지변, 전쟁, 테러 등 불가항력적 사유로 인한 서비스 중단에 대해 책임을 지지 않습니다.</p>
<p>2. 회사는 이용자의 귀책사유로 인한 서비스 이용 장애에 대해 책임을 지지 않습니다.</p>
<p>3. 회사는 이용자가 서비스를 통해 저장하거나 전송한 데이터의 내용에 대해 책임을 지지 않습니다.</p>
<p>4. 이용자는 자신의 데이터에 대한 백업 책임을 지며, 회사는 데이터 손실에 대해 책임을 지지 않습니다. (단, SLA에서 정한 경우 제외)</p>
</div>
</section>
<!-- Section 9 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제9조 (분쟁 해결)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 본 약관과 관련된 분쟁은 회사와 이용자 간의 협의를 통해 해결합니다.</p>
<p>2. 협의가 이루어지지 않을 경우, 일본 도쿄 지방법원을 전속 관할법원으로 합니다.</p>
<p>3. 본 약관의 해석 및 적용은 대한민국 법령 및 일본 법령을 우선 적용합니다.</p>
</div>
</section>
<!-- Section 10 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제10조 (연락처)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>서비스 관련 문의사항은 아래 연락처로 문의하시기 바랍니다.</p>
<ul class="list-none ml-4 space-y-2">
<li><strong class="text-white">회사명:</strong> LIBEHAIM Inc.</li>
<li><strong class="text-white">대표:</strong> Taro Tanaka</li>
<li><strong class="text-white">주소:</strong> #202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</li>
<li><strong class="text-white">서비스 URL:</strong> <a href="https://hosting.anvil.it.com" class="text-brand-400 hover:underline">https://hosting.anvil.it.com</a></li>
<li><strong class="text-white">고객 지원:</strong> <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="text-brand-400 hover:underline">@AnvilForgeBot</a> (Telegram)</li>
</ul>
</div>
</section>
</div>
<!-- Back to Home -->
<div class="mt-12 text-center">
<a href="/" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 transition">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
메인 페이지로 돌아가기
</a>
</div>
</div> </div>
</main>
<!-- Footer --> <!-- Section 1 -->
<footer class="py-8 border-t border-white/5"> <section class="space-y-3">
<div class="max-w-7xl mx-auto px-6 text-center text-sm text-slate-500"> <h2 class="text-lg font-display font-bold text-terminal-cyan">## 제1조 (목적)</h2>
<p>© 2026 LIBEHAIM Inc. All rights reserved.</p> <p class="text-terminal-text leading-relaxed pl-4 border-l-2 border-terminal-border">
본 약관은 LIBEHAIM Inc.(이하 "회사")가 제공하는 Anvil Hosting 서비스(이하 "서비스")의 이용과 관련하여 회사와 이용자 간의 권리, 의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로 합니다.
</p>
</section>
<!-- Section 2 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제2조 (정의)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm space-y-2">
<div class="flex"><span class="line-num">1</span><span><span class="text-terminal-cyan">"서비스"</span> = 회사가 제공하는 클라우드 컨테이너 호스팅 및 관련 서비스 일체</span></div>
<div class="flex"><span class="line-num">2</span><span><span class="text-terminal-cyan">"이용자"</span> = 본 약관에 동의하고 서비스를 이용하는 개인 또는 법인</span></div>
<div class="flex"><span class="line-num">3</span><span><span class="text-terminal-cyan">"계정"</span> = 이용자가 서비스를 이용하기 위해 부여된 고유 식별정보</span></div>
<div class="flex"><span class="line-num">4</span><span><span class="text-terminal-cyan">"인스턴스"</span> = 이용자가 서비스를 통해 생성하는 가상 서버 환경</span></div>
</div>
</section>
<!-- Section 3 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제3조 (약관의 효력 및 변경)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 본 약관은 서비스를 이용하고자 하는 모든 이용자에 대하여 그 효력을 발생합니다.</p>
<p><span class="text-primary">2.</span> 회사는 필요한 경우 관련 법령을 위배하지 않는 범위에서 본 약관을 변경할 수 있습니다.</p>
<p><span class="text-primary">3.</span> 이용자는 변경된 약관에 동의하지 않을 경우 서비스 이용을 중단하고 탈퇴할 수 있습니다.</p>
</div>
</section>
<!-- Section 4 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제4조 (회원가입 및 계정 관리)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 서비스 이용을 위해서는 회사가 정한 절차에 따라 회원가입을 완료해야 합니다.</p>
<p><span class="text-primary">2.</span> 이용자는 계정정보의 관리 책임을 지며, 타인에게 양도하거나 대여할 수 없습니다.</p>
<p><span class="text-primary">3.</span> 계정 도용 인지 시 즉시 회사에 통보해야 합니다.</p>
<p><span class="text-primary">4.</span> 회원가입 거부/해지 사유:</p>
<div class="bg-terminal-bg rounded p-3 mt-2 text-sm border border-terminal-border">
<p class="text-terminal-amber">- 타인의 정보 도용</p>
<p class="text-terminal-amber">- 허위 정보 기재</p>
<p class="text-terminal-amber">- 법령 또는 약관 위반</p>
</div>
</div>
</section>
<!-- Section 5 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제5조 (서비스 이용료 및 결제)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 서비스 이용료는 회사가 정한 요금표에 따릅니다.</p>
<p><span class="text-primary">2.</span> 이용자는 선택한 결제 방식(월간/연간)에 따라 납부해야 합니다.</p>
<p><span class="text-primary">3.</span> 이용료는 VAT 포함 금액이며, 환율에 따라 변동될 수 있습니다.</p>
<p><span class="text-primary">4.</span> 미납 시 서비스 제공 중단 또는 해지될 수 있습니다.</p>
<p><span class="text-primary">5.</span> 환불 정책:</p>
<div class="bg-terminal-bg rounded p-3 mt-2 text-sm border border-terminal-border">
<p><span class="text-primary">✓</span> 이용 전: <span class="text-primary">전액 환불</span></p>
<p><span class="text-terminal-amber">○</span> 이용 후 7일 이내: <span class="text-terminal-amber">사용일수 제외 환불</span></p>
<p><span class="text-terminal-muted">✗</span> 이용 후 7일 이후: <span class="text-terminal-muted">환불 불가</span></p>
</div>
</div>
</section>
<!-- Section 6 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제6조 (금지 행위)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p class="text-terminal-muted mb-3"># 다음 행위는 금지됩니다:</p>
<p class="text-[#ff7b72]">❌ 불법 콘텐츠 저장/배포/전송</p>
<p class="text-[#ff7b72]">❌ 스팸 메일 또는 불법 광고 발송</p>
<p class="text-[#ff7b72]">❌ 해킹, DDoS 공격 등 시스템 공격</p>
<p class="text-[#ff7b72]">❌ 무단 암호화폐 채굴</p>
<p class="text-[#ff7b72]">❌ 과도한 트래픽으로 서비스 안정성 저해</p>
<p class="text-[#ff7b72]">❌ 서비스 운영 방해</p>
<p class="text-[#ff7b72]">❌ 관련 법령 위반</p>
<p class="text-terminal-amber mt-3">⚠️ 위반 시 사전 통지 없이 서비스 제한/계정 해지</p>
</div>
</section>
<!-- Section 7 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제7조 (서비스 중단 및 해지)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 서비스 중단 사유: 시스템 점검, 천재지변, 불가항력적 사유</p>
<p><span class="text-primary">2.</span> 이용자는 언제든지 서비스 해지를 요청할 수 있습니다.</p>
<p><span class="text-terminal-amber">3.</span> 해지 시 모든 데이터는 삭제되며 복구되지 않습니다.</p>
</div>
</section>
<!-- Section 8 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제8조 (면책 조항)</h2>
<div class="space-y-2 text-terminal-muted pl-4 text-sm">
<p><span class="text-terminal-muted">1.</span> 불가항력적 사유로 인한 서비스 중단 - 면책</p>
<p><span class="text-terminal-muted">2.</span> 이용자 귀책사유로 인한 이용 장애 - 면책</p>
<p><span class="text-terminal-muted">3.</span> 이용자가 저장/전송한 데이터 내용 - 면책</p>
<p><span class="text-terminal-muted">4.</span> 데이터 손실 (SLA 제외) - 면책</p>
</div>
</section>
<!-- Section 9 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제9조 (분쟁 해결)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 분쟁은 회사와 이용자 간 협의를 통해 해결합니다.</p>
<p><span class="text-primary">2.</span> 협의 불가 시 일본 도쿄 지방법원을 전속 관할법원으로 합니다.</p>
<p><span class="text-primary">3.</span> 대한민국 법령 및 일본 법령을 우선 적용합니다.</p>
</div>
</section>
<!-- Section 10 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제10조 (연락처)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p><span class="text-terminal-cyan">company</span> = <span class="text-primary">"LIBEHAIM Inc."</span></p>
<p><span class="text-terminal-cyan">ceo</span> = <span class="text-primary">"Taro Tanaka"</span></p>
<p><span class="text-terminal-cyan">address</span> = <span class="text-primary">"#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo"</span></p>
<p><span class="text-terminal-cyan">url</span> = <a href="https://hosting.anvil.it.com" class="text-primary hover:underline">"https://hosting.anvil.it.com"</a></p>
<p><span class="text-terminal-cyan">support</span> = <a href="https://t.me/AnvilForgeBot" class="text-primary hover:underline">"@AnvilForgeBot"</a></p>
</div>
</section>
<!-- Back -->
<div class="pt-6 border-t border-terminal-border">
<a href="/" class="text-primary hover:underline text-sm">$ cd / # 메인으로 돌아가기</a>
</div> </div>
</footer> </div>
<!-- Vim Status Bar -->
<div class="bg-primary text-background-dark text-xs font-bold py-1 px-4 flex justify-between">
<div class="flex gap-4">
<span class="bg-background-dark/20 px-2 rounded text-white/90">NORMAL</span>
<span>terms.md</span>
</div>
<div class="flex gap-4">
<span>utf-8</span>
<span>100%</span>
</div>
</div>
</div>
<footer class="mt-6 text-terminal-muted text-xs text-center opacity-50">
© 2026 LIBEHAIM Inc. exit 0
</footer>
</body> </body>
</html> </html>