*{box-sizing:border-box}body,html{margin:0;padding:0}body{background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center}.darkMode{background-color:#141414;color:#fff}button{background-color:transparent;border:none}input{padding:10px}a{text-decoration:none;color:#000}.loadingWrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#loading{display:inline-block;width:42px;height:42px;border-radius:50%;border:3px solid rgba(0,0,0,.3);border-top-color:#303030;animation:spin 1s ease-in-out infinite}.darkMode #loading{border:3px solid hsla(0,0%,100%,.3);border-top-color:#fff}@keyframes spin{to{transform:rotate(1turn)}}.commonBtn{border:none;background:#12b886;color:#fff;border-radius:4px;padding:8px 20px;font-size:18px;cursor:pointer;transition:all .5s}.darkMode .commonBtn{color:#000}.commonBtn:hover{background:#63e6be}.uncommonBtn{border:none;background:none;border-radius:4px;padding:8px 20px;font-size:18px;cursor:pointer;transition:all .5s}.darkMode .uncommonBtn,.uncommonBtn{color:#12b886}.uncommonBtn:hover{background:rgba(0,0,0,.05)}.darkMode .uncommonBtn:hover{background:hsla(0,0%,100%,.1)}.headerBtn{font-size:14px;border:1px solid #000;padding:10px 15px;border-radius:5px;cursor:pointer;transition:all .5s}.darkMode .headerBtn{color:#fff;border:1px solid #fff}.headerBtn:hover{color:#fff;background-color:#000}.darkMode .headerBtn:hover{color:#000;background-color:#fff}.container{max-width:1480px;flex-direction:column;padding:0 20px}.container,.header{width:100%;display:flex;align-items:center}.header{justify-content:space-between;padding:100px 0}.header,.header a{flex-direction:row}.header a{margin-right:10px;display:flex;justify-content:center;align-items:center}.logo{font-weight:700}.darkMode .logo{color:#fff}.logo #text1{transition:transform .4s ease-in-out 0s}.logo #text2{transition:transform .4s ease-in-out .1s}.logo #text3{transition:transform .4s ease-in-out .2s}.logo #text4{transition:transform .4s ease-in-out .3s}.logo #text5{transition:transform .4s ease-in-out .4s}.logo:hover span{transform:translateY(-10px)}.mainMenu{display:flex;flex-direction:row;align-items:center}.darkModeBtn{padding:7px;border-radius:5px;margin-right:10px;cursor:pointer;transition:transform .5s}.darkModeBtn:hover{background-color:#e0e0e0}.darkMode .darkModeBtn:hover{background-color:#2a2a2a}.userBtn{position:relative;cursor:pointer}.user{padding:10px}.user .arrow{color:gray}.user:hover .arrow{color:#000}.darkMode .user:hover .arrow{color:#fff}.userMenu{position:absolute;top:calc(100% + 10px);right:0;width:100%;border:0;border-radius:8px;box-shadow:-2px 2px 10px gray}.userMenuItem{display:block;padding:10px;cursor:pointer;border-radius:8px}.userMenuItem:hover{background-color:hsla(0,0%,50%,.1)}.darkMode .userMenuItem:hover{background-color:hsla(0,0%,100%,.1)}.register{width:30%;display:flex;flex-direction:column;justify-content:center}.register span{margin:20px 0;font-size:18px;font-weight:700}.register form{width:100%;display:flex;flex-direction:column;align-items:center}.register form .inputField{width:100%;height:56px;display:flex;flex-direction:row;border:1px solid #ccc;margin:10px 0}.register form .inputField:focus-within{border-bottom:3px solid blue}.darkMode .register form .inputField:focus-within{border-bottom:3px solid #1e90ff}.darkMode .register form .inputField{border:1px solid #789}.register form .inputField .iconBox{padding:0 10px;height:100%;display:flex;align-items:center;border-right:1px solid #ccc;font-size:18px}.darkMode .register form .inputField .iconBox{border-right:1px solid #789}.register form input{width:100%;border:none;background-color:transparent;font-size:18px}.register form input:focus{outline:none}.darkMode .register form input{color:#fff}.register form .btnWrapper{width:100%;display:flex;justify-content:flex-end;margin:20px 0}.writeForm{display:flex;flex-direction:column;align-items:flex-start;width:50%}.writeForm .contentInput,.writeForm .titleInput{width:100%;border:none;background-color:transparent;margin:20px 0}.darkMode .writeForm .contentInput,.darkMode .writeForm .titleInput{color:#fff}.writeForm .contentInput:focus,.writeForm .titleInput:focus{outline:none;box-shadow:0 0 10px #4169e1}.darkMode .writeForm .contentInput:focus,.darkMode .writeForm .titleInput:focus{outline:none;box-shadow:0 0 10px #d6a8e9}.writeForm .titleInput{font-size:2.75rem;font-weight:700}.writeForm .contentInput{height:120px;font-size:18px;resize:none;padding:10px;margin:20px 0}.writeForm .uploadFileWrapper{margin:20px 0}.writeForm .uploadFileWrapper .fileName{margin-left:10px}.writeForm .imgWrapper{width:100%;display:flex;flex-direction:row;justify-content:center}.writeForm img{max-width:100%;object-fit:contain}.writeForm .btnWrapper{width:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;text-align:center;margin:40px 0}.postList{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:20px;gap:20px;width:100%}.postItem{display:flex;flex-direction:column;justify-content:space-between;width:100%;aspect-ratio:5/4;background-color:#fff;box-shadow:0 4px 16px 0 rgba(0,0,0,.04);border-radius:10px;overflow:hidden;opacity:1;transition:opacity 1s,display 1s,transform .5s,box-shadow .5s}.darkMode .postItem{background-color:#202020;box-shadow:0 4px 16px 0 hsla(0,0%,100%,.1)}.postItem:hover{transform:translateY(-6px);box-shadow:5px 5px 10px rgba(0,0,0,.04)}.darkMode .postItem:hover{box-shadow:5px 5px 10px hsla(0,0%,100%,.1)}.postItem .contentBox{height:85%;cursor:pointer}.postItem .contentBox .thumbnail{width:100%;height:75%;object-fit:cover}.postItem .contentBox .title{width:100%;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(100%,1vw,115%);font-weight:800;margin:0;padding:12px}.darkMode .postItem .contentBox .title{color:#fff}.postItem .infoBox{height:15%;padding:0 12px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:clamp(90%,1vw,100%)}.postItem .infoBox span{color:grey;margin:0}.postItem .infoBox .iconBtnBox{display:flex;flex-direction:row}.postItem .infoBox .iconBtnBox .iconBtn{padding:5px;border-radius:5px;cursor:pointer}.postItem .infoBox .iconBtnBox .iconBtn:hover{background-color:#eaeaea}.darkMode .postItem .infoBox .iconBtnBox .iconBtn:hover{background-color:#303030}.detail{width:60%;display:flex;flex-direction:column;position:relative}.detail h1{margin:20px 0}.detail .imgBox{display:flex;flex-direction:row;justify-content:center;margin:20px 0}.detail img{max-width:100%;object-fit:cover}.detail p{margin:40px 0,20px;font-size:18px;white-space:pre-line}.detail hr{margin:20px 0 10px}.darkMode .detail hr{background:gray;height:1px;border:0}.comment{display:flex;flex-direction:column}.commentWrite #commentInput{width:100%;height:14vh;font-size:18px;border-radius:10px;margin:10px 0;padding:16px;resize:none}.darkMode .commentWrite #commentInput{background-color:#202020;color:#fff}.commentWrite .commentBtnBox{display:flex;width:100%;justify-content:flex-end}.commentWrite .cancelBtn,.commentWrite .commentBtn{margin:10px 0 0 8px}.commentList{display:flex;flex-direction:column;align-items:center;margin-top:16px}.commentList .text{margin:44px 0;color:gray;font-size:20px}.commentItem{width:100%;display:flex;flex-direction:column;margin:16px 0;opacity:1;transition:opacity 1s}.commentItem .wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.commentItem .author{font-weight:700}.commentItem .commentManage span{margin-left:8px;color:#acacac;cursor:pointer}.commentItem .commentManage span:hover{text-decoration:underline}.commentItem p{font-size:16px;margin:10px 0}.commentItem .content{white-space:pre-line}.sidebar{position:absolute;left:-8rem;top:6rem}.sidebar .wrapper{display:flex;flex-direction:column;align-items:center;border:1px solid gray;border-radius:10px}.sidebar .fixed.wrapper{position:fixed;top:130px}.sidebar .component{display:flex;flex-direction:column;align-items:center;margin-bottom:5px}.sidebar .icon{font-size:32px;padding:0;margin:10px 10px 2px}.page404{width:100%;aspect-ratio:3/2;background-image:url(/_next/static/media/404_page.2e30b819.jpg);background-size:cover;position:relative;display:flex;justify-content:center;align-items:flex-end}.page404 .source{display:flex;flex-direction:column;position:absolute;right:1%;bottom:1%}.page404 .source a{padding:2.5px 5px;color:gray}.page404 .HomeBtn{margin:20px 0}.pageError{width:100%;aspect-ratio:3/2;background-image:url(/_next/static/media/error.21c5d961.jpeg);background-size:cover;position:relative;display:flex;justify-content:center;align-items:flex-end}.pageError .source{display:flex;flex-direction:column;position:absolute;right:1%;bottom:1%}.pageError .source a{padding:2.5px 5px;color:gray}.pageError button{margin:20px 0}@media screen and (max-width:767px){.register{width:clamp(50%,55%,60%)}.writeForm{width:90%}.postList{grid-template-columns:repeat(1,1fr)}.detail{width:100%}.sidebar{position:static}.sidebar .fixed.wrapper,.sidebar .wrapper{position:static;flex-direction:row;border:none}.sidebar .component{flex-direction:row;border:1px solid gray;border-radius:10px;padding:0 12px;margin:0 12px 0 0}.sidebar .icon{font-size:18px;margin:0 12px 0 0}.sidebar .count{font-size:14px}}@media screen and (min-width:768px) and (max-width:1023px){.register{width:clamp(30%,40%,50%)}.writeForm{width:80%}.postList{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1024px) and (max-width:1439px){.postList{grid-template-columns:repeat(3,1fr)}}