@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}a{color:inherit;text-decoration:none}.galleryItem{display:flex;position:relative}.galleryItem img{width:100%;border-radius:16px;object-fit:cover}.overlay,.saveButton,.overlayIcons{display:none}.galleryItem:hover .overlay{display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#0000004d;border-radius:16px}.galleryItem:hover .saveButton{display:block;background-color:#e50829;color:#fff;border-radius:24px;padding:12px 16px;font-weight:500;cursor:pointer;width:max-content;position:absolute;top:16px;right:16px;border:none;outline:none}.galleryItem:hover .overlayIcons{display:block;position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:8px}.overlayIcons button{width:32px;height:32px;border-radius:100%;background-color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}.overlayIcons button img{width:20px;height:20px}.overlayIcons button:hover{background-color:#f1f1f1}.gallery{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;grid-auto-rows:10px}@media (max-width: 1746px){.gallery{grid-template-columns:repeat(6,1fr)}}@media (max-width: 1509px){.gallery{grid-template-columns:repeat(5,1fr)}}@media (max-width: 1272px){.gallery{grid-template-columns:repeat(4,1fr)}}@media (max-width: 1035px){.gallery{grid-template-columns:repeat(3,1fr)}}@media (max-width: 798px){.gallery{grid-template-columns:repeat(2,1fr)}}@media (max-width: 475px){.gallery{grid-template-columns:repeat(1,1fr)}}.createTop{border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;padding:16px 0;display:flex;align-items:center;justify-content:space-between}.createTop h1{font-size:20px;font-weight:500}.createTop button{background-color:#e50829;color:#fff;font-weight:500;border:none;outline:none;padding:16px;border-radius:32px;cursor:pointer;font-size:15px}.createTop button:hover{background-color:#c1011e}.createBottom{margin-top:32px;display:flex;justify-content:center;gap:64px}.upload{background-color:#e9e9e9;cursor:pointer;font-size:18px;display:flex;justify-content:center;align-items:center;border-radius:32px;border:2px dashed #dddddd;width:375px;height:574px;padding:16px;position:relative}.uploadTitle{display:flex;flex-direction:column;align-items:center;gap:16px}.uploadInfo{position:absolute;bottom:32px;font-size:13px;text-align:center;color:gray}.createForm{display:flex;flex-direction:column;gap:32px;width:584px}.createFormItem{display:flex;flex-direction:column;gap:8px}.createFormItem label{font-size:13px;color:gray}.createFormItem input,textarea,select{font-size:15px;border:2px solid #e9e9e9;padding:16px;border-radius:16px}.createFormItem textarea{resize:none}small{color:#a6a6a6;font-size:13px}@media (max-width: 1104px){.createBottom{flex-direction:column;align-items:center;margin-bottom:64px}}@media (max-width: 768px){.createForm{width:100%}}@media (max-width: 475px){.upload{width:100%}}.postPage{display:flex;justify-content:center;gap:32px}.postContainer{width:70%;max-height:820px;display:flex;border:1px solid #e9e9e9;border-radius:32px;overflow:hidden}.postImg{flex:1;background-color:#c0a68c}.postImg img{width:100%;height:100%;object-fit:cover}.postDetails{flex:1;height:100%;display:flex;flex-direction:column;gap:32px;padding:16px;overflow:hidden}.postUser{display:flex;align-items:center;gap:8px}.postUser img{width:32px;height:32px;border-radius:50%}.postUser span{font-size:14px}@media (max-width: 1127px){.postContainer{width:100%;margin-right:16px}}@media (max-width: 751px){.postContainer{flex-direction:column;max-height:unset}}.postInteractions{display:flex;justify-content:space-between;align-items:center}.interactionIcons{display:flex;align-items:center;gap:8px;font-weight:500}.postInteractions button{background:#e50829;color:#fff;border:none;border-radius:24px;padding:12px;font-weight:500;cursor:pointer}.comments{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0}.commentList{flex:1;display:flex;flex-direction:column;overflow-y:auto;gap:16px}.comment{display:flex;gap:16px}.comment img{width:32px;height:32px;border-radius:50%;object-fit:cover}.commentContent{display:flex;flex-direction:column;gap:4px}.commentUsername{font-weight:500;font-size:14px}.commentText{font-size:14px}.commentTime{font-size:12px;color:#a6a6a6}.commentForm{background-color:#f1f1f1;padding:16px;border-radius:32px;display:flex;align-items:center;gap:16px}.commentForm input{flex:1;border:none;outline:none;background-color:transparent;font-size:16px}.emoji{cursor:pointer;font-size:20px;position:relative}.emojiPicker{position:absolute;right:0;bottom:50px}.authPage{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.authContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:32px;border-radius:32px;box-shadow:0 0 10px #0000001a}.authContainer h1{font-weight:500}.authContainer form{width:100%;display:flex;flex-direction:column;gap:16px}.formGroup{display:flex;flex-direction:column;gap:8px}.formGroup label{font-size:14px}.formGroup input{padding:16px;border:2px solid #e0e0e0;border-radius:16px}.authContainer button{background-color:#e50829;padding:16px;border:none;border-radius:32px;color:#fff;cursor:pointer;font-weight:700}.authContainer p{font-size:14px;text-align:center;cursor:pointer}.error{color:#e50829}.profilePage{display:flex;flex-direction:column;align-items:center;gap:16px}.profileImg{border-radius:50%;object-fit:cover}.profileName{font-size:36px;font-weight:500}.profileUsername{font-weight:300;color:gray}.followCounts{font-weight:500}.profileInteractions{display:flex;align-items:center;gap:32px}.profileButtons{display:flex;gap:16px}.profileButtons button{border:none;outline:none;padding:16px;border-radius:32px;font-weight:700;cursor:pointer}.profileButtons button:last-child{background-color:#e50829;color:#fff}.profileButtons button:last-child:hover{background-color:#c1011e;color:#fff}.profileOptions{display:flex;gap:16px;margin-top:32px;margin-bottom:16px;font-weight:500}.profileOptions span{cursor:pointer;padding:8px 0}.profileOptions span:hover{color:gray}.active{border-bottom:3px solid black}.boards{width:100%;display:grid;grid-template-columns:repeat(7,1fr);gap:16px}.board{margin-bottom:32px;cursor:pointer}.board img{width:100%;object-fit:cover;border-radius:16px}.boardInfo{display:flex;flex-direction:column;gap:8px}.boardInfo h1{font-weight:500;font-size:16px}.boardInfo span{display:inline-block;font-size:13px;color:gray}@media (max-width: 768px){.boards{grid-template-columns:repeat(3,1fr)}}@media (max-width: 480px){.boards{grid-template-columns:repeat(2,1fr)}}@media (max-width: 360px){.boards{grid-template-columns:1fr}}.app{width:100%;display:flex;gap:16px}.content{flex:1;margin-right:16px}.leftBar{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:72px;height:100vh;position:sticky;top:0;padding:16px 0;border-right:1px solid #e9e9e9}.menuIcons{display:flex;flex-direction:column;align-items:center;gap:24px}.menuIcon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:12px}.menuIcon:hover{background-color:#f1f1f1}.logo{width:24px;height:24px}.topBar{margin:16px 0;display:flex;align-items:center;gap:16px}.search{flex:1;background:#f1f1f1;padding:16px;border-radius:16px;display:flex;align-items:center;gap:16px}.search input{flex:1;background-color:transparent;border:none;outline:none}.userButton{display:flex;align-items:center;gap:16px;position:relative}.userButton img{width:36px;height:36px;border:100%;object-fit:cover}.userButton .arrow{cursor:pointer;height:16px;width:16px}.userOptions{position:absolute;right:0;top:120%;padding:16px;border-radius:8px;background-color:#fff;z-index:999;display:flex;flex-direction:column;font-size:14px;box-shadow:0 0 4px 1px #0000002d}.userOption{cursor:pointer;padding:8px;border-radius:8px}.userOption:hover{background:#f1f1f1;color:gray}.loginLink{font-size:18px;padding:16px;border-radius:32px}.loginLink:hover{background:#f1f1f1}@media (max-width: 475px){.userButton{display:none}}