@charset "UTF-8";

form > .input-wrap{margin-bottom: 20px;}

#modal-login-form > .title{font-size: 30px; font-family: 'GongGothicMedium'; margin-bottom: 30px; font-weight: bold;}
#modal-login-form > .title > .sub-title{font-size: 40px;}
#modal-login-form > .title > .sub-title > span{font-family: 'GongGothicMedium';}
#modal-login-form > .title > .sub-title > span:nth-child(1){color: var(--color1);}
#modal-login-form > .title > .sub-title > span:nth-child(2){color: var(--color2);}
#modal-login-form > .input-wrap{display: flex; flex-direction: row; border: 1px solid var(--color5); padding: 5px 20px; border-radius: 50px; gap: 20px; background-color: white;}
#modal-login-form > .input-wrap > .placeholder{width: 3rem; font-size: 16px; border-right: 2px solid var(--color5); display: flex; flex-direction: row; align-items: center;}
#modal-login-form > .input-wrap > input{width: calc(100% - 3rem - 20px); border: none; background-color: transparent; font-size: 16px; padding: 0.5em 0; outline: none;}
#modal-login-form > .input-wrap:focus-within{border: 1px solid var(--color1);}
#modal-login-form > .submit-wrap > button{width: 100%; font-size: 16px; border: none; background: linear-gradient(to right, var(--color1), var(--color2)); color: white; padding: 1em;}

#notice-form > .input-wrap{display: flex; flex-direction: row; border-radius: 50px; gap: 20px; background-color: white;}
#notice-form > .input-wrap > .placeholder{width: 3rem; font-size: 16px; display: flex; flex-direction: row; align-items: flex-start; padding-top: 0.5em;}
#notice-form > .input-wrap > input{width: calc(100% - 3rem - 20px); border: 1px solid var(--color6); background-color: transparent; font-size: 16px; padding: 0.5em 1em; outline: none; border-radius: 2em;}
#notice-form > .input-wrap > .ck-editor{width: calc(100% - 3rem - 20px);}
#notice-form > .input-wrap > .ck-editor ul{list-style: disc; margin-block-start: 1em;margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px;}
#notice-form > .input-wrap > .ck-editor .ck-editor__editable{height: 800px;}
#notice-form > .submit-wrap{display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px;}
#notice-form > .submit-wrap > button{width: 100%; max-width: 150px; font-size: 16px;}

#release-form > .input-wrap{display: flex; flex-direction: row; border-radius: 50px; gap: 20px; background-color: transparent;}
#release-form > .input-wrap > .placeholder{width: 3rem; font-size: 16px; display: flex; flex-direction: row; align-items: flex-start; padding-top: 0.5em;}
#release-form > .input-wrap > input{width: calc(100% - 3rem - 20px); border: 1px solid var(--color6); background-color: white; font-size: 16px; padding: 0.5em 1em; outline: none; border-radius: 2em;}
#release-form > .input-wrap > #file-upload{width: calc(100% - 3rem - 20px);}
#release-form > .submit-wrap{display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px;}
#release-form > .submit-wrap > button{width: 100%; max-width: 150px; font-size: 16px;}

#question-form .input-wrap{display: flex; flex-direction: row; border-radius: 50px; gap: 20px; background-color: transparent;}
#question-form .input-wrap > .placeholder{width: 5rem; font-size: 16px; display: flex; flex-direction: row; align-items: flex-start; padding-top: 0.8rem; font-size: 20px;}
#question-form .input-wrap > input{width: calc(100% - 5rem - 20px); border: 1px solid var(--color6); background-color: white; font-size: 16px; padding: 0.8em 2em; outline: none; border-radius: 2em;}
#question-form .input-wrap > input:focus{border: 1px solid var(--color1);}
#question-form .input-wrap > textarea{width: calc(100% - 5rem - 20px); height: 500px; border: 1px solid var(--color6); background-color: white; font-size: 16px; padding: 0.8em 2em; outline: none; border-radius: 2em; resize: none;}
#question-form .input-wrap > textarea:focus{border: 1px solid var(--color1);}
#question-form > .top{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
#question-form > .bottom{display: flex; flex-direction: column; gap: 20px; margin-top: 20px;}
#question-form > .submit-wrap{text-align: center; margin-top: 20px;}
#question-form > .submit-wrap > button{width: 100%; max-width: 150px; font-size: 16px;}

#page-login-form > .title{font-size: 30px; font-family: 'GongGothicMedium'; margin-bottom: 30px; font-weight: bold;}
#page-login-form > .title > .sub-title{font-size: 40px;}
#page-login-form > .title > .sub-title > span{font-family: 'GongGothicMedium';}
#page-login-form > .title > .sub-title > span:nth-child(1){color: var(--color1);}
#page-login-form > .title > .sub-title > span:nth-child(2){color: var(--color2);}
#page-login-form > .input-wrap{display: flex; flex-direction: row; border: 1px solid var(--color5); padding: 5px 20px; border-radius: 50px; gap: 20px; background-color: white;}
#page-login-form > .input-wrap > .placeholder{width: 3rem; font-size: 16px; border-right: 2px solid var(--color5); display: flex; flex-direction: row; align-items: center;}
#page-login-form > .input-wrap > input{width: calc(100% - 3rem - 20px); border: none; background-color: transparent; font-size: 16px; padding: 0.5em 0; outline: none;}
#page-login-form > .input-wrap:focus-within{border: 1px solid var(--color1);}
#page-login-form > .submit-wrap > button{width: 100%; font-size: 16px; border: none; background: linear-gradient(to right, var(--color1), var(--color2)); color: white; padding: 1em;}

@media (max-width: 700px){
	#notice-form > .input-wrap{flex-direction: column;}
	#notice-form > .input-wrap > input{width: 100%;}
	#notice-form > .input-wrap > .ck-editor{width: 100%;}
	
	#question-form .input-wrap{flex-direction: column;}
	#question-form .input-wrap > input{width: 100%;}
	#question-form .input-wrap > textarea{width: 100%;}
	#question-form > .top{grid-template-columns: 1fr;}
	#question-form > .bottom{display: flex; flex-direction: column; gap: 20px; margin-top: 20px;}
	#question-form > .submit-wrap{text-align: center; margin-top: 20px;}
	#question-form > .submit-wrap > button{width: 100%; max-width: 150px; font-size: 16px;}
}