:root { --theme-primary: #fafafa; --theme-primary-dark: #ffffff; --theme-primary-light: #eaeaea; --theme-positive-blue: #4b91ff; --theme-positive-green: #13a000; --theme-negative-red: #dc3545; --chat-close-icon-color: #4b91ff; --ld-header-color: rgba(0, 0, 0, 0.1); --play-icon-svg: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 10.2679C20.3333 11.0377 20.3333 12.9623 19 13.7321L10 18.9282C8.66667 19.698 7 18.7358 7 17.1962L7 6.80385C7 5.26425 8.66667 4.302 10 5.0718L19 10.2679Z' fill='%23333333'/%3E%3C/svg%3E"); --download-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 9.19995L12 13.2M12 13.2L16 9.19995M12 13.2V5.99995' stroke='%23333333' stroke-width='1.33' stroke-linecap='round'/%3E%3Cpath d='M6 15L6 16C6 17.1046 6.76751 18 7.71429 18L16.2857 18C17.2325 18 18 17.1046 18 16V15' stroke='%23333333' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E"); --like-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.45067 13.9082L11.4033 20.4395C11.6428 20.6644 11.7625 20.7769 11.9037 20.8046C11.9673 20.8171 12.0327 20.8171 12.0963 20.8046C12.2375 20.7769 12.3572 20.6644 12.5967 20.4395L19.5493 13.9082C21.5055 12.0706 21.743 9.0466 20.0978 6.92607L19.7885 6.52734C17.8203 3.99058 13.8696 4.41601 12.4867 7.31365C12.2913 7.72296 11.7087 7.72296 11.5133 7.31365C10.1304 4.41601 6.17972 3.99058 4.21154 6.52735L3.90219 6.92607C2.25695 9.0466 2.4945 12.0706 4.45067 13.9082Z' fill='%23db5875' stroke='%23db5875' stroke-width='2'/%3E%3C/svg%3E"); --refresh-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 15L10 19L14 23' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.93782 15.5C5.16735 14.1655 4.85875 12.6141 5.05989 11.0863C5.26102 9.55856 5.96064 8.13986 7.05025 7.05025C8.13986 5.96064 9.55856 5.26102 11.0863 5.05989C12.6141 4.85875 14.1655 5.16735 15.5 5.93782C16.8345 6.70829 17.8775 7.89757 18.4672 9.32122C19.0568 10.7449 19.1603 12.3233 18.7615 13.8117C18.3627 15.3002 17.4838 16.6154 16.2613 17.5535C15.0388 18.4915 13.5409 19 12 19' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); --write-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7276 8.27167C12.7532 9.87501 14.1244 11.2373 15.7461 12.2531L8.85648 19.1437C8.43142 19.5688 8.21816 19.7813 7.95707 19.9211C7.69612 20.0606 7.40147 20.1197 6.81254 20.2375L3.73539 20.8527C3.40278 20.9192 3.23625 20.9522 3.14164 20.8576C3.04735 20.763 3.08011 20.5969 3.14652 20.2648L3.76273 17.1877C3.88062 16.5982 3.9394 16.3033 4.07914 16.0422C4.21887 15.7811 4.43149 15.5687 4.85648 15.1437L11.7276 8.27167ZM16.1114 4.03631C16.6709 3.75904 17.3282 3.75907 17.8877 4.03631C18.1818 4.18205 18.4548 4.45493 19 5.00018C19.5451 5.54521 19.8182 5.81749 19.9639 6.11151C20.2412 6.67099 20.2411 7.32837 19.9639 7.88788C19.8182 8.18197 19.5453 8.45493 19 9.00018L17.2032 10.7961C15.5306 9.84473 14.1454 8.46834 13.1817 6.81756L15 5.00018C15.5451 4.45515 15.8174 4.18209 16.1114 4.03631Z' fill='%23333333'/%3E%3C/svg%3E"); --save-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 16C13.7354 16 14.1863 16.002 14.5127 16.0459C14.8103 16.0859 14.8506 16.1436 14.8535 16.1465C14.8564 16.1494 14.9141 16.1897 14.9541 16.4873C14.998 16.8137 15 17.2646 15 18V21H9C8.64496 21 8.31221 20.9988 8 20.9971V18C8 17.2646 8.00202 16.8137 8.0459 16.4873C8.08591 16.1897 8.14358 16.1494 8.14648 16.1465C8.14939 16.1436 8.18974 16.0859 8.4873 16.0459C8.81365 16.002 9.26462 16 10 16H13ZM15.3428 3C16.16 3 16.5691 3.00023 16.9365 3.15234C17.3041 3.30458 17.5938 3.59381 18.1719 4.17188L19.8281 5.82812C20.4062 6.40618 20.6954 6.69593 20.8477 7.06348C20.9998 7.43094 21 7.83996 21 8.65723V15C21 17.8284 20.9998 19.2424 20.1211 20.1211C19.4798 20.7624 18.5534 20.9346 17 20.9814V18C17 17.3212 17.0025 16.7113 16.9365 16.2207C16.8667 15.7014 16.704 15.1688 16.2676 14.7324C15.8312 14.296 15.2986 14.1333 14.7793 14.0635C14.2887 13.9975 13.6788 14 13 14H10C9.32116 14 8.7113 13.9975 8.2207 14.0635C7.70137 14.1333 7.16884 14.296 6.73242 14.7324C6.29601 15.1688 6.13331 15.7014 6.06348 16.2207C5.99752 16.7113 6 17.3212 6 18V20.9229C5.02497 20.8269 4.36878 20.611 3.87891 20.1211C3.00023 19.2424 3 17.8284 3 15V9C3 6.17157 3.00023 4.75759 3.87891 3.87891C4.75759 3.00023 6.17157 3 9 3H15.3428ZM7 7C6.44772 7 6 7.44772 6 8C6 8.55228 6.44772 9 7 9H12C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7H7Z' fill='%23222222'/%3E%3C/svg%3E"); --copy-link-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.6667 9.5H11.1667C10.2462 9.5 9.5 10.2462 9.5 11.1667V18.6667C9.5 19.5871 10.2462 20.3333 11.1667 20.3333H18.6667C19.5871 20.3333 20.3333 19.5871 20.3333 18.6667V11.1667C20.3333 10.2462 19.5871 9.5 18.6667 9.5Z' stroke='%23333333' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.16699 14.5001H5.33366C4.89163 14.5001 4.46771 14.3245 4.15515 14.0119C3.84259 13.6994 3.66699 13.2754 3.66699 12.8334V5.33341C3.66699 4.89139 3.84259 4.46746 4.15515 4.1549C4.46771 3.84234 4.89163 3.66675 5.33366 3.66675H12.8337C13.2757 3.66675 13.6996 3.84234 14.0122 4.1549C14.3247 4.46746 14.5003 4.89139 14.5003 5.33341V6.16675' stroke='%23333333' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --copy-link-icon-white-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8.665' y='7.665' width='6.67' height='9.67' rx='1.335' stroke='%23fff' stroke-width='1.33'/%3E%3Cpath d='M12.5 5.5H9.5C7.84315 5.5 6.5 6.84315 6.5 8.5V13.5' stroke='%23fff' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E"); --Expand_down: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 9L12 15L6 9' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --delete-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 7H19.5' stroke='%23ff0000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.8337 7V18.6667C17.8337 19.5 17.0003 20.3333 16.167 20.3333H7.83366C7.00033 20.3333 6.16699 19.5 6.16699 18.6667V7' stroke='%23ff0000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.66699 7.00008V5.33341C8.66699 4.50008 9.50033 3.66675 10.3337 3.66675H13.667C14.5003 3.66675 15.3337 4.50008 15.3337 5.33341V7.00008' stroke='%23ff0000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --memo-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4H7C5.89543 4 5 4.89543 5 6V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V6C19 4.89543 18.1046 4 17 4H16' stroke='%23888888' stroke-width='1.33' stroke-linecap='round'/%3E%3Cpath d='M8 4C8 2.89543 8.89543 2 10 2H14C15.1046 2 16 2.89543 16 4C16 5.10457 15.1046 6 14 6H10C8.89543 6 8 5.10457 8 4Z' stroke='%23888888' stroke-width='1.33'/%3E%3Cpath d='M8 10H16' stroke='%23888888' stroke-width='1.33' stroke-linecap='round'/%3E%3Cpath d='M8 14H16' stroke='%23888888' stroke-width='1.33' stroke-linecap='round'/%3E%3Cpath d='M8 18H12' stroke='%23888888' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E"); --memo-filled-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4H7C5.89543 4 5 4.89543 5 6V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V6C19 4.89543 18.1046 4 17 4H16' stroke='%23007acc' stroke-width='1.33' stroke-linecap='round'/%3E%3Cpath d='M8 4C8 2.89543 8.89543 2 10 2H14C15.1046 2 16 2.89543 16 4C16 5.10457 15.1046 6 14 6H10C8.89543 6 8 5.10457 8 4Z' fill='%23007acc' stroke='%23007acc' stroke-width='1.33'/%3E%3Cpath d='M8 10H16' stroke='%23007acc' stroke-width='1.33' stroke-linecap='round'/%3E%3Cpath d='M8 14H16' stroke='%23007acc' stroke-width='1.33' stroke-linecap='round'/%3E%3Cpath d='M8 18H12' stroke='%23007acc' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E"); --clone-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='9' width='10' height='10' rx='2' stroke='%23333333' stroke-width='1.33'/%3E%3Cpath d='M5 15V6C5 5.44772 5.44772 5 6 5H15' stroke='%23333333' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E"); --edit-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.2275 5.08838C15.4437 5.05327 15.6647 5.05327 15.8809 5.08838C16.273 5.15216 16.5809 5.34307 16.8418 5.55322C17.0908 5.75381 17.3649 6.02945 17.668 6.33252C17.971 6.63555 18.2457 6.90973 18.4463 7.15869C18.6566 7.41974 18.8483 7.72726 18.9121 8.11963C18.9472 8.33561 18.9472 8.55598 18.9121 8.77197C18.8484 9.16445 18.6566 9.47279 18.4463 9.73389C18.2458 9.98274 17.9708 10.2562 17.668 10.5591L10.5225 17.7046C10.3202 17.9068 10.114 18.1229 9.85059 18.272C9.58733 18.4209 9.29683 18.4868 9.01953 18.5562L6.57324 19.1675C6.38385 19.2148 6.149 19.2759 5.94922 19.2954C5.73906 19.3159 5.33585 19.3158 5.00977 18.9897C4.68416 18.6638 4.68457 18.2614 4.70508 18.0513C4.72462 17.8515 4.78566 17.6166 4.83301 17.4272L5.44434 14.981C5.5137 14.7035 5.57939 14.4123 5.72852 14.1489C5.87756 13.8858 6.09284 13.6801 6.29492 13.478L13.4404 6.33252C13.7435 6.02945 14.0176 5.75381 14.2666 5.55322C14.5275 5.34307 14.8354 5.15217 15.2275 5.08838Z' stroke='%23333333' stroke-width='1.33'/%3E%3C/svg%3E"); --close-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 6L18 18' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron-left-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 18L9 12L15 6' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron-right-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --search-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23333333' stroke-width='2'/%3E%3Cpath d='M20 20L16 16' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chat-close-icon-svg: url("data:image/svg+xml;utf8,"); --card-main-img-svg: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.2175 107.818C22.8553 79.5985 21.653 54.6939 32.1253 41.1246C41.0004 29.6249 71.1667 26.7132 97.3564 24.8212C117.375 23.3749 149.375 22.7499 163.5 37.4997C175.017 49.5256 177.106 78.0291 176.25 103.75C175.416 128.812 173.063 151.433 161.125 163.5C149.5 175.25 126.257 175.819 104.875 176.125C78.6252 176.5 48.7502 175 37.6252 164.625C26.7624 154.494 25.3363 131.005 24.2504 108.5L24.2175 107.818Z' fill='white' stroke='%23333333' stroke-width='12'/%3E%3Cpath d='M73.4715 74.625C73.4715 74.625 60.088 86.8761 43.5624 96.4397C35.2503 101.25 69.4669 117.891 69.4669 117.891M127.033 77.0489C127.033 77.0489 141.465 90.7441 153 95.25C161 98.375 124.029 122.375 124.029 122.375' stroke='%23333333' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M107.25 61C107.25 61 103.401 83.8614 99.375 98.125C95.2354 112.792 86.25 134.875 86.25 134.875' stroke='%23333333' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E"); --logo-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='48' y='24' width='24' height='24' transform='rotate(-180 48 24)' fill='%23333333'/%3E%3Cpath d='M18 8L8 8L7.99999 40L40 40L40 30L48 30L48 48L-8.39259e-06 48L0 0L18 3.14722e-06L18 8Z' fill='%23333333'/%3E%3C/svg%3E"); --discord-svg: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.7598 7.98158C23.1426 7.24037 21.4243 6.70131 19.6185 6.38461C19.5848 6.38461 19.5511 6.38461 19.5376 6.42504C19.3153 6.82259 19.0659 7.3347 18.8975 7.739C16.9434 7.44925 15.023 7.44925 13.1228 7.739C12.9476 7.32123 12.6983 6.81586 12.4489 6.42504C12.4287 6.39808 12.4018 6.37787 12.3681 6.38461C10.8183 6.69457 8.83722 7.26058 7.24699 7.98158C7.23351 7.98158 7.22004 7.99506 7.2133 8.00853C3.91154 12.9275 3.03556 17.6443 3.50724 22.3611C3.50724 22.3813 3.52072 22.4082 3.54093 22.4285C5.69718 24.0187 7.78605 24.989 9.84797 25.6157C9.88166 25.6157 9.91535 25.6157 9.93556 25.5887C10.4207 24.9284 10.852 24.2276 11.2293 23.4864C11.2495 23.4459 11.2293 23.392 11.1821 23.3785C10.5083 23.109 9.83449 22.7991 9.20783 22.4352C9.16066 22.4082 9.15392 22.3341 9.20783 22.3004C9.34259 22.1994 9.47736 22.0983 9.59865 21.9972C9.61886 21.977 9.65256 21.977 9.67951 21.9837C13.8168 23.8704 18.3045 23.8704 22.3475 21.9837C22.3744 21.9702 22.4081 21.977 22.4283 21.9905C22.5564 22.0983 22.6844 22.1994 22.8192 22.3004C22.8663 22.3341 22.8596 22.4082 22.8192 22.4352C22.1925 22.8058 21.5389 23.109 20.8448 23.3785C20.7977 23.3988 20.7775 23.4459 20.8044 23.4931C21.1818 24.2343 21.6197 24.9284 22.0847 25.582C22.1049 25.6089 22.1386 25.6224 22.1723 25.6089C24.2342 24.9688 26.3298 24.0052 28.4928 22.4217C28.513 22.4082 28.5265 22.388 28.5265 22.3543C29.0521 16.9031 27.6438 12.1795 24.7935 8.00179C24.7935 7.98832 24.7733 7.97484 24.7598 7.97484V7.98158ZM11.8223 19.504C10.542 19.504 9.53127 18.3585 9.53127 16.9435C9.53127 15.5285 10.542 14.3829 11.8223 14.3829C13.1026 14.3829 14.1133 15.5285 14.1133 16.9435C14.1133 18.3585 13.1026 19.504 11.8223 19.504ZM20.2451 19.504C18.9649 19.504 17.9541 18.3585 17.9541 16.9435C17.9541 15.5285 18.9649 14.3829 20.2451 14.3829C21.5254 14.3829 22.5361 15.5285 22.5361 16.9435C22.5361 18.3585 21.5254 19.504 20.2451 19.504Z' fill='%23FFFFFF'/%3E%3C/svg%3E"); --burger-menu-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 18C13.1046 18 14 18.8954 14 20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20C10 18.8954 10.8954 18 12 18ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 2C13.1046 2 14 2.89543 14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2Z' fill='%23333333'/%3E%3C/svg%3E"); --long-burger-menu-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 16C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H5C4.44772 18 4 17.5523 4 17C4 16.4477 4.44772 16 5 16H19Z' fill='%23aaaaaa'/%3E%3Cpath d='M19 11C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H19Z' fill='%23aaaaaa'/%3E%3Cpath d='M19 6C19.5523 6 20 6.44772 20 7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7C4 6.44772 4.44772 6 5 6H19Z' fill='%23aaaaaa'/%3E%3C/svg%3E"); --cloud-off-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7L18 18' stroke='%23333333' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 11C4.34315 11 3 12.3431 3 14C3 15.6569 4.34315 17 6 17H14M10.2722 7.30663C10.8106 7.1083 11.3926 7 12 7C14.0325 7 15.7814 8.21286 16.5632 9.95428C16.8254 10.5385 17.3596 11 18 11C19.6569 11 21 12.3431 21 14C21 15.1104 20.3967 16.0799 19.5 16.5987' stroke='%23333333' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E"); --cloud-on-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 17L18 17.665H18L18 17ZM7.43685 9.95428L6.83017 9.68194L7.43685 9.95428ZM16.5632 9.95428L17.1698 9.68194L16.5632 9.95428ZM12 7V7.665C13.7611 7.665 15.2781 8.71533 15.9565 10.2266L16.5632 9.95428L17.1698 9.68194C16.2848 7.7104 14.304 6.335 12 6.335V7ZM18 11V11.665C19.2896 11.665 20.335 12.7104 20.335 14H21H21.665C21.665 11.9759 20.0241 10.335 18 10.335V11ZM21 14H20.335C20.335 15.2896 19.2896 16.335 18 16.335L18 17L18 17.665C20.0241 17.665 21.665 16.0241 21.665 14H21ZM18 17V16.335H6V17V17.665H18V17ZM6 17V16.335C4.71042 16.335 3.665 15.2896 3.665 14H3H2.335C2.335 16.0241 3.97588 17.665 6 17.665V17ZM3 14H3.665C3.665 12.7104 4.71042 11.665 6 11.665V11V10.335C3.97588 10.335 2.335 11.9759 2.335 14H3ZM7.43685 9.95428L8.04353 10.2266C8.72194 8.71533 10.2389 7.665 12 7.665V7V6.335C9.69604 6.335 7.7152 7.7104 6.83017 9.68194L7.43685 9.95428ZM6 11V11.665C6.97998 11.665 7.70994 10.9697 8.04353 10.2266L7.43685 9.95428L6.83017 9.68194C6.63925 10.1073 6.30076 10.335 6 10.335V11ZM16.5632 9.95428L15.9565 10.2266C16.2901 10.9697 17.02 11.665 18 11.665V11V10.335C17.6992 10.335 17.3608 10.1073 17.1698 9.68194L16.5632 9.95428Z' fill='%23ffffff'/%3E%3C/svg%3E"); --setting-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4418 5C12.5971 5 12.675 4.99994 12.7417 5.01025C13.0866 5.06383 13.3667 5.31751 13.4543 5.6554C13.4713 5.72073 13.4791 5.79813 13.4945 5.95276C13.5237 6.24517 13.5388 6.39193 13.5706 6.48596C13.74 6.98761 14.3127 7.22484 14.7874 6.99011C14.8763 6.94611 14.9905 6.85318 15.218 6.66711C15.3387 6.56846 15.399 6.51851 15.4573 6.48425C15.758 6.30761 16.1352 6.32646 16.4169 6.5321C16.4715 6.57202 16.5271 6.62785 16.6373 6.73804L17.262 7.36267C17.3718 7.47253 17.4272 7.52784 17.467 7.58228C17.6731 7.86411 17.6919 8.24181 17.5149 8.54272C17.4807 8.60088 17.4313 8.66091 17.3329 8.78113C17.1467 9.00858 17.0539 9.12286 17.0099 9.21179C16.7747 9.6865 17.0121 10.2599 17.514 10.4294C17.608 10.4611 17.7544 10.4754 18.0464 10.5046C18.2012 10.5202 18.2792 10.5279 18.3446 10.5448C18.6822 10.6325 18.9361 10.9128 18.9897 11.2574C19.0001 11.3243 19 11.4024 19 11.5582V12.4418C19 12.5972 19.0001 12.675 18.9897 12.7417C18.9362 13.0866 18.6825 13.3667 18.3446 13.4543C18.2793 13.4713 18.2019 13.4791 18.0472 13.4945C17.7548 13.5237 17.6081 13.5388 17.514 13.5706C17.0122 13.74 16.775 14.3126 17.0099 14.7874C17.0539 14.8763 17.1467 14.9905 17.3329 15.218C17.4314 15.3384 17.4806 15.3991 17.5149 15.4573C17.6917 15.7581 17.6729 16.1351 17.467 16.4169C17.4271 16.4715 17.3721 16.5272 17.262 16.6373L16.6373 17.262C16.5272 17.3721 16.4715 17.4271 16.4169 17.467C16.1351 17.6729 15.7581 17.6917 15.4573 17.5149C15.3991 17.4806 15.3384 17.4314 15.218 17.3329C14.9905 17.1467 14.8763 17.0539 14.7874 17.0099C14.3126 16.775 13.74 17.0122 13.5706 17.514C13.5388 17.6081 13.5237 17.7548 13.4945 18.0472C13.4791 18.2019 13.4713 18.2793 13.4543 18.3446C13.3667 18.6825 13.0866 18.9362 12.7417 18.9897C12.675 19.0001 12.5972 19 12.4418 19H11.5582C11.4023 19 11.3243 19.0002 11.2574 18.9897C10.9129 18.9361 10.6326 18.6829 10.5448 18.3455C10.5278 18.2799 10.5202 18.2017 10.5046 18.0464C10.4753 17.7534 10.4604 17.6065 10.4286 17.5123C10.2588 17.011 9.68623 16.7742 9.21179 17.009C9.1227 17.0532 9.00884 17.1465 8.78113 17.3329C8.66067 17.4315 8.60012 17.4806 8.54187 17.5149C8.2411 17.6917 7.86402 17.6728 7.58228 17.467C7.52763 17.4271 7.47208 17.3722 7.36182 17.262L6.73718 16.6373C6.62702 16.5272 6.57201 16.4715 6.5321 16.4169C6.32623 16.1351 6.30743 15.7581 6.48425 15.4573C6.51851 15.3991 6.56769 15.3385 6.66626 15.218C6.85217 14.9908 6.94519 14.877 6.98926 14.7882C7.22453 14.3134 6.98723 13.7399 6.48511 13.5706C6.39116 13.5389 6.24493 13.5237 5.95276 13.4945C5.79818 13.4791 5.72069 13.4721 5.6554 13.4552C5.31736 13.3676 5.06379 13.0868 5.01025 12.7417C4.99994 12.6751 5 12.5971 5 12.4418V11.5582C5 11.4025 4.99987 11.3243 5.01025 11.2574C5.0639 10.9127 5.31773 10.6325 5.6554 10.5448C5.72072 10.5279 5.79822 10.5201 5.95276 10.5046C6.24545 10.4753 6.39186 10.4604 6.48596 10.4286C6.98763 10.259 7.225 9.6864 6.99011 9.21179C6.94602 9.12279 6.85323 9.00865 6.66711 8.78113C6.56858 8.66067 6.5185 8.60097 6.48425 8.54272C6.3075 8.24206 6.32651 7.86482 6.5321 7.58313C6.57198 7.52855 6.62711 7.4728 6.73718 7.36267L7.36267 6.73718C7.47259 6.62722 7.52781 6.57197 7.58228 6.5321C7.86411 6.32595 8.24175 6.30722 8.54272 6.48425C8.60093 6.5185 8.66156 6.56771 8.78198 6.66626C9.00926 6.85226 9.12291 6.94522 9.21179 6.98926C9.68652 7.22446 10.2599 6.98706 10.4294 6.48511C10.4611 6.39109 10.4754 6.24477 10.5046 5.95276C10.5201 5.79816 10.5279 5.7207 10.5448 5.6554C10.6325 5.31766 10.9127 5.06391 11.2574 5.01025C11.3242 4.99989 11.4026 5 11.5582 5H12.4418ZM12 9.19983C10.4536 9.19983 9.19983 10.4536 9.19983 12C9.19983 13.5464 10.4536 14.8002 12 14.8002C13.5464 14.8002 14.8002 13.5464 14.8002 12C14.8002 10.4536 13.5464 9.19983 12 9.19983Z' stroke='%23333333' stroke-width='1.33'/%3E%3C/svg%3E"); --card-menu-icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='28' width='16' height='16' fill='%23A4A4A4'/%3E%3Crect x='28' y='28' width='16' height='16' fill='%23A4A4A4'/%3E%3Crect x='28' y='56' width='16' height='16' fill='%23A4A4A4'/%3E%3C/svg%3E"); --reply-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 11.5834C19.5029 12.6832 19.2459 13.7683 18.75 14.75C18.162 15.9265 17.2581 16.916 16.1395 17.6078C15.021 18.2995 13.7319 18.6662 12.4167 18.6667C11.3168 18.6696 10.2318 18.4126 9.25 17.9167L4.5 19.5L6.08333 14.75C5.58744 13.7683 5.33047 12.6832 5.33333 11.5834C5.33384 10.2682 5.70051 8.97907 6.39227 7.86048C7.08402 6.7419 8.07355 5.838 9.25 5.25002C10.2318 4.75413 11.3168 4.49716 12.4167 4.50002H12.8333C14.5703 4.59585 16.2109 5.32899 17.441 6.55907C18.671 7.78915 19.4042 9.42973 19.5 11.1667V11.5834Z' stroke='%23333333' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --view-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12.0007' cy='12.0002' r='2.83167' stroke='%23333333' stroke-width='1.33'/%3E%3Cpath d='M19.5057 11.0231C19.8615 11.4551 20.0394 11.6711 20.0394 12C20.0394 12.3289 19.8615 12.5449 19.5057 12.9769C18.2039 14.5574 15.3328 17.5 12 17.5C8.66725 17.5 5.79606 14.5574 4.49431 12.9769C4.13849 12.5449 3.96058 12.3289 3.96058 12C3.96058 11.6711 4.13849 11.4551 4.4943 11.0231C5.79606 9.44263 8.66725 6.5 12 6.5C15.3328 6.5 18.2039 9.44263 19.5057 11.0231Z' stroke='%23333333' stroke-width='1.33'/%3E%3C/svg%3E"); --view-hide-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1719 11.2007C10.0645 11.4457 10.0039 11.7159 10.0039 12.0005C10.0041 13.1031 10.8984 13.9966 12.001 13.9966C12.2853 13.9965 12.555 13.9357 12.7998 13.8286L14.0264 15.0552C13.446 15.4408 12.7501 15.6664 12.001 15.6665L11.8115 15.6616C9.93692 15.5664 8.43396 14.0636 8.33887 12.189L8.33398 12.0005C8.33398 11.2511 8.5584 10.5538 8.94434 9.97314L10.1719 11.2007ZM12.1895 8.33838C14.1268 8.43664 15.667 10.0388 15.667 12.0005L15.6621 12.189C15.6527 12.3737 15.6285 12.5545 15.5928 12.731L11.2676 8.40576C11.5045 8.35768 11.7499 8.3335 12.001 8.3335L12.1895 8.33838Z' fill='%23333333'/%3E%3Cpath d='M7.88574 8.91357C6.70983 9.77663 5.75013 10.813 5.13965 11.5542C5.04853 11.6648 4.97931 11.7496 4.92188 11.8237C4.86531 11.8968 4.83243 11.9447 4.8125 11.978C4.80711 11.9871 4.80262 11.9951 4.7998 12.0005C4.80266 12.006 4.80713 12.014 4.8125 12.0229C4.83248 12.0563 4.86536 12.1043 4.92188 12.1772C4.97932 12.2514 5.04854 12.3362 5.13965 12.4468C5.76564 13.2068 6.75777 14.2783 7.97461 15.1538C9.1981 16.034 10.5787 16.6655 12.001 16.6655C12.9855 16.6655 13.9493 16.3614 14.8555 15.8833L16.082 17.1099C14.8912 17.8127 13.5051 18.3354 12.001 18.3354C10.0909 18.3354 8.36958 17.4953 6.99902 16.5093C5.62199 15.5186 4.52638 14.3288 3.85059 13.5083C3.55529 13.1498 3.12716 12.6886 3.12695 12.0005C3.12695 11.3122 3.55523 10.8512 3.85059 10.4927C4.47529 9.73421 5.46033 8.66193 6.69336 7.72119L7.88574 8.91357ZM12.001 5.66455C13.9112 5.66455 15.6323 6.50563 17.0029 7.4917C18.38 8.4825 19.4756 9.67226 20.1514 10.4927C20.4467 10.8512 20.875 11.3122 20.875 12.0005C20.8748 12.6886 20.4467 13.1498 20.1514 13.5083C19.7063 14.0486 19.0772 14.7466 18.3076 15.4448L17.125 14.2622C17.8423 13.6185 18.4377 12.9623 18.8623 12.4468C18.9534 12.3362 19.0226 12.2514 19.0801 12.1772C19.1366 12.1043 19.1695 12.0563 19.1895 12.0229C19.1947 12.0142 19.1984 12.0059 19.2012 12.0005C19.1984 11.9951 19.1947 11.9869 19.1895 11.978C19.1695 11.9447 19.1366 11.8968 19.0801 11.8237C19.0226 11.7496 18.9534 11.6648 18.8623 11.5542C18.2364 10.7942 17.2442 9.72271 16.0273 8.84717C14.8038 7.96694 13.4234 7.33545 12.001 7.33545C11.4727 7.33545 10.9502 7.42207 10.4395 7.57666L9.1377 6.2749C10.0226 5.90391 10.9848 5.66455 12.001 5.66455Z' fill='%23333333'/%3E%3Cpath d='M6.5 4.30005L19.7 17.5' stroke='%23333333' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E"); --app-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='5.5' height='5.5' rx='0.916667' transform='matrix(1 0 0 -1 13.833 10.1667)' stroke='%23333333' stroke-width='1.67' stroke-linecap='round'/%3E%3Cpath d='M10.167 13.8333H13.8337C14.6979 13.8333 15.13 13.8333 15.3985 14.1017C15.667 14.3702 15.667 14.8023 15.667 15.6666V17.4999C15.667 18.3642 15.667 18.7963 15.3985 19.0648C15.13 19.3333 14.6979 19.3333 13.8337 19.3333H10.167V13.8333Z' stroke='%23333333' stroke-width='1.67' stroke-linecap='round'/%3E%3Cpath d='M10.167 10.1666C10.167 9.30234 10.167 8.87022 9.89851 8.60174C9.63002 8.33325 9.1979 8.33325 8.33366 8.33325H6.50033C5.63608 8.33325 5.20396 8.33325 4.93548 8.60174C4.66699 8.87022 4.66699 9.30234 4.66699 10.1666V13.8333H10.167V10.1666Z' stroke='%23333333' stroke-width='1.67' stroke-linecap='round'/%3E%3Cpath d='M10.167 19.3333H6.50033C5.63608 19.3333 5.20396 19.3333 4.93548 19.0648C4.66699 18.7963 4.66699 18.3642 4.66699 17.4999V13.8333H10.167V19.3333Z' stroke='%23333333' stroke-width='1.67' stroke-linecap='round'/%3E%3C/svg%3E"); --new-thread-icon-svg: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.6687 11.333V8.66699C2.6687 7.74455 2.66841 7.01205 2.71655 6.42285C2.76533 5.82612 2.86699 5.31731 3.10425 4.85156L3.25854 4.57617C3.64272 3.94975 4.19392 3.43995 4.85229 3.10449L5.02905 3.02149C5.44666 2.84233 5.90133 2.75849 6.42358 2.71582C7.01272 2.66769 7.74445 2.66797 8.66675 2.66797H9.16675C9.53393 2.66797 9.83165 2.96586 9.83179 3.33301C9.83179 3.70028 9.53402 3.99805 9.16675 3.99805H8.66675C7.7226 3.99805 7.05438 3.99834 6.53198 4.04102C6.14611 4.07254 5.87277 4.12568 5.65601 4.20313L5.45581 4.28906C5.01645 4.51293 4.64872 4.85345 4.39233 5.27149L4.28979 5.45508C4.16388 5.7022 4.08381 6.01663 4.04175 6.53125C3.99906 7.05373 3.99878 7.7226 3.99878 8.66699V11.333C3.99878 12.2774 3.99906 12.9463 4.04175 13.4688C4.08381 13.9833 4.16389 14.2978 4.28979 14.5449L4.39233 14.7285C4.64871 15.1465 5.01648 15.4871 5.45581 15.7109L5.65601 15.7969C5.87276 15.8743 6.14614 15.9265 6.53198 15.958C7.05439 16.0007 7.72256 16.002 8.66675 16.002H11.3337C12.2779 16.002 12.9461 16.0007 13.4685 15.958C13.9829 15.916 14.2976 15.8367 14.5447 15.7109L14.7292 15.6074C15.147 15.3511 15.4879 14.9841 15.7117 14.5449L15.7976 14.3447C15.8751 14.128 15.9272 13.8546 15.9587 13.4688C16.0014 12.9463 16.0017 12.2774 16.0017 11.333V10.833C16.0018 10.466 16.2997 10.1681 16.6667 10.168C17.0339 10.168 17.3316 10.4659 17.3318 10.833V11.333C17.3318 12.2555 17.3331 12.9879 17.2849 13.5771C17.2422 14.0993 17.1584 14.5541 16.9792 14.9717L16.8962 15.1484C16.5609 15.8066 16.0507 16.3571 15.4246 16.7412L15.1492 16.8955C14.6833 17.1329 14.1739 17.2354 13.5769 17.2842C12.9878 17.3323 12.256 17.332 11.3337 17.332H8.66675C7.74446 17.332 7.01271 17.3323 6.42358 17.2842C5.90135 17.2415 5.44665 17.1577 5.02905 16.9785L4.85229 16.8955C4.19396 16.5601 3.64271 16.0502 3.25854 15.4238L3.10425 15.1484C2.86697 14.6827 2.76534 14.1739 2.71655 13.5771C2.66841 12.9879 2.6687 12.2555 2.6687 11.333ZM13.4646 3.11328C14.4201 2.334 15.8288 2.38969 16.7195 3.28027L16.8865 3.46485C17.6141 4.35685 17.6143 5.64423 16.8865 6.53613L16.7195 6.7207L11.6726 11.7686C11.1373 12.3039 10.4624 12.6746 9.72827 12.8408L9.41089 12.8994L7.59351 13.1582C7.38637 13.1877 7.17701 13.1187 7.02905 12.9707C6.88112 12.8227 6.81199 12.6134 6.84155 12.4063L7.10132 10.5898L7.15991 10.2715C7.3262 9.53749 7.69692 8.86241 8.23218 8.32715L13.2791 3.28027L13.4646 3.11328ZM15.7791 4.2207C15.3753 3.81702 14.7366 3.79124 14.3035 4.14453L14.2195 4.2207L9.17261 9.26856C8.81541 9.62578 8.56774 10.0756 8.45679 10.5654L8.41772 10.7773L8.28296 11.7158L9.22241 11.582L9.43433 11.543C9.92426 11.432 10.3749 11.1844 10.7322 10.8271L15.7791 5.78027L15.8552 5.69629C16.185 5.29194 16.1852 4.708 15.8552 4.30371L15.7791 4.2207Z' fill='%234a90e2'/%3E%3C/svg%3E"); --heart-plus-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5V19M5 12H19' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); --heart-minus-icon-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); /* ============================================ 디자인 팔레트 - 텍스트 색상 ============================================ */ --text-primary: #333333; --text-primary-opacity-50: #00000080; --text-primary-dark: #222222; --text-secondary: #333333; --text-tertiary: #666666; --text-quaternary: #777777; --text-disabled: rgba(255, 255, 255, 0.3); --text-disabled-dark: rgba(0, 0, 0, 0.3); --text-heading: #222222; --text-body: #333333; --text-body-light: #666666; --text-accent: #db5875; /* ============================================ 디자인 팔레트 - 버튼 색상 ============================================ */ --topNav-button-text-default: #dddddd; --topNav-button-text-active: #4b91ff; --topNav-button-text-hover: #cccccc; --topNav-button-text-disabled: #eeeeee; --topNav-button-background-default: transparent; --topNav-button-background-hover: rgba(0, 0, 0, 0.1); --topNav-button-background-active: transparent; --topNav-button-shadow-active: 0 0 0.6vh #0431fb33; /* ============================================ 디자인 팔레트 - 배경 색상 ============================================ */ --background-overlay: rgba(0, 0, 0, 0.05); --background-overlay-hover: rgba(0, 0, 0, 0.1); --background-card: #ffffff; --background-card-hover: #f4f4f4; --background-input: #f1f1f1; --background-light: rgba(255, 255, 255, 0.8); --background-dark: #1f1f1f; } * { -webkit-tap-highlight-color: transparent; } input:focus { outline: none; } #ld-body { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(var(--theme-primary), var(--theme-primary-dark)); display: flex; justify-content: center; align-items: center; z-index: 999; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } #ld-canvas { display: none; position: absolute; filter: blur(1px); } #ld-allContainer { position: relative; display: flex; justify-items: center; flex-flow: column; width: 100%; height: 100%; align-items: center; opacity: 0; transition: opacity 0.3s ease-in; } #ld-landingText { width: 40vh; justify-items: center; white-space: nowrap; font-family: 'Caveat'; text-align: center; font-size: 3.4vh; color: var(--text-primary); position: absolute; top: 48vh; transform: translate(0, -50%); } #ld-landingText p { font-size: 7.2vh; margin: 0; } #ld-logo { position: absolute; left: 2vh; top: 2vh; width: 4vh; height: 2.4vh; background-color: var(--ld-header-color); mask-image: var(--logo-svg); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-image: var(--logo-svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } #ld-titleText { display: flex; position: absolute; left: 6vh; top: 2vh; height: 2.4vh; font-family: 'Bungee'; font-size: 2vh; align-items: center; justify-content: center; color: var(--ld-header-color); } #ld-text-container { font-family: 'Caveat'; font-size: 3.6vh; color: var(--text-primary); text-align: center; font-weight: bold; font-style: normal; z-index: 10; background-color: transparent; border: 3px solid var(--text-primary); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; display: flex; justify-content: center; align-items: center; cursor: pointer; width: 24vh; height: 8vh; position: absolute; top: 60vh; padding: 12px 30px; transition: all 0.2s ease-in-out; } #ld-text-container:hover { color: var(--text-body-light); background-color: var(--text-primary); border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; transform: scale(1.05); } #ld-text-container:active { transform: scale(0.95); } #ld-landingImage { position: absolute; width: 480px; background-color: transparent; top: 50%; transform: translate(0%, -50%); } @keyframes framePulse { 0% { transform: scale(0.95); } 70% { transform: scale(1); } 100% { transform: scale(0.95); } } ::-webkit-scrollbar { width: 0; height: 12px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; } ::-webkit-scrollbar-thumb:hover { background: #555; } .no-scroll { overflow-y: hidden; } body.no-scroll { padding-right: 12px; } .dummy-scrollbar { position: fixed; right: 0; top: 0; width: 0px; height: 100%; background-color: #f1f1f1; z-index: 1000; } body, html { margin: 0; padding: 0; height: 100%; overflow-x: hidden; font-family: "Asta Sans", sans-serif; } #header { position: fixed; top: 0; left: 0; width: 100%; height: 5vh; background: rgba(233, 233, 233, 0.2); color: var(--text-primary); display: flex; align-items: center; justify-content: center; z-index: 1003; backdrop-filter: blur(0.4vh); border-bottom: 1px solid rgba(0, 0, 0, 0.1); user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } #headerLogo { position: absolute; left: 2vh; width: 4vh; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; } #headerLogo::before { content: ''; width: 3vh; height: 3vh; background-image: var(--long-burger-menu-icon-svg); background-size: contain; background-repeat: no-repeat; background-position: center; } #langSelector { position: absolute; right: 2vh; display: flex; gap: 1.5vh; align-items: center; font-family: "Asta Sans", sans-serif; } .lang-toggle { display: flex; gap: 1.5vh; font-family: "Asta Sans", sans-serif; } .lang-toggle span { cursor: pointer; font-weight: 500; color: #999; transition: all 0.3s; position: relative; font-size: 1.4vh; padding-bottom: 0.3vh; } .lang-toggle span:hover { color: #666; } .lang-toggle span.active { color: var(--theme-positive-blue); font-weight: bold; } .lang-toggle span.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.2vh; background: var(--theme-positive-blue); border-radius: 0.1vh; } .toggle-switch { position: relative; width: 6vh; height: 3vh; background: rgba(128, 128, 128, 0.1); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 1.5vh; box-shadow: inset 0 0.1vh 0.2vh rgba(0, 0, 0, 0.1); cursor: pointer; } .toggle-switch::after { content: ""; position: absolute; top: 0.3vh; left: 0.4vh; width: 2.4vh; height: 2.4vh; background: white; border-radius: 50%; box-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.2); transition: 0.3s; } .toggle-switch.active { background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.2); } .toggle-switch.active::after { background: rgba(255, 255, 255, 0.7); left: calc(100% - 2.8vh); } #sections { top: 0; width: 100vw; position: relative; overflow-x: hidden; } #defaultSection { display: block; background-color: #fff; margin: 0 auto; z-index: 1; padding: 0; } #editorSection { display: none; width: 100%; background-color: #fffffe; z-index: 2; justify-items: center; justify-content: center; overflow-y: hidden; height: 100vh; } #editorHeader { display: flex; flex-direction: column; width: 100%; height: 13vh; top: 0; background-color: var(--theme-primary); border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: fixed; justify-content: end; z-index: 1000; } #project-info { width: 100%; align-items: center; justify-content: end; height: 2vh; padding: 0 2vh; padding-right: 8vh; background-color: transparent; color: var(--text-primary-opacity-50); font-size: 1.1vh; display: flex; gap: 1.5vh; } #project-info-details { display: flex; gap: 1.5vh; } /* Editor Tabs Styles */ #editor-tabs-container { display: flex; align-items: flex-end; height: 2.4vh; padding: 0 1vh; overflow-x: auto; overflow-y: hidden; } #editor-tabs-container::-webkit-scrollbar { height: 4px; } #editor-tabs-container::-webkit-scrollbar-track { background: transparent; } #editor-tabs-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; } #editor-tabs-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } .editor-tabs-list { display: flex; height: 100%; gap: 0.4vh; } .editor-tab { display: flex; align-items: center; gap: 1vh; min-width: 4vh; width: fit-content; height: 100%; padding: 0 1vh; padding-right: 2vh; border: 1px solid #ddd; border-radius: 0.8vh 0.8vh 0 0; border-bottom: none; background-color: #eee; color: var(--text-body-light); font-size: 1.2vh; cursor: pointer; transition: background-color 0.2s; user-select: none; position: relative; opacity: 0.5; } /* 실행 탭 스타일 */ .editor-tab.run-tab { padding-right: 1vh; text-align: center; background-color: #e3eeff !important; color: var(--theme-positive-blue); } .editor-tab.run-tab.active { background-color: #e3eeff !important; color: var(--theme-positive-blue); } .editor-tab:hover:not(.active) { opacity: 0.7; } .editor-tab.active { opacity: 1; background-color: #fff; color: var(--theme-positive-blue); } .tab-title { display: flex; align-items: center; justify-content: center; flex: 1; height: 2vh; margin-bottom: 0.4vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab-dirty-indicator { display: none; position: absolute; padding: 0; right: 0; width: 2vh; height: 100%; font-size: 1vh; text-align: center; line-height: 2; color: inherit; } .editor-tab.dirty .tab-dirty-indicator { display: inline; } .tab-close-btn { position: absolute; display: none; right: 0; width: 2vh; height: 100%; padding: 0; border: none; background: transparent; color: inherit; font-size: 2vh; line-height: 1; cursor: pointer; transition: opacity 0.2s; } .tab-close-btn:hover { opacity: 1; } .editor-tab:hover .tab-close-btn { display: block; } .editor-tab:hover .tab-dirty-indicator { display: none !important; } /* 실행 탭은 닫기 버튼 없음 */ .editor-tab.run-tab .tab-close-btn { display: none !important; } #editorHeaderBtnBox { display: flex; height: 4.2vh; background-color: #fff; align-items: center; gap: 1vh; margin-left: 2vh; } #editorHeaderBtnBox * { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } /* 새로운 네비게이션 스타일 */ .editor-nav-items { font-size: 12px; display: flex; gap: 0; height: 4.2vh; align-items: center; } .editor-nav-item { padding: 0 1vh; cursor: pointer; transition: background-color 0.2s; position: relative; color: var(--text-primary-opacity-50); font-family: 'Bungee'; font-size: 1.2vh; height: 2.2vh; display: flex; align-items: center; border-left: 1px solid rgb(0 0 0 / 20%); } /* 드롭다운 메뉴 */ .editor-nav-dropdown { position: absolute; top: 100%; left: 0; width: max-content; color: var(--text-body); font-family: auto; background-color: var(--background-card); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3); z-index: 1001; display: none; border: 1px solid var(--text-secondary); } .editor-nav-dropdown-item { padding: 8px 12px; padding-right: 24px; cursor: pointer; display: flex; align-items: center; transition: background-color 0.2s; gap: 4px; } .editor-nav-dropdown-item.with-icon::before { content: ""; width: 16px; height: 16px; background-image: var(--save-icon-svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .editor-nav-dropdown-item.with-icon.app-icon::before { background-image: var(--app-icon-svg); } .editor-nav-dropdown-item:hover { background-color: var(--background-card-hover); } .editor-nav-dropdown-separator { height: 1px; background-color: var(--text-secondary); margin: 0; } .editor-nav-item.active .editor-nav-dropdown { display: block; } /* 서브메뉴 스타일 */ .editor-nav-dropdown-item.has-submenu { position: relative; justify-content: space-between; } .editor-nav-dropdown-item.has-submenu::after { position: absolute; content: "▶"; font-size: 8px; right: 8px; } .editor-nav-submenu { position: absolute; top: 0; left: 100%; width: max-content; color: var(--text-body); font-family: auto; background-color: var(--background-card); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3); z-index: 1002; display: none; border: 1px solid var(--text-secondary); margin-left: 0; } .editor-nav-dropdown-item:hover .editor-nav-submenu { display: block; } /* 서브메뉴와 부모 항목 사이의 gap을 채우기 위한 브릿지 영역 */ .editor-nav-dropdown-item.has-submenu::before { content: ""; position: absolute; top: 0; right: -10px; width: 10px; height: 100%; z-index: 1003; } .editor-nav-submenu-item { padding: 8px 16px; cursor: pointer; display: flex; align-items: center; transition: background-color 0.2s; } .editor-nav-submenu-item:hover { background-color: var(--background-card-hover); } .editor-nav-submenu-item.active { color: var(--theme-positive-blue); font-weight: bold; } /* 실행 바로가기 버튼 스타일 */ #run-new-window-btn { height: 3.2vh; background-color: transparent; border: none; margin: 0; font-family: 'Bungee'; font-size: 1.4vh; color: var(--text-primary); display: flex; align-items: center; gap: 0.5vh; padding: 0 1vh; } #run-new-window-btn::before { content: ""; width: 1.6vh; height: 1.6vh; background-image: var(--play-icon-svg); background-size: contain; background-repeat: no-repeat; background-position: center; } #editorBox { position: fixed; width: 98%; height: 87vh; border: none; display: block; top: 13vh; } #chatSection { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); display: none; justify-content: center; align-items: center; z-index: 1005; gap: 0; } #chatSection.active { display: flex; } .chatClose-button { display: block; position: absolute; padding: 0; margin: 0; top: 6vh; right: 1vh; text-align: center; width: 6vh; height: 6vh; cursor: pointer; z-index: 1001; background-color: #fff; border-radius: 4vh; box-shadow: 0 0.2vh 0.6vh rgba(0, 0, 0, 0.3); } .chatClose-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--chat-close-icon-svg); background-size: 78%; background-repeat: no-repeat; background-position: center; } #mainSectionTopNav { width: 100vw; height: 9vh; display: flex; justify-content: center; align-items: end; background: var(--theme-primary); border-bottom: 1px solid rgba(0, 0, 0, 0.1); user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } #pagesComp { display: flex; width: fit-content; margin: 0 auto; padding-bottom: 0.6vh; } .section-button { font-family: "Bungee", sans-serif; font-size: 1.6vh; text-align: center; width: auto; height: 2.4vh; flex: 1; padding: 0; margin: 0 2vh; background: var(--topNav-button-background-default); color: var(--topNav-button-text-default); border: none; cursor: pointer; line-height: 0; transition: color 0.2s ease, text-shadow 0.2s ease; } .section-button:hover { color: var(--topNav-button-text-hover); } .section-button.active { color: var(--topNav-button-text-active); text-shadow: var(--topNav-button-shadow-active); } .section-button:disabled { color: var(--topNav-button-text-disabled); cursor: not-allowed; } button { cursor: pointer; } #headerImage { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); height: 25px; width: auto; cursor: pointer; } #explore { display: flex; } #community { min-width: 0; } #project { min-width: 0; } #communityDiv { display: flex; flex-direction: column; align-items: center; width: 100%; height: auto; } #trendingDiv, #topTrendingList { display: grid; grid-template-columns: repeat(auto-fit, 14vh); width: 100%; gap: 2vh; row-gap: 4vh; padding: 1vh 5vh; box-sizing: border-box; overflow: hidden; white-space: nowrap; justify-content: center; justify-items: center; margin-bottom: 6vh; } /* 화면이 넓을 때 최대 7열까지만 표시 (14vh * 7 + gap * 6 + padding) */ @media (min-width: 120vh) { #trendingDiv, #topTrendingList, .explore-cards-container { grid-template-columns: repeat(6, 14vh); } } .pagination-button { padding: 0.8vh 1vh; font-size: 2vh; font-family: 'Caveat'; font-weight: normal; background: var(--theme-primary-dark); border: none; border-radius: 0.5vh; cursor: pointer; color: var(--text-primary); transition: background 0.2s, opacity 0.2s; } .pagination-button:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-button.active { color: var(--theme-positive-blue); font-weight: bold; } .pagination-button.prev-button, .pagination-button.next-button { width: 3.2vh; height: 3.2vh; padding: 0; background-size: 60%; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; } .pagination-button.prev-button { background-image: var(--chevron-left-svg); } .pagination-button.next-button { background-image: var(--chevron-right-svg); } #trendingSearchInput:focus { outline: 2px solid var(--theme-positive-blue); outline-offset: -2px; } /* --- NEW STYLES for myProject Card --- */ /* Hide elements not used in the new layout */ .card.myProject .cardMain, .card.myProject .cardProfile, .card.myProject .nameBG, .card.localProject .cardMain, .card.localProject .cardProfile, .card.localProject .nameBG { display: none !important; } /* Heart Section */ .heart-section { position: relative; display: flex; align-items: center; gap: 0.4vh; } .heart-icon-button { background: none; border: none; padding: 0; margin: 0; display: flex; align-items: center; cursor: pointer; width: 2.4vh; height: 2.4vh; justify-content: center; position: relative; } .heart-icon-button { background-image: var(--like-icon-svg); background-position: center; background-size: contain; background-repeat: no-repeat; } .heart-icon-button svg { display: none; } .heart-count { font-family: "Caveat", sans-serif; font-size: 1.8vh; font-weight: 500; color: var(--text-secondary); width: 3vh; min-width: 3vh; max-width: 3vh; text-align: start; line-height: 2.4vh; } .heart-bubble-container { position: absolute; left: 0.4vh; top: 7vh; transform: translateY(-50%); display: flex; flex-direction: column; width: fit-content; align-items: center; gap: 0.4vh; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 10; white-space: nowrap; } .heart-section.active .heart-bubble-container { opacity: 1; visibility: visible; pointer-events: all; } .heart-bubble-up, .heart-bubble-down { width: 3.2vh; height: 3.2vh; border-radius: 50%; background: white; border: 1px solid #ddd; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.2s; transform: scale(0); background-image: var(--heart-plus-icon-svg); background-position: center; background-size: 60%; background-repeat: no-repeat; } .heart-bubble-down { background-image: var(--heart-minus-icon-svg); } .heart-section.active .heart-bubble-up, .heart-section.active .heart-bubble-down { transform: scale(1); } .heart-section.active .heart-bubble-up { transition-delay: 0.1s; } .heart-section.active .heart-bubble-down { transition-delay: 0.15s; } .heart-bubble-up:hover { background: #f0f0f0; border-color: #db5875; transform: scale(1.1); } .heart-bubble-down:hover { background: #f0f0f0; border-color: #999; transform: scale(1.1); } .heart-bubble-up:disabled, .heart-bubble-down:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .heart-bubble-up:disabled:hover, .heart-bubble-down:disabled:hover { transform: scale(1); background: white; border-color: #ddd; } /* Like Section */ .myProject-like-section { display: flex; align-items: center; gap: 0.8vh; height: 2.4vh; } .myProject-like-section .like-icon { background: none; border: none; padding: 0; margin: 0; display: flex; align-items: center; cursor: pointer; width: 2.4vh; /* Match reference icon area */ height: 2.4vh; justify-content: center; } .myProject-like-section .like-icon { background-image: var(--like-icon-svg); background-position: center; background-size: contain; background-repeat: no-repeat; } .myProject-like-section .like-icon svg { display: none; } .myProject-like-section .like-count { font-size: 1.4vh; font-weight: 500; color: var(--text-secondary); width: 3vh; min-width: 3vh; max-width: 3vh; text-align: center; line-height: 2.4vh; background-color: var(--background-overlay); border-radius: 0.4vh; padding: 0 0.5vh; } /* Optional animation for like */ .myProject-like-section.liked-animation .like-icon { animation: likePulse 0.3s ease-in-out; } @keyframes likePulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* Name Section */ .myProject-visibility-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.2vh; height: 2.2vh; pointer-events: none; } .myProject-visibility-icon.is-public { color: var(--theme-primary-light, #888); opacity: 0.55; } .myProject-visibility-icon.is-private { color: var(--text-quaternary, #aaa); opacity: 0.45; } .myProject-name-section { flex-grow: 1; /* Take remaining space */ display: flex; flex-direction: column; /* Stack name and date */ justify-content: center; align-items: flex-start; overflow: hidden; /* Prevent long names from breaking layout */ height: 100%; } .myProject-name-section .projectName { font-size: 1.6vh; /* Slightly larger name */ font-weight: 500; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .myProject-name-section .projectDate { font-size: 1.1vh; /* Smaller date */ color: var(--text-quaternary); } /* Burger Menu Section */ .myProject-burger-section { position: relative; /* For popup positioning */ display: flex; align-items: center; justify-content: center; /* Adjust width */ height: 100%; } .myProject-burger-section .burger-menu-btn { background: none; border: none; padding: 0.5vh; margin: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0.4vh; transition: background-color 0.2s; width: 4vh; height: 4vh; } .myProject-burger-section .burger-menu-btn:hover { background-color: var(--background-overlay-hover); } .myProject-burger-section .burger-menu-btn::before { content: ''; display: block; width: 1.6vh; height: 1.6vh; background-image: var(--burger-menu-icon-svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .myProject-burger-section .burger-menu-btn svg { display: none; } /* Burger Popup */ .burger-popup { position: absolute; top: 50%; /* Position below the button */ right: 75%; /* Align to the right */ background-color: var(--background-card); border-radius: 0.6vh; box-shadow: 0 0.2vh 1vh rgba(0, 0, 0, 0.2); padding: 0.8vh 0; display: flex; flex-direction: column; z-index: 10; /* Ensure it's above other elements */ min-width: 12vh; /* Minimum width */ transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; transform-origin: top right; opacity: 1; transform: scale(1); } .burger-popup.hidden { opacity: 0; transform: scale(0.95); pointer-events: none; /* Disable interaction when hidden */ } .burger-popup button { background: none; border: none; padding: 0.8vh 1.5vh; text-align: left; font-size: 1.4vh; color: var(--text-body); cursor: pointer; transition: background-color 0.2s; } .burger-popup button:hover { background-color: var(--background-card-hover); } /* Edit Section */ .myProject-edit-section { display: flex; align-items: center; justify-content: center; margin-right: 0.5vh; /* width: 5.6vh; /* Match reference width */ /* height: 2.6vh; /* Match reference height */ } .myProject-edit-section .edit-project-btn { background-color: transparent; border: none; border-radius: 0.4vh; padding: 0; margin: 0; width: 6vh; height: 4vh; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; } .myProject-edit-section .edit-project-btn:hover { background-color: rgba(0, 0, 0, 0.1); } .myProject-edit-section .edit-project-btn svg { width: 1.8vh; /* Adjust icon size */ height: 1.8vh; stroke: #333; /* Icon color */ } /* Card Actions Container */ .card-actions-container { display: flex; align-items: center; gap: 3vh; height: 100%; margin-right: 2vh; } .card-actions-group-1, .card-actions-group-2 { display: flex; align-items: center; } .card-action-clone-btn, .card-action-copy-link-btn, .card-action-delete-btn, .card-action-edit-btn, .card-action-play-btn, .card-action-reply-btn, .card-action-toggle-public-btn { width: 4vh; height: 4vh; background: none; border: none; padding: 0; margin: 0; cursor: pointer; border-radius: 0.8vh; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; background-size: 60%; background-repeat: no-repeat; background-position: center; } .card-action-clone-btn { background-image: var(--clone-icon-svg); } .card-action-copy-link-btn { background-image: var(--copy-link-icon-svg); } .card-action-delete-btn { background-image: var(--delete-icon-svg); } .card-action-edit-btn { background-image: var(--edit-icon-svg); } .card-action-reply-btn { background-image: var(--reply-icon-svg); } .card-action-play-btn { background-image: var(--play-icon-svg); } .card-action-toggle-public-btn[data-is-public="true"] { background-image: var(--view-icon-svg); } .card-action-toggle-public-btn[data-is-public="false"] { background-image: var(--view-hide-icon-svg); } .card-action-clone-btn:hover, .card-action-copy-link-btn:hover, .card-action-delete-btn:hover, .card-action-edit-btn:hover, .card-action-play-btn:hover, .card-action-reply-btn:hover, .card-action-toggle-public-btn:hover { background-color: rgba(0, 0, 0, 0.05); } /* --- PROJECT TOGGLE STYLES --- */ .project-toggle-container { display: flex; justify-content: end; align-items: center; margin-bottom: 2vh; width: 92%; gap: 2vh; flex-wrap: wrap; margin-top: -4vh; } .project-toggle-button { position: relative; width: 11vh; height: 5vh; background: #f0f0f0; border-radius: 1.5vh; cursor: pointer; box-shadow: inset 0 0.3vh 0.6vh rgba(0, 0, 0, 0.15); transition: all 0.3s ease; border: none; padding: 0.5vh; display: flex; align-items: center; justify-content: center; } .project-toggle-button.active { background: var(--theme-positive-blue); } .project-icon-background { position: absolute; display: flex; justify-content: center; align-items: center; z-index: 1; transition: opacity 0.3s ease; width: 3.5vh; height: 3.5vh; } .project-icon-background::before { content: ''; width: 100%; height: 100%; background-image: var(--cloud-off-icon-svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .project-toggle-button.active .project-icon-background::before { background-image: var(--cloud-on-icon-svg); } .project-toggle-slider { position: absolute; left: 0.5vh; width: 2.5vh; height: 4vh; background: rgba(255, 255, 255, 0.85); border-radius: 1.5vh; transition: transform 0.3s ease; z-index: 2; box-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.15); backdrop-filter: blur(0.3vh); } .project-toggle-button.active .project-toggle-slider { transform: translateX(calc(11vh - 2.5vh - 1vh)); } .project-container { display: none; width: 100%; } .project-container.active { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1.5vh !important; width: 92% !important; margin-bottom: 2vh !important; padding-bottom: 4vh !important; overflow: visible; } /* --- LOCAL PROJECT STYLES --- */ .local-project-controls { position: relative; display: inline-block; } .local-setting-btn { width: 4vh; height: 4vh; background-color: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0.5vh; transition: background-color 0.2s ease; } .local-setting-btn::before { content: ''; width: 3vh; height: 3vh; background-image: var(--setting-icon-svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .local-setting-btn:hover { background-color: rgba(0, 0, 0, 0.05); } .local-settings-popup { display: none; position: absolute; right: 0; top: calc(100% + 1vh); background-color: #fff; border-radius: 1vh; box-shadow: 0 0.4vh 1.2vh rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 15vh; overflow: hidden; } .local-settings-popup.show { display: block; } .local-settings-popup button { width: 100%; padding: 1.5vh 2vh; background-color: transparent; border: none; text-align: left; font-size: 1.6vh; color: #333; cursor: pointer; transition: background-color 0.2s ease; display: block; } .local-settings-popup button:hover { background-color: #f5f5f5; } .local-settings-popup button:not(:last-child) { border-bottom: 1px solid #eee; } /* Local Project에서 제외할 요소들 (좋아요, 링크복사 관련) */ .card.localProject .myProject-like-section { display: none !important; } /* Original Card Styles (ensure they don't conflict heavily) */ .card { /* Keep base card styles for non-myProject cards */ width: 14vh; height: 20vh; display: flex; flex-direction: column; gap: 0.2vh; overflow: visible; } .cardMain { width: 100%; height: 12vh; position: relative; background: #fff; border: 2px solid rgba(0, 0, 0, 0.22); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; box-shadow: none; overflow: visible; } .cardMainImgClip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; } .card-private-badge { position: absolute; bottom: 0.6vh; left: 0.6vh; width: 3vh; height: 3vh; background-image: var(--view-hide-icon-svg); background-size: 70%; background-repeat: no-repeat; background-position: center; background-color: rgba(255, 255, 255, 0.88); border-radius: 0.4vh; z-index: 2; pointer-events: none; } .cardMain:hover { border-color: rgba(0, 0, 0, 0.35); box-shadow: 0 0.4vh 1.2vh rgba(0, 0, 0, 0.3); transition: border-color 0.3s; cursor: pointer; } .cardMainImg { width: 100%; height: 100%; border-radius: 2vh; position: absolute; inset: 0; background-image: var(--card-main-img-svg); background-size: 36%; background-repeat: no-repeat; background-position: center center; } .cardProfile { display: flex; width: 100%; height: 3.2vh; flex-direction: row; gap: 0 0.6vh; align-items: center; margin-top: 3.6vh; } .cardProfileImg { height: 2.4vh; width: 2.4vh; background-repeat: no-repeat; background-size: cover; border-radius: 1.5vh; } .cardProfileText { width: 8vh; font-size: 1.2vh; font-weight: 400; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-content: center; justify-items: center; text-align: start; } .card-follow-btn { margin-left: auto; font-size: 1.1vh; padding: 0.3vh 0.8vh; border-radius: 0.4vh; border: 1px solid rgba(0, 0, 0, 0.15); background: rgba(255, 255, 255, 0.9); color: #333; cursor: pointer; white-space: nowrap; } .card-follow-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); } .card-follow-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* cardMain 위에 올라가는 Follow 버튼 (우상단, ⋮ 메뉴 왼쪽에 배치) */ .openNewWindow, .like, .delete, .copy-link { position: absolute; cursor: pointer; } .openNewWindow { width: 100%; height: 80%; top: 20%; border: none; background-color: transparent; } .like { width: 6vh; height: 2.4vh; top: 0.8vh; left: 0.8vh; border: none; background-image: var(--like-icon-svg); background-position: left; background-size: contain; background-repeat: no-repeat; background-color: transparent; text-align: left; padding-left: 2.8vh; font-size: 1.6vh; font-family: 'Bungee'; color: #db5875; } .delete { height: 3.6vh; width: 3.6vh; padding: 0; right: 0.4vh; top: 0.4vh; border: none; border-radius: 1.4vh; background-image: var(--close-icon-svg); background-repeat: no-repeat; background-size: 60%; background-position: center; background-color: rgba(255, 255, 255, 0.8); font-size: 0; } .copy-link { background-image: var(--copy-link-icon-svg); background-color: transparent; background-repeat: no-repeat; background-size: 80%; background-position: center; border: none; width: 4vh; height: 4vh; bottom: 0; right: 0; padding: 0; } .cardMain-play-btn { position: absolute; right: 0.4vh; top: 0.4vh; width: 3vh; height: 3vh; background-color: rgba(255, 255, 255, 0.85); z-index: 10; } /* 댓글 모달 스타일 */ .comments-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 10001; } .comments-modal.active { display: flex; } .comments-modal-container { position: relative; width: 90vmin; max-height: 80vh; background: #fff; border-radius: 1.5vh; box-shadow: 0 0 0.6vh rgb(0 0 0 / 50%); display: flex; flex-direction: column; overflow: hidden; } .comments-modal-header { padding: 1vh 2vh; display: flex; justify-content: space-between; align-items: center; background: var(--background-card); } .comments-modal-header-icon { width: 3vh; height: 3vh; background-image: var(--reply-icon-svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .comments-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-tertiary); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; } .comments-modal-close:hover { background-color: var(--background-overlay-hover); } .comments-modal-body { flex: 1; overflow-y: auto; padding: 1vh; display: flex; flex-direction: column; gap: 1vh; } /* MIT 라이선스 공개 확인 모달 */ .mit-license-confirm-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 10002; } .mit-license-confirm-modal.active { display: flex; } .mit-license-confirm-modal .mit-license-confirm-container { position: relative; width: 90vmin; max-width: 480px; background: var(--background-card, #fff); border-radius: 1.5vh; box-shadow: 0 0 0.6vh rgb(0 0 0 / 50%); display: flex; flex-direction: column; overflow: hidden; } .mit-license-confirm-modal .mit-license-confirm-header { padding: 1.5vh 2vh; font-weight: 600; font-size: 1.1rem; background: var(--background-card, #fff); border-bottom: 1px solid var(--border-color, #eee); } .mit-license-confirm-modal .mit-license-confirm-body { padding: 2vh; overflow-y: auto; max-height: 50vh; color: var(--text-primary, #333); line-height: 1.5; white-space: pre-line; } .mit-license-confirm-modal .mit-license-confirm-footer { padding: 1.5vh 2vh; display: flex; justify-content: flex-end; gap: 1vh; border-top: 1px solid var(--border-color, #eee); } .mit-license-confirm-modal .mit-license-confirm-footer button { padding: 0.6vh 1.5vh; border-radius: 0.5vh; font-size: 0.95rem; cursor: pointer; border: none; } .mit-license-confirm-modal .mit-license-confirm-cancel { background: var(--background-overlay-hover, #f0f0f0); color: var(--text-primary, #333); } .mit-license-confirm-modal .mit-license-confirm-public { background: var(--accent-color, #1976d2); color: #fff; } .mit-license-confirm-modal .mit-license-confirm-cancel:hover, .mit-license-confirm-modal .mit-license-confirm-public:hover { opacity: 0.9; } .comments-list { display: flex; flex-direction: column; gap: 1vh; } .comment-item { border-top: 1px solid #ddd; display: flex; align-items: start; gap: 1vh; padding: 1vh; background: transparent; transition: background-color 0.2s; } .comment-item.reply-comment { border-top: none; margin-left: 6vh; } .comment-profile-img { width: 4.8vh; height: 4.8vh; border-radius: 50%; background-size: cover; background-position: center; background-color: #e0e0e0; flex-shrink: 0; } .comment-content-wrapper { flex: 1; display: flex; flex-direction: column; gap: 0.4vh; } .comment-header { display: flex; align-items: center; gap: 1vh; } .comment-author { font-weight: 500; color: var(--text-primary); font-size: 0.95em; } .comment-date { width: 100%; font-size: 1.2vh; color: var(--text-tertiary); } .comment-text { color: var(--text-body); font-size: 1.4vh; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; } .comment-actions { display: flex; justify-content: end; width: 100%; gap: 0.4vh; } .comment-action-btn { background: none; border: none; color: var(--text-tertiary); font-family: auto; font-size: 1.2vh; cursor: pointer; padding: 0.4vh 0.8vh; border-radius: 0.4vh; transition: all 0.2s; } .comment-action-btn:hover { background: var(--background-overlay); color: var(--text-primary); } .comment-action-btn.delete-btn { color: var(--theme-negative-red); } .comment-action-btn.delete-btn:hover { background: rgba(220, 53, 69, 0.1); } .comment-form { padding: 2vh; background: var(--background-card); } .comment-input-wrapper { display: flex; gap: 12px; align-items: flex-start; } .comment-input-profile { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; background-color: #e0e0e0; flex-shrink: 0; } .comment-input-container { flex: 1; display: flex; flex-direction: column; gap: 8px; } .comment-textarea { width: 100%; min-height: 8vh; padding: 1vh; border: 1px solid #e0e0e0; border-radius: 1vh; font-family: auto; font-size: 1.4vh; resize: vertical; box-sizing: border-box; background: #fafafa; color: var(--text-primary); } .comment-textarea:focus { outline: none; border-color: var(--theme-positive-blue); } #project-detail-comment-textarea { height: 8vh; min-height: unset; resize: none; } #project-detail-comment-submit-btn, [id^="project-detail-reply-submit-btn-"] { border: 2px solid rgba(0, 0, 0, 0.72); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; } .comment-submit-btn { align-self: flex-end; height: 4vh; padding: 0 2vh; background: var(--text-body-light); color: white; border: none; border-radius: 2vh; font-size: 1.6vh; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } .comment-submit-btn:hover:not(:disabled) { background: var(--text-quaternary); } .comment-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; } .comment-reply-form { margin-top: 1vh; padding: 1vh; background: transparent; border-radius: 1vh; display: none; } .comment-reply-form.active { display: block; } .comment-empty { text-align: center; font-size: 1.6vh; padding: 4vh 2vh; color: var(--text-tertiary); } .nameBG { position: absolute; bottom: -4vh; width: 100%; height: 3.2vh; background-color: transparent; display: flex; align-items: center; justify-content: start; border-radius: 0px 0px 2vh 2vh; pointer-events: none; } .nameBox { bottom: 0; height: 100%; color: #333; font-size: 1.4vh; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-content: center; justify-items: center; text-align: center; } #postContainer { display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding-top: 3vh; width: 90%; } .postPreview { font-family: auto; width: 100%; box-sizing: border-box; padding: 2vh 3vh; margin-bottom: 2vh; border: 1px dashed rgba(0, 0, 0, 0.1); border-radius: 2vh; cursor: pointer; } .titleArea { height: 4vh; font-size: 2vh; font-weight: bold; color: #666; } .previewArea { height: 9vh; font-family: auto; font-size: 1.4vh; color: #999; margin: 0; padding: 0 1vh; } .bottomBar { height: 3vh; background-color: rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; padding: 0.5vh 1vh; margin-bottom: 1vh; color: #777; font-size: 1.4vh; border-radius: 3vh; } .image { display: flex; flex-direction: column; } .contentArea { display: flex; height: 180px; } .contentArea .previewArea { flex: 1; width: 420px; } .contentArea .imageArea { width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; } .contentArea .imageArea img { max-width: 100%; max-height: 100%; } /* Explore 탭: All / Following / Followers */ .explore-tabs { display: flex; gap: 0.6vh; padding: 1vh 8vh 0.8vh; width: 100%; flex-wrap: wrap; justify-content: center; ; } .explore-tab { font-family: "Caveat", sans-serif; font-size: 2.6vh; color: var(--text-primary-opacity-50); background: transparent; border: none; cursor: pointer; padding: 0.4vh 1.2vh; border-radius: 0.6vh; transition: color 0.2s, background 0.2s; } .explore-tab:hover { color: var(--text-primary-opacity-50, rgba(255, 255, 255, 0.8)); } .explore-tab.active { color: var(--topNav-button-text-active, #fff); background: rgba(255, 255, 255, 0.12); } /* Explore 하위 섹션: All / Following / Followers */ .explore-section { width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; } .explore-sub-title { position: relative; font-family: "Caveat", sans-serif; color: var(--text-primary-opacity-50); width: 100%; font-size: 3.2vh; text-align: left; padding: 1vh; padding-left: 8vh; display: flex; align-items: center; gap: 1vh; } /* ── Profile Projects 필터 드롭다운 ── */ .pp-filter-wrap { position: relative; display: inline-flex; align-items: center; } .pp-filter-btn { font-family: "Caveat", sans-serif; font-size: 1.6vh; color: var(--text-tertiary); background: transparent; border: none; padding: 0.3vh 1vh 0.3vh 1.2vh; height: 3.2vh; cursor: pointer; display: flex; align-items: center; gap: 0.5vh; transition: background 0.15s, border-color 0.15s; line-height: 1; } .pp-filter-btn:hover { color: var(--theme-positive-blue); } .pp-filter-arrow { width: 1.6vh; height: 1.6vh; background-image: var(--Expand_down); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.2s; opacity: 0.5; flex-shrink: 0; } .pp-filter-wrap.open .pp-filter-arrow { transform: rotate(180deg); } .pp-filter-dropdown { display: none; position: absolute; top: calc(100% + 0.6vh); left: 0; background: var(--theme-primary-dark); border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: 1.2vh; box-shadow: 0 0.6vh 1.6vh rgba(0, 0, 0, 0.12); z-index: 200; min-width: 9vh; overflow: hidden; } .pp-filter-wrap.open .pp-filter-dropdown { display: block; } .pp-filter-item { display: block; width: 100%; padding: 0.8vh 1.4vh; font-family: "Caveat", sans-serif; font-size: 1.4vh; text-align: left; background: none; border: none; cursor: pointer; color: var(--text-primary); transition: background 0.12s; white-space: nowrap; } .pp-filter-item:hover { background: var(--background-overlay-hover); } .pp-filter-item.active { color: var(--theme-positive-blue); font-weight: bold; } .explore-cards-container { display: grid; grid-template-columns: repeat(auto-fit, 14vh); width: 100%; gap: 2vh; row-gap: 4vh; padding: 1vh 6vh; box-sizing: border-box; overflow: hidden; white-space: nowrap; justify-content: center; justify-items: center; margin-bottom: 6vh; } .explore-pagination { width: 92%; padding: 2vh 1vh; display: flex; justify-content: center; align-items: center; gap: 1vh; } #topTrendingDivTitle, #trendingDivTitle, #communityDivTitle, .projectTitle { position: relative; font-family: "Caveat", sans-serif; color: var(--text-primary-opacity-50); width: 100%; font-size: 3.2vh; text-align: left; padding: 1vh; padding-left: 8vh; } #trendingSearchContainer { display: flex; position: absolute; right: 10vh; top: 1.4vh; width: 20vh; height: 3.6vh; } #trendingSearchInput { padding: 1vh; padding-right: 4vh; font-size: 1.6vh; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2vh; font-family: 'Roboto', sans-serif; width: 100%; height: 100%; box-sizing: border-box; } #trendingSearchButton { position: absolute; right: 0.4vh; top: 50%; transform: translateY(-50%); width: 3.6vh; height: 3.6vh; background: transparent; border: none; cursor: pointer; background-image: var(--search-icon-svg); background-size: 60%; background-repeat: no-repeat; background-position: center; padding: 0; opacity: 0.6; transition: opacity 0.2s; } #trendingSearchButton:hover { opacity: 1; } .trendingRow { display: flex; width: 1116px; gap: 36px; overflow: visible; white-space: nowrap; padding: 10px 10px; justify-content: left; } #allProjectDiv { display: flex; flex-direction: column; align-items: center; width: 100%; height: auto; } .subSection { width: 100%; max-width: 120vh; margin: 0 auto; flex-direction: column; min-height: 100vh; background: #fff; align-items: center; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } #chat-inputComp { position: absolute; bottom: 0; width: calc(100% - 4vh); background: linear-gradient(transparent 0%, #fff 30%); display: flex; box-sizing: border-box; padding: 0; flex-shrink: 0; height: 12vh; justify-content: center; align-items: start; } #chat-input-wrapper { display: flex; position: relative; flex-direction: column; justify-content: space-between; width: 100%; max-width: 60vh; height: 11vh; border-radius: 2vh; background-color: #fff; border: 1px solid #ddd; box-sizing: border-box; box-shadow: 0 0 0.4vh 0 rgb(0 0 0 / 10%); font-family: auto; font-size: 1.6vh; color: #333; padding: 0; resize: none; outline: none; align-items: center; } #chat-input { width: 100%; height: 7vh; border: none; box-sizing: border-box; font-family: auto; font-size: 1.6vh; line-height: 2vh; background-color: transparent; color: #333; padding: 1.5vh; padding-bottom: 0; margin: 0; align-content: center; resize: none; overflow-y: auto; outline: none; } .chat-window { position: relative; width: 100%; box-sizing: border-box; padding: 0 2vh 12vh 3vh; flex: 1; overflow-y: auto; scrollbar-width: thin; -ms-overflow-style: none; min-height: 0; } .chat-windowBG { background-image: var(--logo-svg); background-repeat: no-repeat; background-position: center calc(50% - 6vh); background-size: 6vh; filter: opacity(0); z-index: 3000; display: flex; position: absolute; height: 90%; width: 100%; top: 6vh; pointer-events: none; justify-content: center; align-items: center; } .chat-windowBG::after { content: 'make it real'; position: absolute; top: calc(50%); left: 50%; transform: translateX(-50%); font-family: 'caveat', sans-serif; font-size: 5vh; color: #333; white-space: nowrap; letter-spacing: 0.2vh; } .chat-window::-webkit-scrollbar { width: 0px; height: 0px; display: none; } .user-message, .gpt-message { margin: 1vh; } .user-message-wrapper { width: 100%; display: flex; justify-content: flex-end; } .user-message { position: relative; background-color: #e7edf5; color: #333; border-radius: 3vh 0.5vh 3vh 3vh; text-align: right; font-size: 1.6vh; line-height: 2vh; padding: 1.5vh 2vh; width: fit-content; max-width: 60%; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; } .user-message.multiline { padding-right: 5vh; } .user-message-toggle { position: absolute; top: 1vh; right: 1vh; width: 3vh; height: 3vh; background-image: var(--Expand_down); background-repeat: no-repeat; background-position: center; background-size: 2vh; cursor: pointer; transition: transform 0.3s ease; border: none; background-color: transparent; } .user-message-toggle.expanded { transform: rotate(180deg); } .user-message.collapsed { max-height: calc(2vh * 4 + 1.5vh); overflow: hidden; display: block; position: relative; } .user-message.collapsed::after { content: '...'; position: absolute; bottom: 1.5vh; right: 3vh; } .user-message-bottom-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 1vh; background-color: #e7edf5; pointer-events: none; } .gpt-message { font-size: 1.4vh; padding: 1vh; background-color: transparent; color: #333; text-align: left; } /* 마크다운 스타일 - gpt-message 내부 */ .gpt-message h1 { font-size: 2.2vh; font-weight: bold; margin: 1.5vh 0 1vh 0; padding-bottom: 0.5vh; border-bottom: 1px solid #e0e0e0; } .gpt-message h2 { font-size: 2vh; font-weight: bold; margin: 1.4vh 0 0.9vh 0; padding-bottom: 0.4vh; border-bottom: 1px solid #e8e8e8; } .gpt-message h3 { font-size: 1.8vh; font-weight: bold; margin: 1.2vh 0 0.8vh 0; } .gpt-message h4 { font-size: 1.6vh; font-weight: bold; margin: 1vh 0 0.7vh 0; } .gpt-message h5, .gpt-message h6 { font-size: 1.4vh; font-weight: bold; margin: 0.8vh 0 0.6vh 0; } .gpt-message p { margin: 0.8vh 0; line-height: 1.6; } .gpt-message ul, .gpt-message ol { margin: 0.8vh 0; padding-left: 2.5vh; line-height: 1.6; } .gpt-message li { margin: 0.4vh 0; } .gpt-message blockquote { margin: 1vh 0; padding: 0.8vh 1.2vh; border-left: 4px solid #ddd; background-color: #f9f9f9; color: #666; } .gpt-message a { color: #0066cc; text-decoration: none; } .gpt-message a:hover { text-decoration: underline; } .gpt-message strong { font-weight: bold; } .gpt-message em { font-style: italic; } .gpt-message hr { margin: 1.5vh 0; border: none; border-top: 1px solid #e0e0e0; } .gpt-message table { border-collapse: collapse; width: 100%; margin: 1vh 0; } .gpt-message table th, .gpt-message table td { border: 1px solid #ddd; padding: 0.8vh 1vh; text-align: left; } .gpt-message table th { background-color: #f5f5f5; font-weight: bold; } /* 코드 블록 스타일 */ .code-container { position: relative; background-color: transparent; margin: 10px 0; border: 1px solid #e0e0e0; border-radius: 6px; } .code-container.incomplete { border: 2px dashed #ff6b6b; } .code-header { position: sticky; background: #fff; top: 0; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-radius: 6px; } .code-header-left { display: flex; align-items: center; } .code-toggle-btn { background-color: transparent; background-image: var(--Expand_down); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; border: none; cursor: pointer; width: 24px; height: 24px; padding: 0; margin-right: 8px; transition: transform 0.3s ease; font-size: 0; } .code-toggle-btn.collapsed { transform: rotate(-90deg); } .code-toggle-btn:hover { opacity: 0.7; } .code-language { color: #333; font-weight: normal; font-size: 0.8rem; } .status-badge { padding: 2px 8px; border-radius: 3px; font-size: 0.85rem; margin-left: 10px; color: white; } .status-badge.generating { background: transparent; padding: 0; margin-left: 8px; display: inline-flex; gap: 6px; align-items: center; height: 16px; } .status-badge.generating::before, .status-badge.generating::after { content: ''; width: 8px; height: 8px; background: #666; border-radius: 50%; animation: loadingBounce 1.4s infinite ease-in-out both; } .status-badge.generating::before { animation-delay: -0.32s; } .status-badge.generating { position: relative; } .status-badge.generating>span { width: 8px; height: 8px; background: #666; border-radius: 50%; animation: loadingBounce 1.4s infinite ease-in-out both; animation-delay: -0.16s; } .status-badge.incomplete { background: #ff6b6b; } @keyframes loadingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .code-copy-btn { background-image: var(--copy-link-icon-svg); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; background-color: transparent; border: none; border-radius: 8px; cursor: pointer; width: 32px; height: 32px; padding: 0; transition: all 0.2s; font-size: 0; } .code-copy-btn:hover { background-color: transparent; } .code-content { display: block; max-height: none; transition: all 0.3s ease; } .code-content.collapsed { display: none; } .code-pre { margin: 0; background-color: #ffffff; padding: 15px; border-radius: 0 0 5px 5px; overflow-x: auto; } .code-text { color: #333; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.9rem; line-height: 1.5; } /* Prism.js 배경색 강제 오버라이드 */ :not(pre)>code[class*=language-], pre[class*=language-] { background: #fff !important; } #send-btn-wrapper { display: flex; justify-content: end; align-items: center; gap: 1vh; width: 100%; height: 3vh; padding: 0; margin: 0; box-sizing: border-box; } #codebase-tabs-dropdown { position: relative; display: flex; align-items: center; margin-bottom: 1vh; } #codebase-tabs-btn { display: flex; justify-content: space-between; align-items: center; gap: 0.6vh; max-width: 12vh; height: 3vh; border-radius: 0.6vh; border: none; background-color: transparent; color: #666; cursor: pointer; transition: all 0.2s; padding: 0 0.8vh; font-size: 1.2vh; } #codebase-tabs-btn:hover { background-color: #f8f8f8; } #codebase-tabs-selected-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } #codebase-tabs-arrow { width: 1.2vh; height: 1.2vh; flex-shrink: 0; transition: transform 0.2s; } #codebase-tabs-btn.open #codebase-tabs-arrow { transform: rotate(180deg); } .codebase-tabs-menu { position: absolute; bottom: 100%; right: 0; margin-bottom: 0.5vh; background-color: #fff; border: 1px solid #ddd; border-radius: 0.8vh; box-shadow: 0 0.4vh 1.2vh rgba(0, 0, 0, 0.15); min-width: 16vh; max-width: 20vh; max-height: 12vh; overflow-y: auto; display: none; z-index: 1000; } .codebase-tabs-menu.show { display: block; } .codebase-tab-item { padding: 0.8vh 1.2vh; cursor: pointer; font-size: 1.2vh; color: #333; border-bottom: 1px solid #f0f0f0; transition: background-color 0.15s; display: flex; align-items: center; gap: 0.8vh; } .codebase-tab-item:last-child { border-bottom: none; } .codebase-tab-item:hover { background-color: #f5f5f5; } .codebase-tab-item.active { background-color: #e8f0fe; color: #1967d2; } .codebase-tab-item-icon { width: 1.4vh; height: 1.4vh; flex-shrink: 0; } .codebase-tab-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #send-btn { display: flex; justify-content: center; align-items: center; width: 5vh; height: 3vh; margin-right: 0.6vh; margin-bottom: 1vh; border-radius: 2vh; border: none; background-color: #e7edf5; color: var(--text-body-light); font-family: 'Bungee'; cursor: pointer; transition: background-color 0.2s ease; } #send-btn:hover { background-color: #d7dfe9; } /* Analyze Button */ #analyze-btn { display: none; justify-content: center; align-items: center; width: auto; min-width: 5vh; height: 3vh; margin-right: 0.6vh; margin-bottom: 1vh; padding: 0 1.5vh; border-radius: 2vh; border: none; background-color: #007acc; color: white; font-size: 1.4vh; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; } #analyze-btn:hover:not(:disabled) { background-color: #005a9e; } #analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; } #analyze-btn.visible { display: flex; } /* Mention Tag */ .mention-tag { display: inline-block; background: #007acc; color: white; padding: 0.2vh 0.8vh; margin: 0 0.2vh; border-radius: 0.5vh; font-size: 1.4vh; font-weight: 500; cursor: default; user-select: none; vertical-align: middle; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.2s; } /* Mention Popup */ #mention-popup { position: absolute; bottom: 100%; width: 100%; height: fit-content; left: 0; right: 0; background: white; border: 1px solid #e0e0e0; border-radius: 0.8vh; overflow-y: auto; margin-bottom: 0.4vh; z-index: 1000; box-shadow: 0 0.4vh 1.6vh rgba(0, 0, 0, 0.15); display: none; } #mention-popup.visible { display: block; } .mention-item { padding: 0.5vh 1.5vh; cursor: pointer; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s; } .mention-item:last-child { border-bottom: none; } .mention-item:hover, .mention-item.selected { background: #007acc; color: white; } .mention-item .symbol-name { font-size: 1.4vh; } .mention-item .symbol-type { font-size: 1.2vh; opacity: 0.7; } /* contenteditable chat input */ #chat-input[contenteditable="true"] { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; } #chat-input[contenteditable="true"]:empty:before { content: attr(data-placeholder); color: #999; pointer-events: none; } #postPopup, #postWriteContainer { margin: 0 auto; margin-top: 3vh; flex-direction: column; width: 100%; height: 100%; background: transparent; border: none; overflow: auto; padding: 2vh 0; align-items: center; } #popupContent { width: 90%; } #postPopup h1 { color: var(--text-primary); font-size: 3vh; font-weight: bold; margin-bottom: 2vh; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; } #postPopup pre { font-family: auto; font-size: 1.4vh; color: var(--text-primary); white-space: pre-wrap; word-wrap: break-word; padding: 2vh; border-radius: 1vh; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; } #closePostPopup-button, #closePostWritePopup-button { position: fixed; z-index: 1000; top: 12vh; left: 50%; transform: translate(-50%, 0); height: 3.6vh; width: 3.6vh; padding: 0; border: none; border-radius: 1.4vh; background: #333; color: #fff; font-size: 2vh; font-family: 'Bungee'; } #chatBox { position: relative; width: calc(100% - 10vmin); max-width: 150vmin; margin-top: 12vh; height: 86vh; background: #ffffff; border: 1px solid #666; box-shadow: 0 0 0.6vh rgb(0 0 0 / 30%); border-radius: 1vh; display: flex; flex-direction: column; align-items: center; overflow: hidden; pointer-events: all; } #threadMenuBtn { position: absolute; top: 1vh; left: 1vh; width: 4vh; height: 4vh; background-color: transparent; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; transition: all 0.2s; color: #4a90e2; } #threadMenuBtn:hover { background-color: #dceffd; } #threadPanel { position: absolute; top: 0; left: 0; width: 28vh; margin-top: 5.5vh; height: 79.5vh; display: flex; flex-direction: column; background: #f1f9ff; transform: translateX(-100%); transition: transform 0.3s ease; z-index: 50; border: 1px solid #8ecfff; border-left: none; border-radius: 0 1vh 1vh 0; } #threadPanel.active { transform: translateX(0); } #threadPanelHeader { display: flex; justify-content: space-between; align-items: center; padding: 1vh 2vh; padding-bottom: 0; flex-shrink: 0; border-radius: 1vh 0 0 0; } #threadPanelHeader h3 { margin: 0; font-size: 1.8vh; color: #333; font-weight: 600; } #newThreadBtn { background-color: transparent; color: #4a90e2; width: 100%; height: 4vh; border: 0.2vh dashed #4a90e2; border-radius: 2vh; font-size: 0; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; position: relative; } #newThreadBtn::before { content: ''; width: 2.5vh; height: 2.5vh; background-color: #4a90e2; mask-image: var(--new-thread-icon-svg); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-image: var(--new-thread-icon-svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } #newThreadBtn:hover { background-color: #c3e6ff; } #threadList { flex: 1; overflow-y: auto; padding: 1vh 0; } #threadList::-webkit-scrollbar { width: 0.5vh; } #threadList::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 1vh; } .thread-item { padding: 0.8vh 1.5vh; margin: 0.5vh 1vh; background-color: transparent; color: #444; font-weight: 500; border-radius: 2vh; cursor: pointer; transition: all 0.2s; position: relative; } .thread-item:hover { background-color: #efefef; } .thread-item.active { background-color: #ceeaff; color: #005289; } .thread-item-title { font-size: 1.4vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 3vh; } .thread-item-preview { display: none; } .thread-item-time { display: none; } .thread-item-delete { position: absolute; top: 50%; transform: translate(0, -50%); right: 1vh; width: 2.5vh; height: 2.5vh; background-color: transparent; border: none; color: rgba(0, 0, 0, 0.3); font-size: 1.8vh; cursor: pointer; opacity: 0; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; border-radius: 0.3vh; } .thread-item:hover .thread-item-delete { opacity: 1; } .thread-item-delete:hover { color: #e74c3c; } #chatListMy { position: absolute; width: 90%; height: 90%; top: 50%; left: 0px; transform: translate(0%, -50%); background-color: transparent; border-left: 1px solid rgba(0, 0, 0, 0.2); } .refresh-icon-btn { width: 2.4vh; height: 2.4vh; background-image: var(--refresh-icon-svg); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent; border: none; opacity: 0.5; margin-left: 1vh; cursor: pointer; transition: opacity 0.3s, width 0.3s, height 0.3s, filter 0.3s; } .refresh-icon-btn:hover { opacity: 1; } .refresh-icon-btn.refreshing { width: 2.0vh; height: 2.0vh; filter: brightness(0) saturate(100%) invert(48%) sepia(96%) saturate(1352%) hue-rotate(195deg) brightness(102%) contrast(101%); animation: rotateRefresh 1s linear infinite; opacity: 1; } @keyframes rotateRefresh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #writePost { position: absolute; width: 3vh; height: 3vh; background-image: var(--write-icon-svg); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent; border: none; opacity: 0.5; right: 3vh; top: 50%; transform: translate(-100%, -50%); } #writeContainerComp { width: 100%; height: auto; align-items: center; } #writeContainer-title { position: relative; margin-top: 3vh; width: 80%; height: 3vh; border: 0.2vh solid #999; margin-bottom: 2vh; left: 50%; transform: translate(-50%, 0%); border-radius: 0.6vh; align-content: center; background-color: #fff; } [contenteditable] { padding-left: 0.6vh; padding-top: 0.2vh; padding-bottom: 0.2vh; } [contenteditable]:focus { outline: none !important; } #writeContainer-contents { position: relative; width: 80%; height: auto; min-height: 40vh; border: 0.2vh solid #999; left: 50%; transform: translate(-50%, 0%); border-radius: 0.6vh; background-color: #fff; } #post-btn { left: 50%; transform: translate(-50%, 0%); position: relative; height: 8vh; width: 16vh; padding: 0; top: 2vh; border: none; border-radius: 1.4vh; background: #333; color: #fff; font-size: 2vh; font-family: 'Bungee'; } #footer { width: 100%; box-sizing: border-box; min-height: 6vh; background-color: rgba(0, 0, 0, 0.5); color: #fff; display: flex; justify-content: center; align-items: center; padding: 1vh 2vh; margin-top: 4vh; } #footer>* { display: flex; align-items: center; } #joinDiscordBtn { display: flex; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; gap: 1vh; } .footer-links { display: flex; gap: 2vh; align-items: center; } .footer-link { color: #fff; text-decoration: none; font-family: "Asta Sans", sans-serif; font-size: 1.4vh; cursor: pointer; transition: opacity 0.2s; } .footer-link:hover { opacity: 0.7; } .footer-divider { color: rgba(255, 255, 255, 0.5); font-size: 1.4vh; } #footerText { margin: 0; padding: 0; font-family: "Bungee", sans-serif; font-size: 1.6vh; } #burgerMenu { width: 20vh; height: fit-content; background-color: #fff; border-radius: 1vh; position: absolute; left: 1vh; top: 6vh; display: none; flex-direction: column; align-items: center; justify-content: start; padding: 1vh 0; box-shadow: 0 0 1vh 0 #00000066; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .burgerMenuContent { display: flex; height: fit-content; width: 90%; align-items: center; justify-content: start; } .burgerMenuContent button { background-color: transparent; border: none; font-family: 'Roboto', arial, sans-serif; font-size: 1.4vh; font-weight: 500; color: #1f1f1f; width: 100%; height: 3vh; text-align: center; } .burgerDivider { width: 90%; height: 1px; background-color: rgba(0, 0, 0, 0.3); margin: 0.6vh 0; } .burger-gsi-material-button-content-wrapper { align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; height: 100%; justify-content: center; position: relative; width: 100%; } .burger-gsi-material-button-icon { height: 2.4vh; margin-right: 1vh; min-width: 2.4vh; width: 2.4vh; } .burger-gsi-material-button-contents { font-family: 'Roboto', arial, sans-serif; font-weight: 500; font-size: 1.4vh; overflow: hidden; text-overflow: ellipsis; vertical-align: top; color: #1f1f1f; } #userInfo { display: flex; flex-direction: column; width: 100%; height: fit-content; align-items: center; justify-content: center; } .userInfoComp { display: flex; align-items: center; gap: 0.6vh; width: 90%; height: 4vh; } .userInfoName { font-size: 1.6vh; font-weight: bold; color: var(--text-primary); } .userInfoEmail { font-size: 1vh; color: var(--text-primary); } .userInfoDivider { width: 100%; height: 0; background-color: transparent; margin: 1vh 0; } #userInfo button { height: 4vh; color: var(--theme-positive-blue); } #userInfo button.logout-button { background-color: #fff; border-radius: 1vh; margin: 1vh; height: 3.6vh; width: 80%; box-shadow: 0 0 0.4vh rgba(0, 0, 0, 0.3); color: var(--theme-negative-red); } #openDiscord { width: 6vh; height: 6vh; background-image: var(--discord-svg); background-repeat: no-repeat; background-size: 60%; background-position: center; background-color: transparent; border: none; } #directRunButton { position: absolute; z-index: 3000; width: 100vw; height: 100vh; padding: 0; margin: 0; border: none; font-family: 'Bungee'; font-size: 4vh; background: linear-gradient(170deg, var(--theme-primary-dark), var(--theme-primary)); color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2vh; cursor: pointer; overflow: hidden; } #directRunButton::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; z-index: -1; } #directRunButton .play-icon { width: 12vh; height: 12vh; background-image: var(--play-icon-svg); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.5; z-index: 1; } #directRunButton .play-icon:hover { opacity: 1; transform: scale(1.1); } #directRunButton .play-icon:active { opacity: 1; transform: scale(0.8); } #directRunButton .button-text { font-family: 'Caveat'; font-size: 3vh; font-weight: 200; color: var(--text-primary-opacity-50); z-index: 1; } #directRunButton .particles-canvas { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; filter: blur(1px); } /* myProject & localProject 타입 카드 통합 스타일 */ .card.myProject, .card.localProject { justify-content: flex-start; align-items: center; gap: 2vh; width: 100%; height: 6vh; flex-direction: row; background-color: #fff; padding: 0; padding-left: 2vh; } .card.myProject, .card.localProject { border: 2px solid rgba(0, 0, 0, 0.22); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; } .card.myProject:hover, .card.localProject:hover { border-color: rgba(0, 0, 0, 0.35); box-shadow: 0 0.4vh 1.2vh rgba(0, 0, 0, 0.3); transition: border-color 0.3s, box-shadow 0.3s; cursor: pointer; } /* --- EXISTING STYLES --- */ #version-popup { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); background: #ffffff; /* Changed from #fff for consistency */ color: #333; /* Darker text for better contrast */ border: 1px solid #ddd; /* Lighter border */ border-radius: 8px; /* Added rounded corners */ padding: 1.5vh; /* Increased padding */ display: none; z-index: 1010; max-height: 60vh; /* Increased max height slightly */ min-width: 25vh; /* Added minimum width */ width: fit-content; /* Adjust width to content */ overflow-y: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Softer shadow */ font-family: sans-serif; /* Use a standard sans-serif font */ } /* Version Memo Popup Styles */ #version-memo-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffff; color: #333; border: 1px solid #ddd; border-radius: 8px; display: none; z-index: 1020; width: 40vh; max-width: 90vw; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); font-family: sans-serif; } #version-memo-popup-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5vh 2vh; border-bottom: 1px solid #eee; background: #f8f9fa; border-radius: 8px 8px 0 0; } #version-memo-popup-title { font-size: 1.6vh; font-weight: bold; color: #333; } #version-memo-popup-header button { background: none; border: none; font-size: 2.2vh; cursor: pointer; color: #888; padding: 0.2vh 0.5vh; line-height: 1; transition: color 0.2s; } #version-memo-popup-header button:hover { color: #333; } /* 읽기 모드 */ #version-memo-popup-view { padding: 2vh; min-height: 10vh; max-height: 30vh; overflow-y: auto; } #version-memo-popup-text { font-size: 1.4vh; line-height: 1.6; color: #333; white-space: pre-wrap; word-break: break-word; } #version-memo-popup-text.empty { color: #999; font-style: italic; } /* 편집 모드 */ #version-memo-popup-edit { padding: 2vh; } #version-memo-popup-input { width: 100%; min-height: 15vh; padding: 1vh; border: 1px solid #ddd; border-radius: 0.5vh; font-size: 1.4vh; font-family: inherit; resize: vertical; box-sizing: border-box; line-height: 1.5; } #version-memo-popup-input:focus { outline: none; border-color: #007acc; box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1); } /* 읽기 모드 푸터 */ #version-memo-popup-footer-view, #version-memo-popup-footer-edit { display: flex; justify-content: flex-end; gap: 1vh; padding: 1.5vh 2vh; border-top: 1px solid #eee; background: #f8f9fa; border-radius: 0 0 8px 8px; } #version-memo-popup-close, #version-memo-popup-edit-btn, #version-memo-popup-cancel, #version-memo-popup-save { padding: 0.8vh 1.5vh; border: none; border-radius: 0.5vh; font-size: 1.3vh; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } #version-memo-popup-close, #version-memo-popup-cancel { background-color: #e9ecef; color: #333; } #version-memo-popup-edit-btn, #version-memo-popup-save { background-color: #007acc; color: white; } #version-memo-popup-close:hover, #version-memo-popup-edit-btn:hover, #version-memo-popup-cancel:hover, #version-memo-popup-save:hover { opacity: 0.85; } #version-memo-popup-close:active, #version-memo-popup-edit-btn:active, #version-memo-popup-cancel:active, #version-memo-popup-save:active { transform: scale(0.97); } /* Memo popup overlay */ #version-memo-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 1015; display: none; } /* Style for the close button container */ #version-popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1vh; padding-bottom: 0.8vh; border-bottom: 1px solid #eee; /* Separator line */ } #version-popup-title { font-size: 1.6vh; font-weight: bold; color: #555; } /* Close button styling */ #version-popup-header button { background: none; border: none; font-size: 2vh; cursor: pointer; color: #888; padding: 0.2vh 0.5vh; line-height: 1; } #version-popup-header button:hover { color: #333; } .version-item { display: flex; justify-content: space-between; align-items: center; padding: 0 1vh; transition: background-color 0.2s; margin-bottom: 1vh; } .version-item:last-child { border-bottom: none; margin-bottom: 0; /* Remove margin for last item */ } .version-item:hover { background-color: #f9f9f9; /* Subtle hover background */ } .version-item-info { display: flex; flex-direction: column; gap: 0.2vh; } .version-item-name { font-size: 1.4vh; color: #444; } .version-item-date { font-size: 1.1vh; color: #999; } .version-empty-state { display: flex; align-items: center; justify-content: center; padding: 3vh 1vh; font-size: 1.3vh; color: #999; text-align: center; } .version-btn-box { display: flex; align-items: center; gap: 1vh; margin-left: 1vh; } .version-btn { border: none; border-radius: 1vh; background-color: transparent; color: #333; cursor: pointer; width: 3vh; height: 3vh; font-size: 0; background-repeat: no-repeat; background-size: 80%; background-position: center; transition: background-color 0.2s; } .version-btn:hover { opacity: 0.8; transition: opacity 0.2s; } .version-btn:active { opacity: 0.6; transition: opacity 0.2s; transform: scale(0.8); } .version-btn.load-btn { background-image: var(--download-icon-svg); } .version-btn.delete-btn { background-image: var(--delete-icon-svg); } .version-btn.memo-btn { background-image: var(--memo-icon-svg); } .version-btn.memo-btn.has-memo { background-image: var(--memo-filled-icon-svg); } .version-item-memo { display: none; width: 100%; margin-top: 0.5vh; padding: 0.5vh 1vh; background-color: #f8f9fa; border-radius: 0.5vh; font-size: 1.2vh; color: #666; } .version-item-memo.visible { display: block; } .version-item-memo-text { white-space: pre-wrap; word-break: break-word; } .version-item-memo-empty { color: #aaa; font-style: italic; } .version-item-memo-input { width: 100%; min-height: 6vh; padding: 0.5vh; border: 1px solid #ddd; border-radius: 0.5vh; font-size: 1.2vh; font-family: inherit; resize: vertical; box-sizing: border-box; } .version-item-memo-input:focus { outline: none; border-color: #007acc; } .version-item-memo-actions { display: flex; justify-content: flex-end; gap: 0.5vh; margin-top: 0.5vh; } .version-memo-save-btn, .version-memo-cancel-btn { padding: 0.3vh 0.8vh; border: none; border-radius: 0.3vh; font-size: 1.1vh; cursor: pointer; transition: opacity 0.2s; } .version-memo-save-btn { background-color: #007acc; color: white; } .version-memo-cancel-btn { background-color: #ddd; color: #333; } .version-memo-save-btn:hover, .version-memo-cancel-btn:hover { opacity: 0.8; } .version-item-wrapper { display: flex; flex-direction: column; padding: 0.5vh 0; border-bottom: 1px solid #f0f0f0; } .version-item-wrapper:last-child { border-bottom: none; } /* --- END OF NEW/MODIFIED STYLES --- */ /* --- EXISTING STYLES --- */ .version-item:last-child { border-bottom: none; } /* --- END OF EXISTING STYLES TO BE REMOVED/REPLACED BY ABOVE --- */ /* Upload Section Styles */ #uploadDiv { display: flex; flex-direction: column; align-items: center; width: 100%; height: auto; } #uploadArea { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .drop-zone { width: 80%; height: 20vh; border: 0.3vh dashed var(--theme-primary-light); border-radius: 2vh; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center; margin: 2vh 0; transition: all 0.3s ease; cursor: pointer; } .drop-zone:hover, .drop-zone.dragover { border-color: #007bff; background-color: #f0f8ff; transform: scale(1.02); } .drop-zone-content { text-align: center; color: #666; } .drop-zone-content h3 { font-size: 2vh; margin: 0; margin-bottom: 2vh; color: #333; } .drop-zone-content p { font-size: 1.6vh; margin: 0; color: #777; } .upload-progress { width: 80%; max-width: 60vh; margin: 2vh 0; } .progress-bar { width: 100%; height: 2vh; background-color: #e0e0e0; border-radius: 1vh; overflow: hidden; } .progress-fill { height: 100%; background-color: #28a745; width: 0%; transition: width 0.3s ease; } .progress-text { text-align: center; margin-top: 1vh; font-size: 1.4vh; color: #666; } .upload-result { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; width: 80%; text-align: center; } .upload-result h4 { font-size: 1.6vh; font-weight: 600; margin: 0; } .upload-result p { font-size: 1.4vh; color: var(--theme-positive-blue); margin-bottom: 2vh; } .upload-result.success { background-color: transparent; color: var(--theme-positive-blue); } .upload-result.error { background-color: transparent; color: var(--theme-negative-red); } .upload-mode-selector { position: relative; display: flex; align-items: center; justify-content: end; gap: 1.5vh; width: 80%; height: 4vh; } .upload-mode-label { font-family: auto; width: 12vh; text-align: center; font-size: 1.4vh; color: var(--text-primary-opacity-50); } .upload-mode-toggle-label { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .upload-mode-toggle-checkbox { position: absolute; opacity: 0; width: 0; height: 0; } .upload-mode-toggle-track { width: 4vh; height: 1.2vh; background-color: #f0f0f0; border-radius: 0.6vh; transition: background-color 0.3s ease-in-out; position: relative; } .upload-mode-toggle-checkbox:checked~.upload-mode-toggle-track { background-color: var(--theme-positive-blue); opacity: 1; } .upload-mode-toggle-dot { position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-10%); width: 2vh; height: 2vh; background-color: #ffffff; border-radius: 50%; box-shadow: 0 0 0.4vh rgba(0, 0, 0, 0.3); transition: transform 0.3s ease-in-out; } .upload-mode-toggle-checkbox:checked~.upload-mode-toggle-dot { transform: translateY(-50%) translateX(110%); } .custom-address-input { position: absolute; width: 60%; left: 0; } .address-input-container { display: flex; width: 32vh; gap: 1vh; align-items: center; } .site-id-input { flex: 1; padding: 0 1vh; height: 3vh; border: 1px solid #ddd; border-radius: 1vh; font-size: 1.4vh; transition: border-color 0.3s ease; } .site-id-input::placeholder { color: #ddd; } .site-id-input:focus { outline: none; border-color: var(--theme-positive-blue); } .site-id-input:disabled { background-color: #f5f5f5; cursor: not-allowed; } .check-duplicate-btn { padding: 0; width: 5.4vh; height: 3vh; min-width: 3vh; background-color: #ffffff; border: none; border-radius: 1vh; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0.4vh rgba(0, 0, 0, 0.2); transition: opacity 0.3s ease, transform 0.2s ease; } .check-duplicate-btn svg { width: 80%; height: 80%; } .check-duplicate-btn:hover { opacity: 0.8; transform: scale(1.1); } .check-duplicate-btn:active { transform: scale(0.95); } .check-duplicate-btn:disabled { opacity: 0.3; cursor: not-allowed; } .check-duplicate-btn:disabled svg path { stroke: #999; } .duplicate-check-result { position: absolute; padding: 0; margin-top: 1vh; background-color: transparent; border: none; font-size: 1.3vh; text-align: center; } .duplicate-check-result.success { color: var(--theme-positive-green); } .duplicate-check-result.error { color: var(--theme-negative-red); } .drop-zone.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .uploaded-sites-list { display: flex; flex-direction: column; width: 90%; gap: 1.5vh; margin-bottom: 4vh; } .uploaded-site-item { display: flex; justify-content: space-between; align-items: center; padding: 1.5vh; background-color: #fff; border-radius: 1vh; box-shadow: 0 0.2vh 0.8vh rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s; } .uploaded-site-item:hover { box-shadow: 0 0.4vh 1.2vh rgba(0, 0, 0, 0.3); } .site-info { flex-grow: 1; } .site-name { font-size: 1.8vh; font-weight: 600; color: #333; margin-bottom: 0.5vh; } .site-url { font-size: 1.4vh; color: #666; } .site-meta { font-size: 1.2vh; color: #777; margin-top: 0.5vh; } .site-actions { display: flex; gap: 1vh; } .site-action-btn { border: none; border-radius: 0.5vh; font-size: 1.3vh; cursor: pointer; transition: background-color 0.3s; } .visit-btn { background-color: #28a745; color: white; } .visit-btn:hover { background-color: #218838; } .site-action-copy-url-btn, .site-action-delete-btn { width: 4vh; height: 4vh; background: none; border: none; padding: 0; margin: 0; cursor: pointer; border-radius: 0.8vh; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; background-size: 60%; background-repeat: no-repeat; background-position: center; font-size: 0; } .site-action-delete-btn { background-image: var(--delete-icon-svg); } .site-action-copy-url-btn { background-image: var(--copy-link-icon-svg); } .site-action-copy-url-btn:hover, .site-action-delete-btn:hover { background-color: rgba(0, 0, 0, 0.05); } .copy-url-btn { width: 4vh; height: 4vh; background: none; border: none; padding: 0; margin: 0; cursor: pointer; border-radius: 0.8vh; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; background-size: 60%; background-repeat: no-repeat; background-position: center; background-image: var(--copy-link-icon-svg); font-size: 0; } .copy-url-btn:hover { background-color: rgba(0, 0, 0, 0.05); } /* ============================================ PWA Maker Styles ============================================ */ /* PWA Maker Modal Styles */ .pwa-maker-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 10000; } .pwa-maker-modal.active { display: flex; } #pwa-maker-containerFrame { display: flex; align-items: start; justify-content: center; width: 100%; height: 100vh; padding: 0; margin: 0; overflow-y: scroll; } .pwa-maker-container { position: relative; width: 100%; max-width: 44.4vh; background: #fff; padding: 2.2vh; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); margin-top: 5vh; height: 90vh; margin-bottom: 5vh; box-sizing: border-box; } .pwa-maker-container h1 { color: #2c3e50; text-align: center; margin-bottom: 2.2vh; font-size: 1.8em; } .pwa-maker-container .input-section, .pwa-maker-container .output-section { margin-bottom: 2.2vh; } .pwa-maker-container .output-section h3 { color: #3498db; border-bottom: 2px solid #3498db; padding-bottom: 0.7vh; font-size: 1.7vh; } /* 파일 업로드 드래그앤드롭 스타일 */ .pwa-maker-container .file-upload-area { border: 2px dashed #999999; border-radius: 8px; padding: 0.6vh 1.7vh; text-align: center; background-color: #f9f9f9; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .pwa-maker-container .file-upload-area:hover { border-color: #2980b9; background-color: #f8f9fa; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15); } .pwa-maker-container .file-upload-area.dragover { border-color: #3498db; background-color: #f8f9fa; transform: scale(1.02); } .pwa-maker-container .file-upload-content { pointer-events: none; } .pwa-maker-container .file-upload-icon { font-size: 4vh; color: #3498db; margin-bottom: 1.1vh; display: block; } .pwa-maker-container .file-upload-text { font-size: 1.8vh; font-weight: 600; color: #2c3e50; margin-bottom: 0.7vh; } .pwa-maker-container .file-upload-subtext { font-size: 1.4vh; color: #7f8c8d; margin-bottom: 1.3vh; } .pwa-maker-container .file-upload-area.has-file { border-color: #3498db; background-color: #f8f9fa; } .pwa-maker-container .file-upload-area.has-file .file-upload-icon { color: #3498db; } .pwa-maker-container .file-upload-area.has-file .file-upload-text { color: #3498db; } .pwa-maker-container .file-info { position: relative; margin-top: 0.7vh; display: none; } .pwa-maker-container .file-info.show { display: block; } .pwa-maker-container .file-name { font-size: 1.3vh; font-weight: 600; color: #2c3e50; } .pwa-maker-container .file-size { font-size: 1.2vh; color: #7f8c8d; } .pwa-maker-container .file-remove { position: absolute; right: 1.1vh; top: 0; width: 2.7vh; height: 2.7vh; background-color: #e74c3c; color: white; border: none; border-radius: 50%; padding: 0; font-size: 1.3vh; cursor: pointer; margin-top: 0.7vh; display: flex; align-items: center; justify-content: center; } .pwa-maker-container .file-remove svg { width: 2.7vh; height: 2.7vh; } .pwa-maker-container .file-remove svg path { stroke: white; } .pwa-maker-container .file-remove:hover { background-color: #c0392b; } /* 색상 선택기 스타일 */ .pwa-maker-container .color-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3vh; margin-bottom: 1.3vh; } .pwa-maker-container .color-input-wrapper { display: flex; flex-direction: row; align-items: center; } .pwa-maker-container .color-input-wrapper label { display: flex; width: 100%; height: 100%; font-size: 1.6vh; align-items: center; justify-content: center; font-weight: 600; color: #34495e; } /* 라디오 버튼 그룹 스타일 */ .pwa-maker-container .radio-group { display: flex; flex-direction: row; align-items: center; justify-content: center; } .pwa-maker-container .radio-group-title { text-align: center; font-size: 1.4vh; font-weight: 600; color: #2c3e50; margin-bottom: 1.3vh; display: block; } .pwa-maker-container .radio-options { display: flex; flex-direction: column; } .pwa-maker-container .radio-option { display: flex; align-items: center; cursor: pointer; padding: 0.4vh 1.1vh; } .pwa-maker-container .radio-option input[type="radio"] { width: 1.8vh; height: 1.8vh; margin-right: 1.1vh; cursor: pointer; accent-color: #3498db; } .pwa-maker-container .radio-label { font-size: 1.3vh; color: #34495e; cursor: pointer; user-select: none; } .pwa-maker-container .radio-option:hover .radio-label { color: #2c3e50; } /* 세로 배치를 위한 컨테이너 */ .pwa-maker-container .settings-container { display: flex; flex-direction: column; gap: 0; margin-top: 3.6vh; } /* 옵션 그룹들을 가로로 배치 */ .pwa-maker-container .options-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8vh; } /* 기본 정보 섹션 스타일 */ .pwa-maker-container .basic-info-section { display: flex; flex-direction: column; gap: 1.1vh; } .pwa-maker-container .info-group { display: flex; flex-direction: column; gap: 0.4vh; } .pwa-maker-container label { display: block; font-weight: 600; color: #34495e; font-size: 1.6vh; } .pwa-maker-container .input-section h3 { color: #3498db; border-bottom: 2px solid #3498db; padding-bottom: 0.7vh; font-size: 1.7vh; } .pwa-maker-container input[type="file"], .pwa-maker-container input[type="text"], .pwa-maker-container input[type="url"], .pwa-maker-container textarea, .pwa-maker-container select { display: block; width: 100%; padding: 0.9vh; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 1.4vh; } .pwa-maker-container input[type="color"] { display: block; width: 100%; background: transparent; border: none; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 1.4vh; height: 4.4vh; cursor: pointer; } .pwa-maker-container textarea { resize: none; } .pwa-maker-container #app-description { height: 5.8vh; min-height: unset; } .pwa-maker-container select[multiple] { min-height: 11.1vh; } /* 모달 닫기 버튼 */ .pwa-maker-container .pwa-maker-close { background: transparent !important; color: #333 !important; position: absolute; top: 0; right: 1.1vh; margin: 0 !important; border: none; font-size: 2.7vh; cursor: pointer; width: 6.7vh !important; height: 6.7vh !important; padding: 0; margin: 0; background-image: var(--close-icon-svg) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 2.7vh 2.7vh !important; } .pwa-maker-container .pwa-maker-close:hover { background-color: transparent !important; box-shadow: none !important; color: #333 !important; opacity: 0.7; } .pwa-maker-container button { background-color: #3498db; color: white; padding: 1.1vh 2.2vh; border: none; border-radius: 3vh; cursor: pointer; font-size: 1.6vh; font-weight: 600; transition: background-color 0.3s, box-shadow 0.3s; width: 100%; margin-top: 1.3vh; } .pwa-maker-container button:hover { background-color: #2980b9; box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2); } .pwa-maker-container button:disabled { background-color: #bdc3c7; cursor: not-allowed; box-shadow: none; } /* 일괄 다운로드 버튼 섹션 */ .pwa-maker-container .batch-download-section { padding-bottom: 2.8vh; } .pwa-maker-container #zip-btn { background-color: #3498db; width: 100%; font-size: 1.2em; padding: 1.7vh; } .pwa-maker-container #zip-btn:hover { background-color: #2980b9; box-shadow: 0 4px 8px rgba(39, 174, 96, 0.2); } .pwa-maker-container #zip-btn:disabled { background-color: #95a5a6; } /* 다운로드 버튼 스타일 분리 */ .pwa-maker-container .file-output .button-group { position: absolute; top: 0; right: 0; display: flex; gap: 0.6vh; } .pwa-maker-container .file-output button { width: 3.6vh; height: 3.6vh; font-size: 1.3vh; font-weight: normal; padding: 0; margin: 0; background-color: #999; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .pwa-maker-container .file-output button:hover { background-color: #666; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .pwa-maker-container .file-output button svg { width: 3.6vh; height: 3.6vh; } .pwa-maker-container .file-output button svg path, .pwa-maker-container .file-output button svg rect { stroke: white; } .pwa-maker-container .file-output button svg path[fill] { fill: white; } .pwa-maker-container pre { background-color: #ecf0f1; padding: 1.7vh; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #ccc; max-height: 33.3vh; } .pwa-maker-container .file-output { position: relative; margin-bottom: 2.2vh; } .pwa-maker-container .file-output h3 { color: #999; padding: 1.1vh 0; margin: 0; border-bottom: none; position: relative; cursor: pointer; } .pwa-maker-container .file-output h3::after { content: '▼'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.3vh; transition: transform 0.3s ease; } .pwa-maker-container .file-output.collapsed h3::after { transform: translateY(-50%) rotate(-90deg); } .pwa-maker-container .file-output pre { margin: 0; max-height: 33.3vh; overflow-y: auto; transition: max-height 0.3s ease; } .pwa-maker-container .file-output.collapsed pre { margin: 0; max-height: 0; overflow: hidden; } .pwa-maker-container .error { color: #e74c3c; font-weight: bold; margin-top: 1.1vh; } .pwa-maker-container .status { text-align: center; font-style: italic; color: #7f8c8d; margin-top: 1.1vh; } /* 페이지 토글 스위치 스타일 */ .pwa-maker-container .page-toggle { display: flex; justify-content: center; margin-bottom: 2.2vh; } .pwa-maker-container .toggle-switch { scale: 0.75; width: 10vh; height: 5vh; background-color: #d55050; box-shadow: inset 0px 4px 0px 0px rgba(0, 0, 0, 0.2); border-radius: 6px; position: relative; cursor: pointer; transition: all 0.5s ease; } .pwa-maker-container .toggle-switch.disabled { background-color: #bdc3c7; cursor: not-allowed; opacity: 0.6; } .pwa-maker-container .toggle-switch.active { background-color: #3498db; } /* 헤더의 toggle-switch::after 스타일이 PWA Maker에 적용되지 않도록 제거 */ .pwa-maker-container .toggle-switch::after { content: none; display: none; } .pwa-maker-container .toggle-switch.active::after { content: none; display: none; } .pwa-maker-container .toggle-switch-handle { width: 4.4vh; height: 4.1vh; background-color: #fafafa; border-radius: 4px; position: absolute; top: 0.2vh; left: 0.2vh; box-shadow: 0px 3px 0px 0px #d2d2d2; transition: all 0.5s ease; cursor: pointer; } .pwa-maker-container .toggle-switch.disabled .toggle-switch-handle { cursor: not-allowed; } .pwa-maker-container .toggle-switch.active .toggle-switch-handle { margin-left: 5.1vh; } /* 점 패턴 */ .pwa-maker-container .toggle-switch-handle::before { content: ''; position: absolute; top: 0.9vh; left: 1.1vh; width: 0.4vh; height: 0.4vh; background-color: #ebebeb; border-radius: 2px; box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2); } .pwa-maker-container .toggle-switch-handle::after { content: ''; position: absolute; top: 0.9vh; left: 2vh; width: 0.4vh; height: 0.4vh; background-color: #ebebeb; border-radius: 2px; box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2); } /* 추가 점들 */ .pwa-maker-container .toggle-switch-handle .dot { width: 0.4vh; height: 0.4vh; background-color: #ebebeb; border-radius: 2px; position: absolute; box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2); } .pwa-maker-container .toggle-switch-handle .dot:nth-child(1) { left: 2.9vh; top: 0.9vh; } .pwa-maker-container .toggle-switch-handle .dot:nth-child(2) { left: 1.1vh; top: 1.8vh; } .pwa-maker-container .toggle-switch-handle .dot:nth-child(3) { left: 2vh; top: 1.8vh; } .pwa-maker-container .toggle-switch-handle .dot:nth-child(4) { left: 2.9vh; top: 1.8vh; } .pwa-maker-container .toggle-switch-handle .dot:nth-child(5) { left: 1.1vh; top: 2.7vh; } .pwa-maker-container .toggle-switch-handle .dot:nth-child(6) { left: 2vh; top: 2.7vh; } .pwa-maker-container .toggle-switch-handle .dot:nth-child(7) { left: 2.9vh; top: 2.7vh; } /* 페이지 섹션 스타일 */ .pwa-maker-container .page-section { display: none; } .pwa-maker-container .page-section.active { display: block; } /* PWA 섹션 카드 */ .pwa-maker-container .pwa-section { background: #f8f9fb; border: 1px solid #e8ecf0; border-radius: 8px; padding: 1.6vh 1.8vh; margin-bottom: 1.1vh; } .pwa-maker-container .pwa-section-header { font-size: 1.1vh; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #3498db; margin-bottom: 1.3vh; } /* 2열 그리드 (이름 + 버전) */ .pwa-maker-container .pwa-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1vh; margin-bottom: 1.1vh; } /* PWA 모드 옵션 (설명 포함) */ .pwa-maker-container .pwa-mode-options { flex-direction: column; gap: 0.7vh; } .pwa-maker-container .pwa-mode-option { align-items: flex-start; padding: 0.9vh 1.1vh; border-radius: 6px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; } .pwa-maker-container .pwa-mode-option:has(input:checked) { background: #eaf4fd; border-color: #b8d9f5; } .pwa-maker-container .pwa-mode-label { display: flex; flex-direction: column; gap: 0.2vh; } .pwa-maker-container .pwa-mode-label .radio-label { font-size: 1.4vh; font-weight: 600; color: #2c3e50; } .pwa-maker-container .pwa-mode-desc { font-size: 1.2vh; color: #7f8c8d; line-height: 1.4; } /* 아이콘 URL + 초기화 버튼 래퍼 */ .pwa-maker-container .icon-url-wrapper { position: relative; display: flex; } .pwa-maker-container .icon-url-wrapper input { flex: 1; padding-right: 3.8vh; } .pwa-maker-container .icon-url-reset { position: absolute; right: 0.4vh; top: 50%; transform: translateY(-50%); width: 2.9vh; height: 2.9vh; background: transparent !important; border: none !important; border-radius: 4px; cursor: pointer; font-size: 1.7vh; color: #aab4be; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 !important; box-shadow: none !important; line-height: 1; } .pwa-maker-container .icon-url-reset:hover { color: #3498db !important; background: #e8f4fd !important; box-shadow: none !important; } #copy-modal-close-btn { position: absolute; top: 10px; right: 10px; width: 50px; height: 50px; background: transparent; color: #333; border: none; cursor: pointer; font-family: inherit; background-image: var(--close-icon-svg); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; } #copy-modal-close-btn:hover { opacity: 0.7; } /* --- EXPLORE PROFILE SECTION STYLES --- */ #exploreProfileSection { width: 100%; display: none; flex-direction: column; align-items: center; flex-wrap: nowrap; } .profile-header-container { width: 72%; margin: 2vh 0; overflow: hidden; position: relative; } .profile-header-content { display: flex; padding: 0 4vh 3vh 4vh; position: relative; } .profile-avatar { width: 8vh; height: 8vh; border-radius: 50%; background-color: #fff; border: 0.4vh solid #fff; box-shadow: 0 0.2vh 0.8vh rgba(0, 0, 0, 0.15); margin-top: 3vh; background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; } .profile-info-block { margin-left: 3vh; margin-top: 3vh; flex: 1; display: flex; flex-direction: column; gap: 0.8vh; } .profile-name-row { display: flex; align-items: center; gap: 2vh; } #exploreProfileName { margin: 0; font-size: 2.8vh; color: var(--text-heading); font-weight: 600; } .profile-follow-btn { padding: 0.6vh 2vh; font-size: 1.4vh; font-weight: bold; color: #fff; background-color: var(--theme-positive-blue); border: none; border-radius: 2vh; cursor: pointer; transition: background-color 0.2s; } .profile-follow-btn:hover { background-color: #317be9; } .profile-stats { display: flex; gap: 3vh; font-size: 1.4vh; color: var(--text-tertiary); } .profile-stats strong { color: var(--text-primary); font-size: 1.6vh; } .profile-email { margin: 0; font-size: 1.4vh; color: var(--text-quaternary); } @media (max-width: 800px) { .profile-header-content { flex-direction: column; align-items: center; text-align: center; padding-top: 0; } .profile-info-block { margin-left: 0; align-items: center; } .profile-name-row { flex-direction: column; gap: 1vh; } } .profile-back-btn-wrapper { width: 100%; max-width: 120vh; display: flex; align-items: center; padding: 1vh 0 0 1vh; } .profile-back-btn { width: 32px; height: 32px; flex-shrink: 0; background: transparent; border: none; border-radius: 6px; cursor: pointer; background-image: var(--chevron-left-svg); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; transition: background-color 0.2s; font-size: 0; } .profile-back-btn:hover { background-color: rgba(0, 0, 0, 0.08); } .profile-bio-section { padding: 2vh 4vh 2.5vh 4vh; display: flex; flex-direction: column; gap: 1vh; position: relative; } .profile-bio-text { margin: 0; font-size: 1.5vh; color: var(--text-secondary); line-height: 1.6; min-height: 2.4vh; white-space: pre-wrap; word-break: break-word; } .profile-bio-text:empty::before { content: '자기소개가 없습니다.'; color: var(--text-quaternary); } .profile-bio-edit-btn { position: absolute; top: 2vh; right: 2vh; background: transparent; border: none; cursor: pointer; width: 1.8vh; height: 1.8vh; padding: 0; opacity: 0.4; transition: opacity 0.2s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } .profile-bio-edit-btn:hover { opacity: 0.9; } .profile-bio-input { width: 100%; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 1vh; padding: 1.2vh 1.5vh; font-size: 1.5vh; font-family: var(--font-b, inherit); color: var(--text-primary); background: var(--background-input, #f7f7f7); resize: none; outline: none; line-height: 1.6; transition: border-color 0.2s; min-height: 6vh; } .profile-bio-input:focus { border-color: var(--theme-positive-blue, #4a90e2); } .profile-bio-actions { display: flex; align-items: center; justify-content: space-between; } .profile-bio-count { font-size: 1.3vh; color: var(--text-quaternary); } .profile-bio-buttons { display: flex; gap: 1vh; } .profile-bio-save-btn, .profile-bio-cancel-btn { padding: 0.5vh 1.8vh; font-size: 1.3vh; font-weight: 600; border: none; border-radius: 2vh; cursor: pointer; transition: background-color 0.2s; } .profile-bio-save-btn { color: #fff; background-color: var(--theme-positive-blue, #4a90e2); } .profile-bio-save-btn:hover { background-color: #317be9; } .profile-bio-save-btn:disabled { opacity: 0.6; cursor: not-allowed; } .profile-bio-cancel-btn { color: var(--text-secondary); background-color: transparent; border: 1px solid rgba(0, 0, 0, 0.15); } .profile-bio-cancel-btn:hover { background-color: rgba(0, 0, 0, 0.05); } /* --- EXPLORE PROJECT DETAIL SECTION STYLES --- */ #exploreProjectSection { width: 100%; display: none; flex-direction: column; align-items: center; flex-wrap: nowrap; } .project-detail-back-btn-wrapper { width: 100%; max-width: 120vh; display: flex; justify-content: flex-start; padding: 1vh 0 0 1vh; } .project-detail-container { width: 72%; max-width: 120vh; margin: 2vh 0 4vh 0; display: flex; flex-direction: row; gap: 3vh; align-items: flex-start; } .project-detail-preview-wrap { flex: 0 0 auto; width: 28vh; } .project-detail-preview { width: 28vh; height: 28vh; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; border: 2px solid rgba(0, 0, 0, 0.22); background: #fff; overflow: hidden; position: relative; } .project-detail-preview-img { width: 100%; height: 100%; background-image: var(--card-main-img-svg); background-size: 36%; background-repeat: no-repeat; background-position: center center; } .project-detail-info { flex: 1 1 0; display: flex; flex-direction: column; gap: 1.6vh; padding-top: 1vh; } .project-detail-name { font-size: 2.6vh; font-weight: 700; margin: 0; line-height: 1.3; word-break: break-word; } .project-detail-author-row { display: flex; align-items: center; gap: 1vh; cursor: pointer; } .project-detail-author-row:hover .project-detail-author-name { text-decoration: underline; } .project-detail-avatar { width: 3.6vh; height: 3.6vh; border-radius: 50%; background-size: cover; background-position: center; background-color: rgba(0, 0, 0, 0.1); flex-shrink: 0; } .project-detail-author-name { font-size: 1.6vh; font-weight: 500; color: var(--text-primary, #333); } .project-detail-stats { display: flex; align-items: center; gap: 0.8vh; font-size: 1.5vh; color: var(--text-secondary, #666); } .project-detail-hearts-count { font-weight: 600; color: var(--text-primary, #333); } .project-detail-hearts-icon { color: #e05555; } .project-detail-date { margin-left: 1.5vh; font-size: 1.3vh; color: var(--text-secondary, #999); } .project-detail-actions { display: flex; flex-wrap: wrap; gap: 1vh; align-items: center; margin-top: 0.5vh; } .project-detail-icon-actions { display: flex; align-items: center; gap: 0.3vh; margin-left: auto; } .project-detail-run-btn, .project-detail-comments-btn, .project-detail-follow-btn { padding: 1vh 2.2vh; border-radius: 1.2vh; font-size: 1.5vh; font-weight: 600; border: none; cursor: pointer; transition: background-color 0.2s, opacity 0.2s; } .project-detail-run-btn { background-color: var(--theme-positive-blue, #4a90e2); color: #fff; width: 8vh; height: 4.8vh; border: 2px solid rgba(0, 0, 0, 0.72); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; box-shadow: 2px 2px rgba(0, 0, 0, 0.72); } .project-detail-run-btn:hover { background-color: #317be9; } .project-detail-run-btn:disabled { opacity: 0.6; cursor: not-allowed; } .project-detail-comments-btn { background-color: rgba(0, 0, 0, 0.07); color: var(--text-primary, #333); } .project-detail-comments-btn:hover { background-color: rgba(0, 0, 0, 0.13); } .project-detail-follow-btn { background-color: rgba(0, 0, 0, 0.07); color: var(--text-primary, #333); } .project-detail-follow-btn:hover { background-color: rgba(0, 0, 0, 0.13); } .project-detail-run-editor-btn, .project-detail-copy-link-btn { width: 4vh; height: 4vh; background: none; border: none; padding: 0; margin: 0; cursor: pointer; border-radius: 0.8vh; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .project-detail-run-editor-btn:hover, .project-detail-copy-link-btn:hover { background-color: rgba(0, 0, 0, 0.05); } .project-detail-run-editor-btn:disabled { opacity: 0.6; cursor: not-allowed; } .project-detail-name-row { display: flex; align-items: center; gap: 0.8vh; } .project-detail-name-row .project-detail-name { flex: 1; min-width: 0; } .project-detail-name-share-btn { width: 4vh; height: 4vh; background: none; border: none; padding: 0; cursor: pointer; border-radius: 0.8vh; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .project-detail-name-share-btn:hover { background-color: rgba(0, 0, 0, 0.05); } .project-detail-comments-section { width: 72%; max-width: 120vh; margin: 0 0 4vh 0; display: flex; flex-direction: column; border-top: 1px solid rgba(0, 0, 0, 0.1); } .project-detail-comments-header { font-size: 1.6vh; font-weight: 600; padding: 2vh 0 1vh 0; color: var(--text-primary, #333); } .project-detail-comments-section .comments-list { min-height: 4vh; } .project-detail-comments-section .comment-form { padding: 1.5vh 0 0 0; background: transparent; } @media (max-width: 800px) { .project-detail-container { width: 92%; flex-direction: column; align-items: center; } .project-detail-preview-wrap { width: 100%; display: flex; justify-content: center; } .project-detail-info { width: 100%; padding-top: 0; } .project-detail-comments-section { width: 92%; } } #upload-cloudflare-status { transform: translate(-50%, 0); width: 50vh; left: 50%; bottom: 1vh; position: fixed; text-align: center; font-size: 1.6vh; }