@import url("./fonts.css");
/* 공통 */
html, body { margin: 0; padding: 0; }
html { font-size: 62.5%; }
body { font-size: 1.6rem; }
* { color: #444; font-family: 'Pretendard JP', 'NanumGothic', 'Verdana'; font-size: 1.6rem; font-weight: 400; }
.material-symbols-outlined { width: 2.4rem; overflow: hidden; }
button { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0.5rem; cursor: pointer; }
button.button { width: 90%; margin: 0 auto; padding: 1.5rem 0; font-family: 'NanumSquare'; font-size: 3rem; font-weight: 800; }
select, input, textarea { border: 1px solid #ddd; border-radius: 0.3rem; box-sizing: border-box; }
select:focus-visible,
input:focus,
textarea:focus { outline: none; }
input::placeholder,
textarea::placeholder { color: #ddd; }
/* input number 화살표 없애기 */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type='number'] {
-moz-appearance: textfield;
}
/* 폰트 */
.f-square { font-family: 'NanumSquare' !important; }
.f-base { font-family: 'Pretendard JP', 'NanumGothic', 'Verdana' !important; }
/* display */
.d-flex { display: flex; }
.d-flex-a-center { display: flex; align-items: center; }
.d-flex-center { display: flex; align-items: center; justify-content: center; }
.d-flex-center-between { display: flex; align-items: center; justify-content: space-between; }
/* 모달 */
.modal { position: fixed; display: none; top: -1px; right: 0; bottom: 0; left: 0; background: #fff; z-index: 999; overflow-y: auto; }
.modal.dark { background: #595959; z-index: 998; }
.modal .close { position: absolute; top: 2rem; right: 2rem; padding: 0; border: 0; background: none; }
.modal .close .m-symbol { color: #999; }
.modal .header { position: fixed; top: -1px; right: 0; left: 0; background: #fff; }
.modal .header .header-title h1 { color: #444; }
.modal .header .header-title h1 button { color: #1b8bf9; }
.modal .header .header-title h1 button .m-symbol { width: 2.6rem; font-size: 2.6rem; }
/* 얼럿 */
.modal.alert { background: rgba(0, 0, 0, 0.5); z-index: 999; }
.modal.alert .modal-container { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; min-width: 25rem; max-width: 80vw; padding: 3rem 5rem; border-radius: 1rem; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35); background-color: #fff; transform: translate(-50%, -50%); }
.modal.alert .modal-container > div { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* switch */
label.switch { display: inline-flex; align-items: center; gap: 1rem; cursor: pointer; }
label.switch [type="checkbox"] { appearance: none; position: relative; width: 5rem; height: 2.5rem; border: 0; border-radius: 2.5rem; background-color: #aaa; }
label.switch [type="checkbox"]::before { content: ""; position: absolute; top: 0.5rem; left: 0.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: #fff; transition: left 250ms linear; }
label.switch [type="checkbox"]:checked { background-color: #1b8bf9; }
label.switch [type="checkbox"]:checked::before { background-color: #fff; left: 3rem; }
label.switch [type="checkbox"]:disabled { opacity: 0.7; cursor: not-allowed; }
label.switch [type="checkbox"]:disabled:before { background-color: #eee; }
label.switch [type="checkbox"]:disabled + span { opacity: 0.7; cursor: not-allowed; }
label.switch [type="checkbox"]:focus-visible { outline-offset: max(2px, 0.2rem); outline: max(2px, 0.2rem) solid #1b8bf9; }
label.switch [type="checkbox"]:enabled:hover { box-shadow: 0 0 0 max(3px, 0.3rem) #ddd; }
/* mg, pd */
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
/* 페이지 공통 */
.container { position: relative; min-height: 100vh; }
.page { position: relative; display: none; height: 100%; }
/* 타이틀 */
h1 { display: flex; align-items: center; justify-content: center; margin: 0; padding: 1.5rem 0; font-size: 4rem; font-weight: 800; }
/* 인트로 페이지 */
.introImage { display: flex; flex-direction: column; }
.introImage img { max-width: 100%; }
.intro.page .introButtons { position: absolute; left: 5%; right: 5%; }
.intro.page .introButtons > button { width: 100%; }
/* 응모 페이지 */
.entry .info { display: flex; flex-direction: column; width: 85%; margin: 8rem auto; }
.entry .info .section { margin-bottom: 3rem; }
.entry .info label,
.entry .info .title { display: block; margin-bottom: 1rem; font-size: 2rem; color: #666; }
.entry .info input,
.entry .info textarea { width: 100%; padding: 1rem; font-size: 1.8rem; }
.entry .info input { text-align: center; }
.entry .info textarea { height: calc(2rem * 5); padding: 1.5rem; }
.entry .info button { width: 100%; padding: 0.7rem 0; border-radius: 0.3rem; font-size: 1.7rem; font-weight: 400; }
/* 휴대폰번호 입력 */
.mobile-group { display: flex; align-items: center; justify-content: space-between; }
.mobile-group input { width: 30% !important; }
/* 휴대폰번호 가이드 */
.entry .info .mobile-guide { display: none; margin-top: 0.5rem; color: #f00; font-size: 1.5rem; }
/* 인증번호 받기 버튼 */
.entry .info .auth-button { display: none; margin-top: 1rem; }
.entry .info .auth-retry { display: none; margin-top: 1rem; color: #444 !important; background-color: #c4c4c4 !important; }
/* 인증번호 입력 */
.entry .info .auth-number { display: none; margin-top: 2rem; }
.entry .info .auth-number input { margin-bottom: 1rem; }
.entry .info .auth-number-btns { display: flex; }
.entry .info .auth-number-btns button:nth-child(1) { margin-right: 0.5rem; color: #444 !important; background-color: #c4c4c4 !important; }
/* 메시지 */
.entry .info .message { display: none; }
.entry .info .message .byte { color: #666; text-align: right; }
.entry .info .message .byte,
.entry .info .message .byte * { font-size: 1.5rem; }
/* 사진첨부 */
.entry .info .photo { display: none; }
.entry .info .upload-file { display: flex; }
.entry .info .upload-file .preview { flex-shrink: 0; width: 50%; max-width: 30rem; height: 15rem; border: 1px solid #ddd; overflow: hidden; }
.entry .info .upload-file .preview img { width: 100%; height: 100%; }
.entry .info .upload-file .upload-file-input { width: 100%; padding-left: 2rem; }
.entry .info .upload-file .upload-file-input button { width: 100%; max-width: 30rem; margin: 0; }
.entry .info .upload-file .upload-file-guide { margin-top: 1rem; font-size: 1.5rem; }
.entry .info .file { display: none; }
.entry .info .link-button { justify-content: flex-start; color: #115DAA; font-size: 13px; text-decoration: underline; text-underline-position: under; background: transparent; }
/* 후보자 선택 */
.entry .info .candidate-container { display: none; }
.entry .info .candidate-container .candidate p { display: flex; align-items: center; }
.entry .info .candidate-container .candidate p label { display: inline-block; margin: 0 0 0 0.7rem; color: #444; font-size: 1.7rem; }
.entry .info .candidate-container .candidate p input { width: 2rem; height: 2rem; margin: 0; }
/* 개인정보 수집 */
.entry .info .agreement-container { display: none; }
.entry .info .agreement-container .title { margin-top: 2rem; font-size: 2.2rem; font-weight: 600; }
.entry .info .agreement-container .agreement-text { min-height: 5rem; padding: 2rem; border: 1px solid #ddd; font-size: 1.7rem; }
.entry .info .agreement-container .agreement-check { display: flex; align-items: center; margin-top: 0.7rem; }
.entry .info .agreement-container .agreement-check label { display: inline-block; margin: 0 0 0 0.7rem; font-size: 1.7rem; }
.entry .info .agreement-container .agreement-check input { width: 2rem; height: 2rem; margin: 0; }
/* 응모하기 버튼 */
.entry .info-button { padding: 3rem 0 10rem 0; border-top: 1px solid #ddd; }
.entry .info-button button { display: flex; margin: 0 auto; width: 30rem; }
/* 응모 완료 메시지 */
.confirm .confirm-message { width: 85%; min-height: 5rem; margin: 4rem auto; padding: 2rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1.7rem; }
.confirm .confirm-button { padding: 3rem 0 10rem 0; border-top: 1px solid #ddd; }
.confirm .confirm-button button { width: 30rem; }
/* 최소 웹브라우저 */
@media (max-width: 1200px) {
h1 { font-size: 3rem; }
button.button { font-size: 2.5rem; }
}
/* ipad */
@media (max-width: 768px) {
h1 { font-size: 2.5rem; }
button.button { font-size: 2.2rem; }
.entry .info { margin: 5rem auto; }
}
/* nexus7 */
@media (max-width: 600px) {
h1 { padding: 1.3rem 0; font-size: 2.2rem; }
button.button { width: 90%; padding: 1.2rem 0; font-size: 2rem; }
}
/* iphone 14 pro max */
@media (max-width: 430px) {
h1 { padding: 1.2rem 0; font-size: 1.9rem; }
button.button { padding: 1rem 0; font-size: 1.8rem; }
.entry .info { margin: 4rem auto; }
.entry .info label { font-size: 1.8rem; }
.entry .info input,
.entry .info textarea { padding: 0.7rem 1rem; font-size: 1.7rem; }
.entry .info textarea { padding: 1.3rem; }
.entry .info .mobile-guide { font-size: 1.4rem; }
.entry .info .byte * { font-size: 1.4rem; }
.entry .info .upload-file .upload-file-guide { font-size: 1.4rem; }
.entry .info .candidate-container .candidate p label { font-size: 1.6rem; }
.entry .info .agreement-container > label { font-size: 2rem; }
.entry .info .agreement-container .agreement-check label { font-size: 1.6rem; }
}
/* galaxy s20 */
@media (max-width: 360px) {
.entry .info .agreement-container > label { font-size: 1.9rem; }
.entry .info .agreement-container textarea { font-size: 1.6rem; }
}
/* 제일 작은 폰 (iphone4) */
@media (max-width: 321px) {
h1 { padding: 1rem 0; font-size: 1.7rem; }
button.button { font-size: 1.7rem; }
.intro.page button { padding: 0.8rem 0 ; font-size: 1.5rem; }
.entry .info .agreement-container > label { font-size: 1.8rem; }
.entry .info .agreement-container textarea { font-size: 1.5rem; }
}
@media (max-width: 300px) {
.intro.page button { padding: 0.8rem 0 ; font-size: 1rem; }
}
/* 커스텀 버튼 (프링글스, 대학내일 추가) */
.customButtons { display: flex; width:100%; align-items: center; justify-content: center; text-align:center; flex-wrap: nowrap; gap: 1rem; margin-bottom: 2rem; }
.customButtons button { padding: 0 !important; background: transparent; }
.customButtons img { max-width: 100%; }
@media (max-width: 670px) {
.customButtons { margin-bottom: 1.5rem; }
}
@media (max-width: 500px) {
.customButtons { margin-bottom: 1rem; }
.customButtons img { max-width: 75%; }
}
@media (max-width: 400px) {
.customButtons { margin-bottom: 0.7rem; }
.customButtons img { max-width: 65%; }
}
@media (max-width: 300px) {
.customButtons { margin-bottom: 0.5rem; }
.customButtons img { max-width: 60%; }
}