ADD : 모바일 가독성 개선
This commit is contained in:
KINDNICK
parent
a8c73b5745
commit
368729e289
150
index.html
150
index.html
@ -183,6 +183,108 @@
|
||||
.youtube-embed-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 800px) { .flex { flex-direction: column; } }
|
||||
|
||||
/* 모바일 대응 스타일 */
|
||||
@media (max-width: 768px) {
|
||||
.container { padding: 0 1rem; }
|
||||
.section { padding: 3rem 0; }
|
||||
.section-header h2 { font-size: 2rem; }
|
||||
.card { padding: 1.5rem; }
|
||||
|
||||
/* 모바일 이메일 양식 최적화 */
|
||||
#inlineEmailForm, #inlineEmailForm2 {
|
||||
padding: 0.8rem !important;
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
#inlineEmailForm .btn, #inlineEmailForm2 .btn {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
font-size: 0.9rem !important;
|
||||
padding: 0.7rem 1.2rem !important;
|
||||
}
|
||||
|
||||
/* 모바일에서 긴 텍스트 줄바꿈 */
|
||||
.faq-a {
|
||||
word-break: keep-all;
|
||||
line-height: 1.5;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* 모바일 테이블 최적화 */
|
||||
.table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table th, .table td {
|
||||
padding: 0.5rem 0.3rem;
|
||||
}
|
||||
|
||||
/* 모바일 네비게이션 */
|
||||
.nav-menu {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
font-size: 1rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
/* 모바일 버튼 크기 조정 */
|
||||
.btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-logo {
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.nav-logo img {
|
||||
height: 32px;
|
||||
}
|
||||
.nav-logo span {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.section-header h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.btn {
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* 모바일 이메일 양식 추가 최적화 */
|
||||
#inlineEmailForm, #inlineEmailForm2 {
|
||||
padding: 0.6rem !important;
|
||||
}
|
||||
|
||||
#inlineEmailForm .btn, #inlineEmailForm2 .btn {
|
||||
font-size: 0.85rem !important;
|
||||
padding: 0.6rem 1rem !important;
|
||||
}
|
||||
|
||||
/* 모바일에서 테이블 스크롤 */
|
||||
.table {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table th, .table td {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -339,39 +441,39 @@
|
||||
<p style="margin-top:0.5rem;color:#666;font-size:0.9rem;">※ 네이버 플레이스를 통한 예약도 가능합니다</p>
|
||||
</div>
|
||||
<!-- 인라인 이메일 양식 -->
|
||||
<div id="inlineEmailForm" style="display:none;margin-top:1.5rem;background:#f8f9fa;padding:1.5rem;border-radius:10px;">
|
||||
<p style="margin-bottom:1rem;font-weight:600;">아래 양식을 복사하여 이메일로 문의해주세요:</p>
|
||||
<div style="background:#fff;padding:1.5rem;border-radius:8px;border:1px solid #e5e7eb;">
|
||||
<p style="margin-bottom:0.8rem;"><strong>제목:</strong> [스튜디오 대관 문의]</p>
|
||||
<p style="margin-bottom:0.8rem;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p>
|
||||
<div id="inlineEmailForm" style="display:none;margin-top:1.5rem;background:#f8f9fa;padding:1rem;border-radius:10px;">
|
||||
<p style="margin-bottom:1rem;font-weight:600;font-size:1rem;">아래 양식을 복사하여 이메일로 문의해주세요:</p>
|
||||
<div style="background:#fff;padding:1rem;border-radius:8px;border:1px solid #e5e7eb;font-size:0.95rem;">
|
||||
<p style="margin-bottom:0.8rem;word-break:break-all;"><strong>제목:</strong> [스튜디오 대관 문의]</p>
|
||||
<p style="margin-bottom:0.8rem;word-break:break-all;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p>
|
||||
<div style="margin-top:1.5rem;">
|
||||
<p style="margin-bottom:0.8rem;"><strong>1. 성함 및 소속</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">(개인의 경우 성함만, 기업인 경우 이용자분 성함과 소속을 함께 적어주세요)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">(개인의 경우 성함만, 기업인 경우 이용자분 성함과 소속을 함께 적어주세요)</p>
|
||||
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>2. 연락처</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">(전화번호, 이메일, 디스코드 중 택1)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">(전화번호, 이메일, 디스코드 중 택1)</p>
|
||||
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>3. 이용 인원</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">(1~2인 권장, 최대 4인까지 가능)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">(1~2인 권장, 최대 4인까지 가능)</p>
|
||||
<p style="margin-bottom:1.5rem;">□ 1명 □ 2명 □ 3명 □ 4명</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>4. 스튜디오 사용 용도</strong></p>
|
||||
<p style="margin-bottom:1.5rem;">□ 녹화 □ 기타: [여기에 작성해주세요]</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>5. 희망 대관 날짜</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">※ 최소 2주 전 예약을 권장합니다</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">※ 최소 2주 전 예약을 권장합니다</p>
|
||||
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>6. 희망 이용 시간</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">※ 응답 예시) 오전 10시~ 오후 3시(5시간)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">※ 새벽 대관(밤 10시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">※ 응답 예시) 오전 10시~ 오후 3시(5시간)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">※ 새벽 대관(밤 10시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
|
||||
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:1.5rem;text-align:center;">
|
||||
<a href="mailto:minglestudio.mocap@gmail.com?subject=[스튜디오 대관 문의]" class="btn btn-primary">📧 이메일 바로 보내기</a>
|
||||
<a href="mailto:minglestudio.mocap@gmail.com?subject=[스튜디오 대관 문의]" class="btn btn-primary" style="font-size:0.95rem;padding:0.8rem 1.5rem;">📧 이메일 바로 보내기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -653,39 +755,39 @@
|
||||
<ul class="faq-list">
|
||||
<li><div class="faq-q">Q1. 스튜디오 대관은 어떻게 예약하나요?</div><div class="faq-a">A. 이메일 문의를 통해 예약하실 수 있습니다.<br>📧 minglestudio.mocap@gmail.com<br><br><button id="showEmailForm2" class="btn btn-primary" style="margin:0.5rem 0;">📧 이메일 문의하기</button>
|
||||
<!-- 인라인 이메일 양식 (FAQ) -->
|
||||
<div id="inlineEmailForm2" style="display:none;margin-top:1rem;background:#f8f9fa;padding:1.5rem;border-radius:10px;">
|
||||
<p style="margin-bottom:1rem;font-weight:600;">아래 양식을 복사하여 이메일로 문의해주세요:</p>
|
||||
<div style="background:#fff;padding:1.5rem;border-radius:8px;border:1px solid #e5e7eb;">
|
||||
<p style="margin-bottom:0.8rem;"><strong>제목:</strong> [스튜디오 대관 문의]</p>
|
||||
<p style="margin-bottom:0.8rem;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p>
|
||||
<div id="inlineEmailForm2" style="display:none;margin-top:1rem;background:#f8f9fa;padding:1rem;border-radius:10px;">
|
||||
<p style="margin-bottom:1rem;font-weight:600;font-size:1rem;">아래 양식을 복사하여 이메일로 문의해주세요:</p>
|
||||
<div style="background:#fff;padding:1rem;border-radius:8px;border:1px solid #e5e7eb;font-size:0.95rem;">
|
||||
<p style="margin-bottom:0.8rem;word-break:break-all;"><strong>제목:</strong> [스튜디오 대관 문의]</p>
|
||||
<p style="margin-bottom:0.8rem;word-break:break-all;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p>
|
||||
<div style="margin-top:1.5rem;">
|
||||
<p style="margin-bottom:0.8rem;"><strong>1. 성함 및 소속</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">(개인의 경우 성함만, 기업인 경우 이용자분 성함과 소속을 함께 적어주세요)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">(개인의 경우 성함만, 기업인 경우 이용자분 성함과 소속을 함께 적어주세요)</p>
|
||||
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>2. 연락처</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">(전화번호, 이메일, 디스코드 중 택1)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">(전화번호, 이메일, 디스코드 중 택1)</p>
|
||||
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>3. 이용 인원</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">(1~2인 권장, 최대 4인까지 가능)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">(1~2인 권장, 최대 4인까지 가능)</p>
|
||||
<p style="margin-bottom:1.5rem;">□ 1명 □ 2명 □ 3명 □ 4명</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>4. 스튜디오 사용 용도</strong></p>
|
||||
<p style="margin-bottom:1.5rem;">□ 녹화 □ 기타: [여기에 작성해주세요]</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>5. 희망 대관 날짜</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">※ 최소 2주 전 예약을 권장합니다</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">※ 최소 2주 전 예약을 권장합니다</p>
|
||||
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
|
||||
|
||||
<p style="margin-bottom:0.8rem;"><strong>6. 희망 이용 시간</strong></p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">※ 응답 예시) 오전 10시~ 오후 3시(5시간)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;">※ 새벽 대관(밤 10시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">※ 응답 예시) 오전 10시~ 오후 3시(5시간)</p>
|
||||
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">※ 새벽 대관(밤 10시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
|
||||
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:1.5rem;text-align:center;">
|
||||
<a href="mailto:minglestudio.mocap@gmail.com?subject=[스튜디오 대관 문의]" class="btn btn-primary">📧 이메일 바로 보내기</a>
|
||||
<a href="mailto:minglestudio.mocap@gmail.com?subject=[스튜디오 대관 문의]" class="btn btn-primary" style="font-size:0.95rem;padding:0.8rem 1.5rem;">📧 이메일 바로 보내기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div></li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user