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

523
sla.html
View File

@@ -1,304 +1,247 @@
<!DOCTYPE html>
<html lang="ko" class="scroll-smooth">
<html class="dark scroll-smooth" lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>서비스 수준 협약 (SLA) - Anvil Hosting</title>
<!-- Tailwind CSS -->
<link rel="stylesheet" href="style.css">
<!-- Fonts -->
<link rel="stylesheet" href="fonts.css">
<!-- Favicon -->
<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>">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<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"/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"/>
<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>
<script>
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>
<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 -->
<nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-dark-900/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
<a href="/" class="flex items-center gap-2 group">
<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>
<span class="font-bold text-lg tracking-tight">Anvil<span class="text-brand-400">.Hosting</span></span>
</a>
<a href="/" class="text-sm text-slate-400 hover:text-white transition">← 메인으로</a>
<div class="w-full max-w-4xl mx-auto bg-background-dark border border-terminal-border rounded-lg overflow-hidden flex flex-col">
<!-- Window Title Bar -->
<div class="bg-[#161b22] px-4 py-3 flex items-center justify-between border-b border-terminal-border">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></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 -->
<main class="pt-24 pb-16">
<div class="max-w-4xl mx-auto px-6">
<!-- Page Header -->
<div class="mb-12">
<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>
<!-- Content -->
<div class="p-6 md:p-8 space-y-8">
<!-- Header -->
<div class="border-b border-terminal-border pb-6">
<div class="flex items-center gap-2 text-sm text-terminal-muted mb-4">
<span class="text-primary">$</span> cat sla.md
</div>
<!-- SLA Content -->
<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>
<h1 class="text-2xl md:text-3xl font-display font-bold text-white mb-2"># 서비스 수준 협약 (SLA)</h1>
<p class="text-terminal-muted text-sm">// Service Level Agreement - 최종 수정일: 2026년 1월 20일</p>
</div>
</main>
<!-- Footer -->
<footer class="py-8 border-t border-white/5">
<div class="max-w-7xl mx-auto px-6 text-center text-sm text-slate-500">
<p>© 2026 LIBEHAIM Inc. All rights reserved.</p>
<!-- Section 1 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제1조 (목적)</h2>
<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>
</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>
</html>