/* ============================================================
   소식 (news.html) 전용 — 언론 보도 아카이브 + 블로그 후기
   공통 토큰·컴포넌트(news-cards/news-card·subhero·contact-band 등)는
   assets/css/styles.css 를 재사용. 여기에는 페이지 고유 요소만.
   ============================================================ */

/* ---- 섹션 배경 ---- */
.news-archive { background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%); }
.news-official { background: var(--cream); }
.news-blogs { background: var(--white); }

/* ---- 연도 구분 헤더 ---- */
.news-year { display: flex; align-items: baseline; gap: 16px; margin: clamp(52px, 7vw, 82px) 0 4px; }
.news-year:first-of-type { margin-top: clamp(34px, 5vw, 50px); }
.news-year__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 2.9rem); color: var(--burgundy); letter-spacing: -0.01em; line-height: 1; }
.news-year__line { flex: 1; height: 1px; background: var(--line-gold); }
.news-year__count { font-family: var(--font-body); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold); font-size: .8rem; letter-spacing: .06em; white-space: nowrap; }

/* ---- 언론 보도: 박스 카드 대신 리스트 행 — 다양한 언급이 흐르듯 보이게 ---- */
.news-archive .news-cards { grid-template-columns: 1fr; gap: 0; margin-top: clamp(20px, 3vw, 30px); align-items: stretch; }
.news-card--archive { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: clamp(18px, 2.4vw, 26px) 2px; transition: none; }
.news-card--archive:hover { transform: none; box-shadow: none; border-color: var(--line); }
.news-card--archive .news-card__title { font-size: 1.16rem; }
.news-card--archive .news-card__excerpt { max-width: 72ch; }
.news-card__title a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
.news-card__title a:hover { color: var(--burgundy); }
.news-card__ext { display: inline-block; font-family: var(--font-en); font-style: normal; color: var(--gold); font-size: .78em; margin-left: 4px; transform: translateY(-1px); }

/* ---- 관련 보도 인라인 링크 — 절제된 칩(pill) ---- */
.news-card__related { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px; }
.news-card__related-label { font-size: .8rem; font-weight: 700; color: var(--burgundy); letter-spacing: .01em; margin-right: 4px; }
.news-card__related a { font-size: .78rem; line-height: 1.5; color: var(--muted); text-decoration: none; padding: 3px 13px; border: 1px solid var(--line); border-radius: 0; background: transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.news-card__related a:hover { color: var(--burgundy); border-color: var(--line-gold); }

/* ---- 기관 채널 · 관람 후기: 카드형 2단 그리드 ----
   같은 행의 그룹끼리 높이를 맞춰(align-items: stretch) 카드로 정렬 —
   행별 높이차로 생기던 빈 공간을 없앤다. 그룹당 최대 3건만 노출하고
   나머지는 '더 보기'(details)로 접어 '일부만 발췌'되는 인상을 준다. */
.blog-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 30px); align-items: stretch; margin-top: clamp(30px, 4.5vw, 50px); }
.blog-group { background: var(--ivory); border: 1px solid var(--line); border-radius: 0; padding: clamp(20px, 2.4vw, 28px); scroll-margin-top: calc(var(--header-h) + 20px); }
.blog-group__title { font-family: var(--font-display); font-weight: 500; font-size: 1.14rem; color: var(--ink); line-height: 1.35; padding-bottom: 14px; border-bottom: 1px solid var(--line-gold); text-wrap: pretty; }
.blog-group__title::before { content: ""; display: block; width: 22px; height: 1px; background: var(--gold); margin-bottom: 14px; }
.blog-group__title .period { font-family: var(--font-body); font-style: normal; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 500; font-size: .72em; margin-left: 8px; white-space: nowrap; }
.blog-group__list { margin: 0; }
.blog-group__list li + li { border-top: 1px solid var(--line); }
.blog-post { display: block; padding: 13px 12px 13px 14px; margin: 0 -12px 0 -16px; border-left: 2px solid transparent; border-radius: 0; text-decoration: none; transition: background .25s var(--ease), border-color .25s var(--ease); }
.blog-post:hover { background: var(--white); border-left-color: var(--gold); }
.blog-post__title { font-size: .95rem; font-weight: 500; color: var(--charcoal); line-height: 1.55; text-wrap: pretty; transition: color .2s var(--ease); }
.blog-post:hover .blog-post__title { color: var(--burgundy); }
.blog-post__title::after { content: "↗"; font-size: .8em; color: var(--gold); margin-left: 6px; transition: color .2s var(--ease); }
.blog-post__meta { margin-top: 5px; font-size: .78rem; color: var(--muted); letter-spacing: .01em; }

/* '더 보기' 토글 (JS 없이 details/summary) */
.blog-more { margin-top: 2px; }
.blog-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 10px 2px 2px; font-size: .85rem; font-weight: 600; color: var(--gold); transition: color .2s var(--ease); }
.blog-more summary::-webkit-details-marker { display: none; }
.blog-more summary::before { content: "▾"; font-size: .8em; transition: transform .25s var(--ease); }
.blog-more[open] summary::before { transform: rotate(180deg); }
.blog-more summary:hover { color: var(--burgundy); }
.blog-more__close { display: none; }
.blog-more[open] .blog-more__open { display: none; }
.blog-more[open] .blog-more__close { display: inline; }
.blog-more > .blog-group__list { border-top: 1px solid var(--line); margin-top: 8px; }

/* 하단 '더 찾아보기' 안내 */
.blog-note { margin-top: clamp(28px, 4vw, 40px); color: var(--muted); font-size: .95rem; line-height: 1.8; text-wrap: pretty; max-width: var(--maxw-narrow); }
.blog-note a { color: var(--burgundy); font-weight: 600; border-bottom: 1px solid var(--line-gold); transition: color .2s var(--ease), border-color .2s var(--ease); }
.blog-note a:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 860px) {
  .blog-groups { grid-template-columns: 1fr; }
}