/* 「AI 소식」 주간 글 전용 — 목록 카드·값 비교 막대·본문 그림 (2026-09-24)
   양식 정본 = act2/b2a/projects/homepage/ai-news-format-260924.md */

/* ── 목록: 이번 주 글 카드 ─────────────────────────────── */
.news-latest{display:block; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--paper-white); text-decoration:none; color:inherit; transition:border-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);}
.news-latest img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--paper);}
.news-latest .tx{display:block; padding:20px 22px 22px;} /* span 이라 display:block 이 없으면 여백이 안 먹는다 */
.news-latest .q{display:block; font-size:var(--fs-meta); color:var(--gray-mute); margin-bottom:8px;}
.news-latest b{display:block; font-size:var(--fs-h3); font-weight:var(--w-card-title); line-height:var(--lh-head); letter-spacing:var(--ls-tight); color:var(--ink); margin-bottom:8px;}
.news-latest p{margin:0 0 12px; font-size:var(--fs-small); color:var(--ink-soft); line-height:var(--lh-body);}
.news-latest .go{font-size:var(--fs-meta); font-weight:700; color:var(--accent);}
@media (hover:hover) and (pointer:fine){ .news-latest:hover{border-color:var(--line-strong);} }
.news-latest:active{transform:scale(var(--press-sm)); border-color:var(--line-strong);}

/* ── 본문: 소식 구획 ───────────────────────────────────── */
.news-item{margin-top:44px; padding-top:30px; border-top:1px solid var(--line);}
.news-item:first-of-type{margin-top:26px; padding-top:0; border-top:0;}
.news-label{display:inline-block; font-size:var(--fs-meta); font-weight:700; color:var(--accent); margin-bottom:6px;}
.g-body .news-item h2{margin-top:4px;} /* 이름표 바로 아래 제목 — 본문 h2 기본 위 여백을 줄인다 */
.news-src{font-size:var(--fs-meta); color:var(--gray-mute); margin-top:14px; line-height:var(--lh-meta);}
.news-src a{color:var(--gray-warm);}
.news-oneline{margin-top:44px; padding:22px 24px; border-radius:var(--r-md); background:var(--paper-white); border:1px solid var(--line);}
.news-oneline b{display:block; font-size:var(--fs-meta); color:var(--accent); margin-bottom:6px;}
.news-oneline p{margin:0; font-size:var(--fs-lead); line-height:var(--lh-read); color:var(--ink);}

/* ── 본문 그림 ────────────────────────────────────────── */
.news-img{margin:22px 0 6px;}
.news-img img{display:block; width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--line); background:var(--paper);}
.news-img figcaption, .news-fig figcaption{font-size:var(--fs-meta); color:var(--gray-mute); margin-top:8px; line-height:var(--lh-meta);}

/* ── 값 비교 막대(가로) — 한 가지 값이라 범례 없음·이름과 값을 막대 옆에 직접 적는다 ── */
.news-fig{margin:24px 0 8px; padding:20px 20px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-white);}
.news-fig .fig-title{font-size:var(--fs-small); font-weight:700; color:var(--ink); margin:0 0 4px;}
.news-fig .fig-sub{font-size:var(--fs-meta); color:var(--gray-mute); margin:0 0 10px;}
.pc{width:100%; border-collapse:separate; border-spacing:0 10px;}
.pc caption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.pc th{width:132px; padding:0 12px 0 0; text-align:left; vertical-align:middle; font-size:var(--fs-meta); font-weight:700; color:var(--ink); line-height:var(--lh-head);}
.pc th small{display:block; font-size:var(--fs-meta); font-weight:400; color:var(--gray-mute);}
.pc td{padding:0; vertical-align:middle;}
.pc .bar{display:flex; align-items:center; gap:10px;}
.pc .track{flex:1; min-width:0;}
.pc .fill{display:block; height:20px; min-width:4px; background:var(--ink); border-radius:0 4px 4px 0;}
.pc .fill.prev{background:var(--line-strong);}
.pc .val{flex:none; width:62px; text-align:right; font-size:var(--fs-meta); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.pc .val.prev{color:var(--gray-mute); font-weight:400;}
@media (max-width:640px){
  .news-fig{padding:16px 14px 12px;}
  .pc th{width:104px;}
  .pc .val{width:54px;}
}

/* ── 직접 시켜 본 결과: 세 모델 비교 카드 (9/24 개정 양식) ─────────────── */
.memo-box{margin:14px 0 6px; padding:16px 18px; border-radius:var(--r-md); background:var(--paper-white); border:1px dashed var(--line-strong); font-size:var(--fs-small); line-height:var(--lh-read); color:var(--ink-soft);}
.memo-box b{display:block; font-size:var(--fs-meta); color:var(--gray-mute); margin-bottom:6px; font-weight:700;}
.cmp{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0 8px;}
.cmp-card{border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-white); padding:16px 16px 14px;}
.cmp-card.top{border:2px solid var(--accent); padding:15px 15px 13px;} /* 그림자 없이 선 굵기로 강조(design.md 깊이 규칙) */
.cmp-rank{display:inline-block; font-size:var(--fs-meta); font-weight:700; color:var(--accent); margin-bottom:6px;}
.cmp-card h4{margin:0 0 2px; font-size:var(--fs-body); font-weight:700; line-height:var(--lh-head); color:var(--ink);}
.cmp-card .who{display:block; font-size:var(--fs-meta); color:var(--gray-mute); margin-bottom:12px;}
.cmp-card dl{margin:0; display:grid; gap:10px;}
.cmp-card dt{font-size:var(--fs-meta); color:var(--gray-mute);}
.cmp-card dd{margin:2px 0 0; font-size:var(--fs-small); line-height:var(--lh-body); color:var(--ink);}
.cmp-note{font-size:var(--fs-meta); color:var(--gray-mute); line-height:var(--lh-meta); margin-top:10px;}
.cmp-full{margin:14px 0 4px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-white);}
.cmp-full summary{cursor:pointer; padding:14px 16px; font-size:var(--fs-small); font-weight:700; color:var(--ink); min-height:24px;}
.cmp-full summary:active{opacity:.7;}
.cmp-full .cmp-out{padding:0 16px 14px;}
.cmp-full .cmp-out h5{margin:14px 0 6px; font-size:var(--fs-meta); font-weight:700; color:var(--accent);}
.cmp-full pre{white-space:pre-wrap; font-family:inherit; font-size:var(--fs-small); line-height:var(--lh-body); margin:0; padding:12px 14px; background:var(--paper); border-radius:var(--r-sm, 6px); color:var(--ink-soft);}
.try-box{margin-top:12px;}
.g-body pre.term.try-box{white-space:pre-wrap; overflow-wrap:anywhere;} /* 명령이 아니라 지시문이라 폰에서도 줄을 바꾼다 */
@media (max-width:760px){ .cmp{grid-template-columns:1fr;} }

/* ── 가. 주차별 소식 목록 (2026-10-17 · 보스 「매주 올라오는 기사들이 잘 구분이 안되게 보이는것 같아」) ──
   모든 주차 글이 같은 카드 꼴(.news-latest)이다. 목록의 첫 카드 = 최신 글(크게), 나머지 = 지난 주(가로 한 줄).
   자동 공개 장치가 첫 카드 앞에 새 카드를 끼워 넣으면 그 카드가 첫 자리로 와서 저절로 크게 보이고,
   전 주 카드는 저절로 가로 카드가 된다(HTML 을 다시 쓰지 않음). 깊이는 그림자 없이 면색·1px 선만(design.md). */
.news-list{display:grid; gap:12px;}
.news-list > .news-latest:first-child{margin-bottom:22px;}
.news-list > .news-latest:first-child img{aspect-ratio:auto 1200/630; height:auto; object-fit:contain;} /* 그림 크기는 실제 그림 비율 · 읽히기 전엔 1200×630 자리를 잡아 화면이 밀리지 않게(10/17 실주소 폰 밀림 0.09 → 0) */
.news-wk{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:16px 22px 14px; border-bottom:1px solid var(--line);}
.news-wk .wk-now{font-size:var(--fs-meta); font-weight:700; line-height:var(--lh-meta); color:var(--on-accent); background:var(--accent); border-radius:var(--r-pill); padding:2px 10px;}
.news-wk .wk-name{font-size:var(--fs-body); font-weight:700; line-height:var(--lh-head); letter-spacing:var(--ls-tight); color:var(--ink);}
.news-wk .wk-range{font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--gray-mute);}
/* 지난 주 카드: 주차 | 제목·한 줄 | 작은 그림 */
.news-list > .news-latest:not(:first-child){display:grid; grid-template-columns:172px minmax(0,1fr) 148px; align-items:stretch;}
.news-list > .news-latest:not(:first-child) .news-wk{grid-column:1; grid-row:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:16px 18px; border-bottom:0; border-right:1px solid var(--line); background:var(--paper);}
.news-list > .news-latest:not(:first-child) .wk-now{display:none;}
.news-list > .news-latest:not(:first-child) .wk-name{font-size:var(--fs-h3);}
.news-list > .news-latest:not(:first-child) img{grid-column:3; grid-row:1; align-self:center; width:100%; height:auto; aspect-ratio:auto 1200/630; object-fit:contain; padding:10px 12px; background:var(--paper-white);} /* 도표 그림도 잘리지 않게 통째로 */
.news-list > .news-latest:not(:first-child) .tx{grid-column:2; grid-row:1; align-self:center; padding:16px 18px;}
.news-list > .news-latest:not(:first-child) .tx b{font-size:var(--fs-body); margin-bottom:4px;}
.news-list > .news-latest:not(:first-child) .tx p{margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.news-list > .news-latest:not(:first-child) .tx .q,
.news-list > .news-latest:not(:first-child) .tx .go{display:none;}
/* 주차 머리가 없는 옛 꼴 카드(자동 장치 옛 판)도 깨지지 않게 */
.news-list > .news-latest:not(:first-child):not(:has(.news-wk)){grid-template-columns:minmax(0,1fr) 148px;}
.news-list > .news-latest:not(:first-child):not(:has(.news-wk)) .tx{grid-column:1;}
.news-list > .news-latest:not(:first-child):not(:has(.news-wk)) img{grid-column:2;}
@media (max-width:640px){
  .news-wk{padding:14px 18px 12px;}
  /* 폰: 지난 주 카드도 주차를 위 띠로(가로로 나누면 「10월 첫째 주」가 두 줄로 꺾였다) */
  .news-list > .news-latest:not(:first-child){display:block;}
  .news-list > .news-latest:not(:first-child) .news-wk{flex-direction:row; align-items:baseline; justify-content:flex-start; gap:4px 10px; padding:12px 18px; border-right:0; border-bottom:1px solid var(--line);}
  .news-list > .news-latest:not(:first-child) .wk-name{font-size:var(--fs-body);}
  .news-list > .news-latest:not(:first-child) img{display:none;}
  .news-list > .news-latest:not(:first-child) .tx{padding:14px 18px 16px;}
  .news-list > .news-latest:not(:first-child):not(:has(.news-wk)){grid-template-columns:minmax(0,1fr);}
}

/* ── 나. 글 머리 주차 표식 · 글 끝 주차 이동 (2026-10-17) ── */
.g-crumb .news-wk-pill{display:inline-block; margin-left:2px; padding:1px 11px; border:1px solid var(--accent); border-radius:var(--r-pill); font-size:var(--fs-small); font-weight:700; line-height:var(--lh-meta); color:var(--accent); vertical-align:middle;}
.news-weeknav{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:44px;}
.news-weeknav a{display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-white); text-decoration:none; color:inherit; transition:border-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);}
.news-weeknav .next{grid-column:2; text-align:right;}
.news-weeknav .dir{display:block; font-size:var(--fs-meta); color:var(--gray-mute); line-height:var(--lh-meta);}
.news-weeknav .wk{display:block; margin-top:6px; font-size:var(--fs-meta); font-weight:700; color:var(--accent); line-height:var(--lh-meta);}
.news-weeknav b{display:block; margin-top:2px; font-size:var(--fs-body); font-weight:700; line-height:var(--lh-head); letter-spacing:var(--ls-tight); color:var(--ink);}
@media (hover:hover) and (pointer:fine){ .news-weeknav a:hover{border-color:var(--line-strong);} }
.news-weeknav a:active{transform:scale(var(--press-sm)); border-color:var(--line-strong);}
@media (max-width:640px){ .news-weeknav{grid-template-columns:1fr;} .news-weeknav .next{grid-column:1; text-align:left;} }