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

ADD : 모바일 가독성 개선

Browse Source
This commit is contained in:
KINDNICK 2025-07-22 22:40:08 +09:00
parent a8c73b5745
commit 368729e289
1 changed files with 126 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
index.html
View File

@ -183,6 +183,108 @@
.youtube-embed-grid { grid-template-columns: 1fr; } .youtube-embed-grid { grid-template-columns: 1fr; }
} }
@media (max-width: 800px) { .flex { flex-direction: column; } } @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> </style>
</head> </head>
<body> <body>
@ -339,39 +441,39 @@
<p style="margin-top:0.5rem;color:#666;font-size:0.9rem;">※ 네이버 플레이스를 통한 예약도 가능합니다</p> <p style="margin-top:0.5rem;color:#666;font-size:0.9rem;">※ 네이버 플레이스를 통한 예약도 가능합니다</p>
</div> </div>
<!-- 인라인 이메일 양식 --> <!-- 인라인 이메일 양식 -->
<div id="inlineEmailForm" style="display:none;margin-top:1.5rem;background:#f8f9fa;padding:1.5rem;border-radius:10px;"> <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;">아래 양식을 복사하여 이메일로 문의해주세요:</p> <p style="margin-bottom:1rem;font-weight:600;font-size:1rem;">아래 양식을 복사하여 이메일로 문의해주세요:</p>
<div style="background:#fff;padding:1.5rem;border-radius:8px;border:1px solid #e5e7eb;"> <div style="background:#fff;padding:1rem;border-radius:8px;border:1px solid #e5e7eb;font-size:0.95rem;">
<p style="margin-bottom:0.8rem;"><strong>제목:</strong> [스튜디오 대관 문의]</p> <p style="margin-bottom:0.8rem;word-break:break-all;"><strong>제목:</strong> [스튜디오 대관 문의]</p>
<p style="margin-bottom:0.8rem;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p> <p style="margin-bottom:0.8rem;word-break:break-all;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p>
<div style="margin-top:1.5rem;"> <div style="margin-top:1.5rem;">
<p style="margin-bottom:0.8rem;"><strong>1. 성함 및 소속</strong></p> <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:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>2. 연락처</strong></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:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>3. 이용 인원</strong></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:1.5rem;">□ 1명 □ 2명 □ 3명 □ 4명</p>
<p style="margin-bottom:0.8rem;"><strong>4. 스튜디오 사용 용도</strong></p> <p style="margin-bottom:0.8rem;"><strong>4. 스튜디오 사용 용도</strong></p>
<p style="margin-bottom:1.5rem;">□ 녹화 □ 기타: [여기에 작성해주세요]</p> <p style="margin-bottom:1.5rem;">□ 녹화 □ 기타: [여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>5. 희망 대관 날짜</strong></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:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>6. 희망 이용 시간</strong></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;font-size:0.9rem;line-height:1.4;">※ 응답 예시) 오전 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시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p> <p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
</div> </div>
</div> </div>
<div style="margin-top:1.5rem;text-align:center;"> <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> </div>
</div> </div>
@ -653,39 +755,39 @@
<ul class="faq-list"> <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> <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) --> <!-- 인라인 이메일 양식 (FAQ) -->
<div id="inlineEmailForm2" style="display:none;margin-top:1rem;background:#f8f9fa;padding:1.5rem;border-radius:10px;"> <div id="inlineEmailForm2" style="display:none;margin-top:1rem;background:#f8f9fa;padding:1rem;border-radius:10px;">
<p style="margin-bottom:1rem;font-weight:600;">아래 양식을 복사하여 이메일로 문의해주세요:</p> <p style="margin-bottom:1rem;font-weight:600;font-size:1rem;">아래 양식을 복사하여 이메일로 문의해주세요:</p>
<div style="background:#fff;padding:1.5rem;border-radius:8px;border:1px solid #e5e7eb;"> <div style="background:#fff;padding:1rem;border-radius:8px;border:1px solid #e5e7eb;font-size:0.95rem;">
<p style="margin-bottom:0.8rem;"><strong>제목:</strong> [스튜디오 대관 문의]</p> <p style="margin-bottom:0.8rem;word-break:break-all;"><strong>제목:</strong> [스튜디오 대관 문의]</p>
<p style="margin-bottom:0.8rem;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p> <p style="margin-bottom:0.8rem;word-break:break-all;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p>
<div style="margin-top:1.5rem;"> <div style="margin-top:1.5rem;">
<p style="margin-bottom:0.8rem;"><strong>1. 성함 및 소속</strong></p> <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:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>2. 연락처</strong></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:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>3. 이용 인원</strong></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:1.5rem;">□ 1명 □ 2명 □ 3명 □ 4명</p>
<p style="margin-bottom:0.8rem;"><strong>4. 스튜디오 사용 용도</strong></p> <p style="margin-bottom:0.8rem;"><strong>4. 스튜디오 사용 용도</strong></p>
<p style="margin-bottom:1.5rem;">□ 녹화 □ 기타: [여기에 작성해주세요]</p> <p style="margin-bottom:1.5rem;">□ 녹화 □ 기타: [여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>5. 희망 대관 날짜</strong></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:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>6. 희망 이용 시간</strong></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;font-size:0.9rem;line-height:1.4;">※ 응답 예시) 오전 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시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p> <p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
</div> </div>
</div> </div>
<div style="margin-top:1.5rem;text-align:center;"> <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> </div>
</div></li> </div></li>