/* ============ 공지 본문(.news-*) — 공개 news_detail 페이지와 관리자 미리보기 쉘이 '같은 파일'을 싣는다.
   V7-02: 원래 pages/news_detail.php 의 페이지 인라인 <style> 이었다. 미리보기가 style.css 만 실어
   흰 무스타일로 렌더되던 것을, 스타일을 이 파일로 추출해 두 화면이 물리적으로 같은 출처를 쓰게 했다.
   🚨 규칙을 고치면 이 파일 하나만 고치면 된다 — news_detail.php 로 인라인 복원 금지(다시 두 벌이 된다).
   토큰(--iv/--dim/--faint/--ln/--cy)은 공개 페이지에서는 .compx(compx_style.php)가 공급하고,
   미리보기 쉘에서는 아래 .news-pv 가 같은 값을 공급한다 — compx 값을 바꾸면 여기도 같이. */
.news-pv{--iv:#eef0f4;--dim:#ccd3dc;--faint:#b0b9c5;--ln:rgba(255,255,255,.10);--cy:#7fd7ee}

/* 본문 폭 1060px — 대표 지적(2026-08-19) "좌우를 다 사용하지 못한다". 820px 는 순수 텍스트
   기사에는 맞았지만 표·이미지가 든 공지가 좁게 눌렸다. 컨테이너(compx)와 같은 리듬의 넓은 폭. */
.news-article{max-width:1060px;margin:0 auto}
.news-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13px}
.news-article-meta .badge{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:7px;
  background:rgba(127,215,238,.14);color:#9ee7ff;font-size:12px;font-weight:700}
.news-article-meta .badge.pin{background:rgba(127,215,238,.24)}
.news-article-meta .date{font-family:var(--font-mono);color:var(--faint)}
.news-article-meta .views{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);color:var(--faint)}
.news-article-meta .views svg{width:15px;height:15px}
.news-rule{border:0;border-top:1px solid var(--ln);margin:clamp(20px,2.4vw,28px) 0}
/* dark prose for sanitised article body */
.news-body{color:var(--dim);font-size:clamp(15.5px,1.25vw,17px);line-height:1.85}
.news-body > *:first-child{margin-top:0}
.news-body p{margin:0 0 1.15em}
.news-body h2,.news-body h3,.news-body h4{color:#fff;font-weight:750;letter-spacing:-.02em;line-height:1.3;margin:1.7em 0 .55em}
.news-body h2{font-size:clamp(20px,2vw,25px)}.news-body h3{font-size:clamp(18px,1.7vw,21px)}
.news-body a{color:var(--cy);text-decoration:underline;text-underline-offset:2px}
.news-body strong,.news-body b{color:var(--iv)}
.news-body ul,.news-body ol{margin:0 0 1.15em;padding-left:1.4em}
.news-body li{margin:.35em 0}
.news-body img{max-width:100%;height:auto;border-radius:12px;margin:1.3em 0;border:1px solid var(--ln)}
/* 에디터(CKEditor)가 저장하는 이미지 크기·정렬 마크업을 게시판이 그대로 재현한다 —
   대표 지적(2026-08-19) "이미지 크기 조절이 안 된다": 에디터에서 줄여도 여기 규칙이 없어
   원본 크기로 풀렸다. figure 의 인라인 width:% 가 실제 크기, 안의 img 는 그 폭을 꽉 채운다. */
.news-body figure.image{margin:1.3em auto;display:block}
.news-body figure.image img{width:100%;margin:0}
.news-body figure.image.image_resized{max-width:100%}
.news-body img.image_resized{height:auto}
.news-body .image-style-align-left{float:left;margin:.4em 1.4em 1em 0;max-width:50%}
.news-body .image-style-align-right{float:right;margin:.4em 0 1em 1.4em;max-width:50%}
.news-body .image-style-block-align-left{margin-left:0;margin-right:auto}
.news-body .image-style-block-align-right{margin-left:auto;margin-right:0}
.news-body p+.image-style-align-left,.news-body p+.image-style-align-right{margin-top:.2em}
.news-body figure.image>figcaption{font-size:13px;color:var(--faint);text-align:center;padding:8px 0 0}
/* 좌우 배치(float) 뒤 문단이 이미지 옆을 흐르다 다음 블록과 겹치지 않게 */
.news-body h2,.news-body h3,.news-body hr,.news-body table,.news-body blockquote{clear:both}
.news-body::after{content:"";display:block;clear:both}
/* 에디터의 글자 정렬·크기 지정이 그대로 살도록 — 인라인 style 이 새니타이저를 통과하므로
   여기서는 충돌하는 규칙만 없으면 된다(별도 규칙 불필요, 기록용 주석). */
.news-body iframe{max-width:100%;border-radius:12px;border:1px solid var(--ln);margin:1.3em 0}
.news-body blockquote{margin:1.3em 0;padding:4px 0 4px 20px;border-left:2px solid var(--cy);color:var(--iv)}
.news-body table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:14px}
.news-body th,.news-body td{border:1px solid var(--ln);padding:9px 12px;text-align:left}
.news-body hr{border:0;border-top:1px solid var(--ln);margin:1.6em 0}
.news-lead{color:var(--iv);font-size:clamp(16px,1.4vw,19px);line-height:1.8}
.news-figure{margin:clamp(20px,2.4vw,30px) 0 0}
.news-figure img{width:100%;height:auto;border-radius:14px;border:1px solid var(--ln)}
.news-attach{margin-top:clamp(26px,3vw,36px);padding:clamp(20px,2.2vw,26px);border:1px solid var(--ln);border-radius:14px;background:rgba(255,255,255,.02)}
.news-attach strong{display:block;font-size:13px;color:var(--faint);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.news-attach ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.news-attach li{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:14px}
.news-attach .att-icon{color:var(--cy)}.news-attach .att-icon svg{width:17px;height:17px;display:block}
.news-attach a{color:var(--iv);text-decoration:none;border-bottom:1px solid var(--ln)}
.news-attach a:hover{border-bottom-color:var(--cy);color:#fff}
.news-back{margin-top:clamp(30px,4vw,48px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--ln)}
.news-back .back{display:inline-flex;align-items:center;gap:9px;color:var(--cy);font-size:14px;font-weight:700;text-decoration:none}
.news-back .back svg{width:17px;height:17px}
.news-back .back:hover{text-decoration:underline}
/* 기사 제목 — 섹션 히어로(.cx-hero h1, 최대 52px)를 그대로 쓰면 게시글 제목으로는 너무 크다.
   회사소개·역량 같은 페이지의 제목은 '홍보 헤드라인'이라 크게 가는 게 맞지만, 게시글 제목은
   날짜·분류와 함께 읽는 정보라 한 급 낮춰야 본문과 위계가 맞는다(대표님 지적 2026-09-03).
   🚨 선택자에 .cx-hero 를 앞세운 이유: `.cx-hero h1`(0,1,1)이 `.news-hero-h1`(0,1,0)을
      명시도로 이긴다 — 이 프로젝트에서 반복해 밟은 함정이라 여기서 못 박는다. */
/* 🚨 폭도 함께 풀어야 한다. `.cx-hero h1` 은 `max-width:20ch` — 홍보 헤드라인은 짧아서 그 폭이
   맞지만, 게시글 제목은 그보다 길다. 실측(2026-09-03): 부모에 1200px 이 남는데도 상자가 742px 에서
   잘려 한 줄에 필요한 747px 를 **4px 차이로** 못 채우고 두 줄이 됐다. 제목 길이는 대표님이 정하는
   것이지 20자에 맞출 일이 아니므로, 본문 폭(1060)까지 열어 준다. */
.cx-hero h1.news-hero-h1{max-width:1060px;font-size:clamp(25px,2.9vw,38px);line-height:1.22}
@media (max-width:560px){
  .cx-hero h1.news-hero-h1{font-size:clamp(20px,5.4vw,25px);line-height:1.3}
}