.notification-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);z-index:999}.notification-modal{position:fixed;top:70px;right:10px;width:380px;max-height:500px;background:white;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:1000;display:flex;flex-direction:column;animation:slideDown .2s ease-out;transform-origin:top right}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #f0f0f0}.notification-modal-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.notification-close-btn{background:none;border:none;font-size:28px;color:#999;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s;line-height:1}.notification-close-btn:hover{background:#f5f5f5;color:#333}.notification-modal-content{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}.notification-modal-content::-webkit-scrollbar{width:6px}.notification-modal-content::-webkit-scrollbar-track{background:transparent}.notification-modal-content::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:3px}.notification-modal-content::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.notification-loading{padding:20px}.notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;color:#999}.notification-empty svg{width:40px;height:40px;margin-bottom:10px;opacity:.5}.notification-empty p{margin:0;font-size:13px}.notification-list{padding:8px 0}.notification-item{display:flex;align-items:flex-start;padding:16px 20px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background .2s;position:relative}.notification-item:hover{background:#f9f9f9}.notification-item:last-child{border-bottom:none}.notification-item.unread{background:#f0f7ff}.notification-item.unread:hover{background:#e6f2ff}.notification-icon{flex-shrink:0;margin-right:12px;margin-top:2px}.notification-content{flex:1;min-width:0}.notification-title{font-size:14px;font-weight:600;color:#333;margin-bottom:4px}.notification-body{font-size:13px;color:#666;line-height:1.4;margin-bottom:6px;word-wrap:break-word}.notification-time{font-size:12px;color:#999}.notification-unread-dot{position:absolute;top:20px;right:16px;width:8px;height:8px;background:#4A90E2;border-radius:50%}@media (max-width:768px){.notification-modal{right:5px;left:5px;width:auto;max-width:400px;max-height:450px;margin:0 auto}}@media (max-height:600px){.notification-modal{max-height:calc(100vh - 90px)}}@media (min-width:769px){.notification-modal{right:calc((100vw - 900px) / 2 + 10px)}}@media (min-width:769px) and (max-width:920px){.notification-modal{right:10px}}.header-container{display:flex;justify-content:space-between;align-items:center;width:100%;padding:20px 12px 16px;max-width:900px;margin:0 auto;flex-wrap:nowrap}.header-container .logo{display:flex;align-items:center;gap:10px;font-size:1.7rem;font-weight:700;color:#2563eb}.header-container .kakaoBtn{display:flex;align-items:center;gap:8px;background:#fee500;color:#3c1e1e;border:none;border-radius:999px;padding:9px 18px;font-size:.98rem;font-weight:600;box-shadow:0 2px 8px #fee50044;cursor:pointer}.header-container .user-section{display:flex;align-items:center;gap:12px}.header-container .notification-bell-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s}.header-container .notification-bell-btn:hover{background:#f5f5f5;color:#333}.header-container .notification-badge{position:absolute;top:6px;right:6px;width:12px;height:12px;background:#ef4444;border-radius:50%;border:2.5px solid white;animation:pulse 2s infinite;box-shadow:0 2px 4px rgba(239,68,68,.3)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.header-container .profile-image{width:36px;height:36px;border-radius:50%;object-fit:cover}.header-container .nickname{font-weight:600}.header-container .logoutBtn{margin-left:8px;background:#ef4444;color:white;border:none;border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600}.header-container .loading-spacer{height:36px}@media (max-width:600px){.header-container{padding:12px 8px 10px;max-width:100%;flex-direction:row;align-items:center;gap:8px}.header-container .logo{font-size:1.1rem;gap:6px;min-width:0}.header-container .kakaoBtn{width:auto;justify-content:center;padding:6px 10px;font-size:.9rem}.header-container .user-section{gap:8px;min-width:0}.header-container .notification-bell-btn{padding:6px}.header-container .notification-bell-btn svg{width:28px;height:28px}.header-container .notification-badge{width:10px;height:10px;top:4px;right:4px}.header-container .profile-image{width:28px;height:28px}.header-container .nickname{max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-container .logoutBtn{padding:6px 10px;font-size:.9rem}}@supports(padding:max(0px)){.header-container{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}