.notice-shell{max-width:900px;padding:58px 0 150px}.notice-hero{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:28px 0 24px;border-bottom:1px solid var(--border)}.notice-hero span{font-size:9px;font-weight:950;letter-spacing:.18em;color:var(--pink)}.notice-hero h1{font:clamp(48px,8vw,82px)/.9 var(--serif);color:var(--plum);margin:8px 0}.notice-hero p{max-width:620px;color:var(--muted);margin:0}.notice-filter{display:flex;gap:8px;padding:20px 0}.notice-filter button{border:1px solid var(--border);background:var(--paper);color:var(--muted);border-radius:999px;padding:9px 13px;font-weight:900}.notice-filter button.active{background:var(--wine);color:#fff;border-color:var(--wine)}.notice-filter b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--pink);color:#fff;font-size:9px;margin-left:4px}.notice-list{display:grid;gap:10px}.notice-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:start;padding:17px;border:1px solid var(--border);border-radius:19px;background:var(--paper);box-shadow:var(--shadow-sm);transition:.18s}.notice-card.unread{border-color:color-mix(in srgb,var(--pink) 48%,var(--border));background:color-mix(in srgb,var(--paper) 88%,var(--pink-pale))}.notice-card:hover{transform:translateY(-2px)}.notice-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--pink-pale);font-size:21px}.notice-card h3{font:22px/1.05 var(--serif);color:var(--plum);margin:1px 0 5px}.notice-card p{font-size:12px;color:var(--muted);margin:0;line-height:1.55}.notice-card time{display:block;font-size:8px;color:var(--muted);margin-top:8px}.notice-open{align-self:center;border:1px solid var(--border);border-radius:999px;padding:8px 10px;background:var(--paper);font-size:9px;font-weight:900;color:var(--pink)}.notice-empty{padding:55px 20px;text-align:center;border:1px dashed var(--border);border-radius:20px;color:var(--muted)}@media(max-width:620px){.notice-shell{padding-top:30px}.notice-hero{display:block}.notice-hero .btn{margin-top:18px}.notice-card{grid-template-columns:42px minmax(0,1fr)}.notice-icon{width:42px;height:42px}.notice-open{grid-column:2;justify-self:start}.notice-card h3{font-size:20px}}