From 18042eab09308eab3be579a70ea841fcc7c46ea3 Mon Sep 17 00:00:00 2001
From: kappa <kappa@inouter.com>
Date: Tue, 20 Jan 2026 02:00:24 +0900
Subject: [PATCH] Switch to dark mode theme and remove tilted elements

- Change color scheme to dark mode (navy blue background)
- Update all card, button, and form styles for dark theme
- Remove rotation transforms from all elements for cleaner look
- Adjust text colors for proper contrast on dark background

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 index.html | 164 ++++++++++++++++++++++++++---------------------------
 1 file changed, 80 insertions(+), 84 deletions(-)

diff --git a/index.html b/index.html
index 8cb8980..5831112 100644
--- a/index.html
+++ b/index.html
@@ -18,16 +18,16 @@
             hand: ['Caveat', 'cursive'],
           },
           colors: {
-            cream: '#fffce8',
+            cream: '#0f172a',
             sketch: {
-              bg: '#fffce8',
-              line: '#1e1e1e',
-              blue: '#1971c2',
-              red: '#e03131',
-              green: '#2f9e44',
-              orange: '#e8590c',
-              purple: '#9c36b5',
-              yellow: '#ffc078',
+              bg: '#0f172a',
+              line: '#e2e8f0',
+              blue: '#3b82f6',
+              red: '#ef4444',
+              green: '#22c55e',
+              orange: '#f97316',
+              purple: '#a855f7',
+              yellow: '#fbbf24',
             }
           }
         },
@@ -37,50 +37,48 @@
   <style>
     html { scroll-behavior: smooth; }
     body {
-      background-color: #fffce8;
+      background-color: #0f172a;
       background-image:
-        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
+        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
       background-size: 20px 20px;
     }
 
     /* 손그림 테두리 스타일 */
     .sketch-border {
       position: relative;
-      background: #fff;
-      border: 2px solid #1e1e1e;
+      background: #1e293b;
+      border: 2px solid #334155;
       border-radius: 3px;
-      transform: rotate(-0.5deg);
-      box-shadow: 4px 4px 0 #1e1e1e;
-    }
-    .sketch-border:nth-child(even) {
-      transform: rotate(0.5deg);
+      box-shadow: 4px 4px 0 #0f172a;
     }
 
     /* 손그림 버튼 */
     .sketch-btn {
       position: relative;
-      border: 2px solid #1e1e1e;
+      border: 2px solid #475569;
       border-radius: 3px;
-      background: #fff;
-      box-shadow: 3px 3px 0 #1e1e1e;
+      background: #1e293b;
+      color: #e2e8f0;
+      box-shadow: 3px 3px 0 #0f172a;
       transition: all 0.1s ease;
-      transform: rotate(-0.5deg);
     }
     .sketch-btn:hover {
-      transform: translate(-2px, -2px) rotate(-0.5deg);
-      box-shadow: 5px 5px 0 #1e1e1e;
+      transform: translate(-2px, -2px);
+      box-shadow: 5px 5px 0 #0f172a;
     }
     .sketch-btn:active {
-      transform: translate(1px, 1px) rotate(-0.5deg);
-      box-shadow: 2px 2px 0 #1e1e1e;
+      transform: translate(1px, 1px);
+      box-shadow: 2px 2px 0 #0f172a;
     }
     .sketch-btn-primary {
-      background: #1971c2;
+      background: #3b82f6;
+      border-color: #2563eb;
       color: white;
     }
     .sketch-btn-orange {
-      background: #e8590c;
+      background: #f97316;
+      border-color: #ea580c;
       color: white;
     }
 
@@ -96,7 +94,7 @@
       bottom: -4px;
       width: 100%;
       height: 8px;
-      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 8 Q 25 2, 50 8 T 100 8' stroke='%231971c2' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 8 Q 25 2, 50 8 T 100 8' stroke='%233b82f6' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat;
       background-size: 100% 100%;
     }
 
@@ -111,7 +109,7 @@
       left: -15px;
       right: -15px;
       bottom: -10px;
-      border: 3px solid #e03131;
+      border: 3px solid #ef4444;
       border-radius: 50% 45% 55% 50%;
       transform: rotate(-2deg);
       pointer-events: none;
@@ -130,7 +128,7 @@
     /* 체크마크 스타일 */
     .sketch-check::before {
       content: '✓';
-      color: #2f9e44;
+      color: #22c55e;
       font-weight: bold;
       margin-right: 8px;
       font-size: 1.2em;
@@ -139,42 +137,40 @@
     /* 손그림 구분선 */
     .sketch-divider {
       height: 2px;
-      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'%3E%3Cpath d='M0 2 Q 50 0, 100 2 T 200 2' stroke='%231e1e1e' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'%3E%3Cpath d='M0 2 Q 50 0, 100 2 T 200 2' stroke='%23475569' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x;
       background-size: 200px 4px;
-      opacity: 0.3;
+      opacity: 0.5;
     }
 
     /* 스티커 노트 스타일 */
     .sticky-note {
-      background: #ffc078;
-      border: 2px solid #1e1e1e;
+      background: #1e293b;
+      border: 2px solid #3b82f6;
       padding: 1rem;
-      transform: rotate(-2deg);
-      box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
+      box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
       font-family: 'Caveat', cursive;
+      color: #e2e8f0;
     }
     .sticky-note:nth-child(even) {
-      transform: rotate(1deg);
-      background: #a5d8ff;
+      border-color: #22c55e;
     }
     .sticky-note:nth-child(3n) {
-      transform: rotate(-1deg);
-      background: #b2f2bb;
+      border-color: #f97316;
     }
 
     /* 낙서 스타일 배지 */
     .sketch-badge {
       display: inline-block;
-      border: 2px dashed #1e1e1e;
+      border: 2px dashed #475569;
       border-radius: 20px;
       padding: 4px 12px;
       font-size: 0.875rem;
-      transform: rotate(-1deg);
+      color: #94a3b8;
     }
 
     /* 손글씨 강조 */
     .highlight-box {
-      background: linear-gradient(180deg, transparent 60%, #ffc078 60%);
+      background: linear-gradient(180deg, transparent 60%, rgba(59, 130, 246, 0.3) 60%);
       padding: 0 4px;
     }
 
@@ -194,10 +190,10 @@
     .chat-frame-wrapper {
       width: 420px;
       height: 580px;
-      background: white;
-      border: 2px solid #1e1e1e;
+      background: #1e293b;
+      border: 2px solid #334155;
       border-radius: 4px;
-      box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
+      box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
       transform: scale(0);
       transform-origin: bottom right;
       transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -213,13 +209,13 @@
     }
 
     .chat-header {
-      background: #1971c2;
+      background: #3b82f6;
       color: white;
       padding: 0.75rem 1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      border-bottom: 2px solid #1e1e1e;
+      border-bottom: 2px solid #2563eb;
       font-family: 'Caveat', cursive;
       font-size: 1.25rem;
     }
@@ -234,15 +230,15 @@
     .chat-toggle-btn {
       width: 64px;
       height: 64px;
-      background: #1971c2;
+      background: #3b82f6;
       color: white;
-      border: 2px solid #1e1e1e;
+      border: 2px solid #2563eb;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      box-shadow: 4px 4px 0 #1e1e1e;
+      box-shadow: 4px 4px 0 #0f172a;
       transition: all 0.2s ease;
       font-size: 1.5rem;
       position: relative;
@@ -251,12 +247,12 @@
 
     .chat-toggle-btn:hover {
       transform: translate(-2px, -2px);
-      box-shadow: 6px 6px 0 #1e1e1e;
+      box-shadow: 6px 6px 0 #0f172a;
     }
-    
+
     .chat-toggle-btn:active {
       transform: translate(2px, 2px);
-      box-shadow: 2px 2px 0 #1e1e1e;
+      box-shadow: 2px 2px 0 #0f172a;
     }
 
     /* 모바일 대응 */
@@ -275,7 +271,7 @@
 <body class="font-sans text-sketch-line">
 
   <!-- Navigation -->
-  <nav class="fixed top-0 w-full bg-cream/90 backdrop-blur-sm z-50 border-b-2 border-dashed border-sketch-line/30">
+  <nav class="fixed top-0 w-full bg-cream/95 backdrop-blur-sm z-50 border-b-2 border-dashed border-sketch-line/20">
     <div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
       <a href="#" class="flex items-center gap-2">
         <!-- 손그림 스타일 모루 로고 -->
@@ -334,14 +330,14 @@
       </div>
 
       <!-- Telegram Bot Highlight -->
-      <div class="mt-16 sketch-border p-8 max-w-3xl mx-auto bg-sketch-blue/5" style="transform: rotate(0deg); border-color: #1971c2;">
-        <div class="sketch-badge mb-4 mx-auto w-fit" style="border-color: #1971c2; color: #1971c2;">
+      <div class="mt-16 sketch-border p-8 max-w-3xl mx-auto bg-sketch-blue/10" style="border-color: #3b82f6;">
+        <div class="sketch-badge mb-4 mx-auto w-fit" style="border-color: #3b82f6; color: #3b82f6;">
           📢 모든 신청 및 관리는 텔레그램으로!
         </div>
         <div class="flex flex-col md:flex-row items-center gap-6">
           <div class="w-16 h-16 bg-sketch-blue/20 border-2 border-sketch-blue rounded-full flex items-center justify-center flex-shrink-0">
             <!-- Telegram 아이콘 (손그림 스타일) -->
-            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M21 5L2 12.5l7 2M21 5l-5 14-6-8.5M21 5L9 14.5M9 14.5V21l3.5-4"/>
             </svg>
           </div>
@@ -434,7 +430,7 @@
   <section id="domain" class="py-20">
     <div class="max-w-6xl mx-auto px-6">
       <div class="text-center mb-16">
-        <div class="sketch-badge mb-6" style="border-color: #e8590c; color: #e8590c;">
+        <div class="sketch-badge mb-6" style="border-color: #f97316; color: #f97316;">
           💬 텔레그램으로 간편하게
         </div>
         <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
@@ -474,7 +470,7 @@
       </div>
 
       <!-- 가격 및 CTA -->
-      <div class="sketch-border p-8 flex flex-col md:flex-row items-center justify-between gap-6" style="background: #fff8e6;">
+      <div class="sketch-border p-8 flex flex-col md:flex-row items-center justify-between gap-6" style="background: #1e293b; border-color: #f97316;">
         <div>
           <p class="text-sketch-line/70 text-sm mb-1">최저가 도메인</p>
           <div class="flex items-baseline gap-2 mb-2">
@@ -526,17 +522,17 @@
   <section id="linux-guide" class="py-20">
     <div class="max-w-6xl mx-auto px-6">
       <div class="text-center mb-16">
-        <div class="sketch-badge mb-6" style="border-color: #2f9e44; color: #2f9e44;">
+        <div class="sketch-badge mb-6" style="border-color: #22c55e; color: #22c55e;">
           🐧 윈도우 서버만 고집하셨나요?
         </div>
         <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
-          <span class="sketch-underline" style="--underline-color: #2f9e44;">리눅스, 생각보다 쉬워요!</span>
+          <span class="sketch-underline" style="--underline-color: #22c55e;">리눅스, 생각보다 쉬워요!</span>
         </h2>
         <p class="text-xl text-sketch-line/70">비용은 절반, 성능은 2배. 지금 바로 시작하세요.</p>
       </div>
 
       <!-- 비교 테이블 -->
-      <div class="sketch-border p-6 md:p-8 mb-12" style="transform: rotate(0deg);">
+      <div class="sketch-border p-6 md:p-8 mb-12">
         <h3 class="text-xl font-bold mb-6 text-center font-hand">💡 윈도우 vs 리눅스 서버</h3>
         <div class="overflow-x-auto">
           <table class="w-full text-left">
@@ -587,7 +583,7 @@
             원격 데스크톱 대신 <span class="highlight-box">SSH</span>를 사용합니다.<br>
             한 줄 명령어면 끝!
           </p>
-          <div class="bg-sketch-line/5 border-2 border-dashed border-sketch-line/30 rounded p-4 font-mono text-sm">
+          <div class="bg-slate-800 border-2 border-dashed border-slate-600 rounded p-4 font-mono text-sm">
             <span class="text-sketch-green">$</span> ssh user@서버주소
           </div>
           <p class="text-sketch-line/50 text-sm mt-3">
@@ -619,30 +615,30 @@
       </div>
 
       <!-- 자주 쓰는 명령어 -->
-      <div class="sketch-border p-6 md:p-8 mb-12" style="background: #f0fdf4;">
+      <div class="sketch-border p-6 md:p-8 mb-12" style="border-color: #22c55e;">
         <h3 class="text-xl font-bold mb-6 font-hand">📝 이것만 알면 OK! 자주 쓰는 명령어 5개</h3>
         <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div class="bg-white border-2 border-sketch-line/20 rounded p-4">
+          <div class="bg-slate-800 border-2 border-slate-600 rounded p-4">
             <code class="text-sketch-blue font-mono">ls</code>
             <p class="text-sketch-line/70 text-sm mt-1">파일 목록 보기</p>
           </div>
-          <div class="bg-white border-2 border-sketch-line/20 rounded p-4">
+          <div class="bg-slate-800 border-2 border-slate-600 rounded p-4">
             <code class="text-sketch-blue font-mono">cd 폴더명</code>
             <p class="text-sketch-line/70 text-sm mt-1">폴더 이동</p>
           </div>
-          <div class="bg-white border-2 border-sketch-line/20 rounded p-4">
+          <div class="bg-slate-800 border-2 border-slate-600 rounded p-4">
             <code class="text-sketch-blue font-mono">cp 파일 대상</code>
             <p class="text-sketch-line/70 text-sm mt-1">파일 복사</p>
           </div>
-          <div class="bg-white border-2 border-sketch-line/20 rounded p-4">
+          <div class="bg-slate-800 border-2 border-slate-600 rounded p-4">
             <code class="text-sketch-blue font-mono">mv 파일 대상</code>
             <p class="text-sketch-line/70 text-sm mt-1">파일 이동/이름변경</p>
           </div>
-          <div class="bg-white border-2 border-sketch-line/20 rounded p-4">
+          <div class="bg-slate-800 border-2 border-slate-600 rounded p-4">
             <code class="text-sketch-blue font-mono">rm 파일</code>
             <p class="text-sketch-line/70 text-sm mt-1">파일 삭제</p>
           </div>
-          <div class="bg-white border-2 border-sketch-line/20 rounded p-4">
+          <div class="bg-slate-800 border-2 border-slate-600 rounded p-4">
             <code class="text-sketch-blue font-mono">sudo 명령어</code>
             <p class="text-sketch-line/70 text-sm mt-1">관리자 권한 실행</p>
           </div>
@@ -651,7 +647,7 @@
 
       <!-- CTA -->
       <div class="text-center">
-        <div class="sticky-note inline-block mb-6" style="transform: rotate(-1deg);">
+        <div class="sticky-note inline-block mb-6">
           <p class="text-lg">🎁 리눅스 서버 주문 시 <span class="font-bold">초기 설정 무료 지원!</span></p>
         </div>
         <br>
@@ -673,7 +669,7 @@
       </div>
 
       <!-- 가격표 테이블 -->
-      <div class="sketch-border p-6 md:p-8 mb-12" style="transform: rotate(0deg);">
+      <div class="sketch-border p-6 md:p-8 mb-12">
         <div class="overflow-x-auto">
           <table class="w-full text-center">
             <thead>
@@ -696,7 +692,7 @@
                 <td class="py-4 px-3 font-bold">₩14,900</td>
                 <td class="py-4 px-3 font-bold">₩19,900</td>
               </tr>
-              <tr class="border-b border-dashed border-sketch-line/20 bg-sketch-blue/5">
+              <tr class="border-b border-dashed border-sketch-line/20 bg-sketch-blue/10">
                 <td class="py-4 px-3 text-left">
                   <div class="font-bold text-sketch-blue">Pro ⭐</div>
                   <div class="text-xs text-sketch-line/50">1vCPU · 2GB · 50GB SSD · 2TB</div>
@@ -725,15 +721,15 @@
       </div>
 
       <!-- DDoS 방어 옵션 -->
-      <div class="sketch-border p-6 md:p-8 mb-8" style="transform: rotate(0deg);">
+      <div class="sketch-border p-6 md:p-8 mb-8">
         <h3 class="text-xl font-bold mb-6 text-center font-hand">🛡️ DDoS 방어 옵션</h3>
         <div class="grid md:grid-cols-2 gap-6">
-          <div class="border-2 border-dashed border-sketch-line/30 rounded p-5 text-center">
+          <div class="border-2 border-dashed border-slate-600 rounded p-5 text-center bg-slate-800">
             <div class="text-2xl font-bold mb-2">기본 방어</div>
             <div class="text-3xl font-bold text-sketch-green mb-3">무료</div>
             <p class="text-sketch-line/70 text-sm">L3/L4 기본 보호<br>일반적인 공격 대응</p>
           </div>
-          <div class="border-2 border-sketch-blue rounded p-5 text-center bg-sketch-blue/5">
+          <div class="border-2 border-sketch-blue rounded p-5 text-center bg-sketch-blue/10">
             <div class="text-2xl font-bold mb-2 text-sketch-blue">프리미엄 방어</div>
             <div class="text-3xl font-bold mb-3">₩99,000<span class="text-base font-normal text-sketch-line/70">/월</span></div>
             <p class="text-sketch-line/70 text-sm">L3/L4/L7 다중 레이어 방어<br>1Tbps+ 대규모 공격 차단</p>
@@ -787,7 +783,7 @@
                 id="email"
                 name="email"
                 required
-                class="w-full px-4 py-3 border-2 border-sketch-line rounded bg-white focus:outline-none focus:border-sketch-blue transition"
+                class="w-full px-4 py-3 border-2 border-slate-600 rounded bg-slate-800 focus:outline-none focus:border-sketch-blue transition text-sketch-line"
                 placeholder="example@email.com"
               >
               <p id="emailError" class="text-sketch-red text-sm mt-1 hidden">올바른 이메일 형식이 아닙니다.</p>
@@ -799,7 +795,7 @@
                 name="message"
                 required
                 rows="5"
-                class="w-full px-4 py-3 border-2 border-sketch-line rounded bg-white focus:outline-none focus:border-sketch-blue transition resize-none"
+                class="w-full px-4 py-3 border-2 border-slate-600 rounded bg-slate-800 focus:outline-none focus:border-sketch-blue transition resize-none text-sketch-line"
                 placeholder="문의 내용을 입력해주세요..."
               ></textarea>
             </div>
@@ -824,7 +820,7 @@
             </a>
           </div>
 
-          <div class="sketch-border p-6" style="background: #fff8e6;">
+          <div class="sketch-border p-6" style="border-color: #f97316;">
             <h3 class="text-xl font-bold mb-4 font-hand">📞 연락처</h3>
             <div class="space-y-3 text-sketch-line/70">
               <p>✉️ <a href="mailto:info@anvil.it.com" class="hover:text-sketch-blue">info@anvil.it.com</a></p>
@@ -832,7 +828,7 @@
             </div>
           </div>
 
-          <div class="sticky-note" style="transform: rotate(1deg);">
+          <div class="sticky-note">
             <p class="font-bold">💡 Tip!</p>
             <p class="text-sm">텔레그램 봇으로 도메인 검색, 가격 확인, 등록까지 바로 가능해요!</p>
           </div>
@@ -927,7 +923,7 @@
   </script>
 
   <!-- Footer -->
-  <footer class="border-t-2 border-dashed border-sketch-line/30 py-12">
+  <footer class="border-t-2 border-dashed border-sketch-line/20 py-12">
     <div class="max-w-6xl mx-auto px-6">
       <div class="grid md:grid-cols-3 gap-8 mb-8">
         <!-- Company Info -->