/* 카드뉴스 틀 공통 뼈대(6종 공용). 자리·크기만 정하고 색·모양은 각 틀의 template.css가 맡는다.
   지금 public/cards.css의 .cdk 규칙 중 '자리' 부분만 떼어 낸 것. 칸 이름은 그대로다.
   .cdk(.cv 표지 | .pg 본문 | .cl 마무리)
     .lanes .glow            꾸밈 두 칸(틀마다 다르게 씀, 안 쓰면 숨김)
     .hd > .org | .logo>img, .n
     .main > h1.t(>span 둘째 줄), .sub(표지만), .ph>img, .speed(표지 사진 없을 때), .box(.fill|.empty)>p
     .bar > .s, .l           표지·마무리만 */
@font-face { font-family: "Pretendard"; src: url(/fonts/PretendardVariable-1.3.9.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
/* 화이트 리포트(paper) 제목용 명조: Noto Serif KR(OFL), 굵기 600~900·한글 2,350자로 줄인 파일(이미지로 내보낼 때도 같은 글꼴이 들어가게 앱 안에 둔다) */
@font-face { font-family: "Noto Serif KR"; src: url(/fonts/NotoSerifKR-600-900-KSX1001.woff) format("woff"); font-weight: 600 900; font-display: block; }

.cdk {
  --accent: #C6FF1A;
  width: 1080px; height: 1350px; position: relative; overflow: hidden;
  font-family: "Pretendard", sans-serif; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
  letter-spacing: -0.02em; line-height: 1.4; text-align: left;
}
.cdk * { box-sizing: border-box; margin: 0; padding: 0; }
.cdk .lanes, .cdk .glow { position: absolute; z-index: 0; pointer-events: none; }

.cdk .hd { position: absolute; left: 64px; right: 64px; top: 52px; height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; z-index: 6; }
.cdk .hd .org { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cdk .hd .logo { display: inline-flex; align-items: center; height: 64px; max-width: 520px; }
.cdk .hd .logo img { height: 48px; max-width: 484px; object-fit: contain; display: block; }
.cdk .hd .n { flex: none; font-variant-numeric: tabular-nums; }

.cdk .main { position: absolute; z-index: 4; display: flex; flex-direction: column; overflow: hidden; }
.cdk .t { white-space: nowrap; flex: none; }
.cdk .ph { position: relative; overflow: hidden; flex: 1 1 0; min-height: 260px; }
.cdk .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdk .speed { flex: none; }
.cdk .speed span { display: block; }

.cdk.cv .main { left: 56px; right: 64px; top: 168px; bottom: 336px; gap: 34px; }
.cdk.cv .sub { flex: none; }
.cdk.cv .speed { margin-top: auto; }
.cdk .bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; }
.cdk.cv .bar { height: 300px; padding: 0 64px 50px; }
.cdk.cl .bar { height: 250px; padding: 0 64px 44px; }
.cdk .bar .l { white-space: nowrap; }

.cdk.pg .main { left: 48px; right: 48px; top: 156px; bottom: 60px; gap: 30px; }
.cdk.cl .main { left: 48px; right: 48px; top: 156px; bottom: 270px; gap: 26px; }
.cdk .box { flex: none; position: relative; }
.cdk .box.fill { flex: 1 1 auto; }
.cdk .box.empty { display: none; }