/* MAIN CONTAINER */

.notice-container{
width:100%;
height:100%;
border-radius:12px;
overflow:hidden;
background:rgba(255,255,255,0.9);
box-shadow:0 12px 30px rgba(0,0,0,0.15);
display:flex;
flex-direction:column;
font-family:Arial,Helvetica,sans-serif;
}

/* HEADER */

.notice-header{
background:linear-gradient(135deg,#042f66,#0b4ea2);
color:#fff;
padding:15px 20px;
font-size:20px;
font-weight:bold;
}

/* SEARCH */

.notice-search{
padding:10px 20px;
border-bottom:1px solid #ddd;
}

.notice-search input{
width:100%;
padding:8px;
border-radius:5px;
border:1px solid #ccc;
}

/* BOARD AREA */

.notice-board{
min-height:380px;
flex:1;
position:relative;
overflow:hidden;
background:#fff;
}

/* PINNED NOTICES */

.notice-pinned-area{
background:#eef3ff;
z-index:5;
position:relative;
}

.notice-pinned .notice-item::before{
content:"📌";
position:absolute;
right:15px;
top:12px;
background:#fff;
color:white;
font-size:10px;
padding:2px 6px;
border-radius:3px;
}

.notice-pinned .notice-item{
font-weight:bold;
border-left:4px solid #0b4ea2;
background:#f5f8ff;
}

/* DIVIDER */

.notice-divider{
height:1px;
background:#ddd;
}

/* SCROLL AREA */

.notice-content{
position:absolute;
top:0;
left:0;
right:0;
}

/* NOTICE ITEM */

.notice-item{
padding:12px 20px;
border-bottom:1px solid #eee;
font-size:14px;
}

/* LINK */

.notice-item a{
color:#0b4ea2;
text-decoration:none;
}

.notice-item a:hover{
text-decoration:underline;
}

/* DATE BADGE */

.notice-date{
background:#0b4ea2;
color:#fff;
font-size:11px;
padding:3px 7px;
border-radius:4px;
margin-right:8px;
}

/* NEW NOTICE */

.notice-new{
background:#fff7cc;
border-left:4px solid #ff9800;
position:relative;
}

.notice-new::after{
content:"NEW";
position:absolute;
right:15px;
top:12px;
background:#ff5722;
color:#fff;
font-size:10px;
padding:2px 6px;
border-radius:3px;
}

/* MOBILE */

@media(max-width:600px){
.notice-board{min-height:250px;}
}