/* News & Event: 소식 목록 · 행사 일정 */
.news-page { padding-block:96px 120px }
.news-page__inner { display:grid; gap:56px }

/* ---------- 소식 메타 ---------- */
.news-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; font-family:var(--font-head) }
.news-meta__category { font-size:15px; font-weight:700; letter-spacing:1.5px; color:var(--action-primary) }
.news-meta__divider { width:1px; height:12px; background:var(--border) }
.news-meta time { font-size:16px; font-weight:500; letter-spacing:.5px; color:var(--text-body) }

/* ---------- 탭 · 검색 ---------- */
.news-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--border) }
.news-tabs { gap:8px }
.news-tabs .tabs__tab { min-height:48px; padding:0 22px; border:1px solid var(--border); background:white; font-size:15px; font-weight:500 }
.news-tabs .tabs__tab[aria-selected="true"] { border-color:var(--color-black); background:var(--color-black) }
.news-search { position:relative; flex:0 1 440px; min-width:0 }
.news-search input { width:100%; height:48px; padding:0 52px 0 16px; border:1px solid transparent; border-radius:0; background:var(--surface); font:inherit; color:var(--color-black); appearance:none }
.news-search input::placeholder { color:var(--color-muted); opacity:1 }
.news-search input::-webkit-search-cancel-button { appearance:none }
.news-search input:focus { border-color:var(--color-black); outline:none }
.news-search button { position:absolute; top:2px; right:2px; display:grid; place-items:center; width:44px; height:44px }
.news-search button img { width:20px; height:20px }
.news-search button:focus-visible { outline-offset:-2px }

/* ---------- 소식 카드: 3열 → 2열 → 1열 ---------- */
.news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:64px 24px }
.news-card__link { display:flex; flex-direction:column; height:100% }
.news-card__thumb { position:relative; aspect-ratio:464/300; overflow:hidden; background:var(--surface-on-dark) }
.news-card__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.news-card__thumb::after { content:""; position:absolute; inset:0; background:#000; opacity:0; transition:opacity .3s }
.news-card__info { display:flex; flex:1; flex-direction:column; gap:12px; padding-top:24px }
.news-card .news-meta { justify-content:space-between }
.news-card .news-meta__category { font-size:14px }
.news-card .news-meta time { font-size:15px }
.news-card__title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.news-card__title { min-height:30px; font-size:20px; font-weight:500; line-height:30px; transition:color .2s }
.news-card__link:focus-visible .news-card__thumb img { transform:scale(1.05) }
.news-card__link:focus-visible .news-card__thumb::after { opacity:.25 }
.news-card__link:focus-visible .news-card__title { color:var(--action-primary) }
.news-go:focus-visible img { transform:translateX(4px) }
@media(hover:hover) {
    .news-card__link:hover .news-card__thumb img { transform:scale(1.05) }
    .news-card__link:hover .news-card__thumb::after { opacity:.25 }
    .news-card__link:hover .news-card__title { color:var(--action-primary) }
    .news-go:hover img { transform:translateX(4px) }
}
.news-empty { display:grid; justify-items:center; gap:24px; padding:72px 24px; background:var(--surface); text-align:center }
.news-empty p { font-size:20px; font-weight:700; line-height:30px; color:var(--text-heading) }

/* ---------- 행사 일정 ---------- */
.news-events { padding-block:120px; background:var(--surface) }
.news-events__head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px }
.news-events__eyebrow { font:500 18px/24px var(--font-head); letter-spacing:1px; color:var(--action-primary) }
.news-events__title { margin-top:12px; font:700 56px/60px var(--font-head) }
.news-events__sub { margin-top:12px; font-size:24px; font-weight:700; line-height:36px; color:var(--text-body) }
.news-events__list { margin-top:48px; border-top:2px solid var(--color-black) }
.news-event { display:flex; align-items:center; gap:48px; padding:36px 8px; border-bottom:1px solid var(--border) }
.news-event__date { position:relative; flex:none; width:188px; padding-right:48px; font-family:var(--font-head) }
.news-event__date::after { content:""; position:absolute; top:50%; right:0; width:1px; height:72px; background:var(--border); transform:translateY(-50%) }
.news-event__date strong { display:block; font-size:64px; font-weight:700; line-height:60px }
.news-event__date span { display:block; font-size:16px; font-weight:500; letter-spacing:1px; color:var(--text-body) }
.news-event__body { flex:1; min-width:0 }
.news-event__body .news-meta__category { display:block; font-family:var(--font-head) }
.news-event__title { margin-top:8px; font-size:24px; line-height:34px }
.news-event__facts { margin-top:8px; font-size:15px; line-height:22px; color:var(--text-body) }
.news-event__status { flex:none; padding:6px 14px; border:1px solid var(--color-gold); background:var(--color-gold); font-size:13px; font-weight:500; line-height:18px }
.news-event__status--upcoming { border-color:var(--color-muted); background:none; color:var(--text-body) }
.news-go { display:grid; flex:none; place-items:center; width:52px; height:52px; border:1px solid var(--color-black) }
.news-go img { width:20px; height:20px; transition:transform .2s }

/* ---------- 반응형: 1599px 이하 ---------- */
@media(max-width:1599px) {
    .news-events__title { font-size:48px; line-height:52px }
    .news-event { gap:32px }
    .news-event__date { width:164px; padding-right:32px }
}

/* ---------- 반응형: 1199px 이하 (태블릿) ---------- */
@media(max-width:1199px) {
    .news-page { padding-block:72px 96px }
    .news-page__inner { gap:40px }
    .news-toolbar { flex-direction:column; align-items:stretch; gap:16px }
    .news-search { flex:none }
    .news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 24px }
    .news-events { padding-block:72px }
    .news-events__title { font-size:44px; line-height:48px }
    .news-events__sub { font-size:20px; line-height:30px }
    .news-events__list { margin-top:32px }
    .news-event { gap:24px; padding-block:28px }
    .news-event__date { width:120px; padding-right:24px }
    .news-event__date strong { font-size:48px; line-height:48px }
    .news-event__title { font-size:20px; line-height:30px }
}

/* ---------- 반응형: 767px 이하 (모바일) ---------- */
@media(max-width:767px) {
    .news-page { padding-block:56px 72px }
    .news-page__inner { gap:32px }
    .news-grid { grid-template-columns:minmax(0,1fr); gap:40px }
    .news-events { padding-block:56px }
    .news-events__head { flex-direction:column; align-items:flex-start; gap:20px }
    .news-events__title { font-size:clamp(34px,8.8vw,44px); line-height:1.1 }
    .news-event { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; padding:24px 0 }
    .news-event__date { grid-column:1/-1; display:flex; align-items:baseline; gap:12px; width:auto; padding:0 }
    .news-event__date::after { display:none }
    .news-event__date strong { font-size:40px; line-height:44px }
    .news-event__body { grid-column:1/-1 }
    .news-event__status { justify-self:start; align-self:center }
    .news-go { width:48px; height:48px }
}

/* ========== News & Event 상세 ========== */
@media(min-width:1200px) {
    .page-title--detail { padding-bottom:56px }
}

/* ---------- 게시글 헤더 ---------- */
.news-article__head { display:flex; flex-direction:column; gap:20px; padding-block:40px 36px; border-top:2px solid var(--color-black) }
.news-article .news-meta__category { font-size:16px }
.news-article .news-meta time { font-size:17px; color:var(--color-muted) }
.news-article__title { font-size:44px; line-height:60px; color:var(--color-black) }
.news-article__foot { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; padding-block:8px 20px; border-bottom:1px solid var(--border) }
.news-article__posted { display:flex; flex-wrap:wrap; gap:0 10px; font-size:15px; color:var(--color-muted) }
.news-article__actions { display:flex; flex:none; gap:8px }
.news-article__action { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px 0 16px; border:1px solid var(--border); background:white; font-size:14px; font-weight:500; transition:background-color .2s }
.news-article__action img { flex:none }
.news-article__action:focus-visible { background:var(--surface) }

/* ---------- 게시글 본문 ---------- */
.news-article__body { display:flex; flex-direction:column; gap:40px; max-width:1200px; margin-inline:auto; padding-block:56px 96px }
.news-article__summary { font-size:22px; font-weight:700; line-height:38px; color:var(--color-black) }

/* ---------- 에디터 출력 영역 ---------- */
.article-content { display:flex; flex-direction:column; gap:40px; min-width:0 }
.article-content p { font-size:17px; line-height:32px; color:var(--text-body) }
.article-content p.article-content__note { font-size:14px; line-height:22px; color:var(--color-muted) }
.article-content h2 { display:flex; align-items:flex-start; gap:12px; padding-top:16px; font-size:26px; line-height:36px; color:var(--color-black) }
.article-content h2::before { content:""; flex:none; width:4px; height:24px; margin-top:6px; background:var(--color-red) }
.article-content table { width:100%; border-collapse:separate; border-spacing:0; border-top:2px solid var(--color-black); font-size:16px; line-height:26px }
.article-content th,.article-content td { padding-block:20px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top }
.article-content th { width:172px; padding-inline:8px 12px; font-weight:700; color:var(--color-black) }
.article-content td { padding-inline:12px 8px; color:var(--text-body) }
.article-content > img { align-self:flex-start; height:auto }
.article-gallery { display:flex; gap:24px }
.article-gallery figure { display:flex; flex:1 1 0; flex-direction:column; gap:12px; min-width:0 }
.article-gallery figcaption { font:700 16px/24px var(--font-head); letter-spacing:.5px; color:var(--text-body) }
.article-gallery__media { display:flex; align-items:center; justify-content:center; aspect-ratio:588/441; min-height:0; border:1px solid var(--border); background:white }
.article-gallery__media img { width:auto; height:68.3%; object-fit:contain }
.article-gallery__media--placeholder { border:0; background:var(--surface-on-dark); font:500 15px/23px var(--font-head); letter-spacing:1.5px; white-space:pre; color:white }

/* ---------- 첨부파일 ---------- */
.news-files { display:flex; flex-direction:column; gap:12px; padding:28px; background:var(--surface) }
.news-files__title { font-size:17px; line-height:20px; color:var(--color-black) }
.news-files__list { display:flex; flex-direction:column; gap:12px }
.news-files__link { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border:1px solid var(--border); background:white; transition:border-color .2s }
.news-files__info { display:flex; align-items:center; gap:12px; min-width:0; line-height:23px }
.news-files__info img,.news-files__download { flex:none }
.news-files__name { overflow:hidden; font-size:15px; font-weight:500; text-overflow:ellipsis; white-space:nowrap }
.news-files__size { flex:none; font:500 15px/23px var(--font-head); color:var(--color-muted) }
.news-files__link:focus-visible { border-color:var(--color-black) }

/* ---------- 이전 · 다음 글 ---------- */
.news-post-nav { padding-bottom:120px }
.news-post-nav__inner { display:flex; flex-direction:column; align-items:center; gap:56px }
.news-post-nav__list { width:100%; border-top:2px solid var(--color-black) }
.news-post-nav__row { display:flex; align-items:center; gap:32px; padding:28px 8px; border-bottom:1px solid var(--border) }
.news-post-nav__direction { display:flex; flex:none; align-items:center; gap:10px; width:140px; font-size:15px; font-weight:700 }
.news-post-nav__direction img { flex:none }
.news-post-nav__title { flex:1; min-width:0; overflow:hidden; font-size:18px; font-weight:500; line-height:28px; text-overflow:ellipsis; white-space:nowrap; transition:color .2s }
.news-post-nav__date { flex:none; font:500 16px/24px var(--font-head); letter-spacing:.5px; color:var(--color-muted) }
.news-post-nav__row:focus-visible .news-post-nav__title { color:var(--action-primary) }
.news-post-nav__back { display:flex; align-items:center; justify-content:center; gap:12px; width:220px; max-width:100%; height:56px; background:var(--color-black); font-size:16px; font-weight:500; color:white; transition:background-color .2s }
.news-post-nav__back:focus-visible { background:var(--surface-on-dark) }
@media(hover:hover) {
    .news-article__action:hover { background:var(--surface) }
    .news-files__link:hover { border-color:var(--color-black) }
    .news-post-nav__row:hover .news-post-nav__title { color:var(--action-primary) }
    .news-post-nav__back:hover { background:var(--surface-on-dark) }
}

/* ---------- 상세 반응형: 1199px 이하 (태블릿) ---------- */
@media(max-width:1199px) {
    .news-article__head { padding-block:32px 28px }
    .news-article__title { font-size:36px; line-height:48px }
    .news-article__body { padding-block:40px 72px }
    .news-article__summary { font-size:20px; line-height:34px }
    .article-content h2 { font-size:24px; line-height:34px }
    .article-content h2::before { margin-top:5px }
    .news-post-nav { padding-bottom:96px }
    .news-post-nav__inner { gap:48px }
    .news-post-nav__row { gap:24px; padding-block:24px }
    .news-post-nav__direction { width:120px }
}

/* ---------- 상세 반응형: 767px 이하 (모바일) ---------- */
@media(max-width:767px) {
    .news-article__head { gap:16px; padding-block:24px }
    .news-article .news-meta__category { font-size:15px }
    .news-article .news-meta time { font-size:16px }
    .news-article__title { font-size:26px; line-height:36px }
    .news-article__foot { flex-direction:column; align-items:flex-start; padding-block:4px 20px }
    .news-article__posted { font-size:14px }
    .news-article__body { gap:32px; padding-block:32px 56px }
    .news-article__summary { font-size:18px; line-height:30px }
    .article-content { gap:28px }
    .article-content p { font-size:16px; line-height:28px }
    .article-content h2 { gap:10px; padding-top:8px; font-size:22px; line-height:32px }
    .article-content h2::before { height:20px; margin-top:6px }
    .article-content table { font-size:15px; line-height:24px }
    .article-content th,.article-content td { padding-block:14px }
    .article-content th { width:96px; padding-inline:4px 8px }
    .article-content td { padding-inline:8px 4px }
    .article-gallery { flex-direction:column; gap:20px }
    .article-gallery figure { flex:none }
    .news-files { padding:20px 16px }
    .news-files__link { padding:14px 12px }
    .news-files__info { gap:8px }
    .news-post-nav { padding-bottom:72px }
    .news-post-nav__inner { gap:32px }
    .news-post-nav__row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; padding:18px 4px }
    .news-post-nav__direction { width:auto; font-size:14px }
    .news-post-nav__title { grid-area:2/1/3/3; font-size:16px; line-height:26px }
    .news-post-nav__date { font-size:15px }
}
