mingle/mingle-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: 전체 디자인 개선, 접근성 강화, OG 이미지 변경

Browse Source 
- 다크모드 지원 추가 (모든 페이지 CSS)
- 글래스모피즘 카드 스타일 통일
- 하드코딩 컬러 → CSS 변수 전환
- 접근성 개선: skip nav, aria-label, sr-only, role="dialog"
- 파일 구조 정리: 이미지/로고 images/ 폴더로 이동, 미사용 파일 삭제
- 서비스 패키지 8시간 → 6시간으로 변경
- OG 이미지를 전용 mingle-OG.png로 변경
- 컨택트 다크모드 위치 박스 투명 처리

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
68893236+KINDNICK@users.noreply.github.com 2026-01-31 02:44:19 +09:00
parent 1179d6832e
commit fa237316df
71 changed files with 4833 additions and 6253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.claude/settings.local.json
View File

@ -27,7 +27,13 @@
"WebFetch(domain:github.com)",
"WebFetch(domain:raw.githubusercontent.com)",
"Bash(npx --yes degit:*)",
"Bash(npx degit:*)"
"Bash(npx degit:*)",
"Bash(powershell -Command \"foreach \\($f in @\\(''about'',''services'',''portfolio'',''gallery'',''contact'',''qna''\\)\\) { $path = \"\"c:\\\\Dev\\\\Web\\\\mingle-website$f.html\"\"; $content = [IO.File]::ReadAllText\\($path\\); $content = [regex]::Replace\\($content, ''\\(?s\\)\\\\s*<!-- 브레드크럼 -->.*?</nav>'', ''''\\); [IO.File]::WriteAllText\\($path, $content\\); Write-Host \"\"Done: $f.html\"\" }\")",
"Bash(git rm:*)",
"Bash(find:*)",
"Bash(grep:*)",
"Bash(echo:*)",
"Bash(git commit -m \"$\\(cat <<''EOF''\nUpdate: 전체 디자인 개선, 접근성 강화, OG 이미지 변경\n\n- 다크모드 지원 추가 \\(모든 페이지 CSS\\)\n- 글래스모피즘 카드 스타일 통일\n- 하드코딩 컬러 → CSS 변수 전환\n- 접근성 개선: skip nav, aria-label, sr-only, role=\"dialog\"\n- 파일 구조 정리: 이미지/로고 images/ 폴더로 이동, 미사용 파일 삭제\n- 서비스 패키지 8시간 → 6시간으로 변경\n- OG 이미지를 전용 mingle-OG.png로 변경\n- 컨택트 다크모드 위치 박스 투명 처리\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n\\)\")"
],
"deny": [],
"ask": []

49
404.html
View File

@ -13,9 +13,9 @@
<title>페이지를 찾을 수 없습니다 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- 폰트 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
@ -127,6 +127,47 @@
color: var(--primary-hover);
}
/* 다크모드 */
[data-theme="dark"] .error-container {
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a1520 100%);
}
[data-theme="dark"] .error-title {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .error-description {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .search-input {
background: rgba(255, 255, 255, 0.05);
border-color: var(--glass-border);
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .search-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .search-input:focus {
border-color: var(--primary-color);
}
[data-theme="dark"] .helpful-links h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .helpful-links li {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .helpful-links a {
color: var(--primary-color);
}
@media (max-width: 768px) {
.error-code {
font-size: 6rem;
@ -167,6 +208,7 @@
</div>
<div class="search-container">
<label for="errorSearch" class="sr-only">검색</label>
<input type="text" class="search-input" placeholder="원하는 내용을 검색해보세요..." id="errorSearch">
</div>
@ -183,6 +225,7 @@
</div>
</div>
<script src="js/common.js"></script>
<script>
// 검색 기능
document.getElementById('errorSearch').addEventListener('keypress', function(e) {

18
Caddyfile
View File

@ -1,18 +0,0 @@
# HTTP to HTTPS redirect
:80 {
redir https://{host}{uri} permanent
}
# HTTPS with self-signed cert (bypassing Let's Encrypt issues)
:443 {
tls internal {
on_demand
}
reverse_proxy localhost:8001
# Logging
log {
output file C:\Dev\Web\mingle-website\caddy\access.log
format json
}
}

BIN
Logo icon/chzzk Icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
Partners/(주)세광종합기술단.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
Partners/메가메타.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

70
about.html
View File

@ -13,9 +13,9 @@
<title>회사소개 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/about.html">
@ -33,7 +33,7 @@
<meta property="og:description" content="2025년 설립된 인천 유일의 모션캡처 전문 스튜디오. 기술과 창의력이 어우러진 버추얼 콘텐츠 창작 공간입니다">
<meta property="og:url" content="https://minglestudio.co.kr/about.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
@ -44,7 +44,7 @@
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="회사소개 - 밍글 스튜디오">
<meta name="twitter:description" content="2025년 설립된 인천 유일의 모션캡처 전문 스튜디오. 기술과 창의력이 어우러진 버추얼 콘텐츠 창작 공간입니다">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
@ -60,24 +60,12 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- 브레드크럼 -->
<nav class="breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="index.html" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current">회사 소개</span>
</li>
</ol>
</div>
</nav>
<main id="main-content">
<!-- 페이지 헤더 -->
<section class="page-header">
<div class="container">
@ -90,7 +78,7 @@
<section class="section">
<div class="container">
<div class="company-info">
<div class="info-grid">
<div class="info-grid reveal">
<div class="info-item">
<h3>회사명</h3>
<p>밍글 스튜디오 (Mingle Studio)</p>
@ -111,13 +99,13 @@
</div>
<div class="about-content">
<div class="card">
<div class="card reveal">
<h2>회사 소개</h2>
<p>밍글 스튜디오는 창작자와 기술, 사람과 사람 사이의 '어우러짐'을 통해 새로운 콘텐츠를 만들어가는 모션 캡쳐 기반의 창작 공간입니다.</p>
<p>설립 이후, 누구나 편하게 사용 가능한 스튜디오 대관 서비스를 중심으로 버추얼 콘텐츠 제작 환경을 제공합니다.</p>
</div>
<div class="card">
<div class="card reveal" data-delay="100">
<h2>비전 & 미션</h2>
<div class="vision-mission">
<div class="vm-item">
@ -131,7 +119,7 @@
</div>
</div>
<div class="card">
<div class="card reveal" data-delay="200">
<h2>연혁</h2>
<div class="timeline">
<div class="timeline-item">
@ -163,9 +151,9 @@
</div>
<div class="team-grid">
<div class="team-card">
<div class="team-card reveal">
<div class="team-avatar">
<img src="Profile_image/제이제이.png" alt="김희진 프로필">
<img src="images/profile/제이제이.png" alt="김희진 프로필">
</div>
<h3>김희진</h3>
<p class="team-nickname">JAYJAY</p>
@ -173,9 +161,9 @@
<p class="team-desc">배경/리소스 제작, 인사 및 프로젝트 관리</p>
</div>
<div class="team-card">
<div class="team-card reveal" data-delay="100">
<div class="team-avatar">
<img src="Profile_image/카닉.png" alt="김광진 프로필">
<img src="images/profile/카닉.png" alt="김광진 프로필">
</div>
<h3>김광진</h3>
<p class="team-nickname">KINDNICK</p>
@ -183,9 +171,9 @@
<p class="team-desc">스튜디오 전체 기술 운영, 모션캡쳐 장비 관리, 음향 시스템, 엔진 프로그래밍</p>
</div>
<div class="team-card">
<div class="team-card reveal" data-delay="200">
<div class="team-avatar">
<img src="Profile_image/야모.png" alt="이승민 프로필">
<img src="images/profile/야모.png" alt="이승민 프로필">
</div>
<h3>이승민</h3>
<p class="team-nickname">YAMO</p>
@ -205,22 +193,22 @@
</div>
<div class="values-grid">
<div class="value-item">
<div class="value-item reveal">
<div class="value-icon">🤝</div>
<h3>협업</h3>
<p>기술자와 창작자가 함께 만드는 시너지</p>
</div>
<div class="value-item">
<div class="value-item reveal" data-delay="100">
<div class="value-icon">💡</div>
<h3>혁신</h3>
<p>최신 기술로 새로운 창작의 가능성 제시</p>
</div>
<div class="value-item">
<div class="value-item reveal" data-delay="200">
<div class="value-icon">🎨</div>
<h3>창의성</h3>
<p>상상을 현실로 만드는 창의적 솔루션</p>
</div>
<div class="value-item">
<div class="value-item reveal" data-delay="300">
<div class="value-icon">⭐</div>
<h3>품질</h3>
<p>최고 수준의 모션캡쳐 퀄리티 추구</p>
@ -229,17 +217,19 @@
</div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
<footer class="site-footer">
<div class="container">
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

10
backgrounds.html
View File

@ -13,8 +13,8 @@
<title>배경 씬 라이브러리 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
@ -111,7 +111,7 @@
<div class="image-modal" id="imageModal">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close">&times;</button>
<button class="modal-close" aria-label="닫기">&times;</button>
<img src="" alt="" class="modal-image" id="modalImage">
<div class="modal-info">
<h3 id="modalTitle"></h3>
@ -125,8 +125,8 @@
<div id="footer-placeholder"></div>
<!-- 백업 푸터 -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<footer class="site-footer">
<div class="container">
<div style="color:#bbb;font-size:0.98rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

202
caddy/LICENSE
View File

@ -1,202 +0,0 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

200
caddy/README.md
View File

@ -1,200 +0,0 @@
<p align="center">
<a href="https://caddyserver.com">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/1128849/210187358-e2c39003-9a5e-4dd5-a783-6deb6483ee72.svg">
<source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/1128849/210187356-dfb7f1c5-ac2e-43aa-bb23-fc014280ae1f.svg">
<img src="https://user-images.githubusercontent.com/1128849/210187356-dfb7f1c5-ac2e-43aa-bb23-fc014280ae1f.svg" alt="Caddy" width="550">
</picture>
</a>
<br>
<h3 align="center">a <a href="https://zerossl.com"><img src="https://user-images.githubusercontent.com/55066419/208327323-2770dc16-ec09-43a0-9035-c5b872c2ad7f.svg" height="28" style="vertical-align: -7.7px" valign="middle"></a> project</h3>
</p>
<hr>
<h3 align="center">Every site on HTTPS</h3>
<p align="center">Caddy is an extensible server platform that uses TLS by default.</p>
<p align="center">
<a href="https://github.com/caddyserver/caddy/actions/workflows/ci.yml"><img src="https://github.com/caddyserver/caddy/actions/workflows/ci.yml/badge.svg"></a>
<a href="https://pkg.go.dev/github.com/caddyserver/caddy/v2"><img src="https://img.shields.io/badge/godoc-reference-%23007d9c.svg"></a>
<br>
<a href="https://twitter.com/caddyserver" title="@caddyserver on Twitter"><img src="https://img.shields.io/badge/twitter-@caddyserver-55acee.svg" alt="@caddyserver on Twitter"></a>
<a href="https://caddy.community" title="Caddy Forum"><img src="https://img.shields.io/badge/community-forum-ff69b4.svg" alt="Caddy Forum"></a>
<br>
<a href="https://sourcegraph.com/github.com/caddyserver/caddy?badge" title="Caddy on Sourcegraph"><img src="https://sourcegraph.com/github.com/caddyserver/caddy/-/badge.svg" alt="Caddy on Sourcegraph"></a>
<a href="https://cloudsmith.io/~caddy/repos/"><img src="https://img.shields.io/badge/OSS%20hosting%20by-cloudsmith-blue?logo=cloudsmith" alt="Cloudsmith"></a>
</p>
<p align="center">
<a href="https://github.com/caddyserver/caddy/releases">Releases</a> ·
<a href="https://caddyserver.com/docs/">Documentation</a> ·
<a href="https://caddy.community">Get Help</a>
</p>
### Menu
- [Features](#features)
- [Install](#install)
- [Build from source](#build-from-source)
- [For development](#for-development)
- [With version information and/or plugins](#with-version-information-andor-plugins)
- [Quick start](#quick-start)
- [Overview](#overview)
- [Full documentation](#full-documentation)
- [Getting help](#getting-help)
- [About](#about)
<p align="center">
<b>Powered by</b>
<br>
<a href="https://github.com/caddyserver/certmagic">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/55066419/206946718-740b6371-3df3-4d72-a822-47e4c48af999.png">
<source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/1128849/49704830-49d37200-fbd5-11e8-8385-767e0cd033c3.png">
<img src="https://user-images.githubusercontent.com/1128849/49704830-49d37200-fbd5-11e8-8385-767e0cd033c3.png" alt="CertMagic" width="250">
</picture>
</a>
</p>
## [Features](https://caddyserver.com/features)
- **Easy configuration** with the [Caddyfile](https://caddyserver.com/docs/caddyfile)
- **Powerful configuration** with its [native JSON config](https://caddyserver.com/docs/json/)
- **Dynamic configuration** with the [JSON API](https://caddyserver.com/docs/api)
- [**Config adapters**](https://caddyserver.com/docs/config-adapters) if you don't like JSON
- **Automatic HTTPS** by default
- [ZeroSSL](https://zerossl.com) and [Let's Encrypt](https://letsencrypt.org) for public names
- Fully-managed local CA for internal names & IPs
- Can coordinate with other Caddy instances in a cluster
- Multi-issuer fallback
- **Stays up when other servers go down** due to TLS/OCSP/certificate-related issues
- **Production-ready** after serving trillions of requests and managing millions of TLS certificates
- **Scales to hundreds of thousands of sites** as proven in production
- **HTTP/1.1, HTTP/2, and HTTP/3** all supported by default
- **Highly extensible** [modular architecture](https://caddyserver.com/docs/architecture) lets Caddy do anything without bloat
- **Runs anywhere** with **no external dependencies** (not even libc)
- Written in Go, a language with higher **memory safety guarantees** than other servers
- Actually **fun to use**
- So much more to [discover](https://caddyserver.com/features)
## Install
The simplest, cross-platform way to get started is to download Caddy from [GitHub Releases](https://github.com/caddyserver/caddy/releases) and place the executable file in your PATH.
See [our online documentation](https://caddyserver.com/docs/install) for other install instructions.
## Build from source
Requirements:
- [Go 1.21 or newer](https://golang.org/dl/)
### For development
_**Note:** These steps [will not embed proper version information](https://github.com/golang/go/issues/29228). For that, please follow the instructions in the next section._
```bash
$ git clone "https://github.com/caddyserver/caddy.git"
$ cd caddy/cmd/caddy/
$ go build
```
When you run Caddy, it may try to bind to low ports unless otherwise specified in your config. If your OS requires elevated privileges for this, you will need to give your new binary permission to do so. On Linux, this can be done easily with: `sudo setcap cap_net_bind_service=+ep ./caddy`
If you prefer to use `go run` which only creates temporary binaries, you can still do this with the included `setcap.sh` like so:
```bash
$ go run -exec ./setcap.sh main.go
```
If you don't want to type your password for `setcap`, use `sudo visudo` to edit your sudoers file and allow your user account to run that command without a password, for example:
```
username ALL=(ALL:ALL) NOPASSWD: /usr/sbin/setcap
```
replacing `username` with your actual username. Please be careful and only do this if you know what you are doing! We are only qualified to document how to use Caddy, not Go tooling or your computer, and we are providing these instructions for convenience only; please learn how to use your own computer at your own risk and make any needful adjustments.
### With version information and/or plugins
Using [our builder tool, `xcaddy`](https://github.com/caddyserver/xcaddy)...
```
$ xcaddy build
```
...the following steps are automated:
1. Create a new folder: `mkdir caddy`
2. Change into it: `cd caddy`
3. Copy [Caddy's main.go](https://github.com/caddyserver/caddy/blob/master/cmd/caddy/main.go) into the empty folder. Add imports for any custom plugins you want to add.
4. Initialize a Go module: `go mod init caddy`
5. (Optional) Pin Caddy version: `go get github.com/caddyserver/caddy/v2@version` replacing `version` with a git tag, commit, or branch name.
6. (Optional) Add plugins by adding their import: `_ "import/path/here"`
7. Compile: `go build`
## Quick start
The [Caddy website](https://caddyserver.com/docs/) has documentation that includes tutorials, quick-start guides, reference, and more.
**We recommend that all users -- regardless of experience level -- do our [Getting Started](https://caddyserver.com/docs/getting-started) guide to become familiar with using Caddy.**
If you've only got a minute, [the website has several quick-start tutorials](https://caddyserver.com/docs/quick-starts) to choose from! However, after finishing a quick-start tutorial, please read more documentation to understand how the software works. 🙂
## Overview
Caddy is most often used as an HTTPS server, but it is suitable for any long-running Go program. First and foremost, it is a platform to run Go applications. Caddy "apps" are just Go programs that are implemented as Caddy modules. Two apps -- `tls` and `http` -- ship standard with Caddy.
Caddy apps instantly benefit from [automated documentation](https://caddyserver.com/docs/json/), graceful on-line [config changes via API](https://caddyserver.com/docs/api), and unification with other Caddy apps.
Although [JSON](https://caddyserver.com/docs/json/) is Caddy's native config language, Caddy can accept input from [config adapters](https://caddyserver.com/docs/config-adapters) which can essentially convert any config format of your choice into JSON: Caddyfile, JSON 5, YAML, TOML, NGINX config, and more.
The primary way to configure Caddy is through [its API](https://caddyserver.com/docs/api), but if you prefer config files, the [command-line interface](https://caddyserver.com/docs/command-line) supports those too.
Caddy exposes an unprecedented level of control compared to any web server in existence. In Caddy, you are usually setting the actual values of the initialized types in memory that power everything from your HTTP handlers and TLS handshakes to your storage medium. Caddy is also ridiculously extensible, with a powerful plugin system that makes vast improvements over other web servers.
To wield the power of this design, you need to know how the config document is structured. Please see [our documentation site](https://caddyserver.com/docs/) for details about [Caddy's config structure](https://caddyserver.com/docs/json/).
Nearly all of Caddy's configuration is contained in a single config document, rather than being scattered across CLI flags and env variables and a configuration file as with other web servers. This makes managing your server config more straightforward and reduces hidden variables/factors.
## Full documentation
Our website has complete documentation:
**https://caddyserver.com/docs/**
The docs are also open source. You can contribute to them here: https://github.com/caddyserver/website
## Getting help
- We advise companies using Caddy to secure a support contract through [Ardan Labs](https://www.ardanlabs.com/my/contact-us?dd=caddy) before help is needed.
- A [sponsorship](https://github.com/sponsors/mholt) goes a long way! We can offer private help to sponsors. If Caddy is benefitting your company, please consider a sponsorship. This not only helps fund full-time work to ensure the longevity of the project, it provides your company the resources, support, and discounts you need; along with being a great look for your company to your customers and potential customers!
- Individuals can exchange help for free on our community forum at https://caddy.community. Remember that people give help out of their spare time and good will. The best way to get help is to give it first!
Please use our [issue tracker](https://github.com/caddyserver/caddy/issues) only for bug reports and feature requests, i.e. actionable development items (support questions will usually be referred to the forums).
## About
Matthew Holt began developing Caddy in 2014 while studying computer science at Brigham Young University. (The name "Caddy" was chosen because this software helps with the tedious, mundane tasks of serving the Web, and is also a single place for multiple things to be organized together.) It soon became the first web server to use HTTPS automatically and by default, and now has hundreds of contributors and has served trillions of HTTPS requests.
**The name "Caddy" is trademarked.** The name of the software is "Caddy", not "Caddy Server" or "CaddyServer". Please call it "Caddy" or, if you wish to clarify, "the Caddy web server". Caddy is a registered trademark of Stack Holdings GmbH.
- _Project on Twitter: [@caddyserver](https://twitter.com/caddyserver)_
- _Author on Twitter: [@mholt6](https://twitter.com/mholt6)_
Caddy is a project of [ZeroSSL](https://zerossl.com), a Stack Holdings company.
Debian package repository hosting is graciously provided by [Cloudsmith](https://cloudsmith.com). Cloudsmith is the only fully hosted, cloud-native, universal package management solution, that enables your organization to create, store and share packages in any format, to any place, with total confidence.

21
caddy/access.log
View File

@ -1,21 +0,0 @@
{"level":"info","ts":1767974718.0383568,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"66.133.109.36","remote_port":"40279","client_ip":"66.133.109.36","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/ngyiKxhwpD1mwM0fa8bW3CBbJHOOh04C9g-KmXJVS3s","headers":{"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"],"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"info","ts":1767974719.9677167,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"54.203.1.121","remote_port":"48938","client_ip":"54.203.1.121","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/ngyiKxhwpD1mwM0fa8bW3CBbJHOOh04C9g-KmXJVS3s","headers":{"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"],"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"info","ts":1767974728.642247,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"47.128.77.196","remote_port":"55926","client_ip":"47.128.77.196","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/ngyiKxhwpD1mwM0fa8bW3CBbJHOOh04C9g-KmXJVS3s","headers":{"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"],"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"info","ts":1767974730.6060884,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"3.14.254.124","remote_port":"31374","client_ip":"3.14.254.124","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/ngyiKxhwpD1mwM0fa8bW3CBbJHOOh04C9g-KmXJVS3s","headers":{"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"],"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Content-Type":["text/plain"],"Server":["Caddy"]}}
{"level":"info","ts":1767974733.4113173,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"13.50.236.75","remote_port":"51302","client_ip":"13.50.236.75","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/ngyiKxhwpD1mwM0fa8bW3CBbJHOOh04C9g-KmXJVS3s","headers":{"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"],"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"info","ts":1767976567.2994442,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"23.178.112.212","remote_port":"32969","client_ip":"23.178.112.212","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/_Bh1-SpqEkMeevVc4FJpsnqcXl2P_zd81sJTrS2fIL0","headers":{"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"],"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"info","ts":1767976568.2214603,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"52.14.92.2","remote_port":"31036","client_ip":"52.14.92.2","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/_Bh1-SpqEkMeevVc4FJpsnqcXl2P_zd81sJTrS2fIL0","headers":{"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"],"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"info","ts":1767976570.2455995,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"13.53.35.17","remote_port":"60524","client_ip":"13.53.35.17","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/_Bh1-SpqEkMeevVc4FJpsnqcXl2P_zd81sJTrS2fIL0","headers":{"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"],"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"info","ts":1767976572.9680867,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"54.218.186.63","remote_port":"48478","client_ip":"54.218.186.63","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/_Bh1-SpqEkMeevVc4FJpsnqcXl2P_zd81sJTrS2fIL0","headers":{"Accept-Encoding":["gzip"],"Connection":["close"],"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"],"Accept":["*/*"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"info","ts":1767976579.4746377,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"18.142.243.164","remote_port":"23420","client_ip":"18.142.243.164","proto":"HTTP/1.1","method":"GET","host":"www.mingleon.duckdns.org","uri":"/.well-known/acme-challenge/_Bh1-SpqEkMeevVc4FJpsnqcXl2P_zd81sJTrS2fIL0","headers":{"Accept":["*/*"],"Accept-Encoding":["gzip"],"Connection":["close"],"User-Agent":["Mozilla/5.0 (compatible; Let's Encrypt validation server; +https://www.letsencrypt.org)"]}},"bytes_read":0,"user_id":"","duration":0,"size":87,"status":200,"resp_headers":{"Server":["Caddy"],"Content-Type":["text/plain"]}}
{"level":"error","ts":1767976746.460091,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Fetch-User":["?1"],"Accept-Encoding":["gzip, deflate, br, zstd"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"Priority":["u=0, i"],"Cache-Control":["max-age=0"],"Sec-Ch-Ua-Platform":["\"Windows\""],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Sec-Fetch-Site":["none"],"Sec-Fetch-Dest":["document"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Sec-Ch-Ua-Mobile":["?0"],"Sec-Fetch-Mode":["navigate"],"Upgrade-Insecure-Requests":["1"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0031286,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976752.2995276,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"13648","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"58.29.195.73","uri":"/","headers":{"Sec-Fetch-Dest":["document"],"Sec-Fetch-User":["?1"],"Priority":["u=0, i"],"Sec-Ch-Ua-Platform":["\"Windows\""],"Sec-Fetch-Mode":["navigate"],"Sec-Ch-Ua-Mobile":["?0"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Fetch-Site":["none"],"Cache-Control":["max-age=0"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"Upgrade-Insecure-Requests":["1"],"Accept-Encoding":["gzip, deflate, br, zstd"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":""}},"bytes_read":0,"user_id":"","duration":0.0027841,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976759.5702891,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"13648","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"58.29.195.73","uri":"/","headers":{"Sec-Ch-Ua-Mobile":["?0"],"Sec-Fetch-Mode":["navigate"],"Priority":["u=0, i"],"Cache-Control":["max-age=0"],"Sec-Ch-Ua-Platform":["\"Windows\""],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Upgrade-Insecure-Requests":["1"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Sec-Fetch-Dest":["document"],"Accept-Encoding":["gzip, deflate, br, zstd"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"Sec-Fetch-Site":["none"],"Sec-Fetch-User":["?1"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":""}},"bytes_read":0,"user_id":"","duration":0.00319,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976766.1323526,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Fetch-Site":["none"],"Sec-Fetch-Dest":["document"],"Sec-Ch-Ua-Mobile":["?0"],"Sec-Fetch-User":["?1"],"Priority":["u=0, i"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Sec-Ch-Ua-Platform":["\"Windows\""],"Upgrade-Insecure-Requests":["1"],"Sec-Fetch-Mode":["navigate"],"Cache-Control":["max-age=0"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Accept-Encoding":["gzip, deflate, br, zstd"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0026185,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976766.5005789,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Priority":["u=0, i"],"Cache-Control":["max-age=0"],"Sec-Fetch-User":["?1"],"Accept-Encoding":["gzip, deflate, br, zstd"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Sec-Fetch-Site":["none"],"Sec-Fetch-Dest":["document"],"Sec-Fetch-Mode":["navigate"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"Sec-Ch-Ua-Mobile":["?0"],"Upgrade-Insecure-Requests":["1"],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Sec-Ch-Ua-Platform":["\"Windows\""]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0010358,"size":0,"status":502,"resp_headers":{"Alt-Svc":["h3=\":443\"; ma=2592000"],"Server":["Caddy"]}}
{"level":"error","ts":1767976768.996292,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Priority":["u=0, i"],"Cache-Control":["max-age=0"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Sec-Ch-Ua-Mobile":["?0"],"Sec-Fetch-Dest":["document"],"Accept-Encoding":["gzip, deflate, br, zstd"],"Upgrade-Insecure-Requests":["1"],"Sec-Fetch-Site":["none"],"Sec-Fetch-User":["?1"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Fetch-Mode":["navigate"],"Sec-Ch-Ua-Platform":["\"Windows\""],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0010344,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976845.1716719,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Upgrade-Insecure-Requests":["1"],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Fetch-Mode":["navigate"],"Sec-Ch-Ua-Platform":["\"Windows\""],"Accept-Encoding":["gzip, deflate, br, zstd"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Sec-Fetch-Site":["none"],"Sec-Fetch-User":["?1"],"Sec-Fetch-Dest":["document"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Sec-Ch-Ua-Mobile":["?0"],"Priority":["u=0, i"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0037944,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976849.4067652,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Sec-Ch-Ua-Mobile":["?0"],"Cache-Control":["max-age=0"],"Sec-Ch-Ua-Platform":["\"Windows\""],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Fetch-Mode":["navigate"],"Sec-Fetch-Dest":["document"],"Accept-Encoding":["gzip, deflate, br, zstd"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Upgrade-Insecure-Requests":["1"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Sec-Fetch-User":["?1"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"Priority":["u=0, i"],"Sec-Fetch-Site":["none"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0033039,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976913.7880945,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Upgrade-Insecure-Requests":["1"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Sec-Ch-Ua-Platform":["\"Windows\""],"Sec-Fetch-Mode":["navigate"],"Accept-Encoding":["gzip, deflate, br, zstd"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"Priority":["u=0, i"],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Fetch-Site":["none"],"Sec-Fetch-User":["?1"],"Cache-Control":["max-age=0"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Sec-Ch-Ua-Mobile":["?0"],"Sec-Fetch-Dest":["document"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0039894,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976914.4625819,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Accept-Encoding":["gzip, deflate, br, zstd"],"Sec-Ch-Ua-Mobile":["?0"],"Sec-Ch-Ua-Platform":["\"Windows\""],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Sec-Fetch-Site":["none"],"Sec-Fetch-Dest":["document"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"Cache-Control":["max-age=0"],"Upgrade-Insecure-Requests":["1"],"Sec-Fetch-Mode":["navigate"],"Sec-Fetch-User":["?1"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"],"Priority":["u=0, i"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0016982,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}
{"level":"error","ts":1767976929.404028,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_ip":"192.168.0.1","remote_port":"8236","client_ip":"192.168.0.1","proto":"HTTP/2.0","method":"GET","host":"www.mingleon.duckdns.org","uri":"/","headers":{"Sec-Ch-Ua-Platform":["\"Windows\""],"Sec-Fetch-Site":["none"],"Accept-Encoding":["gzip, deflate, br, zstd"],"Accept-Language":["ko,en-US;q=0.9,en;q=0.8,ja;q=0.7"],"Cache-Control":["max-age=0"],"Sec-Ch-Ua":["\"Chromium\";v=\"142\", \"Whale\";v=\"4\", \"Not.A/Brand\";v=\"99\""],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"],"Priority":["u=0, i"],"Sec-Fetch-Mode":["navigate"],"Sec-Fetch-User":["?1"],"Sec-Fetch-Dest":["document"],"Sec-Ch-Ua-Mobile":["?0"],"Upgrade-Insecure-Requests":["1"],"User-Agent":["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Whale/4.35.351.13 Safari/537.36"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","server_name":"www.mingleon.duckdns.org"}},"bytes_read":0,"user_id":"","duration":0.0038999,"size":0,"status":502,"resp_headers":{"Server":["Caddy"],"Alt-Svc":["h3=\":443\"; ma=2592000"]}}

BIN
caddy/caddy.exe
View File

Binary file not shown.

14
components/footer.html
View File

@ -1,10 +1,10 @@
<!-- 공통 푸터 컴포넌트 -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
<footer class="site-footer">
<div class="container">
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

31
components/header.html
View File

@ -1,26 +1,43 @@
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar">
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/">
<img src="/mingle-logo.webp" alt="밍글 스튜디오 - 인천 모션캡쳐 전문 스튜디오 로고">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고">
<span>밍글 스튜디오</span>
</a>
</div>
<ul class="nav-menu">
<li><a href="/" class="nav-link">Home</a></li>
<ul id="nav-menu" class="nav-menu">
<li><a href="/about" class="nav-link">About</a></li>
<li><a href="/services" class="nav-link">Services</a></li>
<li><a href="/portfolio" class="nav-link">Portfolio</a></li>
<li><a href="/gallery" class="nav-link">Gallery</a></li>
<li><a href="/partner" class="nav-link">Partner</a></li>
<li><a href="/contact" class="nav-link">Contact</a></li>
<li><a href="/qna" class="nav-link">Q&A</a></li>
</ul>
<div class="hamburger">
<button class="theme-toggle" id="themeToggle" aria-label="다크 모드 전환" title="다크/라이트 모드 전환">
<div class="theme-toggle-thumb">
<svg class="theme-toggle-icon theme-toggle-icon--sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="theme-toggle-icon theme-toggle-icon--moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</button>
<button class="hamburger" aria-label="메뉴 열기" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</nav>

44
contact.html
View File

@ -13,9 +13,9 @@
<title>문의하기 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/contact.html">
@ -33,7 +33,7 @@
<meta property="og:description" content="모션캡처 스튜디오 대관, 촬영, 제작 관련 문의 및 상담. 인천 테크노밸리 소재 OptiTrack 전문 스튜디오">
<meta property="og:url" content="https://minglestudio.co.kr/contact.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
@ -44,7 +44,7 @@
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="문의하기 - 밍글 스튜디오">
<meta name="twitter:description" content="모션캡처 스튜디오 대관, 촬영, 제작 관련 문의 및 상담. 인천 테크노밸리 소재 OptiTrack 전문 스튜디오">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
@ -61,24 +61,12 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- 브레드크럼 -->
<nav class="breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="index.html" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current">연락처</span>
</li>
</ol>
</div>
</nav>
<main id="main-content">
<!-- 페이지 헤더 -->
<section class="page-header">
<div class="container">
@ -195,17 +183,19 @@
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
<footer class="site-footer">
<div class="container">
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

126
css/about.css
View File

@ -4,7 +4,7 @@
/* 페이지 헤더 */
.page-header {
background: linear-gradient(135deg, var(--primary-color), #ff6600);
background: var(--gradient-main);
color: var(--bg-white);
padding: var(--spacing-3xl) 0;
text-align: center;
@ -202,7 +202,7 @@
width: 120px;
height: 120px;
margin: 0 auto var(--spacing-lg);
background: linear-gradient(135deg, var(--primary-color), #ff6600);
background: var(--gradient-main);
border-radius: 50%;
display: flex;
align-items: center;
@ -285,6 +285,128 @@
line-height: 1.6;
}
/* ========================================
다크모드
======================================== */
[data-theme="dark"] .page-header {
background: linear-gradient(135deg, #cc6d00, #b35500);
}
[data-theme="dark"] .info-grid {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .info-item h3 {
color: var(--primary-color);
}
[data-theme="dark"] .info-item p {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .info-item.full-width p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .about-content .card {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .about-content h2 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .about-content p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .vm-item {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-left: 4px solid var(--primary-color);
}
[data-theme="dark"] .vm-item h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .vm-item p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .timeline::before {
background: rgba(255, 136, 0, 0.4);
}
[data-theme="dark"] .timeline-item::before {
border-color: var(--dark-bg);
box-shadow: 0 0 0 2px var(--primary-color), 0 0 12px var(--glow-orange);
}
[data-theme="dark"] .timeline-content {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .timeline-content h4 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .timeline-content p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .team-section {
background: var(--dark-bg);
}
[data-theme="dark"] .team-card {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .team-card:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .team-card h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .team-role {
color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .team-desc {
color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .value-item {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .value-item:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .value-item h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .value-item p {
color: rgba(255, 255, 255, 0.65);
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.page-header h1 {

618
css/common.css
View File

@ -9,10 +9,10 @@
--secondary-hover: #ff7700;
--accent-color: #ffaa44;
/* 네온/하이테크 색상 - 오렌지 계열 */
--neon-purple: #ff6600;
--neon-blue: #ff8800;
--neon-pink: #ff9933;
/* 하이테크 강조 색상 - 오렌지 계열 */
--accent-deep: #ff6600;
--accent-bright: #ff8800;
--accent-warm: #ff9933;
--gradient-main: linear-gradient(135deg, #ff8800 0%, #ff6600 100%);
--gradient-warm: linear-gradient(120deg, #fff7ed 60%, #ffe0b2 100%);
@ -27,6 +27,22 @@
--bg-light: #f8fafc;
--bg-gray: #f3f4f6;
--bg-dark: #1a1a2e;
/* 보더 색상 */
--border-color: #e5e7eb;
--border-light: #e2e8f0;
--border-muted: #d1d5db;
/* 상태/시맨틱 색상 */
--color-info-bg: #f0f9ff;
--color-info-border: #bae6fd;
--color-info-text: #0c4a6e;
--color-info-accent: #0284c7;
--color-warning-bg: #fef3cd;
--color-warning-text: #92400e;
--color-danger: #ef4444;
--color-success: #10b981;
--color-youtube: #ff0000;
/* 간격 시스템 */
--spacing-xs: 0.25rem;
@ -48,14 +64,29 @@
--font-4xl: 2.5rem;
--font-5xl: 3.5rem;
/* 다크 테마 변수 */
--dark-bg: #0a0a0f;
--dark-surface: #13131a;
--dark-card: rgba(255, 255, 255, 0.03);
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.08);
--glow-orange: rgba(255, 136, 0, 0.15);
--glow-amber: rgba(255, 191, 0, 0.1);
/* 디스플레이 폰트 */
--font-display-en: 'Space Grotesk', 'Pretendard', sans-serif;
--font-size-hero: clamp(2rem, 5vw, 3.5rem);
--font-size-section: clamp(1.5rem, 3vw, 2.5rem);
/* 기타 */
--border-radius: 15px;
--border-radius-sm: 8px;
--border-radius-lg: 20px;
--border-radius-full: 50px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--box-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
--navbar-height: 70px;
--navbar-height: 64px;
}
/* ========================================
@ -135,21 +166,29 @@ body {
top: 0;
width: 100%;
height: var(--navbar-height);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 1000;
padding: var(--spacing-md) 0;
transition: var(--transition);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 0;
transition: background 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
padding: 0 clamp(1rem, 3vw, 2rem);
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.nav-logo {
@ -161,75 +200,96 @@ body {
.nav-logo a {
display: flex;
align-items: center;
gap: var(--spacing-sm);
gap: 0.6rem;
text-decoration: none;
}
.nav-logo img {
height: 40px;
height: 36px;
width: auto;
transition: transform 0.3s ease;
}
.nav-logo a:hover img {
transform: scale(1.05);
}
.nav-logo span {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-color);
font-size: 1.15rem;
font-weight: 800;
color: var(--text-primary);
white-space: nowrap;
letter-spacing: 0.01em;
letter-spacing: -0.01em;
}
.nav-menu {
display: flex;
list-style: none;
gap: var(--spacing-xl);
gap: 0.25rem;
align-items: center;
}
.nav-link {
color: var(--text-primary);
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-full);
transition: var(--transition);
font-size: 0.9rem;
font-weight: 600;
padding: 0.45rem 0.9rem;
border-radius: 10px;
transition: color 0.2s ease, background 0.2s ease;
position: relative;
letter-spacing: -0.01em;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
bottom: 4px;
left: 50%;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition);
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(-50%);
border-radius: 1px;
}
.nav-link:hover::after {
width: 80%;
width: 60%;
}
.nav-link:hover {
color: var(--primary-color);
color: var(--text-primary);
}
.nav-link.active {
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
color: var(--text-white);
color: var(--primary-color);
background: rgba(255, 136, 0, 0.08);
}
.nav-link.active::after {
width: 60%;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 5px;
padding: 6px;
border-radius: 8px;
transition: background 0.2s ease;
}
.hamburger:hover {
background: rgba(0, 0, 0, 0.04);
}
.hamburger span {
width: 25px;
height: 3px;
width: 22px;
height: 2px;
background-color: var(--text-primary);
margin: 3px 0;
border-radius: 2px;
transition: var(--transition);
}
@ -242,7 +302,7 @@ body {
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
transform: rotate(-45deg) translate(5px, -5px);
}
/* ========================================
@ -298,6 +358,50 @@ body {
color: rgba(255, 255, 255, 0.6);
}
/* 백업/기본 푸터 */
.site-footer {
background: #222;
color: #fff;
padding: 2.5rem 0 1.2rem;
}
[data-theme="dark"] .site-footer {
background: var(--dark-bg);
border-top: 1px solid var(--glass-border);
}
.site-footer .container {
text-align: center;
}
.site-footer .footer-company {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.site-footer .footer-address,
.site-footer .footer-contact,
.site-footer .footer-biz {
margin: 0.3rem 0 0.2rem;
}
[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);
}
.site-footer .footer-copyright {
color: #bbb;
font-size: 0.98rem;
margin-top: 0.7rem;
}
[data-theme="dark"] .site-footer .footer-copyright {
color: rgba(255, 255, 255, 0.4);
}
/* ========================================
버튼 스타일
======================================== */
@ -566,32 +670,144 @@ body {
반응형 디자인
======================================== */
@media (max-width: 768px) {
.navbar {
padding: var(--spacing-sm) 0;
}
.nav-menu {
position: fixed;
left: -100%;
top: var(--navbar-height);
flex-direction: column;
background-color: var(--bg-white);
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
width: 100%;
text-align: center;
transition: var(--transition);
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: var(--spacing-xl) 0;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
padding: var(--spacing-lg) 0;
z-index: 999;
gap: 0.25rem;
}
.nav-menu.active {
left: 0;
}
.nav-link {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
.hamburger {
display: flex;
}
/* 모바일 다크모드 토글 - 컴팩트 원형 아이콘 버튼 */
.theme-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
margin-left: 0.5rem;
background: transparent;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle:hover {
box-shadow: none;
background: rgba(0, 0, 0, 0.06);
}
/* 모바일: thumb 숨기고 아이콘만 토글 안에 직접 표시 */
.theme-toggle-thumb {
position: static;
width: 22px;
height: 22px;
background: transparent;
box-shadow: none;
transform: none;
border-radius: 0;
}
.theme-toggle-icon {
width: 22px;
height: 22px;
}
.theme-toggle-icon--sun {
color: var(--primary-color);
opacity: 1;
transform: none;
}
.theme-toggle-icon--moon {
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
[data-theme="dark"] .theme-toggle {
background: transparent;
box-shadow: none;
}
[data-theme="dark"] .theme-toggle:hover {
background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .theme-toggle-thumb {
transform: none;
background: transparent;
box-shadow: none;
}
[data-theme="dark"] .theme-toggle-icon--sun {
opacity: 0;
transform: rotate(-90deg) scale(0.5);
}
[data-theme="dark"] .theme-toggle-icon--moon {
opacity: 1;
transform: none;
color: #c4b5fd;
}
/* 모바일 드롭다운 메뉴 개선 */
.nav-menu {
padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-link {
display: block;
padding: 0.85rem 1.25rem;
font-size: 0.95rem;
border-radius: 12px;
}
.nav-link:hover {
background: rgba(255, 136, 0, 0.06);
}
.nav-link.active {
background: rgba(255, 136, 0, 0.1);
}
.nav-link::after {
display: none;
}
[data-theme="dark"] .nav-menu {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .nav-link:hover {
background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .nav-link.active {
background: rgba(255, 136, 0, 0.12);
}
.grid-2,
.grid-3,
.grid-4 {
@ -727,4 +943,318 @@ body {
width: 20px;
height: 20px;
}
}
/* ========================================
접근성
======================================== */
/* Skip to content 링크 */
.skip-to-content {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: var(--primary-color);
color: var(--text-white);
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--border-radius-sm);
z-index: 10001;
font-weight: 600;
text-decoration: none;
transition: top 0.2s;
}
.skip-to-content:focus {
top: var(--spacing-md);
}
/* 스크린 리더 전용 (시각적으로 숨김) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 키보드 포커스 표시 */
:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
}
/* 모션 감소 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ========================================
Notification 컴포넌트
======================================== */
.notification {
position: fixed;
top: 80px;
right: 20px;
padding: 1rem 2rem;
border-radius: 10px;
color: white;
font-weight: 600;
z-index: 10000;
transform: translateX(400px);
transition: transform 0.3s ease;
max-width: 400px;
}
.notification.notification-show {
transform: translateX(0);
}
.notification-success { background-color: #10b981; }
.notification-error { background-color: #ef4444; }
.notification-warning { background-color: #f59e0b; }
.notification-info { background-color: #3b82f6; }
/* 햄버거 버튼 리셋 (button으로 변경) */
.hamburger {
background: none;
border: none;
padding: 0;
}
/* ========================================
다크모드 토글 버튼
======================================== */
.theme-toggle {
position: relative;
width: 56px;
height: 30px;
border-radius: 50px;
border: none;
cursor: pointer;
background: linear-gradient(135deg, #e8edf2 0%, #d1d9e6 100%);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(255, 255, 255, 0.8);
transition: background 0.4s ease, box-shadow 0.4s ease;
padding: 0;
margin-left: var(--spacing-md);
flex-shrink: 0;
}
.theme-toggle:hover {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.theme-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.4s cubic-bezier(0.68, -0.15, 0.32, 1.15);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.theme-toggle-icon {
width: 16px;
height: 16px;
transition: transform 0.4s ease, opacity 0.3s ease;
}
.theme-toggle-icon--sun {
color: #f59e0b;
position: absolute;
}
.theme-toggle-icon--moon {
color: #6366f1;
position: absolute;
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
/* 다크 모드 활성화 시 토글 */
[data-theme="dark"] .theme-toggle {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .theme-toggle-thumb {
transform: translateX(26px);
background: #1e1b4b;
}
[data-theme="dark"] .theme-toggle-icon--sun {
opacity: 0;
transform: rotate(-90deg) scale(0.5);
}
[data-theme="dark"] .theme-toggle-icon--moon {
opacity: 1;
transform: rotate(0deg) scale(1);
color: #e0e7ff;
}
/* ========================================
다크 모드 - 글로벌 오버라이드
======================================== */
[data-theme="dark"] body {
background-color: var(--dark-bg);
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .navbar {
background: rgba(10, 10, 15, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .navbar.scrolled {
background: rgba(10, 10, 15, 0.95);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .nav-link {
color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .nav-link:hover {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .nav-link.active {
color: var(--primary-color);
background: rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .nav-menu {
background: rgba(10, 10, 15, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
[data-theme="dark"] .nav-logo span {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .hamburger span {
background: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .hamburger:hover {
background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .loading-overlay {
background: rgba(10, 10, 15, 0.95);
}
[data-theme="dark"] .loading-text {
color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .loading-spinner {
border-color: rgba(255, 255, 255, 0.1);
border-top-color: var(--primary-color);
}
[data-theme="dark"] .breadcrumb {
background: var(--dark-surface);
border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .breadcrumb-link {
color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .breadcrumb-link:hover {
color: var(--primary-color);
background: rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .breadcrumb-current {
color: rgba(255, 255, 255, 0.9);
}
/* 다크 모드 푸터 */
[data-theme="dark"] .footer {
background: var(--dark-surface);
}
/* 다크 모드 플로팅 SNS */
[data-theme="dark"] .floating-sns .sns-btn {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .bg-light {
background: var(--dark-bg);
}
[data-theme="dark"] .section-header h2 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .section-header p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .card {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .btn-outline {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
/* ========================================
공통 Reveal 애니메이션 시스템
======================================== */
.reveal {
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal[data-reveal="up"] { transform: translateY(40px); }
.reveal[data-reveal="left"] { transform: translateX(-40px); }
.reveal[data-reveal="right"] { transform: translateX(40px); }
.reveal[data-reveal="scale"] { transform: scale(0.92); }
.reveal.revealed {
opacity: 1;
transform: translateY(0) translateX(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}

161
css/contact.css
View File

@ -117,7 +117,7 @@
.form-group textarea {
width: 100%;
padding: var(--spacing-md);
border: 2px solid #e5e7eb;
border: 2px solid var(--border-color);
border-radius: var(--border-radius-sm);
font-size: var(--font-base);
font-family: inherit;
@ -167,7 +167,7 @@
.checkmark {
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border: 2px solid var(--border-muted);
border-radius: 4px;
position: relative;
flex-shrink: 0;
@ -348,7 +348,7 @@
justify-content: space-between;
align-items: center;
padding: var(--spacing-xl);
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--border-color);
}
.modal-header h3 {
@ -490,4 +490,159 @@
margin-left: 0;
margin-top: var(--spacing-xs);
}
}
/* ========================================
다크모드
======================================== */
[data-theme="dark"] .page-header {
background: linear-gradient(135deg, #cc6d00, #b35500);
}
[data-theme="dark"] .contact-card {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .contact-card:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .contact-card h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .contact-card p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .contact-icon {
/* 아이콘은 이모지이므로 배경 제거, 필터만 적용 */
}
[data-theme="dark"] .contact-link {
color: var(--primary-color);
border-color: var(--primary-color);
}
[data-theme="dark"] .contact-link:hover {
background: var(--primary-color);
color: var(--text-white);
}
/* 위치 정보 텍스트 */
[data-theme="dark"] .location-details li {
color: rgba(255, 255, 255, 0.7);
}
/* 맵 플레이스홀더 */
[data-theme="dark"] .map-placeholder {
background: var(--dark-surface);
border-color: rgba(255, 136, 0, 0.3);
}
[data-theme="dark"] .map-placeholder h4 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .map-placeholder p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .contact-form-wrapper {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .form-group label {
color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[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);
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.15);
}
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .checkbox-label {
color: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .location-info {
background: transparent;
border: none;
}
[data-theme="dark"] .location-details h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .location-details p,
[data-theme="dark"] .location-details li {
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .map-container {
border-color: transparent;
box-shadow: none;
}
[data-theme="dark"] .modal-content {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .cta-section {
background: linear-gradient(135deg, #cc6d00, #b35500);
}
/* 체크박스 마크 */
[data-theme="dark"] .checkmark {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
}
/* 모달 헤더 */
[data-theme="dark"] .modal-header {
border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .modal-header h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .modal-close {
color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .modal-close:hover {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .modal-body h4 {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .modal-body p,
[data-theme="dark"] .modal-body li {
color: rgba(255, 255, 255, 0.7);
}

180
css/gallery.css
View File

@ -128,7 +128,7 @@
top: -60px;
right: 0;
background: rgba(255, 255, 255, 0.9);
color: #333;
color: var(--text-primary, #333);
font-size: var(--font-xl);
cursor: pointer;
width: 45px;
@ -139,7 +139,7 @@
justify-content: center;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
border: 3px solid #fff;
border: 3px solid var(--text-white);
}
.lightbox-close::before {
@ -150,7 +150,7 @@
.lightbox-close:hover {
background: var(--primary-color);
color: white;
color: var(--text-white);
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(255, 136, 0, 0.4);
}
@ -222,7 +222,7 @@
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border: 3px solid rgba(0, 0, 0, 0.1);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
@ -236,7 +236,7 @@
/* 360도 이미지 뷰어 스타일 - 서버 호환성 개선 */
.panorama-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-gray) 100%);
padding: 5rem 0;
margin: 5rem 0;
border-radius: 8px;
@ -246,14 +246,14 @@
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
color: #222222;
color: var(--text-primary, #222222);
font-weight: 700;
}
.panorama-section .section-subtitle {
text-align: center;
font-size: 1.1rem;
color: #999999;
color: var(--text-secondary, #999999);
margin-bottom: 3rem;
}
@ -270,7 +270,7 @@
.panorama-viewer {
position: relative;
background: #ffffff;
background: var(--bg-white, #ffffff);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
@ -334,7 +334,7 @@
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #ffffff;
color: var(--text-white);
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(255, 136, 0, 0.3);
backdrop-filter: blur(10px);
@ -364,7 +364,7 @@
}
.panorama-title {
color: #ffffff;
color: var(--text-white);
font-weight: 600;
font-size: 1rem;
margin: 0;
@ -403,7 +403,7 @@
top: 1rem;
right: 1rem;
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
color: var(--text-white);
padding: 0.25rem 0.5rem;
border-radius: 20px;
font-size: 0.75rem;
@ -416,7 +416,7 @@
top: 1rem;
left: 1rem;
background: rgba(255, 136, 0, 0.9);
color: #ffffff;
color: var(--text-white);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
@ -518,7 +518,7 @@
}
.panorama-modal-title {
color: #ffffff;
color: var(--text-white);
font-weight: 700;
font-size: 1.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
@ -540,7 +540,7 @@
gap: 0.25rem;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
color: var(--text-white);
padding: 1rem 1.5rem;
border-radius: 8px;
cursor: pointer;
@ -552,15 +552,15 @@
}
.panorama-btn:hover {
background: #ff8800;
border-color: #ff8800;
background: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(255, 136, 0, 0.4);
}
.panorama-btn.active {
background: #ff8800;
border-color: #ff8800;
background: var(--primary-color);
border-color: var(--primary-color);
box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
}
@ -580,7 +580,7 @@
top: 2rem;
right: 2rem;
background: rgba(0, 0, 0, 0.8);
color: #ffffff;
color: var(--text-white);
width: 50px;
height: 50px;
border-radius: 50%;
@ -596,8 +596,8 @@
}
.panorama-modal-close:hover {
background: #ff8800;
border-color: #ff8800;
background: var(--primary-color);
border-color: var(--primary-color);
transform: scale(1.1) rotate(180deg);
box-shadow: 0 8px 20px rgba(255, 136, 0, 0.4);
}
@ -641,7 +641,7 @@
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.95);
color: #ffffff;
color: var(--text-white);
padding: 3rem;
border-radius: 12px;
max-width: 500px;
@ -653,7 +653,7 @@
}
.panorama-help-panel h3 {
color: #ff8800;
color: var(--primary-color);
font-size: 1.25rem;
margin: 0 0 1.5rem 0;
text-align: center;
@ -673,11 +673,11 @@
padding: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-left: 3px solid #ff8800;
border-left: 3px solid var(--primary-color);
}
.help-item i {
color: #ff8800;
color: var(--primary-color);
font-size: 1.1rem;
width: 24px;
text-align: center;
@ -950,4 +950,134 @@
.help-item span {
font-size: 0.875rem;
}
}
/* ========================================
다크모드
======================================== */
[data-theme="dark"] .page-header {
background: linear-gradient(135deg, #cc6d00, #b35500);
}
[data-theme="dark"] .gallery-grid {
background: transparent;
}
[data-theme="dark"] .gallery-item {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .gallery-item:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .gallery-caption {
background: linear-gradient(transparent, rgba(10, 10, 15, 0.95));
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .lightbox {
background: rgba(10, 10, 15, 0.95);
}
[data-theme="dark"] .lightbox-close,
[data-theme="dark"] .lightbox-nav {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .lightbox-close:hover,
[data-theme="dark"] .lightbox-nav:hover {
background: rgba(255, 136, 0, 0.3);
}
[data-theme="dark"] .lightbox-counter {
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .filter-btn {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border-color: var(--glass-border);
}
[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .filter-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
[data-theme="dark"] .panorama-section {
background: var(--dark-surface);
}
[data-theme="dark"] .panorama-viewer {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .panorama-viewer:hover {
border-color: rgba(255, 136, 0, 0.3);
}
[data-theme="dark"] .panorama-title {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .panorama-modal {
background: rgba(10, 10, 15, 0.95);
}
[data-theme="dark"] .panorama-modal-close {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .panorama-clickable {
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .panorama-clickable:hover {
border-color: rgba(255, 136, 0, 0.3);
}
/* 라이트박스 닫기/네비 버튼 */
[data-theme="dark"] .lightbox-close {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
border-color: var(--glass-border);
}
[data-theme="dark"] .lightbox-close:hover {
background: rgba(255, 136, 0, 0.4);
}
/* 로딩 스피너 */
[data-theme="dark"] .loading-spinner {
border-color: rgba(255, 255, 255, 0.1);
border-top-color: var(--primary-color);
}
/* 파노라마 섹션 배경 */
[data-theme="dark"] .panorama-section {
background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-bg) 100%);
}
[data-theme="dark"] .panorama-section h2 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .section-subtitle {
color: rgba(255, 255, 255, 0.6);
}
/* 파노라마 뷰어 배경 */
[data-theme="dark"] .panorama-viewer {
background: var(--dark-surface);
}

1900
css/main.css
View File

File diff suppressed because it is too large Load Diff

788
css/partner.css
View File

@ -1,788 +0,0 @@
/* ========================================
Partner 페이지 전용 스타일
======================================== */
/* 파트너 Hero 섹션 */
.partner-hero {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.85) 0%, rgba(255, 102, 0, 0.85) 100%),
url('../extra-image/I Want you for Mingle.png') center center / auto 100% no-repeat;
padding: 150px 0 120px;
text-align: center;
position: relative;
overflow: hidden;
min-height: 600px;
}
.partner-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 136, 0, 0.2);
opacity: 0.3;
}
.partner-hero-content {
position: relative;
z-index: 1;
}
.partner-hero-title {
font-size: 4rem;
color: #fff;
margin-bottom: 1rem;
font-weight: 700;
}
.partner-hero-subtitle {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 2rem;
}
/* 모집 마감 공지 섹션 */
.closed-notice-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.closed-notice-box {
max-width: 700px;
margin: 0 auto;
background: white;
padding: 3rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 3px solid #ff8800;
}
.closed-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
}
.closed-title {
font-size: 2rem;
font-weight: 800;
color: #ff8800;
margin-bottom: 1.5rem;
}
.closed-message {
font-size: 1.2rem;
color: #333;
line-height: 1.8;
margin-bottom: 1rem;
}
.closed-sub {
font-size: 1rem;
color: #666;
margin: 0;
}
/* 파트너 섹션 공통 스타일 */
.partner-conditions-section {
background: linear-gradient(135deg, #E3F2FD 0%, #FFF9C4 50%, #FFECB3 100%);
position: relative;
overflow: hidden;
}
.partner-benefits-section {
background: linear-gradient(135deg, #FFF9C4 0%, #FFECB3 50%, #FFE0B2 100%);
position: relative;
overflow: hidden;
}
.partner-provides-section {
background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
position: relative;
overflow: hidden;
}
/* 섹션 타이틀 스타일 */
.section-title-styled {
font-size: 2.5rem;
font-weight: 800;
color: #2c3e50;
text-align: center;
margin-bottom: 3rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 스타일된 콘텐츠 래퍼 */
.styled-content-wrapper {
max-width: 1000px;
margin: 0 auto;
}
/* 스타일된 리스트 */
.styled-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* 스타일된 아이템 */
.styled-item {
display: flex;
align-items: flex-start;
gap: 2rem;
background: rgba(255, 255, 255, 0.9);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border: 3px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.styled-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
border-color: #42A5F5;
}
/* 핑크색 원형 번호 배지 */
.number-badge {
flex-shrink: 0;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #FF80AB 0%, #FF4081 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 800;
color: white;
box-shadow: 0 4px 15px rgba(255, 64, 129, 0.4);
}
/* 아이템 콘텐츠 */
.item-content {
flex: 1;
}
.item-title {
font-size: 1.5rem;
font-weight: 700;
color: #FF4081;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.item-desc {
font-size: 1.1rem;
color: #42A5F5;
line-height: 1.6;
margin: 0;
font-weight: 500;
}
/* 지원 안내 래퍼 */
.application-guide-wrapper {
max-width: 900px;
margin: 0 auto;
}
/* 이메일 정보 박스 */
.email-info-box {
background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
padding: 2.5rem;
border-radius: 15px;
text-align: center;
margin-bottom: 2rem;
box-shadow: 0 8px 30px rgba(255, 136, 0, 0.15);
border: 2px solid var(--primary-color);
}
.email-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.email-info-box h3 {
font-size: 1.5rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.email-link {
display: inline-block;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
padding: 0.75rem 1.5rem;
background: #fff;
border-radius: 10px;
margin: 1rem 0;
transition: all 0.3s ease;
border: 2px solid var(--primary-color);
word-break: break-all;
max-width: 100%;
}
.email-link:hover {
background: var(--primary-color);
color: #fff;
transform: scale(1.05);
}
.email-note {
font-size: 1rem;
color: var(--text-secondary);
margin-top: 1rem;
}
.copy-email-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--primary-color) 0%, #ff6600 100%);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
}
.copy-email-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 136, 0, 0.4);
}
.copy-email-btn:active {
transform: translateY(0);
}
.copy-email-btn.copied {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4) !important;
}
.copy-email-btn .copy-icon {
font-size: 1.2rem;
}
.copy-email-btn .copy-text {
font-weight: 600;
}
/* 로드맵 스타일 */
.roadmap-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: nowrap;
margin: 3rem 0;
}
.roadmap-item {
background: #fff;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
flex: 1;
max-width: 220px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid #e0e0e0;
}
.roadmap-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(255, 136, 0, 0.2);
border-color: var(--primary-color);
}
.roadmap-item-highlight {
background: linear-gradient(135deg, #fff7ed 0%, #ffe8cc 100%);
border: 2px solid var(--primary-color);
}
.roadmap-badge {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color) 0%, #ff6600 100%);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 700;
margin: 0 auto 1rem;
box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
}
.roadmap-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.roadmap-date {
font-size: 0.95rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.roadmap-desc {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
}
.roadmap-note {
font-size: 0.85rem;
color: #666;
font-style: italic;
}
.roadmap-arrow {
font-size: 2rem;
color: var(--primary-color);
font-weight: bold;
flex-shrink: 0;
}
/* 지원서 양식 템플릿 */
.application-form-template {
background: #fff;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
border: 2px solid #e0e0e0;
}
.template-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--primary-color);
gap: 1rem;
flex-wrap: wrap;
}
.template-title {
font-size: 1.5rem;
color: var(--text-primary);
margin: 0;
}
/* 복사 버튼 */
.copy-template-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #ff8800 0%, #ff9933 100%);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
}
.copy-template-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 136, 0, 0.4);
}
.copy-template-btn:active {
transform: translateY(0);
}
.copy-icon {
font-size: 1.2rem;
}
.copy-text {
white-space: nowrap;
}
/* 복사 성공 애니메이션 */
.copy-template-btn.copied {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4) !important;
}
.template-content {
/* 복사할 내용 영역 */
}
.template-section {
margin-bottom: 2.5rem;
}
.template-section h4 {
font-size: 1.2rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
font-weight: 700;
}
.question-item {
margin-bottom: 1.5rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid var(--primary-color);
}
.question {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 0.5rem 0;
}
.answer-guide {
font-size: 0.95rem;
color: #666;
margin: 0.25rem 0;
font-style: italic;
}
.answer-sub {
font-size: 0.875rem;
color: #999;
margin: 0.25rem 0;
}
/* 지원 안내 박스 */
.application-notice-box {
background: #fff8f0;
padding: 2rem;
border-radius: 12px;
border: 2px solid #ffd9a3;
margin-bottom: 2rem;
}
.application-notice-box h4 {
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.application-notice-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.application-notice-box li {
padding: 0.75rem 0;
padding-left: 1.5rem;
position: relative;
color: var(--text-secondary);
line-height: 1.6;
}
.application-notice-box li::before {
content: '•';
position: absolute;
left: 0;
color: var(--primary-color);
font-size: 1.5rem;
line-height: 1.2;
}
.application-notice-box strong {
color: var(--primary-color);
font-weight: 600;
}
/* 템플릿 액션 */
.template-actions {
text-align: center;
margin-top: 2rem;
}
.template-actions .btn {
padding: 1.25rem 3rem;
font-size: 1.1rem;
}
/* FAQ 섹션 */
.faq-list {
max-width: 900px;
margin: 0 auto;
}
.faq-item {
background: #fff;
padding: 2rem;
margin-bottom: 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.faq-item:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.faq-question {
color: var(--text-primary);
font-size: 1.2rem;
margin-bottom: 1rem;
font-weight: 600;
}
.faq-answer {
color: var(--text-secondary);
line-height: 1.7;
margin: 0;
}
/* CTA 섹션 */
.cta-section {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
padding: 5rem 0;
color: #fff;
text-align: center;
}
.cta-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta-description {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.contact-info-quick {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.contact-info-quick span {
font-size: 1rem;
opacity: 0.9;
}
/* 유틸리티 클래스 */
.mt-2 {
margin-top: 0.5rem;
}
/* 파트너 푸터 */
.partner-footer {
background: #222;
color: #fff;
padding: 2.5rem 0 1.2rem;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.closed-notice-box {
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.closed-icon {
font-size: 3rem;
}
.closed-title {
font-size: 1.5rem;
}
.closed-message {
font-size: 1rem;
}
.partner-hero {
padding: 100px 0 80px;
min-height: 500px;
}
.partner-hero-title {
font-size: 2.5rem;
}
.partner-hero-subtitle {
font-size: 1.2rem;
}
/* 스타일된 섹션 반응형 */
.section-title-styled {
font-size: 1.75rem;
}
/* 로드맵 반응형 */
.roadmap-wrapper {
flex-direction: column;
gap: 1rem;
}
.roadmap-arrow {
transform: rotate(90deg);
font-size: 2rem;
}
.roadmap-item {
max-width: 100%;
width: 100%;
}
.styled-item {
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
align-items: center;
text-align: center;
}
.number-badge {
width: 60px;
height: 60px;
font-size: 2rem;
}
.item-title {
font-size: 1.25rem;
}
.item-desc {
font-size: 1rem;
}
/* 지원 안내 섹션 */
.application-guide-wrapper {
padding: 0 1rem;
}
.email-info-box {
padding: 2rem 1.5rem;
}
.email-link {
font-size: 1.2rem;
}
.application-form-template {
padding: 1.5rem;
}
.template-header {
flex-direction: column;
align-items: stretch;
}
.template-title {
font-size: 1.25rem;
text-align: center;
}
.copy-template-btn {
width: 100%;
justify-content: center;
}
.question-item {
padding: 0.75rem;
}
.contact-info-quick {
flex-direction: column;
gap: 1rem;
}
.cta-title {
font-size: 1.75rem;
}
.cta-description {
font-size: 1rem;
}
.template-actions .btn {
width: 100%;
padding: 1rem 2rem;
}
}
@media (max-width: 480px) {
.partner-hero {
padding: 120px 0 100px;
min-height: 700px;
}
.partner-hero-title {
font-size: 1.75rem;
}
.partner-hero-subtitle {
font-size: 0.95rem;
}
.section-title-styled {
font-size: 1.5rem;
}
.styled-item {
padding: 1.25rem;
}
.number-badge {
width: 50px;
height: 50px;
font-size: 1.75rem;
}
.item-title {
font-size: 1.1rem;
}
.item-desc {
font-size: 0.95rem;
}
/* 이메일 링크 모바일 최적화 */
.email-link {
font-size: 1.1rem;
padding: 0.6rem 1rem;
word-break: break-all;
display: block;
width: 100%;
box-sizing: border-box;
}
.email-info-box {
padding: 1.5rem;
}
}

373
css/popup.css
View File

@ -1,5 +1,5 @@
/* ========================================
메인 페이지 팝업 스타일
메인 페이지 팝업 스타일 - 모던 글래스모피즘
======================================== */
/* 팝업 오버레이 */
@ -10,9 +10,11 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9998;
animation: fadeIn 0.3s ease;
animation: popupFadeIn 0.3s ease;
}
.popup-overlay.active {
@ -21,33 +23,34 @@
align-items: center;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
@keyframes popupFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 팝업 컨테이너 */
.popup-container {
position: relative;
background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(255, 136, 0, 0.3);
max-width: 500px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 136, 0, 0.15);
border-radius: 24px;
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
max-width: 480px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
animation: popupSlideIn 0.4s ease;
animation: popupSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9999;
}
@keyframes popupSlideIn {
from {
transform: scale(0.8) translateY(-20px);
transform: scale(0.9) translateY(30px);
opacity: 0;
}
to {
@ -58,177 +61,213 @@
/* 팝업 헤더 */
.popup-header {
background: linear-gradient(135deg, #ff8800 0%, #ff9933 100%);
padding: 25px 20px;
text-align: center;
position: relative;
padding: 2rem 1.5rem 1.5rem;
text-align: center;
overflow: hidden;
background: linear-gradient(135deg, #ff8800 0%, #ff6600 50%, #ff9933 100%);
border-radius: 24px 24px 0 0;
}
.popup-header::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 191, 0, 0.2) 0%, transparent 50%);
pointer-events: none;
}
.popup-title {
font-size: 1.5rem;
position: relative;
font-size: 1.4rem;
font-weight: 800;
color: white;
margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
letter-spacing: -0.02em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.popup-subtitle {
font-size: 1rem;
font-weight: 600;
color: white;
margin: 8px 0 0 0;
position: relative;
font-size: 0.95rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
margin: 6px 0 0 0;
letter-spacing: 0.02em;
}
.popup-badge {
position: relative;
display: inline-block;
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: white;
padding: 6px 16px;
padding: 8px 20px;
border-radius: 50px;
font-size: 1.1rem;
font-size: 1.05rem;
font-weight: 700;
margin-top: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-top: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
letter-spacing: 0.03em;
}
/* 팝업 바디 */
.popup-body {
padding: 20px;
padding: 1.5rem;
}
.popup-section {
margin-bottom: 15px;
margin-bottom: 1rem;
}
.popup-section-title {
font-size: 0.95rem;
font-size: 0.85rem;
font-weight: 700;
color: #ff8800;
margin-bottom: 12px;
color: var(--primary-color, #ff8800);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* 할인 카드 */
.discount-card {
background: white;
border-radius: 10px;
padding: 15px;
margin-bottom: 10px;
border: 2px solid #ffd9a3;
box-shadow: 0 2px 8px rgba(255, 136, 0, 0.1);
background: linear-gradient(135deg, #fffbf5 0%, #fff8f0 100%);
border-radius: 14px;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
border: 1px solid rgba(255, 136, 0, 0.12);
transition: all 0.3s ease;
}
.discount-card:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 4px 16px rgba(255, 136, 0, 0.08);
transform: translateY(-2px);
}
.discount-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-bottom: 0.5rem;
}
.discount-card-title {
font-size: 1rem;
font-size: 0.95rem;
font-weight: 700;
color: #333;
color: #1a1a2e;
}
.discount-badge {
background: linear-gradient(135deg, #ff8800, #ff9933);
background: linear-gradient(135deg, #ff8800, #ff6600);
color: white;
padding: 4px 10px;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.discount-price {
display: flex;
align-items: baseline;
gap: 8px;
gap: 10px;
}
.original-price {
color: #999;
color: #aaa;
text-decoration: line-through;
font-size: 0.9rem;
font-size: 0.85rem;
}
.sale-price {
color: #ff8800;
font-size: 1.2rem;
font-weight: 700;
color: #ff6600;
font-size: 1.15rem;
font-weight: 800;
}
.price-note {
font-size: 0.8rem;
color: #666;
font-size: 0.78rem;
color: #888;
margin-top: 4px;
}
/* 공지사항 */
.popup-notice {
background: #fff8f0;
border-left: 3px solid #ff8800;
padding: 10px;
border-radius: 6px;
margin-bottom: 15px;
background: rgba(255, 136, 0, 0.06);
border-left: 3px solid var(--primary-color, #ff8800);
padding: 0.75rem 1rem;
border-radius: 0 10px 10px 0;
margin-bottom: 1rem;
}
.popup-notice p {
margin: 0;
font-size: 0.85rem;
color: #666;
font-size: 0.82rem;
color: #777;
line-height: 1.5;
}
/* 이벤트 정보 */
.popup-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 15px;
margin-bottom: 15px;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 1.25rem;
}
.info-item {
background: white;
border-radius: 8px;
padding: 12px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 12px;
padding: 0.85rem;
text-align: center;
border: 2px solid #ffe8cc;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.info-label {
font-size: 0.8rem;
color: #666;
font-size: 0.75rem;
color: #999;
margin-bottom: 4px;
font-weight: 500;
letter-spacing: 0.03em;
}
.info-value {
font-size: 1rem;
font-size: 0.9rem;
font-weight: 700;
color: #ff8800;
color: var(--primary-color, #ff8800);
}
/* CTA 버튼 */
.popup-cta {
background: linear-gradient(135deg, #ff8800 0%, #ff9933 100%);
display: block;
width: 100%;
background: linear-gradient(135deg, #ff8800 0%, #ff6600 100%);
color: white;
text-align: center;
padding: 14px;
border-radius: 10px;
border-radius: 14px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
width: 100%;
box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
margin-top: 5px;
box-shadow: 0 4px 20px rgba(255, 136, 0, 0.3);
letter-spacing: 0.02em;
margin-top: 0.5rem;
}
.popup-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 136, 0, 0.4);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(255, 136, 0, 0.4);
}
.popup-cta:active {
transform: translateY(-1px);
}
/* 팝업 푸터 */
@ -236,9 +275,10 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
background: #f8f9fa;
border-top: 1px solid #e9ecef;
padding: 0.85rem 1.5rem;
background: rgba(248, 250, 252, 0.8);
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 0 0 24px 24px;
}
.popup-checkbox {
@ -254,86 +294,189 @@
height: 16px;
cursor: pointer;
accent-color: #ff8800;
border-radius: 4px;
}
.popup-checkbox label {
font-size: 0.85rem;
color: #666;
font-size: 0.82rem;
color: #888;
cursor: pointer;
}
.popup-close-btn {
background: #6c757d;
color: white;
background: rgba(0, 0, 0, 0.06);
color: #666;
border: none;
padding: 6px 16px;
border-radius: 6px;
font-size: 0.85rem;
padding: 7px 18px;
border-radius: 10px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
transition: all 0.2s ease;
}
.popup-close-btn:hover {
background: #5a6268;
background: rgba(0, 0, 0, 0.1);
color: #333;
}
/* X 닫기 버튼 */
.popup-close-x {
position: absolute;
top: 12px;
right: 12px;
background: rgba(255, 255, 255, 0.3);
top: 14px;
right: 14px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: none;
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: white;
font-size: 1.3rem;
width: 30px;
height: 30px;
font-size: 1.2rem;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
.popup-close-x:hover {
background: rgba(255, 255, 255, 0.5);
transform: rotate(90deg);
background: rgba(255, 255, 255, 0.35);
transform: rotate(90deg) scale(1.1);
}
/* 모바일 반응형 */
/* ========================================
다크 모드
======================================== */
[data-theme="dark"] .popup-overlay {
background: rgba(0, 0, 0, 0.75);
}
[data-theme="dark"] .popup-container {
background: rgba(20, 20, 30, 0.95);
border-color: rgba(255, 136, 0, 0.2);
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
[data-theme="dark"] .popup-header {
background: linear-gradient(135deg, #cc6e00 0%, #b35500 50%, #e68a00 100%);
}
[data-theme="dark"] .discount-card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .discount-card:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 4px 16px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .discount-card-title {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .original-price {
color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .sale-price {
color: #ff9933;
}
[data-theme="dark"] .price-note {
color: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .popup-notice {
background: rgba(255, 136, 0, 0.08);
}
[data-theme="dark"] .popup-notice p {
color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .popup-section-title {
color: #ff9933;
}
[data-theme="dark"] .info-item {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .info-label {
color: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .info-value {
color: #ff9933;
}
[data-theme="dark"] .popup-cta {
background: linear-gradient(135deg, #ff8800 0%, #e67700 100%);
box-shadow: 0 4px 20px rgba(255, 136, 0, 0.25);
}
[data-theme="dark"] .popup-cta:hover {
box-shadow: 0 8px 30px rgba(255, 136, 0, 0.35);
}
[data-theme="dark"] .popup-footer {
background: rgba(255, 255, 255, 0.03);
border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .popup-checkbox label {
color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .popup-close-btn {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .popup-close-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
/* ========================================
모바일 반응형
======================================== */
@media (max-width: 768px) {
.popup-container {
max-width: 95%;
margin: 20px;
margin: 1rem;
}
.popup-header {
padding: 20px 15px;
padding: 1.5rem 1.25rem 1.25rem;
}
.popup-title {
font-size: 1.3rem;
font-size: 1.2rem;
}
.popup-subtitle {
font-size: 0.95rem;
font-size: 0.88rem;
}
.popup-badge {
font-size: 1rem;
padding: 5px 14px;
font-size: 0.95rem;
padding: 6px 16px;
}
.popup-body {
padding: 15px;
padding: 1.25rem;
}
.discount-card {
padding: 12px;
padding: 0.85rem 1rem;
}
.popup-info {
@ -342,8 +485,8 @@
.popup-footer {
flex-direction: column;
gap: 10px;
padding: 12px 15px;
gap: 0.75rem;
padding: 1rem 1.25rem;
}
.popup-checkbox {
@ -352,5 +495,7 @@
.popup-close-btn {
width: 100%;
padding: 10px;
text-align: center;
}
}

204
css/portfolio.css
View File

@ -49,7 +49,7 @@
top: 15px;
left: 15px;
background: rgba(0, 0, 0, 0.7);
color: white;
color: var(--text-white);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8rem;
@ -118,7 +118,7 @@
.tab-btn.active {
background: var(--primary-color);
color: white;
color: var(--text-white);
}
.tab-btn.active::before {
@ -171,10 +171,10 @@
.coming-soon-content {
max-width: 600px;
padding: 3rem 2rem;
background: white;
background: var(--bg-white);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #f0f0f0;
border: 1px solid var(--bg-gray);
}
.coming-soon-icon {
@ -249,11 +249,11 @@
align-items: center;
justify-content: space-between;
padding: var(--spacing-2xl);
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
background: linear-gradient(135deg, var(--color-youtube) 0%, #cc0000 100%);
border-radius: var(--border-radius);
color: var(--text-white);
margin-bottom: var(--spacing-3xl);
box-shadow: 0 8px 25px rgba(255, 0, 0, 0.15);
box-shadow: 0 8px 25px rgba(255, 0, 0, 0.15); /* YouTube red glow */
}
.channel-info {
@ -279,7 +279,7 @@
.youtube-channel-card .btn {
background: var(--text-white);
color: #ff0000;
color: var(--color-youtube);
font-weight: 700;
border: 2px solid var(--text-white);
}
@ -710,9 +710,9 @@
}
.project-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #ff9933 100%);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
padding: var(--spacing-2xl);
color: white;
color: var(--text-white);
display: flex;
justify-content: space-between;
align-items: center;
@ -739,7 +739,7 @@
.project-tags .tag {
background: rgba(255, 255, 255, 0.2);
color: white;
color: var(--text-white);
border: 1px solid rgba(255, 255, 255, 0.3);
font-weight: 500;
}
@ -837,4 +837,188 @@
.corporate-shorts {
grid-template-columns: 1fr;
}
}
/* ========================================
다크모드
======================================== */
[data-theme="dark"] .page-header {
background: linear-gradient(135deg, #cc6d00, #b35500);
}
[data-theme="dark"] .tab-btn {
color: rgba(255, 255, 255, 0.7);
border-color: var(--glass-border);
}
[data-theme="dark"] .tab-btn:hover {
color: var(--primary-color);
border-color: var(--primary-color);
}
[data-theme="dark"] .tab-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
[data-theme="dark"] .video-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .video-card:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .video-info {
color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .video-info h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .video-info p {
color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .coming-soon-content {
background: var(--dark-surface);
border-color: var(--glass-border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .coming-soon h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .coming-soon p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .feature-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .feature-item span:last-child {
color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .corporate-project-showcase {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .project-header {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.15), rgba(255, 102, 0, 0.1));
}
[data-theme="dark"] .project-logo h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .project-logo p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .project-tags .tag {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .project-section h4 {
color: rgba(255, 255, 255, 0.9);
}
/* 방송 공지 */
[data-theme="dark"] .broadcast-notice {
background: linear-gradient(135deg, rgba(255, 0, 0, 0.08), rgba(255, 136, 0, 0.08));
border-color: rgba(255, 0, 0, 0.3);
}
[data-theme="dark"] .notice-content h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .notice-content p {
color: rgba(255, 255, 255, 0.65);
}
/* 비디오 정보 */
[data-theme="dark"] .video-card .video-info {
padding-color: var(--glass-border);
}
/* 태그 */
[data-theme="dark"] .tag {
background: rgba(255, 136, 0, 0.15);
color: var(--primary-color);
}
/* 스트리머 태그 */
[data-theme="dark"] .streamer {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
/* coming-soon 보더 */
[data-theme="dark"] .coming-soon-content {
border-color: var(--glass-border);
}
/* 테크 피쳐 */
[data-theme="dark"] .tech-feature {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .tech-feature:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .tech-feature h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .tech-feature p {
color: rgba(255, 255, 255, 0.65);
}
/* 비디오 래퍼 로딩 배경 */
[data-theme="dark"] .video-wrapper::before {
background: var(--dark-surface);
}
/* 프로젝트 섹션 보더 */
[data-theme="dark"] .project-section {
border-bottom-color: var(--glass-border);
}
/* 비디오 카드 video-info 배경 */
[data-theme="dark"] .video-info h4 {
color: rgba(255, 255, 255, 0.95);
}
/* CTA 섹션 */
[data-theme="dark"] .cta-section {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.08), rgba(255, 102, 0, 0.04));
}
[data-theme="dark"] .cta-section h2 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .cta-section p {
color: rgba(255, 255, 255, 0.65);
}
/* 비디오 로딩 텍스트 */
[data-theme="dark"] .video-loading {
color: rgba(255, 255, 255, 0.4);
}

170
css/qna.css
View File

@ -36,7 +36,7 @@
width: 100%;
padding: var(--spacing-lg) var(--spacing-xl);
padding-right: 60px;
border: 2px solid #e5e7eb;
border: 2px solid var(--border-color);
border-radius: var(--border-radius-full);
font-size: var(--font-lg);
background: var(--bg-white);
@ -74,7 +74,7 @@
left: 0;
right: 0;
background: var(--bg-white);
border: 1px solid #e5e7eb;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-top: var(--spacing-sm);
max-height: 200px;
@ -91,7 +91,7 @@
padding: var(--spacing-md) var(--spacing-lg);
cursor: pointer;
transition: var(--transition);
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--bg-gray);
}
.suggestion-item:last-child {
@ -118,7 +118,7 @@
.category-btn {
padding: var(--spacing-sm) var(--spacing-lg);
border: 2px solid #e5e7eb;
border: 2px solid var(--border-color);
background: var(--bg-white);
color: var(--text-secondary);
border-radius: var(--border-radius-full);
@ -143,7 +143,7 @@
.faq-item {
background: var(--bg-white);
border: 1px solid #e5e7eb;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-lg);
overflow: hidden;
@ -242,14 +242,14 @@
margin: var(--spacing-lg) 0;
border-radius: var(--border-radius-sm);
overflow: hidden;
border: 1px solid #e5e7eb;
border: 1px solid var(--border-color);
}
.policy-row {
display: flex;
justify-content: space-between;
padding: var(--spacing-md);
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--border-color);
background: var(--bg-white);
}
@ -277,7 +277,7 @@
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--border-color);
background: var(--bg-white);
}
@ -327,7 +327,7 @@
.loading-spinner {
width: 30px;
height: 30px;
border: 2px solid #f3f3f3;
border: 2px solid rgba(0, 0, 0, 0.1);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
@ -455,4 +455,156 @@
.service-price {
font-size: var(--font-base);
}
}
/* ========================================
다크모드
======================================== */
[data-theme="dark"] .page-header {
background: linear-gradient(135deg, #cc6d00, #b35500);
}
[data-theme="dark"] .faq-search {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[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);
}
[data-theme="dark"] .search-box input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .search-box input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.15);
}
[data-theme="dark"] .search-btn {
background: var(--primary-color);
color: white;
}
[data-theme="dark"] .search-suggestions {
background: var(--dark-surface);
border-color: var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .search-suggestions button {
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .search-suggestions button:hover {
background: rgba(255, 136, 0, 0.1);
color: var(--primary-color);
}
[data-theme="dark"] .category-btn {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border-color: var(--glass-border);
}
[data-theme="dark"] .category-btn:hover {
border-color: rgba(255, 136, 0, 0.4);
color: var(--primary-color);
}
[data-theme="dark"] .category-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
[data-theme="dark"] .faq-item {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .faq-item:hover {
border-color: rgba(255, 136, 0, 0.2);
}
[data-theme="dark"] .faq-item.active {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.08);
}
[data-theme="dark"] .faq-question {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .faq-toggle {
color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .faq-answer {
border-top-color: var(--glass-border);
}
[data-theme="dark"] .faq-answer p,
[data-theme="dark"] .faq-answer li {
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .faq-answer strong {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .policy-table,
[data-theme="dark"] .pricing-table {
background: var(--dark-surface);
border-color: var(--glass-border);
}
[data-theme="dark"] .policy-row,
[data-theme="dark"] .pricing-item {
border-color: var(--glass-border);
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .cta-section {
background: linear-gradient(135deg, #cc6d00, #b35500);
}
/* 서제스천 아이템 보더 */
[data-theme="dark"] .suggestion-item {
border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .suggestion-item:hover {
background: rgba(255, 136, 0, 0.1);
}
/* FAQ 카테고리 섹션 */
[data-theme="dark"] .faq-category-section {
background: transparent;
}
/* FAQ 답변 배경 */
[data-theme="dark"] .faq-answer {
background: rgba(255, 255, 255, 0.02);
}
/* 정책/가격 테이블 보더 */
[data-theme="dark"] .policy-table {
border-color: var(--glass-border);
}
[data-theme="dark"] .policy-row {
border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .pricing-table {
border-color: var(--glass-border);
}
[data-theme="dark"] .pricing-item {
border-bottom-color: var(--glass-border);
}

730
css/services.css
View File

@ -49,7 +49,7 @@
top: 15px;
left: 15px;
background: rgba(0, 0, 0, 0.7);
color: white;
color: var(--text-white);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8rem;
@ -132,7 +132,7 @@
.services-table td {
padding: var(--spacing-lg);
text-align: left;
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--border-color);
}
.services-table th {
@ -291,7 +291,7 @@
padding: var(--spacing-xl);
border-radius: var(--border-radius-sm);
margin: var(--spacing-lg) 0;
border: 1px solid #e5e7eb;
border: 1px solid var(--border-color);
}
.email-field {
@ -319,10 +319,10 @@
}
.form-placeholder {
background: #f8f9fa;
background: var(--bg-light);
padding: var(--spacing-md);
border-radius: var(--border-radius-sm);
border: 1px dashed #d1d5db;
border: 1px dashed var(--border-muted);
font-family: monospace;
font-size: var(--font-sm);
color: var(--text-secondary);
@ -411,7 +411,7 @@
text-align: center;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-lg);
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid var(--border-light);
}
.pricing-header.unified {
@ -522,8 +522,8 @@
}
.minimum-time {
background: #fef3cd;
color: #92400e;
background: var(--color-warning-bg);
color: var(--color-warning-text);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-sm);
font-size: var(--font-sm);
@ -534,8 +534,8 @@
/* 서비스 노트 */
.service-note {
background: #f0f9ff;
border: 1px solid #bae6fd;
background: var(--color-info-bg);
border: 1px solid var(--color-info-border);
border-radius: var(--border-radius-sm);
padding: var(--spacing-lg);
margin-top: var(--spacing-xl);
@ -591,7 +591,7 @@
position: absolute;
top: 15px;
right: 15px;
background: #ff0000;
background: var(--color-youtube);
color: var(--text-white);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: 4px;
@ -657,7 +657,7 @@
.additional-pricing {
text-align: center;
padding: var(--spacing-lg);
background: #fef3cd;
background: var(--color-warning-bg);
border-radius: var(--border-radius-sm);
}
@ -769,7 +769,7 @@
.option-item {
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-lg);
border-bottom: 1px solid #f1f5f9;
border-bottom: 1px solid var(--bg-light);
}
.option-item:last-child {
@ -815,7 +815,7 @@
.note-item {
text-align: center;
padding: var(--spacing-lg);
background: #f8fafc;
background: var(--bg-light);
border-radius: var(--border-radius-sm);
}
@ -843,7 +843,7 @@
.features-grid.unified .feature-item {
text-align: left;
padding: var(--spacing-md);
background: #f8fafc;
background: var(--bg-light);
border-radius: var(--border-radius-sm);
border-left: 3px solid var(--primary-color);
}
@ -928,7 +928,7 @@
}
.promo-badge {
background: #ff0000;
background: var(--color-youtube);
color: var(--text-white);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 4px;
@ -945,7 +945,7 @@
text-align: center;
margin-bottom: var(--spacing-lg);
padding: var(--spacing-lg);
background: linear-gradient(135deg, #fff8f0, #fef3e2);
background: linear-gradient(135deg, #fff8f0, var(--color-warning-bg));
border-radius: var(--border-radius-sm);
}
@ -974,7 +974,7 @@
.original-price {
display: block;
font-size: var(--font-lg);
color: #999;
color: var(--text-light);
text-decoration: line-through;
margin-bottom: var(--spacing-xs);
}
@ -1008,7 +1008,7 @@
.vat-notice-inline {
font-size: var(--font-sm);
color: #666;
color: var(--text-secondary);
margin-top: var(--spacing-xs);
font-style: italic;
}
@ -1047,10 +1047,10 @@
display: flex;
align-items: center;
gap: var(--spacing-md);
background: #f0f9ff;
background: var(--color-info-bg);
padding: var(--spacing-lg);
border-radius: var(--border-radius);
border: 1px solid #bae6fd;
border: 1px solid var(--color-info-border);
}
.info-icon {
@ -1067,7 +1067,7 @@
.tech-specs-compact {
margin-top: var(--spacing-xl);
padding: var(--spacing-lg);
background: #f8fafc;
background: var(--bg-light);
border-radius: var(--border-radius);
border-left: 4px solid var(--primary-color);
}
@ -1204,7 +1204,7 @@
text-align: center;
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid #e2e8f0;
border-top: 1px solid var(--border-light);
}
.portfolio-btn {
@ -1370,8 +1370,8 @@
.popup-footer {
text-align: center;
padding: var(--spacing-xl);
background: #f8fafc;
border-top: 1px solid #e2e8f0;
background: var(--bg-light);
border-top: 1px solid var(--border-light);
}
/* 모바일 반응형 */
@ -1437,12 +1437,12 @@
}
.platform {
background: #ff6b6b;
background: var(--color-danger);
color: var(--text-white);
}
.streamer {
background: #e2e8f0;
background: var(--border-light);
color: var(--text-secondary);
}
@ -1450,7 +1450,7 @@
.streaming-features {
margin-top: var(--spacing-2xl);
padding-top: var(--spacing-xl);
border-top: 1px solid #e2e8f0;
border-top: 1px solid var(--border-light);
}
.streaming-features h4 {
@ -1469,7 +1469,7 @@
.feature-item {
text-align: center;
padding: var(--spacing-lg);
background: #f8fafc;
background: var(--bg-light);
border-radius: var(--border-radius);
transition: var(--transition);
}
@ -1524,7 +1524,7 @@
flex-direction: column;
gap: var(--spacing-sm);
padding: var(--spacing-lg);
background: linear-gradient(135deg, #fff8f0, #fef3e2);
background: linear-gradient(135deg, #fff8f0, var(--color-warning-bg));
border-radius: var(--border-radius);
border: 2px solid var(--primary-color);
}
@ -1544,9 +1544,9 @@
.mv-workflow-note {
margin-top: var(--spacing-lg);
padding: var(--spacing-md) var(--spacing-lg);
background: #f0f9ff;
background: var(--color-info-bg);
border-radius: var(--border-radius-sm);
border-left: 4px solid #0284c7;
border-left: 4px solid var(--color-info-accent);
}
.mv-workflow-note p {
@ -1595,7 +1595,7 @@
}
.phase-badge {
background: linear-gradient(135deg, var(--primary-color), #ff9933);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--text-white);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--border-radius-full);
@ -1614,7 +1614,7 @@
.mv-phase-header {
margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
padding: var(--spacing-lg) var(--spacing-xl);
background: linear-gradient(135deg, #fff8f0, #fef3e2);
background: linear-gradient(135deg, #fff8f0, var(--color-warning-bg));
border-left: 5px solid var(--primary-color);
border-radius: var(--border-radius);
}
@ -1659,8 +1659,8 @@
/* 스텝 페이즈 라벨 */
.step-phase {
display: inline-block;
background: #e0f2fe;
color: #0c4a6e;
background: var(--color-info-bg);
color: var(--color-info-text);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--border-radius-full);
font-size: var(--font-xs);
@ -1699,9 +1699,9 @@
grid-template-columns: 1fr auto;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: #f8fafc;
background: var(--bg-light);
border-radius: var(--border-radius-sm);
border: 1px solid #e2e8f0;
border: 1px solid var(--border-light);
}
.option-type {
@ -1729,15 +1729,15 @@
.process-note {
margin-top: var(--spacing-lg);
padding: var(--spacing-md);
background: #e0f2fe;
background: var(--color-info-bg);
border-radius: var(--border-radius-sm);
border-left: 3px solid #0284c7;
border-left: 3px solid var(--color-info-accent);
}
.process-note p {
margin: 0;
font-size: var(--font-sm);
color: #0c4a6e;
color: var(--color-info-text);
}
/* 스텝 가격 */
@ -1747,9 +1747,9 @@
gap: var(--spacing-sm);
margin: var(--spacing-md) 0;
padding: var(--spacing-sm) var(--spacing-md);
background: linear-gradient(135deg, #fff8f0, #fef3e2);
background: linear-gradient(135deg, #fff8f0, var(--color-warning-bg));
border-radius: var(--border-radius-sm);
border: 1px solid #fed7aa;
border: 1px solid rgba(255, 136, 0, 0.3);
}
.step-pricing .price-label {
@ -1774,9 +1774,9 @@
.mv-mocap-pricing {
margin: var(--spacing-lg) 0;
padding: var(--spacing-md);
background: #fafafa;
background: var(--bg-light);
border-radius: var(--border-radius-sm);
border: 1px solid #e5e7eb;
border: 1px solid var(--border-color);
}
.mv-mocap-pricing h6 {
@ -1794,9 +1794,9 @@
.mv-cost-summary {
margin-top: var(--spacing-2xl);
padding: var(--spacing-xl);
background: #f8fafc;
background: var(--bg-light);
border-radius: var(--border-radius);
border: 2px solid #e2e8f0;
border: 2px solid var(--border-light);
}
.mv-cost-summary > h4 {
@ -1835,7 +1835,7 @@
/* MV 프로덕션 패키지 특별 스타일 */
.mv-production {
background: linear-gradient(135deg, #fef9f5 0%, #ffffff 100%);
background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-white) 100%);
border: 2px solid var(--primary-color);
}
@ -1931,7 +1931,7 @@
.refund-table td {
padding: var(--spacing-md);
text-align: center;
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--border-color);
}
.refund-table th {
@ -1940,10 +1940,10 @@
color: var(--text-primary);
}
.refund-100 { color: #10b981; font-weight: 600; }
.refund-100 { color: var(--color-success); font-weight: 600; }
.refund-70 { color: #f59e0b; font-weight: 600; }
.refund-50 { color: #f97316; font-weight: 600; }
.refund-0 { color: #ef4444; font-weight: 600; }
.refund-0 { color: var(--color-danger); font-weight: 600; }
/* 장비 그리드 */
.equipment-grid {
@ -2143,4 +2143,632 @@
height: 40px;
font-size: var(--font-base);
}
}
/* ========================================
다크모드
======================================== */
[data-theme="dark"] .page-header {
background: linear-gradient(135deg, #cc6d00, #b35500);
}
[data-theme="dark"] .service-package {
background-color: var(--dark-surface);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .package-header h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .pricing-card {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .pricing-card:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .pricing-header {
border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .pricing-header h4 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .pricing-features li {
color: rgba(255, 255, 255, 0.7);
border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .combo-card {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .combo-card h4 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .combo-pricing {
background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .combo-features h5 {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .combo-features li {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .services-table-wrapper .card {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .services-table {
background: var(--dark-surface);
}
[data-theme="dark"] .services-table th {
background: rgba(255, 136, 0, 0.15);
color: rgba(255, 255, 255, 0.95);
border-color: var(--glass-border);
}
[data-theme="dark"] .services-table td {
color: rgba(255, 255, 255, 0.8);
border-color: var(--glass-border);
}
[data-theme="dark"] .services-table tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .services-table tr:hover td {
background: rgba(255, 136, 0, 0.05);
}
[data-theme="dark"] .process-step {
background: var(--dark-surface);
border-color: var(--glass-border);
}
[data-theme="dark"] .step-title {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .step-desc {
color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .mv-step {
background: var(--dark-surface);
border-color: var(--glass-border);
}
[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);
}
[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);
}
[data-theme="dark"] .detail-note {
color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .mv-intro > p {
color: rgba(255, 255, 255, 0.75);
}
[data-theme="dark"] .mv-process > h4 {
color: rgba(255, 255, 255, 0.95);
border-bottom-color: var(--primary-color);
}
[data-theme="dark"] .refund-table {
background: var(--dark-surface);
border-color: var(--glass-border);
}
[data-theme="dark"] .refund-table th {
background: rgba(255, 136, 0, 0.15);
color: rgba(255, 255, 255, 0.95);
border-color: var(--glass-border);
}
[data-theme="dark"] .refund-table td {
color: rgba(255, 255, 255, 0.8);
border-color: var(--glass-border);
}
[data-theme="dark"] .equipment-card {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .equipment-card:hover {
border-color: rgba(255, 136, 0, 0.3);
}
[data-theme="dark"] .equipment-card h4 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .equipment-card p {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .card {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .card p,
[data-theme="dark"] .card li {
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .service-notes {
background: rgba(255, 255, 255, 0.03);
border-color: var(--glass-border);
}
[data-theme="dark"] .service-notes li {
color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .tech-specs {
background: rgba(255, 255, 255, 0.03);
border-color: var(--glass-border);
}
[data-theme="dark"] .tech-specs li {
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .portfolio-popup {
background: rgba(10, 10, 15, 0.9);
}
[data-theme="dark"] .popup-content {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .email-template {
background: var(--dark-surface);
border-color: var(--glass-border);
}
[data-theme="dark"] .email-template pre {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.8);
border-color: var(--glass-border);
}
[data-theme="dark"] .options-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .options-card h4 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .options-card p {
color: rgba(255, 255, 255, 0.65);
}
/* 프로세스 플로우 */
[data-theme="dark"] .process-flow {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .step-number {
background: var(--primary-color);
}
/* 이메일 양식 */
[data-theme="dark"] .email-form {
background: var(--dark-surface);
border-color: rgba(255, 136, 0, 0.4);
}
[data-theme="dark"] .email-template {
background: rgba(255, 255, 255, 0.03);
border-color: var(--glass-border);
}
[data-theme="dark"] .email-field {
color: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .form-section h5 {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .form-help {
color: rgba(255, 255, 255, 0.5);
}
[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);
}
/* 최소 시간 뱃지 */
[data-theme="dark"] .minimum-time {
background: rgba(255, 191, 0, 0.15);
color: #fbbf24;
}
/* 서비스 노트 */
[data-theme="dark"] .service-note {
background: rgba(255, 136, 0, 0.08);
border-color: rgba(255, 136, 0, 0.2);
}
[data-theme="dark"] .service-note p {
color: rgba(255, 255, 255, 0.7);
}
/* 추가 요금 */
[data-theme="dark"] .additional-pricing {
background: rgba(255, 191, 0, 0.1);
}
[data-theme="dark"] .additional-pricing p {
color: rgba(255, 255, 255, 0.9);
}
/* VAT 안내 */
[data-theme="dark"] .vat-notice-inline {
color: rgba(255, 255, 255, 0.45);
}
/* 카드 특징 */
[data-theme="dark"] .card-features li {
color: rgba(255, 255, 255, 0.7);
}
/* 서비스 정보 카드 */
[data-theme="dark"] .info-card {
background: rgba(255, 136, 0, 0.08);
border-color: rgba(255, 136, 0, 0.2);
}
[data-theme="dark"] .info-card p {
color: rgba(255, 255, 255, 0.8);
}
/* 포트폴리오 미리보기 */
[data-theme="dark"] .portfolio-preview {
border-top-color: var(--glass-border);
}
/* 스트리밍 태그 */
[data-theme="dark"] .streamer {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
/* 스트리밍 특징 */
[data-theme="dark"] .streaming-features {
border-top-color: var(--glass-border);
}
[data-theme="dark"] .streaming-features h4 {
color: rgba(255, 255, 255, 0.95);
}
/* MV 워크플로우 노트 */
[data-theme="dark"] .mv-workflow-note {
background: rgba(2, 132, 199, 0.1);
border-left-color: #0284c7;
}
[data-theme="dark"] .mv-workflow-note p {
color: rgba(255, 255, 255, 0.8);
}
/* 가격 옵션 */
[data-theme="dark"] .pricing-option {
background: rgba(255, 255, 255, 0.03);
border-color: var(--glass-border);
}
[data-theme="dark"] .option-type {
color: rgba(255, 255, 255, 0.9);
}
/* 모션캡처 가격 섹션 */
[data-theme="dark"] .mv-mocap-pricing {
background: rgba(255, 255, 255, 0.03);
border-color: var(--glass-border);
}
[data-theme="dark"] .mv-mocap-pricing h6 {
color: rgba(255, 255, 255, 0.9);
}
/* MV 비용 요약 */
[data-theme="dark"] .mv-cost-summary {
background: rgba(255, 255, 255, 0.03);
border-color: var(--glass-border);
}
[data-theme="dark"] .mv-cost-summary > h4 {
color: rgba(255, 255, 255, 0.95);
}
/* 환불 테이블 보더 */
[data-theme="dark"] .refund-table tr {
border-color: var(--glass-border);
}
/* 가격 표시 영역 */
[data-theme="dark"] .price-display {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.12), rgba(255, 102, 0, 0.08));
}
[data-theme="dark"] .price-display .price-unit {
color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .price-vat {
color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .original-price {
color: rgba(255, 255, 255, 0.35);
}
/* MV 가격 요약 */
[data-theme="dark"] .mv-price-summary {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.15), rgba(255, 102, 0, 0.1));
border-color: rgba(255, 136, 0, 0.5);
}
[data-theme="dark"] .mv-price-summary .price-note {
color: rgba(255, 255, 255, 0.75);
}
/* MV 페이즈 헤더 */
[data-theme="dark"] .mv-phase-header {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.1), rgba(255, 102, 0, 0.06));
border-left-color: var(--primary-color);
}
/* 스텝 가격 */
[data-theme="dark"] .step-pricing {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.1), rgba(255, 102, 0, 0.06));
border-color: rgba(255, 136, 0, 0.25);
}
/* 스텝 페이즈 라벨 */
[data-theme="dark"] .step-phase {
background: rgba(2, 132, 199, 0.15);
color: #7dd3fc;
}
/* 프로세스 노트 */
[data-theme="dark"] .process-note {
background: rgba(2, 132, 199, 0.1);
border-left-color: #0284c7;
}
[data-theme="dark"] .process-note p {
color: #7dd3fc;
}
/* 노트 아이템 */
[data-theme="dark"] .note-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .note-item h4 {
color: var(--primary-color);
}
[data-theme="dark"] .note-item p {
color: rgba(255, 255, 255, 0.6);
}
/* 이용 안내사항 */
[data-theme="dark"] .usage-notes {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .usage-notes h3 {
color: rgba(255, 255, 255, 0.95);
}
/* 옵션 카드 */
[data-theme="dark"] .option-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .option-card:hover {
border-color: rgba(255, 136, 0, 0.3);
}
[data-theme="dark"] .option-header h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .option-item {
border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .option-item h4 {
color: rgba(255, 255, 255, 0.95);
}
/* 피쳐 아이템 */
[data-theme="dark"] .feature-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .feature-item p {
color: rgba(255, 255, 255, 0.65);
}
/* 통합 특징 그리드 */
[data-theme="dark"] .features-grid.unified .feature-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--primary-color);
}
[data-theme="dark"] .features-grid.unified .feature-item p {
color: rgba(255, 255, 255, 0.65);
}
/* 컴팩트 기술 사양 */
[data-theme="dark"] .tech-specs-compact {
background: rgba(255, 255, 255, 0.03);
border-left-color: var(--primary-color);
}
[data-theme="dark"] .tech-specs-compact h5 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .spec-tag {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
box-shadow: none;
}
/* 서비스 개요 */
[data-theme="dark"] .service-overview {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
/* 팝업 푸터 */
[data-theme="dark"] .popup-footer {
background: rgba(255, 255, 255, 0.03);
border-top-color: var(--glass-border);
}
/* 팝업 바디 */
[data-theme="dark"] .popup-body {
color: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .portfolio-section h4 {
color: rgba(255, 255, 255, 0.95);
}
/* MV 프로덕션 패키지 */
[data-theme="dark"] .mv-production {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
border-color: rgba(255, 136, 0, 0.4);
}
/* 비용 아이템 */
[data-theme="dark"] .cost-item {
background: rgba(255, 255, 255, 0.04);
border-left-color: var(--primary-color);
}
[data-theme="dark"] .cost-label {
color: rgba(255, 255, 255, 0.9);
}
/* 카드 헤더 */
[data-theme="dark"] .card-header h4 {
color: rgba(255, 255, 255, 0.95);
}
/* 가격 유닛 (테이블 내) */
[data-theme="dark"] .price-unit {
color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .price-note {
color: rgba(255, 255, 255, 0.5);
}
/* 서비스 테이블 래퍼 */
[data-theme="dark"] .services-table-wrapper h3 {
color: rgba(255, 255, 255, 0.95);
}
/* CTA 섹션 */
[data-theme="dark"] .cta-section {
background: linear-gradient(135deg, rgba(255, 136, 0, 0.08), rgba(255, 102, 0, 0.04));
}
[data-theme="dark"] .cta-section h2 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .cta-section p {
color: rgba(255, 255, 255, 0.65);
}
/* 스텝 콘텐츠 */
[data-theme="dark"] .step-content h4 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .step-content p {
color: rgba(255, 255, 255, 0.6);
}
/* 피쳐 컬럼 */
[data-theme="dark"] .feature-column h5 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .feature-column li {
color: rgba(255, 255, 255, 0.65);
}
/* 스트리밍 인포 */
[data-theme="dark"] .streaming-info p {
color: rgba(255, 255, 255, 0.9);
}
/* 서비스 테이블 보더 */
[data-theme="dark"] .services-table th,
[data-theme="dark"] .services-table td {
border-bottom-color: var(--glass-border);
}
/* 프라이싱 헤더 보더 */
[data-theme="dark"] .pricing-header {
border-bottom-color: var(--glass-border);
}

BIN
extra-image/I Want you for Mingle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

76
gallery.html
View File

@ -13,9 +13,9 @@
<title>스튜디오 갤러리 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/gallery.html">
@ -33,7 +33,7 @@
<meta property="og:description" content="28대 OptiTrack 카메라 시스템과 8×7m 대형 촬영 공간. 인천 유일 모션캡처 스튜디오의 실제 시설과 장비를 확인해보세요">
<meta property="og:url" content="https://minglestudio.co.kr/gallery.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
@ -44,7 +44,7 @@
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="스튜디오 갤러리 - 밍글 스튜디오">
<meta name="twitter:description" content="28대 OptiTrack 카메라 시스템과 8×7m 대형 촬영 공간. 인천 유일 모션캡처 스튜디오의 실제 시설과 장비를 확인해보세요">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
@ -64,23 +64,11 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<div id="header-placeholder"></div>
<!-- 브레드크럼 -->
<nav class="breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="index.html" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current">스튜디오 갤러리</span>
</li>
</ol>
</div>
</nav>
<main id="main-content">
<section class="page-header">
<div class="container">
<h1>Studio Gallery</h1>
@ -92,47 +80,47 @@
<div class="container">
<div class="gallery-grid">
<div class="gallery-item">
<img src="Studio_Image/넓은 모션 캡쳐 공간 002.webp" alt="밍글 스튜디오 메인 모션캡쳐 공간 - OptiTrack 카메라 28대와 넓은 8x7m 캡쳐 공간" class="gallery-img" loading="lazy">
<img src="images/studio/넓은 모션 캡쳐 공간 002.webp" alt="밍글 스튜디오 메인 모션캡쳐 공간 - OptiTrack 카메라 28대와 넓은 8x7m 캡쳐 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption">외부전경 커튼 열림</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/커튼을 친 외부 전경.webp" alt="밍글 스튜디오 모션캡쳐 공간 커튼 닫은 모습 - 프라이버시 보호" class="gallery-img" loading="lazy">
<img src="images/studio/커튼을 친 외부 전경.webp" alt="밍글 스튜디오 모션캡쳐 공간 커튼 닫은 모습 - 프라이버시 보호" class="gallery-img" loading="lazy">
<div class="gallery-caption">외부 전경 닫힘</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/오퍼레이팅 공간 강조.webp" alt="밍글 스튜디오 오퍼레이팅 컨트롤룸 - 전문 장비와 대형 모니터로 실시간 모니터링" class="gallery-img" loading="lazy">
<img src="images/studio/오퍼레이팅 공간 강조.webp" alt="밍글 스튜디오 오퍼레이팅 컨트롤룸 - 전문 장비와 대형 모니터로 실시간 모니터링" class="gallery-img" loading="lazy">
<div class="gallery-caption">오퍼레이팅/컨트롤룸</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/스튜디오와 연결된 파우더룸.webp" alt="밍글 스튜디오 파우더룸 - 스튜디오와 직접 연결된 메이크업 및 준비 공간" class="gallery-img" loading="lazy">
<img src="images/studio/스튜디오와 연결된 파우더룸.webp" alt="밍글 스튜디오 파우더룸 - 스튜디오와 직접 연결된 메이크업 및 준비 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption">파우더룸(스튜디오 연결)</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/탈의실 내부 공간.webp" alt="밍글 스튜디오 탈의실 내부 - 편리한 의상 보관 및 착용 공간" class="gallery-img" loading="lazy">
<img src="images/studio/탈의실 내부 공간.webp" alt="밍글 스튜디오 탈의실 내부 - 편리한 의상 보관 및 착용 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption">탈의실(내부)</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/탈의실 외부 공간.webp" alt="밍글 스튜디오 탈의실 대기 공간 - 탈의실 전 준비 및 대기 공간" class="gallery-img" loading="lazy">
<img src="images/studio/탈의실 외부 공간.webp" alt="밍글 스튜디오 탈의실 대기 공간 - 탈의실 전 준비 및 대기 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption">탈의실(외부)</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/고품질 녹음을 위한 음향 시스템.webp" alt="밍글 스튜디오 고품질 녹음 음향 시스템 - 전문적인 오디오 녹음 장비" class="gallery-img" loading="lazy">
<img src="images/studio/고품질 녹음을 위한 음향 시스템.webp" alt="밍글 스튜디오 고품질 녹음 음향 시스템 - 전문적인 오디오 녹음 장비" class="gallery-img" loading="lazy">
<div class="gallery-caption">고품질 음향 시스템</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/모션캡쳐 공간 001.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 001 - OptiTrack 카메라와 넓은 캡쳐 에리어" class="gallery-img" loading="lazy">
<img src="images/studio/모션캡쳐 공간 001.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 001 - OptiTrack 카메라와 넓은 캡쳐 에리어" class="gallery-img" loading="lazy">
<div class="gallery-caption">모션캡쳐 공간 001</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/모션캡쳐 공간 002.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 002 - 다양한 각도에서 본 캡쳐 공간" class="gallery-img" loading="lazy">
<img src="images/studio/모션캡쳐 공간 002.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 002 - 다양한 각도에서 본 캡쳐 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption">모션캡쳐 공간 002</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/모션캡쳐 공간 003.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 003 - 조명과 카메라 시스템 배치" class="gallery-img" loading="lazy">
<img src="images/studio/모션캡쳐 공간 003.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 003 - 조명과 카메라 시스템 배치" class="gallery-img" loading="lazy">
<div class="gallery-caption">모션캡쳐 공간 003</div>
</div>
<div class="gallery-item">
<img src="Studio_Image/모션캡쳐 공간 004.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 004 - 완성된 모션캡쳐 스튜디오 전경" class="gallery-img" loading="lazy">
<img src="images/studio/모션캡쳐 공간 004.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 004 - 완성된 모션캡쳐 스튜디오 전경" class="gallery-img" loading="lazy">
<div class="gallery-caption">모션캡쳐 공간 004</div>
</div>
</div>
@ -148,15 +136,15 @@
<div class="panorama-grid">
<div class="panorama-viewer" data-panorama="curtain-open">
<div class="panorama-container panorama-clickable"
data-image="Studio_Image/커튼 걷은 360 이미지.webp"
data-image="images/studio/커튼 걷은 360 이미지.webp"
data-title="스튜디오 전경 (커튼 열림)">
<img src="Studio_Image/커튼 걷은 360 이미지.webp"
<img src="images/studio/커튼 걷은 360 이미지.webp"
alt="밍글 스튜디오 360도 전경 - 커튼을 걷은 모습"
class="panorama-preview-image"
loading="lazy">
<div class="panorama-help">클릭하여 360° VR로 체험하기</div>
<div class="panorama-indicator">360° VR</div>
<div class="panorama-play-button">
<div class="panorama-play-button" role="button" tabindex="0" aria-label="360도 VR 체험하기">
<i class="fas fa-play"></i>
</div>
</div>
@ -167,15 +155,15 @@
<div class="panorama-viewer" data-panorama="curtain-closed">
<div class="panorama-container panorama-clickable"
data-image="Studio_Image/커튼친 360 이미지.webp"
data-image="images/studio/커튼친 360 이미지.webp"
data-title="스튜디오 전경 (커튼 닫힘)">
<img src="Studio_Image/커튼친 360 이미지.webp"
<img src="images/studio/커튼친 360 이미지.webp"
alt="밍글 스튜디오 360도 전경 - 커튼을 친 모습"
class="panorama-preview-image"
loading="lazy">
<div class="panorama-help">클릭하여 360° VR로 체험하기</div>
<div class="panorama-indicator">360° VR</div>
<div class="panorama-play-button">
<div class="panorama-play-button" role="button" tabindex="0" aria-label="360도 VR 체험하기">
<i class="fas fa-play"></i>
</div>
</div>
@ -187,16 +175,18 @@
</div>
</section>
</main>
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
<footer class="site-footer">
<div class="container">
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

BIN
images/logo/mingle-OG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 644 KiB

0
mingle-logo.ico → images/logo/mingle-logo.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

0
mingle-logo.svg → images/logo/mingle-logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

0
mingle-logo.webp → images/logo/mingle-logo.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
images/partners/(주)세광종합기술단.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/partners/메가메타.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

0
Profile_image/야모.png → images/profile/야모.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 758 KiB

After

Width:  |  Height:  |  Size: 758 KiB

0
Profile_image/제이제이.png → images/profile/제이제이.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 781 KiB

After

Width:  |  Height:  |  Size: 781 KiB

0
Profile_image/카닉.png → images/profile/카닉.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 737 KiB

After

Width:  |  Height:  |  Size: 737 KiB

0
Studio_Image/고품질 녹음을 위한 음향 시스템.webp → images/studio/고품질 녹음을 위한 음향 시스템.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

0
Studio_Image/넓은 모션 캡쳐 공간 002.webp → images/studio/넓은 모션 캡쳐 공간 002.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

0
Studio_Image/모션캡쳐 공간 001.webp → images/studio/모션캡쳐 공간 001.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

0
Studio_Image/모션캡쳐 공간 002.webp → images/studio/모션캡쳐 공간 002.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

0
Studio_Image/모션캡쳐 공간 003.webp → images/studio/모션캡쳐 공간 003.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

0
Studio_Image/모션캡쳐 공간 004.webp → images/studio/모션캡쳐 공간 004.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

0
Studio_Image/스튜디오와 연결된 파우더룸.webp → images/studio/스튜디오와 연결된 파우더룸.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 618 KiB

After

Width:  |  Height:  |  Size: 618 KiB

0
Studio_Image/오퍼레이팅 공간 강조.webp → images/studio/오퍼레이팅 공간 강조.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

0
Studio_Image/커튼 걷은 360 이미지.webp → images/studio/커튼 걷은 360 이미지.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 MiB

After

Width:  |  Height:  |  Size: 2.0 MiB

0
Studio_Image/커튼을 친 외부 전경.webp → images/studio/커튼을 친 외부 전경.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

0
Studio_Image/커튼친 360 이미지.webp → images/studio/커튼친 360 이미지.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

0
Studio_Image/탈의실 내부 공간.webp → images/studio/탈의실 내부 공간.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 874 KiB

After

Width:  |  Height:  |  Size: 874 KiB

0
Studio_Image/탈의실 외부 공간.webp → images/studio/탈의실 외부 공간.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 295 KiB

After

Width:  |  Height:  |  Size: 295 KiB

0
Studio_Image/프라이핏한 모션 캡쳐 공간.webp → images/studio/프라이핏한 모션 캡쳐 공간.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

822
index.html
View File

@ -13,11 +13,11 @@
<title>밍글 스튜디오 - 모션캡쳐 창작 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="apple-touch-icon" href="/mingle-logo.webp">
<link rel="apple-touch-icon-precomposed" href="/mingle-logo.webp">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<link rel="apple-touch-icon" href="/images/logo/mingle-logo.webp">
<link rel="apple-touch-icon-precomposed" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/">
@ -41,7 +41,7 @@
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
<!-- SEO 메타 태그 -->
<meta name="description" content="밍글 스튜디오 - 모션캡쳐 스튜디오 대관 서비스. OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능. 시간당 22만원(VAT 포함). 인천테크노밸리 위치.">
<meta name="description" content="밍글 스튜디오 - 모션캡쳐 스튜디오 대관 서비스. OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능. 시간당 20만원(VAT 포함). 인천테크노밸리 위치.">
<meta name="keywords" content="모션캡쳐, 스튜디오 대관, OptiTrack, 모션캡처, 3D 애니메이션, 버추얼 콘텐츠, 인천 스튜디오, 모션캡쳐 대관, 3D 캐릭터 애니메이션, 버튜버, VTuber">
<meta name="author" content="밍글 스튜디오">
<meta name="robots" content="index, follow">
@ -49,7 +49,7 @@
<!-- Open Graph -->
<meta property="og:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
<meta property="og:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta property="og:url" content="https://minglestudio.co.kr">
<meta property="og:type" content="website">
<meta property="og:image:width" content="1200">
@ -61,58 +61,41 @@
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
<meta name="twitter:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
<!-- LinkedIn -->
<meta property="linkedin:owner" content="">
<!-- Pinterest -->
<meta name="pinterest-rich-pin" content="true">
<meta property="article:author" content="밍글 스튜디오">
<!-- Slack -->
<meta name="slack-app-id" content="">
<!-- WhatsApp -->
<!-- WhatsApp / OG 이미지 대체 텍스트 -->
<meta property="og:image:alt" content="밍글 스튜디오 로고 - 인천 모션캡쳐 전문 스튜디오">
<!-- Telegram -->
<meta property="telegram:channel" content="">
<!-- Microsoft Teams -->
<meta name="msapplication-TileImage" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="msapplication-TileColor" content="#ff8800">
<!-- Apple Touch Icon (iOS Safari, LINE 등) -->
<link rel="apple-touch-icon" href="https://minglestudio.co.kr/mingle-logo.webp">
<link rel="apple-touch-icon-precomposed" href="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="msapplication-TileImage" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<!-- Kakao (카카오톡) -->
<meta property="kakao:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
<meta property="kakao:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
<meta property="kakao:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="kakao:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<!-- 네이버 검색 최적화 -->
<meta name="naver-site-verification" content="">
<meta name="description" content="인천 모션캡쳐 스튜디오 밍글 스튜디오 - OptiTrack 28대 카메라, 전신/페이셜 캡쳐, 버튜버 방송, 게임 개발, 시간당 22만원, 인천테크노밸리 위치">
<meta name="keywords" content="모션캡쳐, 모션캡쳐 스튜디오, 인천 모션캡쳐, OptiTrack, 버튜버, VTuber, 게임 개발, 3D 애니메이션, 밍글스튜디오, MINGLE STUDIO, 인천테크노밸리">
<meta name="subject" content="모션캡쳐 스튜디오 대관 서비스">
<meta name="title" content="인천 모션캡쳐 전문 스튜디오 밍글 - OptiTrack 전신 페이셜 캡쳐 대관">
<link rel="canonical" href="https://minglestudio.co.kr/">
<!-- 구조화된 데이터 (검색 최적화) -->
<!-- 구조화된 데이터 (통합) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "밍글 스튜디오",
"alternateName": "MINGLE STUDIO",
"description": "인천 모션캡쳐 전문 스튜디오 - OptiTrack 28대 카메라 시스템",
"alternateName": ["MINGLE STUDIO", "밍글스튜디오"],
"description": "인천 모션캡쳐 전문 스튜디오 - OptiTrack 28대 카메라 시스템, 전신/페이셜 모션캡쳐 서비스",
"url": "https://minglestudio.co.kr",
"telephone": "010-9288-9190",
"telephone": "+82-10-9288-9190",
"email": "help@minglestudio.co.kr",
"foundingDate": "2025-07",
"address": {
"@type": "PostalAddress",
"streetAddress": "주부토로 236, 인천테크노밸리 U1센터 A동 B105호",
@ -123,101 +106,17 @@
},
"geo": {
"@type": "GeoCoordinates",
"latitude": 37.4979,
"longitude": 126.7334
"latitude": 37.5073,
"longitude": 126.7450
},
"openingHours": "Mo-Su 09:00-22:00",
"priceRange": "$$",
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "모션캡쳐 서비스",
"itemListElement": [
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "모션캡쳐 스튜디오 대관",
"description": "OptiTrack 28대 카메라 시스템을 활용한 전신/페이셜 모션캡쳐"
},
"price": "220000",
"priceCurrency": "KRW",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "220000",
"priceCurrency": "KRW",
"unitText": "시간"
}
}
]
},
"areaServed": {
"@type": "State",
"name": "인천광역시"
},
"serviceArea": {
"@type": "GeoCircle",
"geoMidpoint": {
"@type": "GeoCoordinates",
"latitude": 37.4979,
"longitude": 126.7334
},
"geoRadius": "50000"
},
"knowsAbout": [
"모션캡쳐",
"OptiTrack",
"버튜버",
"3D 애니메이션",
"실시간 스트리밍",
"페이셜 캡쳐"
],
"sameAs": [
"https://www.youtube.com/@mingle_studio"
]
}
</script>
<!-- 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/popup.css">
<!-- 구조화된 데이터 (Schema.org) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "밍글 스튜디오",
"alternateName": "MINGLE STUDIO",
"description": "OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능. 시간당 22만원(VAT 포함). 인천테크노밸리 위치.",
"url": "https://minglestudio.co.kr",
"telephone": "010-9288-9190",
"email": "help@minglestudio.co.kr",
"address": {
"@type": "PostalAddress",
"streetAddress": "주부토로 236, 인천테크노밸리 U1센터 A동 B105호",
"addressLocality": "부평구",
"addressRegion": "인천광역시",
"postalCode": "21330",
"addressCountry": "KR"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "37.5073",
"longitude": "126.7450"
},
"openingHours": "Mo-Su 09:00-21:00",
"priceRange": "₩₩₩",
"serviceType": "모션캡쳐 스튜디오 대관",
"areaServed": {
"@type": "Country",
"name": "대한민국"
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+82-10-9288-9190",
"email": "help@minglestudio.co.kr",
"contactType": "customer service",
"availableLanguage": "Korean"
},
"hasOfferCatalog": {
"@type": "OfferCatalog",
@ -230,11 +129,11 @@
"name": "모션캡쳐 스튜디오 대관",
"description": "OptiTrack 28대 카메라 시스템, 8m x 7m x 2.6m 공간"
},
"price": "220000",
"price": "200000",
"priceCurrency": "KRW",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "220000",
"price": "200000",
"priceCurrency": "KRW",
"unitCode": "HUR",
"unitText": "시간"
@ -242,68 +141,51 @@
}
]
},
"sameAs": [
"https://www.youtube.com/@mingle_studio"
],
"areaServed": {
"@type": "Country",
"name": "대한민국"
},
"knowsAbout": [
"모션캡쳐",
"OptiTrack",
"버튜버 방송",
"버튜버",
"VTuber",
"3D 애니메이션",
"실시간 스트리밍",
"페이셜 캡쳐",
"게임 개발",
"버추얼 콘텐츠"
],
"sameAs": [
"https://www.youtube.com/@mingle_studio",
"https://x.com/minglestudio"
]
}
</script>
<!-- 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/popup.css">
<!-- 네이버 지역정보 JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechCompany",
"name": "밍글 스튜디오",
"alternateName": ["MINGLE STUDIO", "밍글스튜디오"],
"description": "인천 소재 모션캡쳐 전문 스튜디오, OptiTrack 시스템 기반 전신/페이셜 모션캡쳐 서비스 제공",
"foundingDate": "2025",
"foundingLocation": "인천광역시 부평구",
"address": {
"@type": "PostalAddress",
"addressCountry": "KR",
"addressRegion": "인천광역시",
"addressLocality": "부평구",
"streetAddress": "주부토로 236, 인천테크노밸리 U1센터 A동 B105호",
"postalCode": "21330"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+82-10-9288-9190",
"email": "help@minglestudio.co.kr",
"contactType": "customer service",
"availableLanguage": "Korean"
},
"makesOffer": {
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "모션캡쳐 스튜디오 대관",
"description": "OptiTrack 28대 카메라 시스템을 활용한 전문 모션캡쳐 서비스"
},
"price": "220000",
"priceCurrency": "KRW"
}
}
</script>
</head>
<body>
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- 할인 이벤트 팝업 -->
<div class="popup-overlay" id="mainPopup">
<div class="popup-overlay" id="mainPopup" role="dialog" aria-label="이벤트 팝업">
<div class="popup-container">
<button class="popup-close-x" id="popupCloseX">×</button>
<button class="popup-close-x" id="popupCloseX" aria-label="팝업 닫기">×</button>
<div class="popup-header">
<h2 class="popup-title">🎉 밍글 스튜디오 오픈 기념 🎉</h2>
@ -336,7 +218,7 @@
<span class="original-price">2,000,000원</span>
<span class="sale-price">1,600,000원</span>
</div>
<p class="price-note">1~4인 사용 / 8시간 패키지 / VAT 별도</p>
<p class="price-note">1~4인 사용 / 6시간 패키지 / VAT 별도</p>
</div>
</div>
@ -373,176 +255,235 @@
<!-- 헤더 -->
<div id="header-placeholder"></div>
<main id="main-content">
<!-- Hero 섹션 -->
<section class="hero-section">
<div class="hero-bg">
<div class="video-bg">
<iframe
id="youtube-bg"
src="https://www.youtube.com/embed/videoseries?list=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO&autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1&enablejsapi=1&playlist=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO"
src="https://www.youtube-nocookie.com/embed/videoseries?list=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO&autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1&enablejsapi=1&playlist=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
</div>
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">
밍글스튜디오<br>
<span class="hero-subtitle gradient-text">MINGLE STUDIO</span>
</h1>
<p class="hero-description">
기술과 창의력 열정이 한데 섞여<br>
새로운 가치가 만들어지는 공간
</p>
<div class="hero-buttons">
<a href="/about" class="btn btn-primary">회사 소개 보기</a>
<a href="/contact" class="btn btn-outline">예약 문의하기</a>
</div>
<!-- 간단한 스펙 표시 -->
<div class="hero-specs">
<div class="spec-item">
<span class="spec-icon">📹</span>
<span class="spec-text">28대 OptiTrack</span>
</div>
<div class="spec-item">
<span class="spec-icon">📐</span>
<span class="spec-text">8m x 7m x 2.6m</span>
</div>
<div class="spec-item">
<span class="spec-icon">💰</span>
<span class="spec-text">시간당 22만원</span>
</div>
</div>
<div class="hero-content-centered">
<div class="hero-logo-area">
<div class="hero-floating-elements" aria-hidden="true">
<!-- 모캡 마커 (빛나는 점) -->
<span class="float-marker" style="--x:-90px;--y:-70px;--delay:0s;--dur:4s"></span>
<span class="float-marker" style="--x:85px;--y:-55px;--delay:0.6s;--dur:3.5s"></span>
<span class="float-marker" style="--x:-60px;--y:65px;--delay:1.2s;--dur:4.5s"></span>
<span class="float-marker" style="--x:75px;--y:50px;--delay:0.3s;--dur:3.8s"></span>
<span class="float-marker small" style="--x:-110px;--y:10px;--delay:0.8s;--dur:5s"></span>
<span class="float-marker small" style="--x:105px;--y:-15px;--delay:1.5s;--dur:4.2s"></span>
<!-- 카메라 아이콘 -->
<span class="float-camera" style="--x:-120px;--y:-40px;--delay:0.4s;--dur:5s">📷</span>
<span class="float-camera" style="--x:115px;--y:30px;--delay:1s;--dur:4.5s">🎥</span>
<span class="float-camera" style="--x:-30px;--y:80px;--delay:1.8s;--dur:5.5s">📹</span>
</div>
<div class="hero-image">
<div class="logo-wrapper">
<img src="/mingle-logo.webp" alt="밍글 스튜디오 - 인천 모션캡쳐 전문 스튜디오 로고" class="hero-logo">
<div class="logo-glow"></div>
</div>
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고" class="hero-logo">
<div class="logo-glow"></div>
</div>
<h1 class="hero-title">
밍글스튜디오<br>
<span class="hero-subtitle gradient-text">MINGLE STUDIO</span>
</h1>
<p class="hero-description">
기술과 창의력 열정이 한데 섞여<br>
새로운 가치가 만들어지는 공간
</p>
<div class="hero-buttons">
<a href="/about" class="btn btn-primary">회사 소개 보기</a>
<a href="/contact" class="btn btn-outline">예약 문의하기</a>
</div>
<!-- 스펙 카운터 -->
<div class="hero-specs">
<div class="spec-item">
<span class="spec-number"><span class="counter" data-target="28">0</span><span class="spec-unit">대</span></span>
<span class="spec-label">OptiTrack 카메라</span>
</div>
<div class="spec-item">
<span class="spec-number">8<span class="spec-unit">m</span> × 7<span class="spec-unit">m</span></span>
<span class="spec-label">캡쳐 공간</span>
</div>
<div class="spec-item">
<span class="spec-number"><span class="counter" data-target="20">0</span><span class="spec-unit">만원</span></span>
<span class="spec-label">시간당 대관료</span>
</div>
</div>
</div>
</section>
<!-- 핵심 기능 섹션 -->
<section class="features-section section">
<div class="container">
<div class="section-header">
<h2>최첨단 모션캡쳐 솔루션</h2>
<p>버추얼 콘텐츠 제작을 위한 완벽한 환경</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon-wrapper">
<div class="feature-icon">🎬</div>
</div>
<h3>OptiTrack 카메라 시스템</h3>
<p>28대의 고성능 광학식 카메라로 정밀한 모션 트래킹</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrapper">
<div class="feature-icon">👤</div>
</div>
<h3>전신 & 페이셜 캡쳐</h3>
<p>몸 전체 움직임과 얼굴 표정까지 실시간 캡쳐</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrapper">
<div class="feature-icon">🎮</div>
</div>
<h3>실시간 스트리밍</h3>
<p>스트리밍글 서비스로 라이브 방송 가능</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrapper">
<div class="feature-icon">🛠️</div>
</div>
<h3>전문 기술 지원</h3>
<p>숙련된 오퍼레이터의 실시간 서포트</p>
</div>
</div>
<div class="hero-scroll-indicator">
<span>Scroll</span>
<div class="scroll-arrow"></div>
</div>
</section>
<!-- 서비스 미리보기 -->
<section class="services-preview section bg-gradient">
<div class="container">
<div class="section-header">
<h2>주요 활용 분야</h2>
<p>다양한 크리에이티브 프로젝트를 지원합니다</p>
</div>
<div class="services-carousel">
<div class="service-item">
<div class="service-icon">🎭</div>
<h3>버추얼 콘텐츠</h3>
<p>VTuber, 버추얼 아이돌 방송</p>
</div>
<div class="service-item">
<div class="service-icon">🎮</div>
<h3>게임 개발</h3>
<p>캐릭터 애니메이션 제작</p>
</div>
<div class="service-item">
<div class="service-icon">🎬</div>
<h3>영상 제작</h3>
<p>VFX, 버추얼 프로덕션</p>
</div>
<div class="service-item">
<div class="service-icon">📱</div>
<h3>메타버스</h3>
<p>3D 아바타 콘텐츠</p>
<!-- 통합 스티키 섹션: Features + Services + Studio -->
<section class="sticky-showcase">
<div class="sticky-showcase-container">
<!-- 왼쪽: 고정 이미지 패널 -->
<div class="showcase-sticky">
<div class="showcase-image-wrapper">
<!-- Step 1: YouTube 영상 -->
<div class="showcase-media active" data-step="1">
<iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="showcase-video"></iframe>
</div>
<!-- Step 2: 이미지 페이드 루프 -->
<div class="showcase-media" data-step="2">
<div class="showcase-fade-loop" data-interval="3000">
<img src="images/studio/넓은 모션 캡쳐 공간 002.webp" alt="넓은 모션캡쳐 공간" class="fade-loop-img active">
<img src="images/studio/모션캡쳐 공간 001.webp" alt="모션캡쳐 공간 1" class="fade-loop-img">
<img src="images/studio/모션캡쳐 공간 002.webp" alt="모션캡쳐 공간 2" class="fade-loop-img">
<img src="images/studio/모션캡쳐 공간 003.webp" alt="모션캡쳐 공간 3" class="fade-loop-img">
<img src="images/studio/모션캡쳐 공간 004.webp" alt="모션캡쳐 공간 4" class="fade-loop-img">
</div>
</div>
<!-- Step 3: YouTube 영상 -->
<div class="showcase-media" data-step="3">
<iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="showcase-video"></iframe>
</div>
<!-- Step 4: 이미지 페이드 루프 -->
<div class="showcase-media" data-step="4">
<div class="showcase-fade-loop" data-interval="3000">
<img src="images/studio/오퍼레이팅 공간 강조.webp" alt="오퍼레이팅 공간" class="fade-loop-img active">
<img src="images/studio/스튜디오와 연결된 파우더룸.webp" alt="스튜디오와 연결된 파우더룸" class="fade-loop-img">
<img src="images/studio/탈의실 내부 공간.webp" alt="탈의실 내부 공간" class="fade-loop-img">
</div>
</div>
<div class="showcase-image-overlay"></div>
<div class="showcase-dots">
<span class="showcase-dot active" data-step="1"></span>
<span class="showcase-dot" data-step="2"></span>
<span class="showcase-dot" data-step="3"></span>
<span class="showcase-dot" data-step="4"></span>
</div>
</div>
</div>
<div class="text-center mt-4">
<a href="/services" class="btn btn-secondary">전체 서비스 보기</a>
</div>
</div>
</section>
<!-- 스튜디오 미리보기 갤러리 -->
<section class="studio-preview section">
<div class="container">
<div class="section-header">
<h2>스튜디오 공간</h2>
<p>최적의 모션캡쳐 환경을 제공합니다</p>
</div>
<div class="preview-grid">
<div class="preview-main">
<img src="Studio_Image/넓은 모션 캡쳐 공간 002.webp" alt="밍글 스튜디오 메인 모션캡쳐 공간 - 8m x 7m x 2.6m 규모의 OptiTrack 카메라 28대 설치" class="preview-img">
<div class="preview-overlay">
<h3>메인 캡쳐 공간</h3>
<p>8m x 7m x 2.6m 볼륨</p>
<!-- 오른쪽: 스크롤 콘텐츠 -->
<div class="showcase-scroll">
<!-- Step 1: 핵심 장비 -->
<div class="showcase-step active" data-step="1">
<div class="showcase-mobile-media">
<iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&playsinline=1" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
</div>
</div>
<div class="preview-side">
<div class="preview-item">
<img src="Studio_Image/오퍼레이팅 공간 강조.webp" alt="밍글 스튜디오 컨트롤룸 - 전문 오퍼레이터가 실시간 모니터링하는 공간" class="preview-img">
<div class="preview-overlay">
<p>컨트롤룸</p>
<div class="showcase-step-label">Equipment</div>
<h2 class="showcase-step-title">최첨단 모션캡쳐 시스템</h2>
<p class="showcase-step-desc">OptiTrack 광학식 카메라, Rokoko 글러브, ARKit 페이셜 캡쳐까지 — 전신부터 손끝, 표정까지 정밀하게 트래킹합니다.</p>
<div class="showcase-features">
<div class="showcase-feature-item">
<span class="showcase-feature-icon">🎬</span>
<div>
<strong>OptiTrack 카메라 28대</strong>
<span>서브밀리미터 수준 광학식 모션 트래킹</span>
</div>
</div>
</div>
<div class="preview-item">
<img src="Studio_Image/프라이핏한 모션 캡쳐 공간.webp" alt="밍글 스튜디오 프라이빗 모션캡쳐 공간 - 개인 및 소규모 촬영 전용 공간" class="preview-img">
<div class="preview-overlay">
<p>프라이빗 공간</p>
<div class="showcase-feature-item">
<span class="showcase-feature-icon">🧤</span>
<div>
<strong>Rokoko 글러브 5대</strong>
<span>손가락 관절까지 정밀한 핸드 캡쳐</span>
</div>
</div>
<div class="showcase-feature-item">
<span class="showcase-feature-icon">📱</span>
<div>
<strong>ARKit 페이셜 캡쳐 (iPhone 5대)</strong>
<span>iPhone 기반 고정밀 표정 캡쳐</span>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a href="/gallery" class="btn btn-primary">갤러리 보기</a>
<!-- Step 2: 공간 -->
<div class="showcase-step" data-step="2">
<div class="showcase-mobile-media">
<img src="images/studio/넓은 모션 캡쳐 공간 002.webp" alt="넓은 모션캡쳐 공간" loading="lazy">
</div>
<div class="showcase-step-label">Space</div>
<h2 class="showcase-step-title">넓고 최적화된 캡쳐 공간</h2>
<p class="showcase-step-desc">8m x 7m x 2.6m 규모의 전용 캡쳐 볼륨으로 자유로운 움직임이 가능합니다.</p>
<div class="showcase-features">
<div class="showcase-feature-item">
<span class="showcase-feature-icon">📐</span>
<div>
<strong>8m × 7m × 2.6m</strong>
<span>넓은 전용 캡쳐 볼륨</span>
</div>
</div>
<div class="showcase-feature-item">
<span class="showcase-feature-icon">🎮</span>
<div>
<strong>실시간 스트리밍</strong>
<span>스트리밍글 서비스로 라이브 방송</span>
</div>
</div>
</div>
</div>
<!-- Step 3: 서비스 -->
<div class="showcase-step" data-step="3">
<div class="showcase-mobile-media">
<iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&playsinline=1" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
</div>
<div class="showcase-step-label">Services</div>
<h2 class="showcase-step-title">주요 활용 분야</h2>
<p class="showcase-step-desc">다양한 크리에이티브 프로젝트를 전문 오퍼레이터가 지원합니다.</p>
<div class="showcase-services-grid">
<div class="showcase-service">
<span>🎭</span>
<strong>버추얼 콘텐츠</strong>
<span class="showcase-service-sub">VTuber, 버추얼 아이돌</span>
</div>
<div class="showcase-service">
<span>🎮</span>
<strong>게임 개발</strong>
<span class="showcase-service-sub">캐릭터 애니메이션</span>
</div>
<div class="showcase-service">
<span>🎬</span>
<strong>영상 제작</strong>
<span class="showcase-service-sub">VFX, 버추얼 프로덕션</span>
</div>
<div class="showcase-service">
<span>📱</span>
<strong>메타버스</strong>
<span class="showcase-service-sub">3D 아바타 콘텐츠</span>
</div>
</div>
<a href="/services" class="btn btn-secondary showcase-btn">전체 서비스 보기</a>
</div>
<!-- Step 4: 스튜디오 -->
<div class="showcase-step" data-step="4">
<div class="showcase-mobile-media">
<img src="images/studio/오퍼레이팅 공간 강조.webp" alt="오퍼레이팅 공간" loading="lazy">
</div>
<div class="showcase-step-label">Studio</div>
<h2 class="showcase-step-title">스튜디오 공간</h2>
<p class="showcase-step-desc">메인 캡쳐 공간부터 컨트롤룸, 프라이빗 룸까지 모든 환경이 갖춰져 있습니다. 전문 기술 지원과 함께 최적의 캡쳐 경험을 제공합니다.</p>
<div class="showcase-features">
<div class="showcase-feature-item">
<span class="showcase-feature-icon">🛠️</span>
<div>
<strong>전문 기술 지원</strong>
<span>숙련된 오퍼레이터의 실시간 서포트</span>
</div>
</div>
<div class="showcase-feature-item">
<span class="showcase-feature-icon">🔒</span>
<div>
<strong>프라이빗 환경</strong>
<span>독립된 공간에서 집중 작업</span>
</div>
</div>
</div>
<a href="/gallery" class="btn btn-primary showcase-btn">갤러리 보기</a>
</div>
</div>
</div>
</section>
@ -550,28 +491,145 @@
<!-- 포트폴리오 미리보기 -->
<section class="portfolio-preview section bg-light">
<div class="container">
<div class="section-header">
<div class="section-header reveal" data-reveal="up">
<h2>포트폴리오</h2>
<p>밍글 스튜디오에서 제작된 콘텐츠</p>
<p>밍글 스튜디오에서 제작하고 협업한 모션캡쳐 콘텐츠</p>
</div>
<div class="portfolio-grid">
<div class="portfolio-item">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/jQTi8adbvaM" title="머쉬베놈 (MUSHVENOM) - 돌림판 (feat. 신빠람 이박사) 🍓 CROA COVER" allowfullscreen loading="lazy"></iframe>
<!-- 탭 버튼 -->
<div class="portfolio-tab-nav reveal" data-reveal="up" data-delay="100">
<button class="portfolio-tab-btn active" data-portfolio-tab="creator">개인 크리에이터</button>
<button class="portfolio-tab-btn" data-portfolio-tab="corporate">기업 프로젝트</button>
<button class="portfolio-tab-btn" data-portfolio-tab="shorts">Shorts</button>
</div>
<!-- 개인 크리에이터 탭 -->
<div class="portfolio-tab-panel active" id="portfolio-creator">
<div class="portfolio-grid-v2">
<div class="portfolio-card reveal" data-reveal="up" data-delay="0">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/jQTi8adbvaM" title="머쉬베놈 - 돌림판 CROA COVER" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>머쉬베놈 - 돌림판 🍓 CROA COVER</h3>
<div class="portfolio-tags">
<span class="portfolio-tag">커버</span>
<span class="portfolio-tag">CROA</span>
</div>
</div>
</div>
<h3>모션캡쳐 포트폴리오</h3>
</div>
<div class="portfolio-item">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/OmpqKhMrb-U" title="Shorts 영상" allowfullscreen loading="lazy"></iframe>
<div class="portfolio-card reveal" data-reveal="up" data-delay="100">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/FecqTyUU6y0" title="QWER - 가짜아이돌 COVER BY VENY" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>QWER - 가짜아이돌 COVER BY VENY</h3>
<div class="portfolio-tags">
<span class="portfolio-tag">커버</span>
<span class="portfolio-tag">VENY</span>
</div>
</div>
</div>
<div class="portfolio-card reveal" data-reveal="up" data-delay="200">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/ryliwrc0Yms" title="aesoopa 에숲파 Black Mamba MV" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>에숲파 'Black Mamba' MV</h3>
<div class="portfolio-tags">
<span class="portfolio-tag">MV</span>
<span class="portfolio-tag">에숲파</span>
</div>
</div>
</div>
<h3>Shorts 콘텐츠</h3>
</div>
</div>
<div class="text-center mt-4">
<a href="/portfolio" class="btn btn-secondary">전체 포트폴리오</a>
<!-- 기업 프로젝트 탭 -->
<div class="portfolio-tab-panel" id="portfolio-corporate">
<div class="portfolio-grid-v2">
<div class="portfolio-card">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/OUdsyxPzS14" title="아이시아(IXIA) 꼭꼭 숨어라 MV" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>아이시아(IXIA) '꼭꼭 숨어라' MV</h3>
<div class="portfolio-tags">
<span class="portfolio-tag accent">기업</span>
<span class="portfolio-tag">뮤직비디오</span>
<span class="portfolio-tag">IXIA</span>
</div>
</div>
</div>
<div class="portfolio-card">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/KNABwaYmuA8" title="IXIA 데뷔 라이브 쇼케이스" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>IXIA 데뷔 라이브 쇼케이스</h3>
<div class="portfolio-tags">
<span class="portfolio-tag accent">기업</span>
<span class="portfolio-tag">라이브</span>
<span class="portfolio-tag">쇼케이스</span>
</div>
</div>
</div>
<div class="portfolio-card">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/FXnH-43NpFM?start=1725" title="IXIA 라이브룸" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>IXIA 라이브룸</h3>
<div class="portfolio-tags">
<span class="portfolio-tag accent">기업</span>
<span class="portfolio-tag">라이브</span>
<span class="portfolio-tag">IXIA</span>
</div>
</div>
</div>
</div>
</div>
<!-- Shorts 탭 -->
<div class="portfolio-tab-panel" id="portfolio-shorts">
<div class="portfolio-shorts-grid">
<div class="portfolio-card shorts">
<div class="portfolio-video shorts-video">
<iframe data-src="https://www.youtube.com/embed/OmpqKhMrb-U" title="STARGAZERS CHALLENGE" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>💕 STARGAZERS CHALLENGE</h3>
</div>
</div>
<div class="portfolio-card shorts">
<div class="portfolio-video shorts-video">
<iframe data-src="https://www.youtube.com/embed/hKwGjPfULFI" title="ELEVATE 챌린지" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>🤎 ELEVATE 챌린지</h3>
</div>
</div>
<div class="portfolio-card shorts">
<div class="portfolio-video shorts-video">
<iframe data-src="https://www.youtube.com/embed/ZWftEFNlvVc" title="일본 유행 챌린지" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>🍓 일본 유행 챌린지</h3>
</div>
</div>
<div class="portfolio-card shorts">
<div class="portfolio-video shorts-video">
<iframe data-src="https://www.youtube.com/embed/6tsYJ0z2q4s" title="바라밤 챌린지" allowfullscreen loading="lazy"></iframe>
</div>
<div class="portfolio-card-info">
<h3>💙 바라밤 챌린지</h3>
</div>
</div>
</div>
</div>
<div class="text-center mt-4 reveal" data-reveal="up">
<a href="/portfolio" class="btn btn-secondary">전체 포트폴리오 보기 →</a>
</div>
</div>
</section>
@ -579,18 +637,21 @@
<!-- 기업 클라이언트 섹션 -->
<section class="partners-section section">
<div class="container">
<div class="section-header">
<div class="section-header reveal" data-reveal="up">
<h2>클라이언트</h2>
<p>다양한 분야의 기업들과 함께 혁신적인 모션캡쳐 콘텐츠를 제작합니다</p>
</div>
<!-- 클라이언트 로고 그리드 -->
<div class="partners-grid">
<div class="partner-logo-item">
<img src="Partners/메가메타.jpg" alt="메가메타 - 밍글 스튜디오 클라이언트" class="partner-logo">
</div>
<div class="partner-logo-item">
<img src="Partners/(주)세광종합기술단.png" alt="(주)세광종합기술단 - 밍글 스튜디오 클라이언트" class="partner-logo">
<!-- 클라이언트 로고 마키 -->
<div class="partners-marquee">
<div class="partners-marquee-track">
<div class="partner-logo-item"><img src="images/partners/메가메타.jpg" alt="메가메타 - 밍글 스튜디오 클라이언트" class="partner-logo"></div>
<div class="partner-logo-item"><img src="images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단 - 밍글 스튜디오 클라이언트" class="partner-logo"></div>
<!-- 무한 루프용 복제 -->
<div class="partner-logo-item"><img src="images/partners/메가메타.jpg" alt="메가메타" class="partner-logo"></div>
<div class="partner-logo-item"><img src="images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단" class="partner-logo"></div>
<div class="partner-logo-item"><img src="images/partners/메가메타.jpg" alt="메가메타" class="partner-logo"></div>
<div class="partner-logo-item"><img src="images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단" class="partner-logo"></div>
</div>
</div>
</div>
@ -598,17 +659,17 @@
<!-- FAQ 바로가기 -->
<section class="section bg-gradient">
<section class="faq-shortcut section">
<div class="container">
<div class="section-header">
<h2>궁금한 점이 있으신가요?</h2>
<p>자주 묻는 질문을 확인하시거나 직접 문의해주세요</p>
</div>
<div class="text-center">
<div class="cta-buttons">
<a href="/qna" class="btn btn-primary btn-lg">자주 묻는 질문</a>
<a href="/contact" class="btn btn-outline btn-lg">직접 문의하기</a>
<div class="faq-shortcut-inner reveal" data-reveal="up">
<div class="faq-shortcut-content">
<span class="faq-shortcut-label">FAQ</span>
<h2 class="faq-shortcut-title">처음이라 막막하신가요?</h2>
<p class="faq-shortcut-desc">모션캡쳐가 처음이어도 괜찮습니다. 예약부터 촬영까지 자주 묻는 질문을 정리했어요.</p>
</div>
<div class="faq-shortcut-actions">
<a href="/qna" class="btn btn-primary btn-lg">자주 묻는 질문 보기</a>
<a href="/contact" class="btn btn-ghost btn-lg">1:1 문의하기</a>
</div>
</div>
</div>
@ -618,34 +679,55 @@
<section class="cta-section">
<div class="cta-bg"></div>
<div class="container text-center">
<h2 class="cta-title">지금 바로 시작하세요</h2>
<p class="cta-description">
최첨단 모션캡쳐 시스템으로 여러분의 창작 비전을 실현해보세요
<div class="cta-label reveal" data-reveal="up">Get Started</div>
<h2 class="cta-title reveal" data-reveal="up" data-delay="100">당신의 아이디어,<br>움직임으로 만들어 드립니다</h2>
<p class="cta-description reveal" data-reveal="up" data-delay="200">
전문 모션캡쳐 스튜디오에서 크리에이티브의 새로운 가능성을 경험하세요
</p>
<div class="cta-buttons">
<div class="cta-buttons reveal" data-reveal="up" data-delay="300">
<a href="/contact" class="btn btn-primary btn-lg">예약 문의하기</a>
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-outline btn-lg">네이버 예약</a>
</div>
<div class="contact-info-quick">
<span>📧 예약: help@minglestudio.co.kr</span>
<span>💼 비즈니스: minglestudio@minglestudio.co.kr</span>
<span>📍 인천 부평구 주부토로 236, 인천테크노밸리</span>
<div class="contact-info-quick reveal" data-reveal="up" data-delay="400">
<div class="info-quick-item">
<span class="info-quick-icon">📧</span>
<div>
<span class="info-quick-label">예약 문의</span>
<span class="info-quick-value">help@minglestudio.co.kr</span>
</div>
</div>
<div class="info-quick-item">
<span class="info-quick-icon">💼</span>
<div>
<span class="info-quick-label">비즈니스</span>
<span class="info-quick-value">minglestudio@minglestudio.co.kr</span>
</div>
</div>
<div class="info-quick-item">
<span class="info-quick-icon">📍</span>
<div>
<span class="info-quick-label">오시는 길</span>
<span class="info-quick-value">인천 부평구 주부토로 236, 인천테크노밸리</span>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
<footer class="site-footer">
<div class="container">
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

1303
index_backup.html
View File

File diff suppressed because it is too large Load Diff

164
index_new.html
View File

@ -1,164 +0,0 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>밍글 스튜디오 - 모션캡쳐 창작 스튜디오</title>
<!-- SEO 메타 태그 -->
<meta name="description" content="밍글 스튜디오 - 최첨단 OptiTrack 모션캡쳐 시스템을 갖춘 창작 스튜디오. 인천테크노밸리 위치, 시간당 22만원 대관 서비스.">
<meta name="keywords" content="모션캡쳐, 스튜디오 대관, OptiTrack, 3D 애니메이션, 버추얼 콘텐츠, 인천 스튜디오">
<meta name="author" content="밍글 스튜디오">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
<meta property="og:description" content="최첨단 OptiTrack 모션캡쳐 시스템을 갖춘 창작 스튜디오">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:url" content="https://minglestudio.co.kr">
<meta property="og:type" content="website">
<!-- 폰트 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- Hero 섹션 -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">
모션캡쳐로 만드는<br>
<span class="text-primary">무한한 창작의 세계</span>
</h1>
<p class="hero-description">
최첨단 OptiTrack 시스템과 전문 장비를 갖춘<br>
밍글 스튜디오에서 여러분의 상상을 현실로 만들어보세요
</p>
<div class="hero-buttons">
<a href="/services.html" class="btn btn-primary">서비스 알아보기</a>
<a href="/contact.html" class="btn btn-outline">예약 문의하기</a>
</div>
</div>
<div class="hero-image">
<img src="/mingle-logo.webp" alt="밍글 스튜디오" class="hero-logo">
</div>
</div>
</div>
</section>
<!-- 특징 섹션 -->
<section class="features section bg-light">
<div class="container">
<div class="section-header">
<h2>왜 밍글 스튜디오인가?</h2>
<p>최고의 장비와 전문성으로 여러분의 프로젝트를 지원합니다</p>
</div>
<div class="features-grid grid grid-2-1">
<div class="feature-card card">
<div class="feature-icon">🎬</div>
<h3>최첨단 OptiTrack 시스템</h3>
<p>28대의 고성능 카메라로 구성된 전문 모션캡쳐 시스템</p>
</div>
<div class="feature-card card">
<div class="feature-icon">🏢</div>
<h3>넓은 캡쳐 공간</h3>
<p>8m x 8m x 3.5m의 여유로운 모션캡쳐 볼륨</p>
</div>
<div class="feature-card card">
<div class="feature-icon">💼</div>
<h3>합리적인 가격</h3>
<p>시간당 22만원(VAT 포함)의 투명한 요금제</p>
</div>
<div class="feature-card card">
<div class="feature-icon">🎯</div>
<h3>전신 & 페이셜 캡쳐</h3>
<p>몸 전체와 얼굴 표정까지 정밀하게 캡쳐 가능</p>
</div>
<div class="feature-card card">
<div class="feature-icon">🛠️</div>
<h3>전문 기술 지원</h3>
<p>숙련된 오퍼레이터의 기술 지원 서비스</p>
</div>
<div class="feature-card card">
<div class="feature-icon">📍</div>
<h3>접근성 좋은 위치</h3>
<p>인천테크노밸리 ITAVERSE 내 위치</p>
</div>
</div>
</div>
</section>
<!-- CTA 섹션 -->
<section class="cta section">
<div class="container text-center">
<h2>프로젝트를 시작할 준비가 되셨나요?</h2>
<p class="cta-description">
밍글 스튜디오와 함께 여러분의 창작 비전을 실현해보세요
</p>
<div class="cta-buttons">
<a href="/gallery.html" class="btn btn-secondary">스튜디오 둘러보기</a>
<a href="/portfolio.html" class="btn btn-outline">포트폴리오 보기</a>
</div>
</div>
</section>
<!-- 간단한 서비스 소개 -->
<section class="services-preview section bg-light">
<div class="container">
<div class="section-header">
<h2>제공 서비스</h2>
<p>다양한 분야에서 활용 가능한 모션캡쳐 솔루션</p>
</div>
<div class="services-list grid grid-2">
<div class="service-item">
<h3>🎮 게임 개발</h3>
<p>캐릭터 애니메이션 및 모션 데이터 제작</p>
</div>
<div class="service-item">
<h3>🎬 영상 제작</h3>
<p>VFX, 버추얼 프로덕션 지원</p>
</div>
<div class="service-item">
<h3>📱 메타버스 콘텐츠</h3>
<p>버추얼 아바타 및 VTuber 제작</p>
</div>
<div class="service-item">
<h3>🏃 스포츠 분석</h3>
<p>동작 분석 및 퍼포먼스 개선</p>
</div>
</div>
<div class="text-center mt-4">
<a href="/services.html" class="btn btn-primary">전체 서비스 보기</a>
</div>
</div>
</section>
<!-- 연락처 간단 정보 -->
<section class="contact-info section">
<div class="container text-center">
<h2>문의 및 예약</h2>
<div class="contact-details">
<p><strong>이메일:</strong> minglestudio@naver.com</p>
<p><strong>위치:</strong> 인천광역시 연수구 컨벤시아대로 69, ITAVERSE 101동 701-1호</p>
<p><strong>운영시간:</strong> 평일 09:00 - 18:00</p>
</div>
<a href="/contact.html" class="btn btn-primary mt-3">예약 문의하기</a>
</div>
</section>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- JavaScript -->
<script src="/js/common.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

112
js/common.js
View File

@ -2,15 +2,28 @@
// 공통 JavaScript 모듈
// ========================================
// 다크모드 FOUC 방지: DOM 로드 전에 즉시 실행
(function() {
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
// DOM 로드 완료 후 실행
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', async function() {
showPageLoading();
initializeNavigation();
setActiveNavLink();
loadComponents();
await loadComponents();
initLazyLoading();
initRevealAnimations();
createFloatingSNS();
hidePageLoading();
// 컴포넌트 로드 후 스크롤 위치 보정
if (window.scrollY > 0 && !window.location.hash) {
window.scrollTo(0, 0);
}
});
// ========================================
@ -25,6 +38,7 @@ async function loadComponents() {
const html = await response.text();
headerPlaceholder.innerHTML = html;
initializeNavigation(); // 헤더 로드 후 네비게이션 초기화
initThemeToggle(); // 테마 토글 초기화
} catch (error) {
console.error('Error loading header:', error);
}
@ -39,7 +53,7 @@ async function loadComponents() {
footerPlaceholder.innerHTML = html;
// 동적 푸터 로드 성공 시 백업 푸터 숨기기
const backupFooter = document.querySelector('footer[style*="background:#222"]');
const backupFooter = document.querySelector('footer.site-footer');
if (backupFooter) {
backupFooter.style.display = 'none';
}
@ -59,34 +73,36 @@ function initializeNavigation() {
if (hamburger && navMenu) {
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('active');
const isActive = hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
hamburger.setAttribute('aria-expanded', isActive);
hamburger.setAttribute('aria-label', isActive ? '메뉴 닫기' : '메뉴 열기');
});
// 네비게이션 링크 클릭 시 모바일 메뉴 닫기
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
hamburger.setAttribute('aria-expanded', 'false');
hamburger.setAttribute('aria-label', '메뉴 열기');
});
});
}
// 스크롤 시 네비게이션 바 스타일 변경
let lastScroll = 0;
// 스크롤 시 네비게이션 바 스타일 변경 (RAF 최적화)
let scrollTicking = false;
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
const currentScroll = window.pageYOffset;
if (navbar) {
if (currentScroll > 100) {
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.05)';
}
if (!scrollTicking) {
requestAnimationFrame(() => {
if (navbar) {
navbar.classList.toggle('scrolled', window.pageYOffset > 20);
}
scrollTicking = false;
});
scrollTicking = true;
}
lastScroll = currentScroll;
});
}
@ -348,6 +364,64 @@ function createFloatingSNS() {
document.body.appendChild(snsContainer);
}
// ========================================
// 다크모드 토글
// ========================================
function initThemeToggle() {
const toggle = document.getElementById('themeToggle');
if (!toggle) return;
toggle.addEventListener('click', function() {
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
const newTheme = isDark ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
toggle.setAttribute('aria-label',
newTheme === 'dark' ? '라이트 모드로 전환' : '다크 모드로 전환'
);
});
// 초기 aria-label 설정
const current = document.documentElement.getAttribute('data-theme');
toggle.setAttribute('aria-label',
current === 'dark' ? '라이트 모드로 전환' : '다크 모드로 전환'
);
}
// ========================================
// 공통 Reveal 애니메이션
// ========================================
function initRevealAnimations() {
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) {
document.querySelectorAll('.reveal').forEach(el => {
el.classList.add('revealed');
});
return;
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const delay = parseInt(el.dataset.delay || '0', 10);
setTimeout(() => { el.classList.add('revealed'); }, delay);
observer.unobserve(el);
}
});
}, {
threshold: 0.15,
rootMargin: '0px 0px -60px 0px'
});
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
}
// ========================================
// Export 함수들 (다른 스크립트에서 사용 가능)
// ========================================

70
js/contact.js
View File

@ -221,74 +221,8 @@ function formatPhoneNumber(e) {
e.target.value = value;
}
// 알림 메시지 표시
function showNotification(message, type = 'info') {
// 기존 알림 제거
const existingNotification = document.querySelector('.notification');
if (existingNotification) {
existingNotification.remove();
}
// 새 알림 생성
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.innerHTML = `
<span class="notification-message">${message}</span>
<button class="notification-close">&times;</button>
`;
// 스타일 설정
Object.assign(notification.style, {
position: 'fixed',
top: '20px',
right: '20px',
padding: '1rem 1.5rem',
borderRadius: '8px',
boxShadow: '0 4px 15px rgba(0, 0, 0, 0.15)',
zIndex: '9999',
maxWidth: '400px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '1rem'
});
// 타입별 색상
const colors = {
success: { bg: '#10b981', color: 'white' },
error: { bg: '#ef4444', color: 'white' },
info: { bg: '#3b82f6', color: 'white' }
};
const color = colors[type] || colors.info;
notification.style.backgroundColor = color.bg;
notification.style.color = color.color;
// 닫기 버튼 스타일
const closeBtn = notification.querySelector('.notification-close');
Object.assign(closeBtn.style, {
background: 'none',
border: 'none',
color: 'inherit',
fontSize: '1.5rem',
cursor: 'pointer',
padding: '0',
lineHeight: '1'
});
// 닫기 기능
closeBtn.addEventListener('click', () => notification.remove());
// DOM에 추가
document.body.appendChild(notification);
// 5초 후 자동 제거
setTimeout(() => {
if (notification.parentNode) {
notification.remove();
}
}, 5000);
}
// common.js의 showNotification 사용
const showNotification = window.commonUtils?.showNotification || function() {};
// 모달 초기화
function initModal() {

8
js/gallery.js
View File

@ -52,13 +52,13 @@ const galleryImages = document.querySelectorAll('.gallery-img');
function initLightbox() {
// 라이트박스 HTML 생성
const lightboxHTML = `
<div id="lightbox" class="lightbox">
<div id="lightbox" class="lightbox" role="dialog" aria-label="이미지 뷰어">
<div class="lightbox-content">
<img id="lightbox-img" class="lightbox-img" src="" alt="">
<div id="lightbox-caption" class="lightbox-caption"></div>
<button class="lightbox-close" onclick="closeLightbox()"></button>
<button class="lightbox-nav lightbox-prev" onclick="previousImage()">‹</button>
<button class="lightbox-nav lightbox-next" onclick="nextImage()">›</button>
<button class="lightbox-close" onclick="closeLightbox()" aria-label="닫기"></button>
<button class="lightbox-nav lightbox-prev" onclick="previousImage()" aria-label="이전 이미지">‹</button>
<button class="lightbox-nav lightbox-next" onclick="nextImage()" aria-label="다음 이미지">›</button>
</div>
</div>
`;

370
js/main.js
View File

@ -3,78 +3,68 @@
// ========================================
document.addEventListener('DOMContentLoaded', function() {
initMainPageAnimations();
// initRevealAnimations is now in common.js
initCounterAnimation();
initVideoTabs();
initVideoLazyLoading();
initParallaxImages();
initHeroScrollFade();
initWorkflowScroll();
initPortfolioTabs();
});
// ========================================
// 메인 페이지 애니메이션
// 통합 Reveal 애니메이션 시스템
// ========================================
function initMainPageAnimations() {
// Hero 섹션 애니메이션
const heroElements = document.querySelectorAll('.hero-title, .hero-description, .hero-buttons');
heroElements.forEach((el, index) => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
setTimeout(() => {
el.style.transition = 'all 0.8s ease';
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
}, 100 * (index + 1));
});
// Feature 카드 애니메이션
const observerOptions = {
threshold: 0.2,
rootMargin: '0px 0px -50px 0px'
};
function initRevealAnimations() {
// prefers-reduced-motion 체크
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) {
// 모션 감소 모드: 즉시 표시
document.querySelectorAll('.reveal').forEach(el => {
el.classList.add('revealed');
});
return;
}
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const delay = parseInt(el.dataset.delay || '0', 10);
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, index * 100);
observer.unobserve(entry.target);
el.classList.add('revealed');
}, delay);
observer.unobserve(el);
}
});
}, observerOptions);
// Feature 카드 초기 상태 설정 및 관찰
document.querySelectorAll('.feature-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'all 0.6s ease';
observer.observe(card);
}, {
threshold: 0.15,
rootMargin: '0px 0px -60px 0px'
});
// Service 아이템 애니메이션
document.querySelectorAll('.service-item').forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateX(-30px)';
item.style.transition = 'all 0.6s ease';
observer.observe(item);
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
}
// ========================================
// 카운터 애니메이션 (선택적)
// 카운터 애니메이션
// ========================================
function initCounterAnimation() {
const counters = document.querySelectorAll('.counter');
if (counters.length === 0) return;
const animateCounter = (counter) => {
const target = parseInt(counter.getAttribute('data-target'));
const duration = 2000; // 2초
const increment = target / (duration / 16); // 60fps 기준
const duration = 2000;
const increment = target / (duration / 16);
let current = 0;
const updateCounter = () => {
current += increment;
if (current < target) {
@ -84,10 +74,10 @@ function initCounterAnimation() {
counter.textContent = target;
}
};
updateCounter();
};
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
@ -96,24 +86,67 @@ function initCounterAnimation() {
}
});
}, { threshold: 0.5 });
counters.forEach(counter => {
counterObserver.observe(counter);
});
}
// ========================================
// 패럴랙스 효과 (선택적)
// 패럴랙스 효과 (이미지 시차 스크롤)
// ========================================
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const parallaxElements = document.querySelectorAll('.parallax');
parallaxElements.forEach(el => {
const speed = el.getAttribute('data-speed') || 0.5;
el.style.transform = `translateY(${scrolled * speed}px)`;
function initParallaxImages() {
const parallaxContainers = document.querySelectorAll('.preview-main, .preview-item');
if (parallaxContainers.length === 0) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
parallaxContainers.forEach(container => {
const rect = container.getBoundingClientRect();
const viewH = window.innerHeight;
if (rect.bottom < 0 || rect.top > viewH) return;
const progress = (viewH - rect.top) / (viewH + rect.height);
const img = container.querySelector('.preview-img');
if (img) {
const shift = (progress - 0.5) * 30;
img.style.transform = `translateY(${shift}px)`;
}
});
ticking = false;
});
ticking = true;
}
});
});
}
// ========================================
// 히어로 스크롤 페이드 효과
// ========================================
function initHeroScrollFade() {
const hero = document.querySelector('.hero-content-centered');
const indicator = document.querySelector('.hero-scroll-indicator');
if (!hero) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
const scrollY = window.pageYOffset;
const opacity = Math.max(0, 1 - scrollY / 500);
const translate = scrollY * 0.3;
hero.style.opacity = opacity;
hero.style.transform = `translateY(${translate}px)`;
if (indicator) indicator.style.opacity = Math.max(0, 1 - scrollY / 200);
ticking = false;
});
ticking = true;
}
});
}
// ========================================
// 비디오 탭 시스템
@ -121,33 +154,26 @@ window.addEventListener('scroll', () => {
function initVideoTabs() {
const tabButtons = document.querySelectorAll('.video-tab-btn');
const tabContents = document.querySelectorAll('.video-tab-content');
if (tabButtons.length === 0) return; // 탭이 없으면 종료
// 탭 버튼 클릭 이벤트
if (tabButtons.length === 0) return;
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const targetTab = button.getAttribute('data-tab');
// 모든 탭 버튼에서 active 클래스 제거
tabButtons.forEach(btn => btn.classList.remove('active'));
// 클릭된 탭 버튼에 active 클래스 추가
button.classList.add('active');
// 모든 탭 콘텐츠 숨기기
tabContents.forEach(content => {
content.classList.remove('active');
});
// 선택된 탭 콘텐츠 표시
const activeContent = document.getElementById(targetTab);
if (activeContent) {
activeContent.classList.add('active');
// 탭 전환 애니메이션
activeContent.style.opacity = '0';
activeContent.style.transform = 'translateY(20px)';
setTimeout(() => {
activeContent.style.transition = 'all 0.3s ease';
activeContent.style.opacity = '1';
@ -155,8 +181,7 @@ function initVideoTabs() {
}, 50);
}
});
// 키보드 접근성
button.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
@ -164,52 +189,6 @@ function initVideoTabs() {
}
});
});
// 파트너 로고 애니메이션
const partnerItems = document.querySelectorAll('.partner-logo-item');
if (partnerItems.length > 0) {
const partnerObserver = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, index * 100);
partnerObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
partnerItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(30px)';
item.style.transition = 'all 0.6s ease';
partnerObserver.observe(item);
});
}
// 비디오 아이템 애니메이션
const videoItems = document.querySelectorAll('.live-video-item, .shorts-video-item');
if (videoItems.length > 0) {
const videoObserver = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, index * 150);
videoObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
videoItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(30px)';
item.style.transition = 'all 0.6s ease';
videoObserver.observe(item);
});
}
}
// ========================================
@ -217,13 +196,7 @@ function initVideoTabs() {
// ========================================
function initVideoLazyLoading() {
const videoWrappers = document.querySelectorAll('.video-wrapper');
// Intersection Observer를 사용한 레이지 로딩
const observerOptions = {
threshold: 0.1,
rootMargin: '50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
@ -231,12 +204,14 @@ function initVideoLazyLoading() {
observer.unobserve(entry.target);
}
});
}, observerOptions);
}, {
threshold: 0.1,
rootMargin: '50px 0px'
});
videoWrappers.forEach(wrapper => {
observer.observe(wrapper);
// 로딩 상태 표시
if (!wrapper.querySelector('.video-loading')) {
const loadingDiv = document.createElement('div');
loadingDiv.className = 'video-loading';
@ -246,7 +221,7 @@ function initVideoLazyLoading() {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-secondary);
color: rgba(255, 255, 255, 0.4);
font-size: var(--font-sm);
z-index: 10;
`;
@ -255,14 +230,11 @@ function initVideoLazyLoading() {
});
}
// 비디오 로딩
function loadVideo(wrapper) {
const iframe = wrapper.querySelector('iframe');
if (iframe && iframe.dataset.src) {
// 실제 src 설정
iframe.src = iframe.dataset.src;
// 로딩 완료 처리
iframe.addEventListener('load', function() {
wrapper.classList.add('loaded');
const loadingDiv = wrapper.querySelector('.video-loading');
@ -270,8 +242,7 @@ function loadVideo(wrapper) {
loadingDiv.remove();
}
});
// 에러 처리
iframe.addEventListener('error', function() {
const loadingDiv = wrapper.querySelector('.video-loading');
if (loadingDiv) {
@ -280,7 +251,6 @@ function loadVideo(wrapper) {
}
});
} else {
// 이미 src가 설정된 경우
wrapper.classList.add('loaded');
const loadingDiv = wrapper.querySelector('.video-loading');
if (loadingDiv) {
@ -290,15 +260,127 @@ function loadVideo(wrapper) {
}
// ========================================
// 마우스 호버 효과
// 통합 스티키 쇼케이스 스크롤
// ========================================
function initWorkflowScroll() {
const steps = document.querySelectorAll('.showcase-step');
const medias = document.querySelectorAll('.showcase-media');
const dots = document.querySelectorAll('.showcase-dot');
if (steps.length === 0) return;
// 이미지 페이드 루프 타이머 관리
const fadeTimers = {};
function startFadeLoop(media) {
const loop = media.querySelector('.showcase-fade-loop');
if (!loop) return;
const imgs = loop.querySelectorAll('.fade-loop-img');
if (imgs.length <= 1) return;
const interval = parseInt(loop.dataset.interval || '3000', 10);
const key = media.dataset.step;
if (fadeTimers[key]) return; // 이미 실행 중
let current = 0;
imgs.forEach((img, i) => img.classList.toggle('active', i === 0));
fadeTimers[key] = setInterval(() => {
imgs[current].classList.remove('active');
current = (current + 1) % imgs.length;
imgs[current].classList.add('active');
}, interval);
}
function stopFadeLoop(media) {
const key = media.dataset.step;
if (fadeTimers[key]) {
clearInterval(fadeTimers[key]);
delete fadeTimers[key];
}
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const stepNum = entry.target.dataset.step;
steps.forEach(s => s.classList.remove('active'));
medias.forEach(m => {
m.classList.remove('active');
stopFadeLoop(m);
});
dots.forEach(d => d.classList.remove('active'));
entry.target.classList.add('active');
const activeMedia = document.querySelector(`.showcase-media[data-step="${stepNum}"]`);
const activeDot = document.querySelector(`.showcase-dot[data-step="${stepNum}"]`);
if (activeMedia) {
activeMedia.classList.add('active');
startFadeLoop(activeMedia);
}
if (activeDot) activeDot.classList.add('active');
}
});
}, {
threshold: 0.4,
rootMargin: '-10% 0px -10% 0px'
});
steps.forEach(step => observer.observe(step));
// 첫 번째 스텝의 페이드 루프 시작 (해당되는 경우)
const firstMedia = document.querySelector('.showcase-media.active');
if (firstMedia) startFadeLoop(firstMedia);
}
// ========================================
// 포트폴리오 탭 시스템
// ========================================
function initPortfolioTabs() {
const tabBtns = document.querySelectorAll('.portfolio-tab-btn');
const tabPanels = document.querySelectorAll('.portfolio-tab-panel');
if (tabBtns.length === 0) return;
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const target = btn.dataset.portfolioTab;
tabBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
tabPanels.forEach(panel => panel.classList.remove('active'));
const activePanel = document.getElementById('portfolio-' + target);
if (activePanel) {
activePanel.classList.add('active');
// 탭 전환 시 lazy loading 트리거
activePanel.querySelectorAll('iframe[data-src]').forEach(iframe => {
if (!iframe.src) {
iframe.src = iframe.dataset.src;
}
});
}
});
});
}
// ========================================
// 마우스 호버 효과 (글래스 카드)
// ========================================
document.querySelectorAll('.feature-card, .service-item').forEach(card => {
card.addEventListener('mouseenter', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
this.style.setProperty('--mouse-x', `${x}px`);
this.style.setProperty('--mouse-y', `${y}px`);
});
});
card.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
this.style.setProperty('--mouse-x', `${x}px`);
this.style.setProperty('--mouse-y', `${y}px`);
});
});

375
js/partner.js
View File

@ -1,375 +0,0 @@
// ========================================
// Partner 페이지 전용 JavaScript
// ========================================
document.addEventListener('DOMContentLoaded', function() {
initCopyButton();
initEmailLinkCopy();
});
// 복사 버튼 초기화
function initCopyButton() {
const copyBtn = document.getElementById('copyTemplateBtn');
if (copyBtn) {
copyBtn.addEventListener('click', function() {
copyApplicationTemplate();
});
}
}
// 지원서 양식 복사 함수
function copyApplicationTemplate() {
const templateText = `밍글스튜디오 파트너 스트리머 지원서
[ 기본 정보 ]
1. 현재 데뷔하여 활동하고 계신가요?
답변: (예 / 아니오)
2. 활동하고 계시다면, 활동명은 무엇인가요?
답변:
3. 어떤 방송 플랫폼에서 방송을 하고 계신가요?
답변: (예: 유튜브, SOOP, 치지직 등)
4. MCN 또는 기업 소속이신가요?
답변: (예 / 아니오)
※ 소속된 경우, 소속 회사명을 함께 기재해주세요
[ 지원 동기 및 계획 ]
5. 지원하게 된 계기가 무엇인가요?
답변:
6. 파트너 스트리머가 된다면 어떤 콘텐츠를 진행해보고 싶으신가요?
답변:
[ 경험 및 환경 ]
7. 모션 캡처를 경험해보신 적이 있으신가요?
답변: (예 / 아니오)
8. 스튜디오 방문에 어려움이 있으신가요?
※ 스튜디오는 인천광역시 부평구에 위치하고 있습니다
답변: (어려움 없음 / 다소 어렵지만 가능 / 어려움 있음)
9. 본인만의 특기가 있다면?
답변: (방송이나 유튜브 영상 링크 첨부로 대체 가능)
[ 연락처 정보 ]
• 활동명:
• 이메일:
• 디스코드 아이디: `;
// 클립보드에 복사
navigator.clipboard.writeText(templateText).then(function() {
// 성공 피드백
const copyBtn = document.getElementById('copyTemplateBtn');
const originalText = copyBtn.querySelector('.copy-text').textContent;
copyBtn.classList.add('copied');
copyBtn.querySelector('.copy-text').textContent = '복사 완료!';
// 2초 후 원래대로 복원
setTimeout(function() {
copyBtn.classList.remove('copied');
copyBtn.querySelector('.copy-text').textContent = originalText;
}, 2000);
// 알림 표시 (commonUtils 사용 가능한 경우)
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('양식이 클립보드에 복사되었습니다!', 'success');
}
}).catch(function(err) {
console.error('복사 실패:', err);
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('복사에 실패했습니다. 다시 시도해주세요.', 'error');
} else {
alert('복사에 실패했습니다. 다시 시도해주세요.');
}
});
}
// 이메일 링크 클릭 시 복사
function initEmailLinkCopy() {
const emailLink = document.getElementById('emailLink');
if (emailLink) {
emailLink.addEventListener('click', function(e) {
e.preventDefault();
const email = this.textContent.trim();
navigator.clipboard.writeText(email).then(function() {
// 성공 알림
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('이메일 주소가 복사되었습니다!', 'success');
}
// 링크 시각적 피드백
emailLink.style.color = '#4CAF50';
setTimeout(function() {
emailLink.style.color = '';
}, 1000);
}).catch(function(err) {
console.error('이메일 복사 실패:', err);
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('복사에 실패했습니다.', 'error');
}
});
});
}
}
// 파트너 지원 폼 초기화 (사용하지 않음 - 삭제 가능)
function initPartnerForm() {
const form = document.getElementById('partnerApplicationForm');
if (form) {
form.addEventListener('submit', handleFormSubmit);
// 실시간 유효성 검사
const inputs = form.querySelectorAll('input, textarea');
inputs.forEach(input => {
if (input.type !== 'radio' && input.type !== 'checkbox') {
input.addEventListener('blur', validateField);
}
});
// 전화번호 자동 포맷팅
const phoneInput = document.getElementById('phone');
if (phoneInput) {
phoneInput.addEventListener('input', formatPhoneNumber);
}
}
}
// 조건부 필드 초기화
function initConditionalFields() {
// MCN/기업 소속 여부에 따라 소속명 입력란 표시
const affiliationRadios = document.querySelectorAll('input[name="hasAffiliation"]');
const affiliationNameInput = document.getElementById('affiliationName');
affiliationRadios.forEach(radio => {
radio.addEventListener('change', function() {
if (this.value === 'yes') {
affiliationNameInput.style.display = 'block';
affiliationNameInput.required = true;
} else {
affiliationNameInput.style.display = 'none';
affiliationNameInput.required = false;
affiliationNameInput.value = '';
}
});
});
}
// 폼 제출 처리
async function handleFormSubmit(e) {
e.preventDefault();
const form = e.target;
const submitBtn = form.querySelector('button[type="submit"]');
// 유효성 검사
if (!validateForm(form)) {
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('모든 필수 항목을 입력해 주세요.', 'error');
} else {
alert('모든 필수 항목을 입력해 주세요.');
}
return;
}
// 개인정보 동의 확인
const privacyAgree = document.getElementById('privacyAgree');
if (!privacyAgree.checked) {
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('개인정보 수집 및 이용에 동의해 주세요.', 'warning');
} else {
alert('개인정보 수집 및 이용에 동의해 주세요.');
}
return;
}
// 제출 버튼 비활성화
const originalText = submitBtn.textContent;
submitBtn.textContent = '제출 중...';
submitBtn.disabled = true;
try {
// 폼 데이터 수집
const formData = new FormData(form);
const data = Object.fromEntries(formData);
// 서버로 전송 (실제 구현 필요)
await submitApplicationForm(data);
// 성공 메시지
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('지원서가 성공적으로 제출되었습니다. 검토 후 연락드리겠습니다!', 'success');
} else {
alert('지원서가 성공적으로 제출되었습니다. 검토 후 연락드리겠습니다!');
}
// 폼 초기화
form.reset();
// 조건부 필드 숨기기
const affiliationNameInput = document.getElementById('affiliationName');
if (affiliationNameInput) {
affiliationNameInput.style.display = 'none';
affiliationNameInput.required = false;
}
} catch (error) {
console.error('Form submission error:', error);
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('전송 중 오류가 발생했습니다. 다시 시도해 주세요.', 'error');
} else {
alert('전송 중 오류가 발생했습니다. 다시 시도해 주세요.');
}
} finally {
// 버튼 복원
submitBtn.textContent = originalText;
submitBtn.disabled = false;
}
}
// 서버 전송 시뮬레이션 (실제 구현 필요)
async function submitApplicationForm(data) {
// 실제 서버 API 엔드포인트로 전송
// 예: await fetch('/api/partner-application', { method: 'POST', body: JSON.stringify(data) })
// 시뮬레이션을 위한 딜레이
return new Promise((resolve) => {
setTimeout(() => {
console.log('Application data:', data);
resolve({ success: true });
}, 1500);
});
}
// 폼 유효성 검사
function validateForm(form) {
let isValid = true;
// 모든 필수 입력 필드 검사
const requiredInputs = form.querySelectorAll('input[required], textarea[required]');
requiredInputs.forEach(input => {
if (!validateField({ target: input })) {
isValid = false;
}
});
// 라디오 버튼 그룹 검사
const requiredRadioGroups = ['isActive', 'hasAffiliation', 'hasMocapExperience', 'canVisit'];
requiredRadioGroups.forEach(groupName => {
const radios = form.querySelectorAll(`input[name="${groupName}"]`);
const checked = Array.from(radios).some(radio => radio.checked);
if (!checked) {
isValid = false;
// 라디오 그룹 에러 표시
const radioGroup = radios[0]?.closest('.form-group');
if (radioGroup) {
radioGroup.style.borderLeft = '4px solid #e74c3c';
}
} else {
const radioGroup = radios[0]?.closest('.form-group');
if (radioGroup) {
radioGroup.style.borderLeft = 'none';
}
}
});
return isValid;
}
// 개별 필드 유효성 검사
function validateField(e) {
const field = e.target;
const value = field.value.trim();
let isValid = true;
let errorMessage = '';
// 필수 필드 확인
if (field.required && !value) {
isValid = false;
errorMessage = '이 항목은 필수입니다.';
}
// 이메일 검사
if (field.type === 'email' && value) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(value)) {
isValid = false;
errorMessage = '올바른 이메일 형식이 아닙니다.';
}
}
// 전화번호 검사
if (field.type === 'tel' && value) {
const phoneRegex = /^[0-9-]+$/;
if (!phoneRegex.test(value)) {
isValid = false;
errorMessage = '올바른 전화번호 형식이 아닙니다.';
}
}
// 에러 표시
if (!isValid) {
showFieldError(field, errorMessage);
} else {
clearFieldError(field);
}
return isValid;
}
// 필드 에러 표시
function showFieldError(field, message) {
field.style.borderColor = '#e74c3c';
// 기존 에러 메시지 제거
const existingError = field.parentElement.querySelector('.error-message');
if (existingError) {
existingError.remove();
}
// 새 에러 메시지 추가
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.style.color = '#e74c3c';
errorDiv.style.fontSize = '0.875rem';
errorDiv.style.marginTop = '0.5rem';
errorDiv.textContent = message;
field.parentElement.appendChild(errorDiv);
}
// 필드 에러 제거
function clearFieldError(field) {
if (field instanceof Event) {
field = field.target;
}
field.style.borderColor = '';
const errorMessage = field.parentElement.querySelector('.error-message');
if (errorMessage) {
errorMessage.remove();
}
}
// 전화번호 자동 포맷팅
function formatPhoneNumber(e) {
const input = e.target;
let value = input.value.replace(/[^0-9]/g, '');
// 자동 하이픈 추가
if (value.length <= 3) {
input.value = value;
} else if (value.length <= 7) {
input.value = value.slice(0, 3) + '-' + value.slice(3);
} else if (value.length <= 11) {
input.value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7);
} else {
input.value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);
}
}

61
js/portfolio.js
View File

@ -437,65 +437,8 @@ function getPortfolioStats() {
};
}
// 알림 메시지 표시
function showNotification(message, type = 'info') {
const existingNotification = document.querySelector('.notification');
if (existingNotification) {
existingNotification.remove();
}
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.innerHTML = `
<span class="notification-message">${message}</span>
<button class="notification-close">&times;</button>
`;
Object.assign(notification.style, {
position: 'fixed',
top: '20px',
right: '20px',
padding: '1rem 1.5rem',
borderRadius: '8px',
boxShadow: '0 4px 15px rgba(0, 0, 0, 0.15)',
zIndex: '9999',
maxWidth: '400px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '1rem'
});
const colors = {
success: { bg: '#10b981', color: 'white' },
error: { bg: '#ef4444', color: 'white' },
info: { bg: '#3b82f6', color: 'white' }
};
const color = colors[type] || colors.info;
notification.style.backgroundColor = color.bg;
notification.style.color = color.color;
const closeBtn = notification.querySelector('.notification-close');
Object.assign(closeBtn.style, {
background: 'none',
border: 'none',
color: 'inherit',
fontSize: '1.5rem',
cursor: 'pointer',
padding: '0',
lineHeight: '1'
});
closeBtn.addEventListener('click', () => notification.remove());
document.body.appendChild(notification);
setTimeout(() => {
if (notification.parentNode) {
notification.remove();
}
}, 5000);
}
// common.js의 showNotification 사용
const showNotification = window.commonUtils?.showNotification || function() {};
// CSS 애니메이션 정의
const style = document.createElement('style');

70
js/qna.js
View File

@ -185,7 +185,8 @@ function highlightSearchTerm(item, term) {
const question = item.querySelector('.faq-question h3');
const answer = item.querySelector('.faq-answer');
const highlightRegex = new RegExp(`(${term})`, 'gi');
const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const highlightRegex = new RegExp(`(${escapedTerm})`, 'gi');
// 질문 하이라이트
const originalQuestionText = question.dataset.originalText || question.textContent;
@ -274,6 +275,7 @@ function hideSuggestions() {
// 검색 결과 없음 표시
function showNoResults(query) {
const safeQuery = query.replace(/[<>&"]/g, c => ({'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'})[c]);
let noResults = document.querySelector('.no-results');
if (!noResults) {
noResults = document.createElement('div');
@ -281,7 +283,7 @@ function showNoResults(query) {
noResults.innerHTML = `
<div class="no-results-icon">🔍</div>
<h3>검색 결과가 없습니다</h3>
<p><strong>"${query}"</strong>와 관련된 질문을 찾을 수 없습니다.</p>
<p><strong>"${safeQuery}"</strong>와 관련된 질문을 찾을 수 없습니다.</p>
<p>다른 키워드로 검색해보시거나 <a href="contact.html">직접 문의</a>해 주세요.</p>
`;
document.querySelector('.faq-list').appendChild(noResults);
@ -409,71 +411,13 @@ function shareFAQ(faqId) {
} else {
// 클립보드에 복사
navigator.clipboard.writeText(url).then(() => {
showNotification('링크가 클립보드에 복사되었습니다.', 'success');
if (window.commonUtils && window.commonUtils.showNotification) {
window.commonUtils.showNotification('링크가 클립보드에 복사되었습니다.', 'success');
}
});
}
}
// 알림 메시지 표시 (contact.js와 동일한 함수)
function showNotification(message, type = 'info') {
const existingNotification = document.querySelector('.notification');
if (existingNotification) {
existingNotification.remove();
}
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.innerHTML = `
<span class="notification-message">${message}</span>
<button class="notification-close">&times;</button>
`;
Object.assign(notification.style, {
position: 'fixed',
top: '20px',
right: '20px',
padding: '1rem 1.5rem',
borderRadius: '8px',
boxShadow: '0 4px 15px rgba(0, 0, 0, 0.15)',
zIndex: '9999',
maxWidth: '400px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '1rem'
});
const colors = {
success: { bg: '#10b981', color: 'white' },
error: { bg: '#ef4444', color: 'white' },
info: { bg: '#3b82f6', color: 'white' }
};
const color = colors[type] || colors.info;
notification.style.backgroundColor = color.bg;
notification.style.color = color.color;
const closeBtn = notification.querySelector('.notification-close');
Object.assign(closeBtn.style, {
background: 'none',
border: 'none',
color: 'inherit',
fontSize: '1.5rem',
cursor: 'pointer',
padding: '0',
lineHeight: '1'
});
closeBtn.addEventListener('click', () => notification.remove());
document.body.appendChild(notification);
setTimeout(() => {
if (notification.parentNode) {
notification.remove();
}
}, 5000);
}
// 이메일 폼 초기화
function initEmailForm() {
const emailBtn = document.getElementById('showEmailFormFAQ');

5
js/services.js
View File

@ -5,6 +5,7 @@
document.addEventListener('DOMContentLoaded', function() {
initEmailForm();
initServiceAnimations();
initPopups();
});
// 이메일 폼 토글 기능
@ -182,7 +183,7 @@ function handleStreamingEscapeKey(event) {
}
// 팝업 초기화
document.addEventListener('DOMContentLoaded', function() {
function initPopups() {
// 뮤비/숏폼 팝업 초기화
const popup = document.getElementById('portfolioPopup');
if (popup) {
@ -220,4 +221,4 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
}
});
}

BIN
mingle-logo 2 128x128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

304
partner.html
View File

@ -1,304 +0,0 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KZKV535P');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파트너 스트리머 모집 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/partner.html">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="밍글 스튜디오 파트너 스트리머 모집 - 버튜버 스트리머와 함께 성장하는 밍글 스튜디오. 모션캡쳐 스튜디오 무상 지원 프로그램">
<meta name="keywords" content="파트너 스트리머, 버튜버, VTuber, 모션캡쳐, 스트리머 모집, 밍글 스튜디오">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="파트너 스트리머 모집 - 밍글 스튜디오">
<meta property="og:description" content="버튜버 스트리머와 함께 성장하는 밍글 스튜디오. 모션캡쳐 스튜디오 무상 지원">
<meta property="og:url" content="https://minglestudio.co.kr/partner.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
<meta property="og:site_name" content="밍글 스튜디오">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="파트너 스트리머 모집 - 밍글 스튜디오">
<meta name="twitter:description" content="버튜버 스트리머와 함께 성장하는 밍글 스튜디오. 모션캡쳐 스튜디오 무상 지원">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<!-- 폰트 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/partner.css">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- Hero 섹션 -->
<section class="partner-hero">
<div class="container">
<div class="partner-hero-content">
<h1 class="partner-hero-title">
<span class="gradient-text">파트너 스트리머 모집</span>
</h1>
<p class="partner-hero-subtitle">
밍글 스튜디오와 함께 성장할 버튜버 스트리머를 찾습니다
</p>
</div>
</div>
</section>
<!-- 모집 마감 공지 -->
<section class="section closed-notice-section">
<div class="container">
<div class="closed-notice-box">
<div class="closed-icon">🎬</div>
<h2 class="closed-title">모집이 마감되었습니다</h2>
<p class="closed-message">
파트너 스트리머 모집에 관심을 가져주시고<br>
지원해주신 모든 분들께 진심으로 감사드립니다.
</p>
<p class="closed-sub">
다음 모집 기회에 다시 만나뵐 수 있기를 바랍니다.
</p>
</div>
</div>
</section>
<!-- 지원 조건 섹션 -->
<section class="section partner-conditions-section">
<div class="container">
<div class="section-header">
<h2 class="section-title-styled">파트너 스트리머 지원 조건</h2>
</div>
<div class="styled-content-wrapper">
<div class="styled-list">
<div class="styled-item">
<div class="number-badge">1</div>
<div class="item-content">
<h3 class="item-title">성인 여성분</h3>
<p class="item-desc">만 19세 이상의 여성 크리에이터</p>
</div>
</div>
<div class="styled-item">
<div class="number-badge">2</div>
<div class="item-content">
<h3 class="item-title">버튜버로 방송을 진행하시는 분</h3>
<p class="item-desc">활동 플랫폼 무관 (유튜브, SOOP, 치지직 등)</p>
</div>
</div>
<div class="styled-item">
<div class="number-badge">3</div>
<div class="item-content">
<h3 class="item-title">MCN 또는 기업 소속 무관</h3>
<p class="item-desc">소속이 있어도 지원 가능합니다 (단, 사전 논의 필요)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 혜택 섹션 -->
<section class="section partner-benefits-section">
<div class="container">
<div class="section-header">
<h2 class="section-title-styled">파트너 스트리머에게 바라는 것</h2>
</div>
<div class="styled-content-wrapper">
<div class="styled-list">
<div class="styled-item">
<div class="number-badge">1</div>
<div class="item-content">
<h3 class="item-title">밍글스튜디오의 홍보대사</h3>
<p class="item-desc">동네방네 밍글밍글 소문내주실 분!</p>
</div>
</div>
<div class="styled-item">
<div class="number-badge">2</div>
<div class="item-content">
<h3 class="item-title">스튜디오를 자주 이용하실 수 있으신 분</h3>
<p class="item-desc">가만히 있어도 임대료는 나가니까</p>
</div>
</div>
<div class="styled-item">
<div class="number-badge">3</div>
<div class="item-content">
<h3 class="item-title">기획 능력이 좋으신 분</h3>
<p class="item-desc">상상으로만 남으면 아깝잖아요</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 제공 혜택 섹션 -->
<section class="section partner-provides-section">
<div class="container">
<div class="section-header">
<h2 class="section-title-styled">파트너 스트리머의 혜택</h2>
</div>
<div class="styled-content-wrapper">
<div class="styled-list">
<div class="styled-item">
<div class="number-badge">1</div>
<div class="item-content">
<h3 class="item-title">모션캡쳐 스튜디오 무료 사용!</h3>
<p class="item-desc">월 2회 이상의 모션캡쳐 방송 지원</p>
</div>
</div>
<div class="styled-item">
<div class="number-badge">2</div>
<div class="item-content">
<h3 class="item-title">밍글의 신기술을 가장 먼저 체험할 기회!</h3>
<p class="item-desc">후원 API 및 각종 표과 / 배경 표과 제공</p>
</div>
</div>
<div class="styled-item">
<div class="number-badge">3</div>
<div class="item-content">
<h3 class="item-title">미니콘서트 제작 지원 (1회)</h3>
<p class="item-desc">미니콘서트에 필요한 제작 지원</p>
</div>
</div>
<div class="styled-item">
<div class="number-badge">4</div>
<div class="item-content">
<h3 class="item-title">기획 콘텐츠 제작 및 버추얼 아바타 자문</h3>
<p class="item-desc">각종 기술적/기획적 어려움이 있을 경우 자문 제공</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 선발 로드맵 섹션 -->
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2 class="section-title-styled">선발 로드맵</h2>
</div>
<div class="roadmap-wrapper">
<div class="roadmap-item">
<div class="roadmap-badge">1</div>
<div class="roadmap-content">
<h3 class="roadmap-title">지원서 모집</h3>
<p class="roadmap-date">2026.01.10 ~ 2026.01.24</p>
<p class="roadmap-desc">지원서 양식에 맞춰 이메일로 제출</p>
</div>
</div>
<div class="roadmap-arrow">→</div>
<div class="roadmap-item">
<div class="roadmap-badge">2</div>
<div class="roadmap-content">
<h3 class="roadmap-title">지원서 검토</h3>
<p class="roadmap-date">2026.01.25 ~ 2026.01.31</p>
<p class="roadmap-desc">제출된 지원서 검토 및 심사</p>
</div>
</div>
<div class="roadmap-arrow">→</div>
<div class="roadmap-item">
<div class="roadmap-badge">3</div>
<div class="roadmap-content">
<h3 class="roadmap-title">발표</h3>
<p class="roadmap-date">2026.02.01</p>
<p class="roadmap-desc">개별 연락을 통한 합격자 발표</p>
</div>
</div>
<div class="roadmap-arrow">→</div>
<div class="roadmap-item roadmap-item-highlight">
<div class="roadmap-badge">4</div>
<div class="roadmap-content">
<h3 class="roadmap-title">활동기간</h3>
<p class="roadmap-date">2026.02.01 ~ 2026.12.31</p>
<p class="roadmap-desc">파트너 스트리머 활동 시작<br><span class="roadmap-note">(연장 가능)</span></p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA 섹션 -->
<section class="cta-section">
<div class="container text-center">
<h2 class="cta-title">스튜디오 이용에 관심이 있으신가요?</h2>
<p class="cta-description">
모션캡쳐 스튜디오 대관 및 서비스에 대해 문의해주세요
</p>
<div class="cta-buttons">
<a href="/contact" class="btn btn-primary btn-lg">예약 문의하기</a>
<a href="/services" class="btn btn-outline btn-lg">서비스 보기</a>
</div>
<div class="contact-info-quick">
<span>📧 help@minglestudio.co.kr</span>
<span>📞 010-9288-9190</span>
</div>
</div>
</section>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 -->
<footer class="partner-footer">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
<!-- JavaScript -->
<script src="js/common.js"></script>
<script src="js/partner.js"></script>
</body>
</html>

80
portfolio.html
View File

@ -13,9 +13,9 @@
<title>포트폴리오 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/portfolio.html">
@ -33,7 +33,7 @@
<meta property="og:description" content="모션캡처 스튜디오에서 제작된 뮤직비디오, 숏폼, 버튜버 방송 등 다양한 영상 콘텐츠. OptiTrack으로 고품질 모션캡처 서비스 제공">
<meta property="og:url" content="https://minglestudio.co.kr/portfolio.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
@ -44,7 +44,7 @@
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="포트폴리오 - 밍글 스튜디오">
<meta name="twitter:description" content="모션캡처 스튜디오에서 제작된 뮤직비디오, 숏폼, 버튜버 방송 등 다양한 영상 콘텐츠. OptiTrack으로 고품질 모션캡처 서비스 제공">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
@ -64,24 +64,12 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- 브레드크럼 -->
<nav class="breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="/" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current">포트폴리오</span>
</li>
</ol>
</div>
</nav>
<main id="main-content">
<!-- 페이지 헤더 -->
<section class="page-header">
<div class="container">
@ -560,42 +548,6 @@
</div>
<!-- 기업 프로젝트 포트폴리오 끝 -->
<!-- 기술 특징 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2>기술적 특징</h2>
<p>밍글 스튜디오 모션캡쳐의 핵심 기술</p>
</div>
<div class="tech-features">
<div class="tech-feature">
<div class="tech-icon">⚡</div>
<h3>실시간 처리</h3>
<p>28대 OptiTrack 카메라로 실시간 모션 데이터 처리</p>
</div>
<div class="tech-feature">
<div class="tech-icon">🎯</div>
<h3>정밀 트래킹</h3>
<p>전신과 페이셜 모션을 동시에 정밀 캡쳐</p>
</div>
<div class="tech-feature">
<div class="tech-icon">📡</div>
<h3>스트리밍글 서비스</h3>
<p>실시간 라이브 방송 지원</p>
</div>
<div class="tech-feature">
<div class="tech-icon">🔄</div>
<h3>다양한 포맷</h3>
<p>FBX, ANIM 포맷으로 데이터 출력</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container text-center">
@ -608,17 +560,19 @@
</div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
<footer class="site-footer">
<div class="container">
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

10
props.html
View File

@ -13,8 +13,8 @@
<title>프랍 라이브러리 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
@ -107,7 +107,7 @@
<div class="image-modal" id="imageModal">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close">&times;</button>
<button class="modal-close" aria-label="닫기">&times;</button>
<img src="" alt="" class="modal-image" id="modalImage">
<div class="modal-info">
<h3 id="modalTitle"></h3>
@ -120,8 +120,8 @@
<div id="footer-placeholder"></div>
<!-- 백업 푸터 -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<footer class="site-footer">
<div class="container">
<div style="color:#bbb;font-size:0.98rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

47
qna.html
View File

@ -13,9 +13,9 @@
<title>자주 묻는 질문 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/qna.html">
@ -33,7 +33,7 @@
<meta property="og:description" content="모션캡처 스튜디오 대관, 촬영, 요금, 예약 등에 관한 자주 묻는 질문과 답변. OptiTrack 시스템 이용 가이드">
<meta property="og:url" content="https://minglestudio.co.kr/qna.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
@ -44,7 +44,7 @@
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="자주 묻는 질문 - 밍글 스튜디오">
<meta name="twitter:description" content="모션캡처 스튜디오 대관, 촬영, 요금, 예약 등에 관한 자주 묻는 질문과 답변. OptiTrack 시스템 이용 가이드">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
@ -61,24 +61,12 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- 브레드크럼 -->
<nav class="breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="index.html" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current">자주하는 질문</span>
</li>
</ol>
</div>
</nav>
<main id="main-content">
<!-- 페이지 헤더 -->
<section class="page-header">
<div class="container">
@ -92,8 +80,9 @@
<div class="container">
<div class="faq-search">
<div class="search-box">
<label for="faqSearch" class="sr-only">FAQ 검색</label>
<input type="text" id="faqSearch" placeholder="궁금한 내용을 검색해보세요..." autocomplete="off">
<button type="button" class="search-btn">🔍</button>
<button type="button" class="search-btn" aria-label="검색">🔍</button>
</div>
<div class="search-suggestions" id="searchSuggestions"></div>
</div>
@ -414,17 +403,19 @@
</div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
<footer class="site-footer">
<div class="container">
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>

100
robots.txt
View File

@ -1,104 +1,4 @@
User-agent: *
Allow: /
# 네이버봇 특별 설정
User-agent: Yeti
Allow: /
Crawl-delay: 1
# 소셜미디어 크롤러 명시적 허용
# Facebook/Meta
User-agent: facebookexternalhit/1.1
Allow: /
User-agent: Facebookbot
Allow: /
# Twitter/X
User-agent: Twitterbot
Allow: /
# LinkedIn
User-agent: LinkedInBot
Allow: /
# Discord
User-agent: Discordbot
Allow: /
# WhatsApp
User-agent: WhatsApp
Allow: /
# Telegram
User-agent: TelegramBot
Allow: /
# Slack
User-agent: Slackbot
Allow: /
User-agent: Slackbot-LinkExpanding
Allow: /
# Pinterest
User-agent: Pinterest
Allow: /
User-agent: Pinterestbot
Allow: /
# Apple/iMessage
User-agent: AppleBot
Allow: /
# Microsoft Teams
User-agent: MicrosoftPreview
Allow: /
# KakaoTalk
User-agent: KakaoTalk-Scrap
Allow: /
# Line
User-agent: Linebot
Allow: /
# Skype
User-agent: SkypeUriPreview
Allow: /
# Viber
User-agent: ViberBot
Allow: /
# Google (검색 및 소셜)
User-agent: Googlebot
Allow: /
# Bing
User-agent: Bingbot
Allow: /
# DuckDuckGo
User-agent: DuckDuckBot
Allow: /
# 중요한 페이지 우선순위
Sitemap: https://minglestudio.co.kr/sitemap.xml
# 크롤링 제외할 파일/디렉토리
Disallow: /js/
Disallow: /css/
Disallow: /*.js$
Disallow: /*.css$
Disallow: /components/
# 이미지 크롤링 허용 (포트폴리오 중요)
Allow: /Studio_Image/
Allow: /mingle*
Allow: /*.jpg$
Allow: /*.jpeg$
Allow: /*.png$
Allow: /*.webp$
Allow: /*.gif$
# 검색엔진별 크롤링 속도 조절
Crawl-delay: 1

299
script.js
View File

@ -1,299 +0,0 @@
// DOM이 로드된 후 실행
document.addEventListener('DOMContentLoaded', function() {
// 모바일 네비게이션 토글
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
if (hamburger) {
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
}
// 네비게이션 링크 클릭 시 모바일 메뉴 닫기
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
if (hamburger) hamburger.classList.remove('active');
if (navMenu) navMenu.classList.remove('active');
});
});
// 스무스 스크롤 (리디렉션 방지) - 개선된 버전
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const target = document.querySelector(targetId);
if (target) {
// URL 업데이트 (히스토리 API 사용) - 리디렉션 방지
if (history.pushState) {
history.pushState(null, null, targetId);
}
// 스무스 스크롤
const headerOffset = 80; // 네비게이션 높이 고려
const elementPosition = target.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
// 브라우저 뒤로가기/앞으로가기 처리
window.addEventListener('popstate', function(e) {
const hash = window.location.hash;
if (hash) {
const target = document.querySelector(hash);
if (target) {
const headerOffset = 80;
const elementPosition = target.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
}
});
// 페이지 로드 시 해시가 있으면 해당 섹션으로 스크롤
if (window.location.hash) {
setTimeout(() => {
const target = document.querySelector(window.location.hash);
if (target) {
const headerOffset = 80;
const elementPosition = target.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
}, 100);
}
// 네비게이션 스크롤 효과
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (navbar) {
if (window.scrollY > 100) {
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
navbar.style.boxShadow = 'none';
}
}
});
// 폼 제출 처리
const contactForm = document.querySelector('.contact-form form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// 폼 데이터 수집
const formData = new FormData(this);
const name = this.querySelector('input[type="text"]')?.value || '';
const email = this.querySelector('input[type="email"]')?.value || '';
const subject = this.querySelectorAll('input[type="text"]')[1]?.value || '';
const message = this.querySelector('textarea')?.value || '';
// 간단한 유효성 검사
if (!name || !email || !subject || !message) {
showNotification('모든 필드를 입력해주세요.', 'error');
return;
}
if (!isValidEmail(email)) {
showNotification('올바른 이메일 주소를 입력해주세요.', 'error');
return;
}
// 성공 메시지 표시 (실제로는 서버로 전송)
showNotification('메시지가 성공적으로 전송되었습니다!', 'success');
this.reset();
});
}
// 이메일 유효성 검사 함수
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
// 알림 표시 함수
function showNotification(message, type) {
// 기존 알림 제거
const existingNotification = document.querySelector('.notification');
if (existingNotification) {
existingNotification.remove();
}
// 새 알림 생성
const notification = document.createElement('div');
notification.className = `notification ${type}`;
notification.textContent = message;
// 스타일 적용
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 1rem 2rem;
border-radius: 10px;
color: white;
font-weight: 600;
z-index: 10000;
transform: translateX(100%);
transition: transform 0.3s ease;
${type === 'success' ? 'background: #10b981;' : 'background: #ef4444;'}
`;
document.body.appendChild(notification);
// 애니메이션
setTimeout(() => {
notification.style.transform = 'translateX(0)';
}, 100);
// 자동 제거
setTimeout(() => {
notification.style.transform = 'translateX(100%)';
setTimeout(() => {
if (notification.parentNode) {
notification.remove();
}
}, 300);
}, 3000);
}
// 포트폴리오 아이템 호버 효과
const portfolioItems = document.querySelectorAll('.portfolio-item');
portfolioItems.forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-10px)';
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
// 서비스 카드 호버 효과
const serviceCards = document.querySelectorAll('.service-card');
serviceCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-10px)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
// 통계 숫자 애니메이션
const statItems = document.querySelectorAll('.stat-item h3');
const observerOptions = {
threshold: 0.5,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = entry.target;
const finalValue = parseInt(target.textContent);
animateNumber(target, 0, finalValue, 2000);
observer.unobserve(target);
}
});
}, observerOptions);
statItems.forEach(item => {
observer.observe(item);
});
// 숫자 애니메이션 함수
function animateNumber(element, start, end, duration) {
const startTime = performance.now();
function updateNumber(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const current = Math.floor(start + (end - start) * progress);
element.textContent = current + (element.textContent.includes('+') ? '+' : '');
if (progress < 1) {
requestAnimationFrame(updateNumber);
}
}
requestAnimationFrame(updateNumber);
}
// 스크롤 시 요소 페이드인 효과
const fadeElements = document.querySelectorAll('.service-card, .portfolio-item, .about-text, .about-stats');
const fadeObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});
fadeElements.forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(30px)';
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
fadeObserver.observe(element);
});
// 로딩 완료 후 초기 애니메이션
setTimeout(() => {
document.body.style.opacity = '1';
}, 100);
});
// 페이지 로드 시 초기 설정
window.addEventListener('load', function() {
// 페이지 로딩 완료 후 추가 효과
const heroTitle = document.querySelector('.hero-title');
const heroSubtitle = document.querySelector('.hero-subtitle');
const heroButtons = document.querySelector('.hero-buttons');
if (heroTitle) {
setTimeout(() => {
heroTitle.style.opacity = '1';
heroTitle.style.transform = 'translateY(0)';
}, 500);
}
if (heroSubtitle) {
setTimeout(() => {
heroSubtitle.style.opacity = '1';
heroSubtitle.style.transform = 'translateY(0)';
}, 700);
}
if (heroButtons) {
setTimeout(() => {
heroButtons.style.opacity = '1';
heroButtons.style.transform = 'translateY(0)';
}, 900);
}
});

99
services.html
View File

@ -13,9 +13,9 @@
<title>서비스 소개 - 밍글 스튜디오</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/services.html">
@ -30,10 +30,10 @@
<!-- Open Graph -->
<meta property="og:title" content="서비스 소개 - 밍글 스튜디오">
<meta property="og:description" content="28대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 150,000원, 2인 200,000원. 스트리밍글 서비스 2,000,000원으로 8시간 풀패키지 제공">
<meta property="og:description" content="28대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 150,000원, 2인 200,000원. 스트리밍글 서비스 2,000,000원으로 6시간 풀패키지 제공">
<meta property="og:url" content="https://minglestudio.co.kr/services.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
@ -43,8 +43,8 @@
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="서비스 소개 - 밍글 스튜디오">
<meta name="twitter:description" content="28대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 150,000원, 2인 200,000원. 스트리밍글 서비스 2,000,000원으로 8시간 풀패키지 제공">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="twitter:description" content="28대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 150,000원, 2인 200,000원. 스트리밍글 서비스 2,000,000원으로 6시간 풀패키지 제공">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
@ -64,24 +64,12 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- 브레드크럼 -->
<nav class="breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="index.html" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current">서비스 안내</span>
</li>
</ol>
</div>
</nav>
<main id="main-content">
<!-- 페이지 헤더 -->
<section class="page-header">
<div class="container">
@ -269,9 +257,8 @@
<span class="price-unit">/ 1~4인 사용</span>
</div>
<div class="package-duration">
<h4>총 8시간 패키지</h4>
<p>대관 6시간 + 촬영 준비 2시간</p>
<p class="split-usage-info">※ 최대 2회로 분할 사용 가능</p>
<h4>총 6시간 패키지</h4>
<p>대관 4시간 + 촬영 준비 2시간</p>
</div>
</div>
@ -720,42 +707,6 @@
</div>
</section>
<!-- 장비 및 시설 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2>장비 및 시설</h2>
<p>업계 최고 수준의 모션캡쳐 장비와 시설을 갖추고 있습니다</p>
</div>
<div class="equipment-grid">
<div class="equipment-card">
<div class="equipment-icon">📹</div>
<h3>OptiTrack 카메라 시스템</h3>
<p>28대의 고해상도 광학식 카메라로 정밀한 모션 트래킹</p>
</div>
<div class="equipment-card">
<div class="equipment-icon">🥽</div>
<h3>모션캡쳐 수트</h3>
<p>Rokoko Glove 포함 전신 모션캡쳐 장비 완비</p>
</div>
<div class="equipment-card">
<div class="equipment-icon">💻</div>
<h3>실시간 모니터링</h3>
<p>실시간 모션 데이터 확인 및 즉시 피드백</p>
</div>
<div class="equipment-card">
<div class="equipment-icon">📊</div>
<h3>데이터 출력</h3>
<p>FBX, ANIM 포맷으로 모션 데이터 파일 제공</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container text-center">
@ -768,27 +719,29 @@
</div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
<footer class="site-footer">
<div class="container">
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
<!-- 포트폴리오 팝업 -->
<div id="portfolioPopup" class="portfolio-popup">
<div id="portfolioPopup" class="portfolio-popup" role="dialog" aria-label="뮤직비디오/숏폼 포트폴리오">
<div class="popup-overlay" onclick="closePortfolioPopup()"></div>
<div class="popup-content">
<div class="popup-header">
<h3>뮤직비디오/숏폼 포트폴리오</h3>
<button class="popup-close" onclick="closePortfolioPopup()">×</button>
<button class="popup-close" onclick="closePortfolioPopup()" aria-label="팝업 닫기">×</button>
</div>
<div class="popup-body">
<div class="portfolio-section">
@ -850,12 +803,12 @@
</div>
<!-- 스트리밍 포트폴리오 팝업 -->
<div id="streamingPortfolioPopup" class="portfolio-popup">
<div id="streamingPortfolioPopup" class="portfolio-popup" role="dialog" aria-label="스트리밍글 서비스 포트폴리오">
<div class="popup-overlay" onclick="closeStreamingPortfolioPopup()"></div>
<div class="popup-content">
<div class="popup-header">
<h3>스트리밍글 서비스 포트폴리오</h3>
<button class="popup-close" onclick="closeStreamingPortfolioPopup()">×</button>
<button class="popup-close" onclick="closeStreamingPortfolioPopup()" aria-label="팝업 닫기">×</button>
</div>
<div class="popup-body">
<div class="portfolio-section">
@ -962,7 +915,7 @@
</div>
<div class="feature-item">
<span class="feature-icon">⏰</span>
<p>8시간 풀 패키지</p>
<p>6시간 풀 패키지</p>
</div>
<div class="feature-item">
<span class="feature-icon">🎭</span>

1
sitemap.xml
View File

@ -40,4 +40,5 @@
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
</urlset>

793
styles.css
View File

@ -1,793 +0,0 @@
/* 기본 스타일 리셋 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 네비게이션 */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
transition: all 0.3s ease;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.7rem;
flex-shrink: 0;
}
.nav-logo img {
height: 38px;
width: auto;
display: inline-block;
vertical-align: middle;
object-fit: contain;
}
.nav-logo span {
font-size: 1.3rem;
font-weight: 700;
color: #ff8800;
letter-spacing: 0.01em;
white-space: nowrap;
}
.nav-logo h2 {
color: #6366f1;
font-weight: 700;
font-size: 1.5rem;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-link {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
}
.nav-link:hover {
color: #6366f1;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: #6366f1;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background-color: #333;
margin: 3px 0;
transition: 0.3s;
}
/* 히어로 섹션 */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.3;
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background: #6366f1;
color: white;
}
.btn-primary:hover {
background: #4f46e5;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: #6366f1;
transform: translateY(-2px);
}
.hero-graphic {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.floating-element {
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(1) {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.floating-element:nth-child(2) {
top: 60%;
right: 20%;
animation-delay: 2s;
}
.floating-element:nth-child(3) {
bottom: 20%;
left: 50%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* 섹션 공통 스타일 */
section {
padding: 5rem 0;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #333;
}
.section-header p {
font-size: 1.1rem;
color: #666;
max-width: 1000px;
margin: 0 auto;
}
/* 소개 섹션 */
.about {
background: #f8fafc;
}
.about-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
}
.about-text h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
}
.about-text p {
margin-bottom: 2rem;
color: #666;
line-height: 1.8;
}
.strengths-list {
list-style: none;
}
.strengths-list li {
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: 1rem;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.strengths-list li:hover {
transform: translateX(10px);
}
.strengths-list i {
color: #6366f1;
margin-right: 1rem;
font-size: 1.2rem;
}
.about-stats {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.stat-item {
text-align: center;
padding: 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-item h3 {
font-size: 2.5rem;
font-weight: 700;
color: #6366f1;
margin-bottom: 0.5rem;
}
.stat-item p {
color: #666;
font-weight: 500;
}
/* 서비스 섹션 */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.service-card {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
text-align: center;
transition: all 0.3s ease;
border: 1px solid #f1f5f9;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.service-icon i {
font-size: 2rem;
color: white;
}
.service-card h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
}
.service-card p {
color: #666;
line-height: 1.6;
}
/* 포트폴리오 섹션 */
.portfolio {
background: #f8fafc;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.portfolio-item {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.portfolio-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.portfolio-image {
position: relative;
overflow: hidden;
}
.portfolio-image img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s ease;
}
.portfolio-item:hover .portfolio-image img {
transform: scale(1.1);
}
.portfolio-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 2rem;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
transform: translateY(0);
}
.portfolio-overlay h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.portfolio-overlay p {
opacity: 0.9;
}
/* 연락처 섹션 */
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.contact-info h3 {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
}
.contact-info p {
color: #666;
margin-bottom: 2rem;
line-height: 1.8;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
}
.contact-item i {
width: 50px;
height: 50px;
background: #6366f1;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.contact-item h4 {
font-weight: 600;
margin-bottom: 0.25rem;
color: #333;
}
.contact-item p {
color: #666;
margin: 0;
}
.contact-form {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #6366f1;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* 푸터 */
.footer {
background: #1e293b;
color: white;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3,
.footer-section h4 {
margin-bottom: 1rem;
color: white;
}
.footer-section p {
color: #cbd5e1;
line-height: 1.6;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #cbd5e1;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #6366f1;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: #6366f1;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.social-links a:hover {
background: #4f46e5;
transform: translateY(-2px);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #334155;
color: #cbd5e1;
}
/* 갤러리 그리드 */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* 라이트박스 화살표 버튼 스타일 */
.lightbox-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.85);
border: none;
width: 54px;
height: 54px;
border-radius: 50%;
font-size: 2.2rem;
color: #ff8800;
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
outline: none;
}
.lightbox-arrow:hover, .lightbox-arrow:focus {
background: #ff8800;
color: #fff;
box-shadow: 0 8px 32px rgba(255,136,0,0.18);
}
.lightbox-prev {
left: 3vw;
}
.lightbox-next {
right: 3vw;
}
.lightbox-caption {
margin-top: 1.2rem;
color: #222;
background: rgba(255,255,255,0.92);
border-radius: 10px;
padding: 0.7rem 1.5rem;
font-size: 1.13rem;
font-weight: 600;
text-align: center;
max-width: 90vw;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
position: relative;
z-index: 10002;
}
.lightbox-img-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-logo {
flex-shrink: 0;
min-width: 0;
}
.nav-logo img {
height: 32px;
}
.nav-logo span {
font-size: 1.1rem;
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-title {
font-size: 2.5rem;
}
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.hero-buttons {
justify-content: center;
}
.services-grid {
grid-template-columns: 1fr;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.nav-logo {
gap: 0.5rem;
}
.nav-logo img {
height: 28px;
}
.nav-logo span {
font-size: 1rem;
}
.hero-title {
font-size: 2rem;
}
.section-header h2 {
font-size: 2rem;
}
.btn {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
.gallery-grid {
grid-template-columns: 1fr;
}
}