Update: 전체 디자인 시스템 강화 및 다크모드 개선

- CSS 변수 시스템 확장 (4단계 그림자, 다크모드 텍스트 불투명도, 틸 악센트, 스태거 딜레이)
- btn-secondary 오렌지→틸 아웃라인으로 차별화
- 카드 변형 클래스 추가 (card--flat/elevated/interactive)
- 6개 페이지 CSS 중복 제거 및 그림자/다크모드 표준화
- 다크모드 텍스트 가시성 수정 (QnA, services 등)
- reveal 애니메이션 변형 (fade, zoom) 및 stagger-children 적용
- 태블릿 브레이크포인트 (769px~1024px) 추가
- 공통 page-header 스타일 통합

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

about.html

@@ -98,14 +98,14 @@
                 </div>
             </div>
 
-            <div class="about-content">
+            <div class="about-content stagger-children">
-                <div class="card reveal">
+                <div class="card card--flat reveal" data-reveal="fade">
                     <h2>회사 소개</h2>
                     <p>밍글 스튜디오는 창작자와 기술, 사람과 사람 사이의 '어우러짐'을 통해 새로운 콘텐츠를 만들어가는 모션 캡쳐 기반의 창작 공간입니다.</p>
                     <p>설립 이후, 누구나 편하게 사용 가능한 스튜디오 대관 서비스를 중심으로 버추얼 콘텐츠 제작 환경을 제공합니다.</p>
                 </div>
 
-                <div class="card reveal" data-delay="100">
+                <div class="card card--flat reveal" data-reveal="fade">
                     <h2>비전 & 미션</h2>
                     <div class="vision-mission">
                         <div class="vm-item">
@@ -119,7 +119,7 @@
                     </div>
                 </div>
 
-                <div class="card reveal" data-delay="200">
+                <div class="card card--flat reveal" data-reveal="fade">
                     <h2>연혁</h2>
                     <div class="timeline">
                         <div class="timeline-item">
@@ -150,8 +150,8 @@
                 <p>각 분야의 전문가들이 함께 협업하며 콘텐츠 제작을 지원합니다</p>
             </div>
             
-            <div class="team-grid">
+            <div class="team-grid stagger-children">
-                <div class="team-card reveal">
+                <div class="team-card reveal" data-reveal="zoom">
                     <div class="team-avatar">
                         <img src="images/profile/제이제이.png" alt="김희진 프로필">
                     </div>
@@ -161,7 +161,7 @@
                     <p class="team-desc">배경/리소스 제작, 인사 및 프로젝트 관리</p>
                 </div>
 
-                <div class="team-card reveal" data-delay="100">
+                <div class="team-card reveal" data-reveal="zoom">
                     <div class="team-avatar">
                         <img src="images/profile/카닉.png" alt="김광진 프로필">
                     </div>
@@ -171,7 +171,7 @@
                     <p class="team-desc">스튜디오 전체 기술 운영, 모션캡쳐 장비 관리, 음향 시스템, 엔진 프로그래밍</p>
                 </div>
 
-                <div class="team-card reveal" data-delay="200">
+                <div class="team-card reveal" data-reveal="zoom">
                     <div class="team-avatar">
                         <img src="images/profile/야모.png" alt="이승민 프로필">
                     </div>
@@ -192,23 +192,23 @@
                 <p>밍글 스튜디오가 추구하는 핵심 가치</p>
             </div>
 
-            <div class="values-grid">
+            <div class="values-grid stagger-children">
-                <div class="value-item reveal">
+                <div class="value-item reveal" data-reveal="up">
                     <div class="value-icon">🤝</div>
                     <h3>협업</h3>
                     <p>기술자와 창작자가 함께 만드는 시너지</p>
                 </div>
-                <div class="value-item reveal" data-delay="100">
+                <div class="value-item reveal" data-reveal="up">
                     <div class="value-icon">💡</div>
                     <h3>혁신</h3>
                     <p>최신 기술로 새로운 창작의 가능성 제시</p>
                 </div>
-                <div class="value-item reveal" data-delay="200">
+                <div class="value-item reveal" data-reveal="up">
                     <div class="value-icon">🎨</div>
                     <h3>창의성</h3>
                     <p>상상을 현실로 만드는 창의적 솔루션</p>
                 </div>
-                <div class="value-item reveal" data-delay="300">
+                <div class="value-item reveal" data-reveal="up">
                     <div class="value-icon">⭐</div>
                     <h3>품질</h3>
                     <p>최고 수준의 모션캡쳐 퀄리티 추구</p>

contact.html

@@ -78,29 +78,29 @@
     <!-- 연락처 정보 -->
     <section class="section">
         <div class="container">
-            <div class="contact-info-grid">
+            <div class="contact-info-grid stagger-children">
-                <div class="contact-card">
+                <div class="contact-card reveal" data-reveal="up">
                     <div class="contact-icon">📞</div>
                     <h3>전화 문의</h3>
                     <p>24시간 가능</p>
                     <a href="tel:+82-10-9288-9190" class="contact-link">010-9288-9190</a>
                 </div>
                 
-                <div class="contact-card">
+                <div class="contact-card reveal" data-reveal="up">
                     <div class="contact-icon">💼</div>
                     <h3>비즈니스 문의</h3>
                     <p>제휴 및 협력 문의</p>
                     <a href="mailto:minglestudio@minglestudio.co.kr" class="contact-link">minglestudio@minglestudio.co.kr</a>
                 </div>
 
-                <div class="contact-card">
+                <div class="contact-card reveal" data-reveal="up">
                     <div class="contact-icon">✉️</div>
                     <h3>예약 및 문의</h3>
                     <p>24시간 접수 가능</p>
                     <a href="mailto:help@minglestudio.co.kr" class="contact-link">help@minglestudio.co.kr</a>
                 </div>
                 
-                <div class="contact-card">
+                <div class="contact-card reveal" data-reveal="up">
                     <div class="contact-icon">📍</div>
                     <h3>스튜디오 방문</h3>
                     <p>사전 예약 필수</p>

css/about.css

@@ -2,24 +2,6 @@
    About 페이지 전용 스타일
    ======================================== */
 
-/* 페이지 헤더 */
-.page-header {
-    background: var(--gradient-main);
-    color: var(--bg-white);
-    padding: var(--spacing-3xl) 0;
-    text-align: center;
-}
-
-.page-header h1 {
-    font-size: var(--font-5xl);
-    margin-bottom: var(--spacing-md);
-}
-
-.page-header p {
-    font-size: var(--font-xl);
-    opacity: 0.95;
-}
-
 /* 회사 정보 그리드 */
 .company-info {
     margin-bottom: var(--spacing-3xl);
@@ -190,12 +172,12 @@
     border-radius: var(--border-radius);
     text-align: center;
     transition: var(--transition);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
 }
 
 .team-card:hover {
     transform: translateY(-10px);
-    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-xl);
 }
 
 .team-avatar {
@@ -210,7 +192,7 @@
     font-size: 3rem;
     overflow: hidden;
     border: 3px solid var(--primary-color);
-    box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
+    box-shadow: var(--shadow-glow-md);
 }
 
 .team-avatar img {
@@ -260,13 +242,13 @@
     padding: var(--spacing-xl);
     background: var(--bg-white);
     border-radius: var(--border-radius);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
 }
 
 .value-item:hover {
     transform: translateY(-5px);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-lg);
 }
 
 .value-icon {
@@ -289,7 +271,7 @@
    다크모드
    ======================================== */
 [data-theme="dark"] .page-header {
-    background: linear-gradient(135deg, #cc6d00, #b35500);
+    background: var(--dark-header-gradient);
 }
 
 [data-theme="dark"] .info-grid {
@@ -302,11 +284,11 @@
 }
 
 [data-theme="dark"] .info-item p {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .info-item.full-width p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .about-content .card {
@@ -315,11 +297,11 @@
 }
 
 [data-theme="dark"] .about-content h2 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .about-content p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .vm-item {
@@ -330,11 +312,11 @@
 }
 
 [data-theme="dark"] .vm-item h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .vm-item p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .timeline::before {
@@ -352,11 +334,11 @@
 }
 
 [data-theme="dark"] .timeline-content h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .timeline-content p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .team-section {
@@ -376,15 +358,15 @@
 }
 
 [data-theme="dark"] .team-card h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .team-role {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .team-desc {
-    color: rgba(255, 255, 255, 0.55);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .value-item {
@@ -400,49 +382,47 @@
 }
 
 [data-theme="dark"] .value-item h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .value-item p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
+}
+
+/* 태블릿 반응형 */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .values-grid { grid-template-columns: repeat(2, 1fr); }
+    .team-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
 /* 반응형 디자인 */
 @media (max-width: 768px) {
-    .page-header h1 {
-        font-size: var(--font-3xl);
-    }
-    
-    .page-header p {
-        font-size: var(--font-base);
-    }
-    
     .timeline::before {
         left: 20px;
     }
-    
+
     .timeline-item {
         padding-left: 60px;
     }
-    
+
     .timeline-item::before {
         left: 12px;
     }
-    
+
     .timeline-date {
         position: relative;
         left: 0;
         margin-bottom: var(--spacing-sm);
     }
-    
+
     .timeline-content {
         margin-left: 0;
     }
-    
+
     .team-grid {
         grid-template-columns: 1fr;
     }
-    
+
     .values-grid {
         grid-template-columns: 1fr;
     }

css/common.css

@@ -33,6 +33,10 @@
     --border-light: #e2e8f0;
     --border-muted: #d1d5db;
 
+    /* 보조 악센트 색상 - 틸/블루 계열 */
+    --accent-teal: #0ea5e9;
+    --accent-teal-hover: #0284c7;
+
     /* 상태/시맨틱 색상 */
     --color-info-bg: #f0f9ff;
     --color-info-border: #bae6fd;
@@ -78,6 +82,31 @@
     --font-size-hero: clamp(2rem, 5vw, 3.5rem);
     --font-size-section: clamp(1.5rem, 3vw, 2.5rem);
 
+    /* 4단계 그림자 시스템 */
+    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
+    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
+    --shadow-glow-sm: 0 4px 15px rgba(255, 136, 0, 0.2);
+    --shadow-glow-md: 0 8px 25px rgba(255, 136, 0, 0.3);
+    --shadow-glow-lg: 0 12px 35px rgba(255, 136, 0, 0.4);
+
+    /* 다크모드 텍스트 불투명도 4단계 */
+    --dark-text-primary: rgba(255, 255, 255, 0.95);
+    --dark-text-secondary: rgba(255, 255, 255, 0.8);
+    --dark-text-tertiary: rgba(255, 255, 255, 0.6);
+    --dark-text-disabled: rgba(255, 255, 255, 0.4);
+
+    /* 다크모드 페이지헤더 그라디언트 */
+    --dark-header-gradient: linear-gradient(135deg, #cc6d00, #b35500);
+
+    /* 스태거 딜레이 */
+    --stagger-1: 0ms;
+    --stagger-2: 80ms;
+    --stagger-3: 160ms;
+    --stagger-4: 240ms;
+    --stagger-5: 320ms;
+
     /* 기타 */
     --border-radius: 15px;
     --border-radius-sm: 8px;
@@ -389,7 +418,7 @@ body {
 [data-theme="dark"] .site-footer .footer-address,
 [data-theme="dark"] .site-footer .footer-contact,
 [data-theme="dark"] .site-footer .footer-biz {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 .site-footer .footer-copyright {
@@ -399,7 +428,7 @@ body {
 }
 
 [data-theme="dark"] .site-footer .footer-copyright {
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--dark-text-disabled);
 }
 
 /* ========================================
@@ -441,23 +470,26 @@ body {
 .btn-primary {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
     color: var(--text-white);
-    box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
+    box-shadow: var(--shadow-glow-sm);
 }
 
 .btn-primary:hover {
     transform: translateY(-3px);
-    box-shadow: 0 8px 25px rgba(255, 136, 0, 0.4);
+    box-shadow: var(--shadow-glow-md);
 }
 
 .btn-secondary {
-    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+    background: transparent;
-    color: var(--text-white);
+    color: var(--accent-teal);
-    box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
+    border: 2px solid var(--accent-teal);
+    box-shadow: none;
 }
 
 .btn-secondary:hover {
+    background: var(--accent-teal);
+    color: var(--text-white);
     transform: translateY(-3px);
-    box-shadow: 0 8px 25px rgba(255, 136, 0, 0.4);
+    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3);
 }
 
 .btn-outline {
@@ -478,7 +510,7 @@ body {
     background-color: var(--bg-white);
     border-radius: var(--border-radius);
     padding: var(--spacing-xl);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
@@ -501,7 +533,35 @@ body {
 
 .card:hover {
     transform: translateY(-8px) scale(1.02);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-lg);
+}
+
+/* 카드 변형 */
+.card--flat {
+    box-shadow: var(--shadow-sm);
+}
+
+.card--flat:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-md);
+}
+
+.card--elevated {
+    box-shadow: var(--shadow-lg);
+}
+
+.card--elevated:hover {
+    transform: translateY(-8px) scale(1.01);
+    box-shadow: var(--shadow-xl);
+}
+
+.card--interactive {
+    cursor: pointer;
+    border: 2px solid transparent;
+}
+
+.card--interactive:hover {
+    border-color: rgba(255, 136, 0, 0.2);
 }
 
 /* ========================================
@@ -1116,7 +1176,7 @@ body {
    ======================================== */
 [data-theme="dark"] body {
     background-color: var(--dark-bg);
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .navbar {
@@ -1133,11 +1193,11 @@ body {
 }
 
 [data-theme="dark"] .nav-link {
-    color: rgba(255, 255, 255, 0.55);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .nav-link:hover {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .nav-link.active {
@@ -1152,11 +1212,11 @@ body {
 }
 
 [data-theme="dark"] .nav-logo span {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .hamburger span {
-    background: rgba(255, 255, 255, 0.8);
+    background: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .hamburger:hover {
@@ -1168,7 +1228,7 @@ body {
 }
 
 [data-theme="dark"] .loading-text {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .loading-spinner {
@@ -1182,7 +1242,7 @@ body {
 }
 
 [data-theme="dark"] .breadcrumb-link {
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .breadcrumb-link:hover {
@@ -1191,7 +1251,7 @@ body {
 }
 
 [data-theme="dark"] .breadcrumb-current {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 /* 다크 모드 푸터 */
@@ -1209,11 +1269,11 @@ body {
 }
 
 [data-theme="dark"] .section-header h2 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .section-header p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .card {
@@ -1222,8 +1282,22 @@ body {
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
 
+[data-theme="dark"] .card--interactive:hover {
+    border-color: rgba(255, 136, 0, 0.3);
+}
+
+[data-theme="dark"] .btn-secondary {
+    color: var(--accent-teal);
+    border-color: var(--accent-teal);
+}
+
+[data-theme="dark"] .btn-secondary:hover {
+    background: var(--accent-teal);
+    color: var(--text-white);
+}
+
 [data-theme="dark"] .btn-outline {
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--dark-text-secondary);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
@@ -1251,10 +1325,80 @@ body {
     transform: translateY(0) translateX(0) scale(1);
 }
 
+/* 추가 Reveal 변형 */
+.reveal[data-reveal="fade"] { transform: none; }
+.reveal[data-reveal="zoom"] { transform: scale(0.8); }
+
+/* 스태거 자식 유틸리티 */
+.stagger-children > .reveal:nth-child(1) { transition-delay: var(--stagger-1); }
+.stagger-children > .reveal:nth-child(2) { transition-delay: var(--stagger-2); }
+.stagger-children > .reveal:nth-child(3) { transition-delay: var(--stagger-3); }
+.stagger-children > .reveal:nth-child(4) { transition-delay: var(--stagger-4); }
+.stagger-children > .reveal:nth-child(5) { transition-delay: var(--stagger-5); }
+.stagger-children > .reveal:nth-child(6) { transition-delay: 400ms; }
+
 @media (prefers-reduced-motion: reduce) {
     .reveal {
         opacity: 1;
         transform: none;
         transition: none;
     }
+}
+
+/* ========================================
+   태블릿 브레이크포인트 (769px ~ 1024px)
+   ======================================== */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .grid-2 { grid-template-columns: repeat(2, 1fr); }
+    .grid-3 { grid-template-columns: repeat(2, 1fr); }
+    .grid-4 { grid-template-columns: repeat(2, 1fr); }
+
+    .container { max-width: 960px; }
+
+    .section-header h1,
+    .section-header h2 { font-size: var(--font-3xl); }
+}
+
+/* ========================================
+   공통 페이지 헤더
+   ======================================== */
+.page-header {
+    background: var(--gradient-main);
+    color: var(--text-white);
+    padding: var(--spacing-3xl) 0;
+    text-align: center;
+}
+
+.page-header h1 {
+    font-size: var(--font-5xl);
+    font-weight: 700;
+    margin-bottom: var(--spacing-md);
+}
+
+.page-header p {
+    font-size: var(--font-xl);
+    opacity: 0.95;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+[data-theme="dark"] .page-header {
+    background: var(--dark-header-gradient);
+}
+
+@media (max-width: 768px) {
+    .page-header { padding: var(--spacing-2xl) 0; }
+    .page-header h1 { font-size: var(--font-3xl); }
+    .page-header p { font-size: var(--font-base); }
+}
+
+@media (max-width: 480px) {
+    .page-header h1 { font-size: var(--font-2xl); }
+    .page-header p { font-size: var(--font-sm); }
+}
+
+/* Pulse 애니메이션 (공통) */
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
 }

css/contact.css

@@ -2,24 +2,6 @@
    Contact 페이지 전용 스타일
    ======================================== */
 
-/* 페이지 헤더 */
-.page-header {
-    background: var(--gradient-main);
-    color: var(--text-white);
-    padding: var(--spacing-3xl) 0;
-    text-align: center;
-}
-
-.page-header h1 {
-    font-size: var(--font-5xl);
-    margin-bottom: var(--spacing-md);
-}
-
-.page-header p {
-    font-size: var(--font-xl);
-    opacity: 0.95;
-}
-
 /* 연락처 정보 그리드 */
 .contact-info-grid {
     display: grid;
@@ -33,13 +15,13 @@
     padding: var(--spacing-2xl);
     background: var(--bg-white);
     border-radius: var(--border-radius);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
 }
 
 .contact-card:hover {
     transform: translateY(-8px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-lg);
 }
 
 .contact-icon {
@@ -85,7 +67,7 @@
     background: var(--bg-white);
     padding: var(--spacing-3xl);
     border-radius: var(--border-radius);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-lg);
 }
 
 /* 폼 스타일 */
@@ -263,7 +245,7 @@
     height: 300px;
     border-radius: var(--border-radius);
     overflow: hidden;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
     margin-bottom: var(--spacing-lg);
 }
 
@@ -403,52 +385,50 @@
 }
 
 /* 반응형 디자인 */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .contact-info-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 @media (max-width: 768px) {
-    .page-header h1 {
-        font-size: var(--font-3xl);
-    }
-    
-    .page-header p {
-        font-size: var(--font-base);
-    }
-    
     .contact-info-grid {
         grid-template-columns: 1fr;
         gap: var(--spacing-lg);
     }
-    
+
     .contact-form-wrapper {
         padding: var(--spacing-xl);
         margin: 0 var(--spacing-md);
     }
-    
+
     .form-row {
         grid-template-columns: 1fr;
         gap: 0;
     }
-    
+
     .location-info {
         grid-template-columns: 1fr;
         gap: var(--spacing-2xl);
     }
-    
+
     .location-map {
         position: static;
     }
-    
+
     .form-submit {
         flex-direction: column;
     }
-    
+
     .form-submit .btn {
         width: 100%;
     }
-    
+
     .modal-content {
         width: 95%;
         margin: var(--spacing-md);
     }
-    
+
     .modal-header,
     .modal-body {
         padding: var(--spacing-lg);
@@ -459,33 +439,33 @@
     .contact-card {
         padding: var(--spacing-lg);
     }
-    
+
     .contact-icon {
         font-size: 2.5rem;
     }
-    
+
     .contact-card h3 {
         font-size: var(--font-lg);
     }
-    
+
     .contact-link {
         font-size: var(--font-base);
         padding: var(--spacing-sm);
     }
-    
+
     .map-container {
         height: 250px;
     }
-    
+
     .map-buttons {
         flex-direction: column;
     }
-    
+
     .checkbox-group {
         flex-direction: column;
         gap: var(--spacing-sm);
     }
-    
+
     .privacy-link {
         margin-left: 0;
         margin-top: var(--spacing-xs);
@@ -496,7 +476,7 @@
    다크모드
    ======================================== */
 [data-theme="dark"] .page-header {
-    background: linear-gradient(135deg, #cc6d00, #b35500);
+    background: var(--dark-header-gradient);
 }
 
 [data-theme="dark"] .contact-card {
@@ -512,11 +492,11 @@
 }
 
 [data-theme="dark"] .contact-card h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .contact-card p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .contact-icon {
@@ -535,7 +515,7 @@
 
 /* 위치 정보 텍스트 */
 [data-theme="dark"] .location-details li {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 /* 맵 플레이스홀더 */
@@ -545,11 +525,11 @@
 }
 
 [data-theme="dark"] .map-placeholder h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .map-placeholder p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .contact-form-wrapper {
@@ -559,7 +539,7 @@
 }
 
 [data-theme="dark"] .form-group label {
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .form-group input,
@@ -567,7 +547,7 @@
 [data-theme="dark"] .form-group textarea {
     background: rgba(255, 255, 255, 0.05);
     border-color: var(--glass-border);
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .form-group input:focus,
@@ -579,11 +559,11 @@
 
 [data-theme="dark"] .form-group input::placeholder,
 [data-theme="dark"] .form-group textarea::placeholder {
-    color: rgba(255, 255, 255, 0.35);
+    color: var(--dark-text-disabled);
 }
 
 [data-theme="dark"] .checkbox-label {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .location-info {
@@ -592,12 +572,12 @@
 }
 
 [data-theme="dark"] .location-details h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .location-details p,
 [data-theme="dark"] .location-details li {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .map-container {
@@ -608,11 +588,11 @@
 [data-theme="dark"] .modal-content {
     background: var(--dark-surface);
     border: 1px solid var(--glass-border);
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .cta-section {
-    background: linear-gradient(135deg, #cc6d00, #b35500);
+    background: var(--dark-header-gradient);
 }
 
 /* 체크박스 마크 */
@@ -627,22 +607,22 @@
 }
 
 [data-theme="dark"] .modal-header h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .modal-close {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .modal-close:hover {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .modal-body h4 {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .modal-body p,
 [data-theme="dark"] .modal-body li {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }

css/gallery.css

@@ -2,24 +2,6 @@
    Gallery 페이지 전용 스타일
    ======================================== */
 
-/* 페이지 헤더 */
-.page-header {
-    background: var(--gradient-main);
-    color: var(--text-white);
-    padding: var(--spacing-3xl) 0;
-    text-align: center;
-}
-
-.page-header h1 {
-    font-size: var(--font-5xl);
-    margin-bottom: var(--spacing-md);
-}
-
-.page-header p {
-    font-size: var(--font-xl);
-    opacity: 0.95;
-}
-
 /* 갤러리 그리드 */
 .gallery-grid {
     display: grid;
@@ -33,13 +15,13 @@
     background: var(--bg-white);
     border-radius: var(--border-radius);
     overflow: hidden;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
 }
 
 .gallery-item:hover {
     transform: translateY(-8px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-lg);
 }
 
 .gallery-img {
@@ -229,11 +211,6 @@
     margin: 0 auto var(--spacing-md);
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
 /* 360도 이미지 뷰어 스타일 - 서버 호환성 개선 */
 .panorama-section {
     background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-gray) 100%);
@@ -273,7 +250,7 @@
     background: var(--bg-white, #ffffff);
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-lg);
     transition: all 0.3s ease;
     cursor: grab;
     max-width: 100%;
@@ -790,16 +767,13 @@
     }
 }
 
+/* 태블릿 반응형 */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
 /* 반응형 디자인 */
 @media (max-width: 768px) {
-    .page-header h1 {
-        font-size: var(--font-3xl);
-    }
-    
-    .page-header p {
-        font-size: var(--font-base);
-    }
-    
     .gallery-grid {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: var(--spacing-lg);
@@ -956,7 +930,7 @@
    다크모드
    ======================================== */
 [data-theme="dark"] .page-header {
-    background: linear-gradient(135deg, #cc6d00, #b35500);
+    background: var(--dark-header-gradient);
 }
 
 [data-theme="dark"] .gallery-grid {
@@ -976,7 +950,7 @@
 
 [data-theme="dark"] .gallery-caption {
     background: linear-gradient(transparent, rgba(10, 10, 15, 0.95));
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .lightbox {
@@ -986,7 +960,7 @@
 [data-theme="dark"] .lightbox-close,
 [data-theme="dark"] .lightbox-nav {
     background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
     border: 1px solid var(--glass-border);
 }
 
@@ -996,12 +970,12 @@
 }
 
 [data-theme="dark"] .lightbox-counter {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .filter-btn {
     background: transparent;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
     border-color: var(--glass-border);
 }
 
@@ -1027,7 +1001,7 @@
 }
 
 [data-theme="dark"] .panorama-title {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .panorama-modal {
@@ -1036,7 +1010,7 @@
 
 [data-theme="dark"] .panorama-modal-close {
     background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .panorama-clickable {
@@ -1050,7 +1024,7 @@
 /* 라이트박스 닫기/네비 버튼 */
 [data-theme="dark"] .lightbox-close {
     background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
     border-color: var(--glass-border);
 }
 
@@ -1070,11 +1044,11 @@
 }
 
 [data-theme="dark"] .panorama-section h2 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .section-subtitle {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 /* 파노라마 뷰어 배경 */

css/portfolio.css

@@ -78,11 +78,6 @@
     z-index: 10;
 }
 
-@keyframes pulse {
-    0%, 100% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-}
-
 /* ========================================
    포트폴리오 탭 시스템
    ======================================== */
@@ -113,7 +108,7 @@
 
 .tab-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(255, 136, 0, 0.3);
+    box-shadow: var(--shadow-glow-md);
 }
 
 .tab-btn.active {
@@ -173,7 +168,7 @@
     padding: 3rem 2rem;
     background: var(--bg-white);
     border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-lg);
     border: 1px solid var(--bg-gray);
 }
 
@@ -225,24 +220,6 @@
     color: var(--text-primary);
 }
 
-/* 페이지 헤더 */
-.page-header {
-    background: var(--gradient-main);
-    color: var(--text-white);
-    padding: var(--spacing-3xl) 0;
-    text-align: center;
-}
-
-.page-header h1 {
-    font-size: var(--font-5xl);
-    margin-bottom: var(--spacing-md);
-}
-
-.page-header p {
-    font-size: var(--font-xl);
-    opacity: 0.95;
-}
-
 /* YouTube 채널 카드 */
 .youtube-channel-card {
     display: flex;
@@ -314,13 +291,13 @@
     background: var(--bg-white);
     border-radius: var(--border-radius);
     overflow: hidden;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
 }
 
 .video-card:hover {
     transform: translateY(-8px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-lg);
 }
 
 .video-card.featured {
@@ -468,13 +445,13 @@
     padding: var(--spacing-2xl);
     background: var(--bg-white);
     border-radius: var(--border-radius);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
 }
 
 .tech-feature:hover {
     transform: translateY(-5px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-lg);
 }
 
 .tech-icon {
@@ -570,15 +547,13 @@
 }
 
 /* 반응형 디자인 */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .longform-grid { grid-template-columns: repeat(2, 1fr); }
+    .shorts-grid { grid-template-columns: repeat(2, 1fr); }
+    .tech-features { grid-template-columns: repeat(2, 1fr); }
+}
+
 @media (max-width: 768px) {
-    .page-header h1 {
-        font-size: var(--font-3xl);
-    }
-    
-    .page-header p {
-        font-size: var(--font-base);
-    }
-    
     .youtube-channel-card {
         flex-direction: column;
         text-align: center;
@@ -843,11 +818,11 @@
    다크모드
    ======================================== */
 [data-theme="dark"] .page-header {
-    background: linear-gradient(135deg, #cc6d00, #b35500);
+    background: var(--dark-header-gradient);
 }
 
 [data-theme="dark"] .tab-btn {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
     border-color: var(--glass-border);
 }
 
@@ -874,15 +849,15 @@
 }
 
 [data-theme="dark"] .video-info {
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .video-info h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .video-info p {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .coming-soon-content {
@@ -892,11 +867,11 @@
 }
 
 [data-theme="dark"] .coming-soon h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .coming-soon p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .feature-item {
@@ -905,7 +880,7 @@
 }
 
 [data-theme="dark"] .feature-item span:last-child {
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .corporate-project-showcase {
@@ -918,20 +893,20 @@
 }
 
 [data-theme="dark"] .project-logo h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .project-logo p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .project-tags .tag {
     background: rgba(255, 255, 255, 0.08);
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .project-section h4 {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 /* 방송 공지 */
@@ -941,11 +916,11 @@
 }
 
 [data-theme="dark"] .notice-content h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .notice-content p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 /* 비디오 정보 */
@@ -962,7 +937,7 @@
 /* 스트리머 태그 */
 [data-theme="dark"] .streamer {
     background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 /* coming-soon 보더 */
@@ -983,11 +958,11 @@
 }
 
 [data-theme="dark"] .tech-feature h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .tech-feature p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 /* 비디오 래퍼 로딩 배경 */
@@ -1002,7 +977,7 @@
 
 /* 비디오 카드 video-info 배경 */
 [data-theme="dark"] .video-info h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 /* CTA 섹션 */
@@ -1011,14 +986,14 @@
 }
 
 [data-theme="dark"] .cta-section h2 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .cta-section p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 /* 비디오 로딩 텍스트 */
 [data-theme="dark"] .video-loading {
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--dark-text-disabled);
 }

css/qna.css

@@ -2,24 +2,6 @@
    FAQ 페이지 전용 스타일
    ======================================== */
 
-/* 페이지 헤더 */
-.page-header {
-    background: var(--gradient-main);
-    color: var(--text-white);
-    padding: var(--spacing-3xl) 0;
-    text-align: center;
-}
-
-.page-header h1 {
-    font-size: var(--font-5xl);
-    margin-bottom: var(--spacing-md);
-}
-
-.page-header p {
-    font-size: var(--font-xl);
-    opacity: 0.95;
-}
-
 /* FAQ 검색 */
 .faq-search {
     max-width: 600px;
@@ -151,7 +133,7 @@
 }
 
 .faq-item:hover {
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
 }
 
 .faq-item.hidden {
@@ -324,21 +306,6 @@
     display: block;
 }
 
-.loading-spinner {
-    width: 30px;
-    height: 30px;
-    border: 2px solid rgba(0, 0, 0, 0.1);
-    border-top: 2px solid var(--primary-color);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin: 0 auto var(--spacing-md);
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
 /* 검색 결과 없음 */
 .no-results {
     text-align: center;
@@ -358,14 +325,6 @@
 
 /* 반응형 디자인 */
 @media (max-width: 768px) {
-    .page-header h1 {
-        font-size: var(--font-3xl);
-    }
-    
-    .page-header p {
-        font-size: var(--font-base);
-    }
-    
     .search-box input {
         font-size: var(--font-base);
         padding: var(--spacing-lg);
@@ -461,7 +420,7 @@
    다크모드
    ======================================== */
 [data-theme="dark"] .page-header {
-    background: linear-gradient(135deg, #cc6d00, #b35500);
+    background: var(--dark-header-gradient);
 }
 
 [data-theme="dark"] .faq-search {
@@ -472,11 +431,11 @@
 [data-theme="dark"] .search-box input {
     background: rgba(255, 255, 255, 0.05);
     border-color: var(--glass-border);
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .search-box input::placeholder {
-    color: rgba(255, 255, 255, 0.35);
+    color: var(--dark-text-disabled);
 }
 
 [data-theme="dark"] .search-box input:focus {
@@ -496,7 +455,7 @@
 }
 
 [data-theme="dark"] .search-suggestions button {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .search-suggestions button:hover {
@@ -506,7 +465,7 @@
 
 [data-theme="dark"] .category-btn {
     background: transparent;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
     border-color: var(--glass-border);
 }
 
@@ -537,11 +496,17 @@
 }
 
 [data-theme="dark"] .faq-question {
-    color: rgba(255, 255, 255, 0.9);
+    background: transparent;
+    color: var(--dark-text-primary);
+}
+
+[data-theme="dark"] .faq-question h3 {
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .faq-toggle {
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--primary-color);
+    background: rgba(255, 136, 0, 0.15);
 }
 
 [data-theme="dark"] .faq-answer {
@@ -550,11 +515,11 @@
 
 [data-theme="dark"] .faq-answer p,
 [data-theme="dark"] .faq-answer li {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .faq-answer strong {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--primary-color);
 }
 
 [data-theme="dark"] .policy-table,
@@ -565,21 +530,44 @@
 
 [data-theme="dark"] .policy-row,
 [data-theme="dark"] .pricing-item {
+    background: rgba(255, 255, 255, 0.03);
     border-color: var(--glass-border);
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
+}
+
+[data-theme="dark"] .policy-time {
+    color: var(--dark-text-primary);
+}
+
+[data-theme="dark"] .policy-desc {
+    color: var(--dark-text-secondary);
+}
+
+[data-theme="dark"] .service-name {
+    color: var(--dark-text-primary);
+}
+
+[data-theme="dark"] .service-price {
+    color: var(--primary-color);
+}
+
+[data-theme="dark"] .no-results {
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .cta-section {
-    background: linear-gradient(135deg, #cc6d00, #b35500);
+    background: var(--dark-header-gradient);
 }
 
 /* 서제스천 아이템 보더 */
 [data-theme="dark"] .suggestion-item {
     border-bottom-color: var(--glass-border);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .suggestion-item:hover {
     background: rgba(255, 136, 0, 0.1);
+    color: var(--primary-color);
 }
 
 /* FAQ 카테고리 섹션 */
@@ -589,7 +577,7 @@
 
 /* FAQ 답변 배경 */
 [data-theme="dark"] .faq-answer {
-    background: rgba(255, 255, 255, 0.02);
+    background: rgba(255, 255, 255, 0.07);
 }
 
 /* 정책/가격 테이블 보더 */

css/services.css

@@ -83,24 +83,6 @@
     50% { transform: scale(1.1); }
 }
 
-/* 페이지 헤더 */
-.page-header {
-    background: var(--gradient-main);
-    color: var(--text-white);
-    padding: var(--spacing-3xl) 0;
-    text-align: center;
-}
-
-.page-header h1 {
-    font-size: var(--font-5xl);
-    margin-bottom: var(--spacing-md);
-}
-
-.page-header p {
-    font-size: var(--font-xl);
-    opacity: 0.95;
-}
-
 /* 서비스 테이블 */
 .services-table-wrapper {
     margin-bottom: var(--spacing-2xl);
@@ -119,7 +101,7 @@
 .table-responsive {
     overflow-x: auto;
     border-radius: var(--border-radius-sm);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
 }
 
 .services-table {
@@ -338,7 +320,7 @@
     border-radius: var(--border-radius);
     padding: var(--spacing-2xl);
     margin-bottom: var(--spacing-2xl);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
@@ -394,8 +376,8 @@
 .pricing-card {
     background-color: var(--bg-white);
     border-radius: var(--border-radius);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-2xl);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
@@ -403,7 +385,7 @@
 
 .pricing-card:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(255, 136, 0, 0.15);
+    box-shadow: var(--shadow-glow-sm);
 }
 
 /* 가격 헤더 */
@@ -486,7 +468,7 @@
     border-radius: var(--border-radius);
     padding: var(--spacing-xl);
     margin-bottom: var(--spacing-xl);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
 }
 
 /* 통합 서비스 특징 */
@@ -604,7 +586,7 @@
 .original-price-large {
     display: block;
     font-size: var(--font-2xl);
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--text-secondary);
     text-decoration: line-through;
     margin-bottom: var(--spacing-xs);
 }
@@ -678,7 +660,7 @@
     background-color: var(--bg-white);
     border-radius: var(--border-radius);
     padding: var(--spacing-xl);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
 }
 
@@ -740,13 +722,13 @@
     background-color: var(--bg-white);
     border-radius: var(--border-radius);
     padding: var(--spacing-xl);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
 }
 
 .option-card:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(255, 136, 0, 0.1);
+    box-shadow: var(--shadow-glow-sm);
 }
 
 .option-header {
@@ -796,7 +778,7 @@
     background-color: var(--bg-white);
     border-radius: var(--border-radius);
     padding: var(--spacing-2xl);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
 }
 
 .usage-notes h3 {
@@ -882,8 +864,8 @@
 .pricing-card {
     background: var(--bg-white);
     border-radius: var(--border-radius);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-2xl);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
     position: relative;
     border: 2px solid transparent;
@@ -891,7 +873,7 @@
 
 .pricing-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 8px 30px rgba(255, 136, 0, 0.15);
+    box-shadow: var(--shadow-glow-sm);
 }
 
 
@@ -1109,10 +1091,10 @@
 }
 
 /* 태블릿 반응형 */
-@media (max-width: 1024px) and (min-width: 769px) {
+@media (min-width: 769px) and (max-width: 1024px) {
-    .options-grid {
+    .pricing-cards { grid-template-columns: repeat(2, 1fr); }
-        grid-template-columns: repeat(2, 1fr);
+    .options-grid { grid-template-columns: repeat(2, 1fr); }
-    }
+    .equipment-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
 /* 모바일 반응형 */
@@ -1221,7 +1203,7 @@
 
 .portfolio-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
+    box-shadow: var(--shadow-glow-sm);
 }
 
 /* 팝업 오버레이 */
@@ -1341,7 +1323,7 @@
     padding-bottom: 56.25%; /* 16:9 aspect ratio */
     border-radius: var(--border-radius);
     overflow: hidden;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
 }
 
 .portfolio-item .video-wrapper.shorts-wrapper {
@@ -1476,7 +1458,7 @@
 
 .feature-item:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
 }
 
 .feature-icon {
@@ -1644,7 +1626,7 @@
 
 .mv-step:hover {
     transform: translateX(5px);
-    box-shadow: 0 4px 15px rgba(255, 136, 0, 0.15);
+    box-shadow: var(--shadow-glow-sm);
 }
 
 .step-icon {
@@ -1958,13 +1940,13 @@
     padding: var(--spacing-2xl);
     background: var(--bg-white);
     border-radius: var(--border-radius);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
     transition: var(--transition);
 }
 
 .equipment-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-lg);
 }
 
 .equipment-icon {
@@ -2067,14 +2049,6 @@
 
 /* 반응형 디자인 */
 @media (max-width: 768px) {
-    .page-header h1 {
-        font-size: var(--font-3xl);
-    }
-    
-    .page-header p {
-        font-size: var(--font-base);
-    }
-    
     .services-table th,
     .services-table td {
         padding: var(--spacing-md);
@@ -2149,7 +2123,7 @@
    다크모드
    ======================================== */
 [data-theme="dark"] .page-header {
-    background: linear-gradient(135deg, #cc6d00, #b35500);
+    background: var(--dark-header-gradient);
 }
 
 [data-theme="dark"] .service-package {
@@ -2159,7 +2133,7 @@
 }
 
 [data-theme="dark"] .package-header h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .pricing-card {
@@ -2179,11 +2153,15 @@
 }
 
 [data-theme="dark"] .pricing-header h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
+}
+
+[data-theme="dark"] .pricing-features h5 {
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .pricing-features li {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
     border-bottom-color: var(--glass-border);
 }
 
@@ -2195,7 +2173,7 @@
 }
 
 [data-theme="dark"] .combo-card h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .combo-pricing {
@@ -2203,11 +2181,11 @@
 }
 
 [data-theme="dark"] .combo-features h5 {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .combo-features li {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .services-table-wrapper .card {
@@ -2221,12 +2199,12 @@
 
 [data-theme="dark"] .services-table th {
     background: rgba(255, 136, 0, 0.15);
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
     border-color: var(--glass-border);
 }
 
 [data-theme="dark"] .services-table td {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--dark-text-secondary);
     border-color: var(--glass-border);
 }
 
@@ -2244,11 +2222,11 @@
 }
 
 [data-theme="dark"] .step-title {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .step-desc {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .mv-step {
@@ -2259,25 +2237,25 @@
 [data-theme="dark"] .mv-step h4,
 [data-theme="dark"] .mv-step h5,
 [data-theme="dark"] .step-details h5 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .mv-step p,
 [data-theme="dark"] .mv-step li,
 [data-theme="dark"] .step-details p {
-    color: rgba(255, 255, 255, 0.75);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .detail-note {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .mv-intro > p {
-    color: rgba(255, 255, 255, 0.75);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .mv-process > h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
     border-bottom-color: var(--primary-color);
 }
 
@@ -2288,12 +2266,12 @@
 
 [data-theme="dark"] .refund-table th {
     background: rgba(255, 136, 0, 0.15);
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
     border-color: var(--glass-border);
 }
 
 [data-theme="dark"] .refund-table td {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--dark-text-secondary);
     border-color: var(--glass-border);
 }
 
@@ -2309,11 +2287,11 @@
 }
 
 [data-theme="dark"] .equipment-card h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .equipment-card p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .card {
@@ -2323,12 +2301,12 @@
 
 [data-theme="dark"] .card h3,
 [data-theme="dark"] .card h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .card p,
 [data-theme="dark"] .card li {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .service-notes {
@@ -2337,7 +2315,7 @@
 }
 
 [data-theme="dark"] .service-notes li {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .tech-specs {
@@ -2346,7 +2324,7 @@
 }
 
 [data-theme="dark"] .tech-specs li {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .portfolio-popup {
@@ -2365,7 +2343,7 @@
 
 [data-theme="dark"] .email-template pre {
     background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--dark-text-secondary);
     border-color: var(--glass-border);
 }
 
@@ -2375,11 +2353,11 @@
 }
 
 [data-theme="dark"] .options-card h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .options-card p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 /* 프로세스 플로우 */
@@ -2404,21 +2382,21 @@
 }
 
 [data-theme="dark"] .email-field {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .form-section h5 {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .form-help {
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .form-placeholder {
     background: rgba(255, 255, 255, 0.03);
     border-color: rgba(255, 255, 255, 0.15);
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 /* 최소 시간 뱃지 */
@@ -2434,7 +2412,7 @@
 }
 
 [data-theme="dark"] .service-note p {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 /* 추가 요금 */
@@ -2443,17 +2421,17 @@
 }
 
 [data-theme="dark"] .additional-pricing p {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 /* VAT 안내 */
 [data-theme="dark"] .vat-notice-inline {
-    color: rgba(255, 255, 255, 0.45);
+    color: var(--dark-text-disabled);
 }
 
 /* 카드 특징 */
 [data-theme="dark"] .card-features li {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 /* 서비스 정보 카드 */
@@ -2463,7 +2441,7 @@
 }
 
 [data-theme="dark"] .info-card p {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--dark-text-secondary);
 }
 
 /* 포트폴리오 미리보기 */
@@ -2474,7 +2452,7 @@
 /* 스트리밍 태그 */
 [data-theme="dark"] .streamer {
     background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
 }
 
 /* 스트리밍 특징 */
@@ -2483,7 +2461,7 @@
 }
 
 [data-theme="dark"] .streaming-features h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 /* MV 워크플로우 노트 */
@@ -2493,7 +2471,7 @@
 }
 
 [data-theme="dark"] .mv-workflow-note p {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--dark-text-secondary);
 }
 
 /* 가격 옵션 */
@@ -2503,7 +2481,7 @@
 }
 
 [data-theme="dark"] .option-type {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 /* 모션캡처 가격 섹션 */
@@ -2513,7 +2491,7 @@
 }
 
 [data-theme="dark"] .mv-mocap-pricing h6 {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 /* MV 비용 요약 */
@@ -2523,7 +2501,7 @@
 }
 
 [data-theme="dark"] .mv-cost-summary > h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 /* 환불 테이블 보더 */
@@ -2537,15 +2515,15 @@
 }
 
 [data-theme="dark"] .price-display .price-unit {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .price-vat {
-    color: rgba(255, 255, 255, 0.45);
+    color: var(--dark-text-disabled);
 }
 
 [data-theme="dark"] .original-price {
-    color: rgba(255, 255, 255, 0.35);
+    color: var(--dark-text-disabled);
 }
 
 /* MV 가격 요약 */
@@ -2555,7 +2533,7 @@
 }
 
 [data-theme="dark"] .mv-price-summary .price-note {
-    color: rgba(255, 255, 255, 0.75);
+    color: var(--dark-text-secondary);
 }
 
 /* MV 페이즈 헤더 */
@@ -2597,7 +2575,7 @@
 }
 
 [data-theme="dark"] .note-item p {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 /* 이용 안내사항 */
@@ -2607,7 +2585,7 @@
 }
 
 [data-theme="dark"] .usage-notes h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 /* 옵션 카드 */
@@ -2622,7 +2600,7 @@
 }
 
 [data-theme="dark"] .option-header h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .option-item {
@@ -2630,7 +2608,7 @@
 }
 
 [data-theme="dark"] .option-item h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 /* 피쳐 아이템 */
@@ -2640,7 +2618,7 @@
 }
 
 [data-theme="dark"] .feature-item p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 /* 통합 특징 그리드 */
@@ -2651,7 +2629,7 @@
 }
 
 [data-theme="dark"] .features-grid.unified .feature-item p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 /* 컴팩트 기술 사양 */
@@ -2661,12 +2639,12 @@
 }
 
 [data-theme="dark"] .tech-specs-compact h5 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .spec-tag {
     background: rgba(255, 255, 255, 0.06);
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dark-text-secondary);
     box-shadow: none;
 }
 
@@ -2684,11 +2662,11 @@
 
 /* 팝업 바디 */
 [data-theme="dark"] .popup-body {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--dark-text-secondary);
 }
 
 [data-theme="dark"] .portfolio-section h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 /* MV 프로덕션 패키지 */
@@ -2704,26 +2682,26 @@
 }
 
 [data-theme="dark"] .cost-label {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 /* 카드 헤더 */
 [data-theme="dark"] .card-header h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 /* 가격 유닛 (테이블 내) */
 [data-theme="dark"] .price-unit {
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--dark-text-tertiary);
 }
 
 [data-theme="dark"] .price-note {
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--dark-text-tertiary);
 }
 
 /* 서비스 테이블 래퍼 */
 [data-theme="dark"] .services-table-wrapper h3 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 /* CTA 섹션 */
@@ -2732,34 +2710,34 @@
 }
 
 [data-theme="dark"] .cta-section h2 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .cta-section p {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 /* 스텝 콘텐츠 */
 [data-theme="dark"] .step-content h4 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .step-content p {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dark-text-tertiary);
 }
 
 /* 피쳐 컬럼 */
 [data-theme="dark"] .feature-column h5 {
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .feature-column li {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-text-tertiary);
 }
 
 /* 스트리밍 인포 */
 [data-theme="dark"] .streaming-info p {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--dark-text-primary);
 }
 
 /* 서비스 테이블 보더 */

index.html

@@ -505,8 +505,8 @@
 
             <!-- 개인 크리에이터 탭 -->
             <div class="portfolio-tab-panel active" id="portfolio-creator">
-                <div class="portfolio-grid-v2">
+                <div class="portfolio-grid-v2 stagger-children">
-                    <div class="portfolio-card reveal" data-reveal="up" data-delay="0">
+                    <div class="portfolio-card reveal" data-reveal="up">
                         <div class="portfolio-video">
                             <iframe data-src="https://www.youtube.com/embed/jQTi8adbvaM" title="머쉬베놈 - 돌림판 CROA COVER" allowfullscreen loading="lazy"></iframe>
                         </div>
@@ -518,7 +518,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="portfolio-card reveal" data-reveal="up" data-delay="100">
+                    <div class="portfolio-card reveal" data-reveal="up">
                         <div class="portfolio-video">
                             <iframe data-src="https://www.youtube.com/embed/FecqTyUU6y0" title="QWER - 가짜아이돌 COVER BY VENY" allowfullscreen loading="lazy"></iframe>
                         </div>
@@ -530,7 +530,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="portfolio-card reveal" data-reveal="up" data-delay="200">
+                    <div class="portfolio-card reveal" data-reveal="up">
                         <div class="portfolio-video">
                             <iframe data-src="https://www.youtube.com/embed/ryliwrc0Yms" title="aesoopa 에숲파 Black Mamba MV" allowfullscreen loading="lazy"></iframe>
                         </div>
@@ -679,8 +679,8 @@
     <section class="cta-section">
         <div class="cta-bg"></div>
         <div class="container text-center">
-            <div class="cta-label reveal" data-reveal="up">Get Started</div>
+            <div class="cta-label reveal" data-reveal="fade">Get Started</div>
-            <h2 class="cta-title reveal" data-reveal="up" data-delay="100">당신의 아이디어,<br>움직임으로 만들어 드립니다</h2>
+            <h2 class="cta-title reveal" data-reveal="fade" data-delay="100">당신의 아이디어,<br>움직임으로 만들어 드립니다</h2>
             <p class="cta-description reveal" data-reveal="up" data-delay="200">
                 전문 모션캡쳐 스튜디오에서 크리에이티브의 새로운 가능성을 경험하세요
             </p>

services.html

@@ -97,8 +97,8 @@
                 
                 <!-- 가격 카드들 -->
                 <div class="pricing-cards-wrapper">
-                    <div class="pricing-cards">
+                    <div class="pricing-cards stagger-children">
-                        <div class="pricing-card basic">
+                        <div class="pricing-card basic reveal" data-reveal="up">
                             <div class="card-header">
                                 <span class="person-icon">👤</span>
                                 <h4>1인 이용</h4>
@@ -118,7 +118,7 @@
                             </div>
                         </div>
 
-                        <div class="pricing-card team">
+                        <div class="pricing-card team reveal" data-reveal="up">
                             <div class="card-header">
                                 <span class="person-icon">👥</span>
                                 <h4>2인 이용</h4>
@@ -139,7 +139,7 @@
                             </div>
                         </div>
 
-                        <div class="pricing-card extended">
+                        <div class="pricing-card extended reveal" data-reveal="up">
                             <div class="card-header">
                                 <span class="person-icon">👨‍👩‍👧‍👦</span>
                                 <h4>추가 인원</h4>
@@ -458,9 +458,9 @@
                 <p><em>*부가세 별도</em></p>
             </div>
 
-            <div class="options-grid">
+            <div class="options-grid stagger-children">
                 <!-- 캐릭터 세팅 -->
-                <div class="option-card">
+                <div class="option-card reveal" data-reveal="up">
                     <div class="option-header">
                         <span class="option-icon">🎨</span>
                         <h3>캐릭터 세팅</h3>
@@ -475,7 +475,7 @@
                 </div>
 
                 <!-- 배경 세팅 -->
-                <div class="option-card">
+                <div class="option-card reveal" data-reveal="up">
                     <div class="option-header">
                         <span class="option-icon">🏞️</span>
                         <h3>배경 세팅</h3>
@@ -502,7 +502,7 @@
                 </div>
 
                 <!-- 프랍 세팅 -->
-                <div class="option-card">
+                <div class="option-card reveal" data-reveal="up">
                     <div class="option-header">
                         <span class="option-icon">🎪</span>
                         <h3>프랍 세팅</h3>
@@ -554,7 +554,7 @@
             </div>
 
             <!-- 스튜디오 대관 절차 -->
-            <div class="card">
+            <div class="card card--flat reveal" data-reveal="fade">
                 <h3>스튜디오 대관 절차</h3>
                 <div class="process-flow">
                     <div class="process-step">
@@ -655,7 +655,7 @@
 
             <!-- 예약 및 취소 규정 -->
             <div class="grid grid-2">
-                <div class="card">
+                <div class="card card--flat reveal" data-reveal="fade">
                     <h3>예약 안내</h3>
                     <ul class="info-list">
                         <li>스튜디오 예약은 이용 희망일로부터 최소 2주 전에 신청하시는 것을 권장합니다.</li>
@@ -663,7 +663,7 @@
                     </ul>
                 </div>
 
-                <div class="card">
+                <div class="card card--flat reveal" data-reveal="fade">
                     <h3>방문 안내</h3>
                     <ul class="info-list">
                         <li>본 촬영 전 모션캡쳐 수트 착용 등의 준비시간이 소요되므로 촬영예정 시간 최소 30분 전에 방문 부탁드립니다. (준비시간은 이용시간에 포함되지 않습니다.)</li>
@@ -673,7 +673,7 @@
             </div>
 
             <!-- 취소 환불 규정 -->
-            <div class="card">
+            <div class="card card--flat reveal" data-reveal="fade">
                 <h3>취소 환불 규정</h3>
                 <div class="table-responsive">
                     <table class="refund-table">