/* 공지사항 서브페이지 콘텐츠 레이아웃과 반응형 스타일 */

.page-notice {
    padding-bottom: 120px;
}

/* about/forum과 같은 패턴 — 히어로 자체 하단 여백은 0으로 두고,
   이어지는 콘텐츠 쪽 여백으로 간격을 관리한다. */
.page-notice .sub-hero.sub-pad--hero {
    padding-bottom: 0;
}

/* 다른 서브페이지와 동일하게 위/아래 고정 40px로 통일. */
.page-notice .sub-hero__rule {
    margin: 40px 0;
}

.notice-content {
    color: var(--sub-black);
}

.notice-content p {
    margin: 0;
    font-size: var(--sub-body-size);
    line-height: 1.75;
    color: var(--sub-gray, #4b5563);
    word-break: keep-all;
}

/* 도입부 리드 문단은 about/forum의 리드 문단과 같이 검정으로 한 단계 올린다. */
.notice-content__intro p {
    font-size: clamp(18px, 1.4vw, 21px);
    line-height: 1.8;
    color: var(--sub-black);
}

.notice-content > .notice-event:last-of-type ~ p:not(.notice-content__note) {
    font-size: clamp(18px, 1.4vw, 21px);
}

.notice-content p.notice-content__update {
    color: var(--sub-black);
}

.notice-content h3 {
    margin: 44px 0 20px;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    color: var(--sub-black);
    word-break: keep-all;
}

/* about의 section-speakers__forum-event 카드(about.css)와 같은 톤 —
   좌우 라벨/값 표 대신 파란 배지 제목 + 큰 날짜 + 옅은 장소로 정리한다. */
.notice-event {
    margin-bottom: 16px;
    padding: 20px 22px;
    background: #f8f8f6;
    border: 1px solid var(--sub-line);
    border-radius: 10px;
}

.notice-event__title {
    display: inline-block;
    margin: 0 0 14px;
    padding: 6px 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sub-white);
    background: var(--sub-blue);
    border-radius: 4px;
}

.notice-event__meta {
    display: grid;
    gap: 4px;
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--sub-gray, #4b5563);
}

.notice-event__date {
    display: block;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sub-black);
}

.notice-event__place {
    display: block;
    font-size: 17px;
    color: var(--sub-gray, #4b5563);
}

.notice-event__desc {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sub-line);
    font-size: 16px;
    line-height: 1.7;
    color: var(--sub-gray, #4b5563);
}

/* .notice-content p(margin:0)보다 우선순위가 높아야 해서 p까지 묶는다. */
.notice-content p.notice-content__note {
    margin: 32px 0 0;
    padding-top: 20px;
    font-size: 16px;
    color: var(--sub-gray, #4b5563);
    border-top: 1px solid var(--sub-line);
    word-break: keep-all;
}

/* 모바일 (~500px) */
@media (max-width: 500px) {
    .notice-event {
        padding: 18px 18px;
    }
}