/* ⑥ 카드 편집 — 공용 카드 HTML(디자인 기준 6-1·6-2) + 테마 변수(6-3). 테마는 .t-이름 한 덩어리로 바꿔 끼운다 */
.cn-card {
  --cn-bg: #ffffff; --cn-fg: #111827; --cn-sub: #4b5563;
  --cn-accent: #8134af; --cn-accent-fg: #ffffff; --cn-accent-ink: #8134af; --cn-on-bg: #4b5563;
  --cn-em-fg: inherit; --cn-em-mark: transparent;
  --cn-box-rgb: 255, 255, 255; --cn-box-alpha: 0; --cn-radius: 0px;
  --cn-pad-y: 56px; --cn-pad-x: 64px; --cn-line: 1; --cn-dim: 0;
  --cn-font: "Pretendard", system-ui, sans-serif;
  --cn-edge: 72px;
  position: relative; width: 1080px; height: 1350px; overflow: hidden; box-sizing: border-box;
  background: var(--cn-bg); color: var(--cn-fg); font-family: var(--cn-font);
  transform-origin: 0 0; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: anywhere;
}
.cn-card.r-11 { height: 1080px; }
.cn-card *, .cn-card *::before { box-sizing: border-box; }
.cn-card h2, .cn-card p, .cn-card ol, .cn-card blockquote { margin: 0; padding: 0; }

/* 공통 자리 */
.cn-photo { position: absolute; inset: 0; display: none; }
.cn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(var(--cn-ph-b, 1)) contrast(var(--cn-ph-c, 1)) saturate(var(--cn-ph-s, 1)); }
.cn-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--cn-dim)); }
/* 아래로 진해지는 덮개(피그마 «선형» 채우기) — 위 35%는 사진 그대로, 맨 아래는 어둡게 정한 값의 두 배까지 */
.cn-card.dim-grad .cn-photo::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, min(0.95, calc(var(--cn-dim) * 2))) 100%); }
.cn-label { position: absolute; left: var(--cn-edge); top: 64px; font-size: 30px; font-weight: 600; line-height: 1; color: var(--cn-on-bg); }
.cn-page { position: absolute; right: var(--cn-edge); bottom: 64px; font-size: 28px; font-weight: 600; line-height: 1; color: var(--cn-on-bg); }
.cn-box {
  position: absolute; left: var(--cn-edge); right: var(--cn-edge); top: 128px; bottom: 124px;
  padding: var(--cn-pad-y) var(--cn-pad-x); overflow: hidden;
  background: rgba(var(--cn-box-rgb), var(--cn-box-alpha)); border-radius: var(--cn-radius);
  display: flex; flex-direction: column; justify-content: center; gap: 40px;
}
.cn-f { display: block; max-width: 100%; white-space: pre-line; letter-spacing: -0.02em; } /* 칸마다 다시 걸어야 제 글자 크기 기준 −2%(카드에만 걸면 16px 기준으로 굳어 큰 제목은 0%에 가깝다 · kelsey ①) */
.cn-title, .cn-quote, .cn-number { font-family: var(--cn-title-font, var(--cn-font)); } /* 템플릿이 제목 글꼴만 따로 정할 수 있게 */
.cn-em { font-style: normal; color: var(--cn-em-fg); background: linear-gradient(transparent 62%, var(--cn-em-mark) 62%); }
.cn-number .cn-em, .cn-kicker .cn-em, .cn-cta .cn-em { background: none; color: inherit; }
/* 포인트 글꼴(디자인 패널) — 강조 낱말과 꼬리표에만. 고르지 않으면 원래 글꼴 */
.cn-em, .cn-kicker { font-family: var(--cn-point-font, inherit); }

/* 종류별 칸 구성 */
.l-cover .cn-box { justify-content: flex-end; gap: 36px; }
.cn-kicker { align-self: flex-start; padding: 12px 28px; border-radius: 999px; background: var(--cn-accent); color: var(--cn-accent-fg); }
.cn-sub, .cn-desc, .cn-ctx { color: var(--cn-sub); }
.cn-items { list-style: none; display: flex; flex-direction: column; gap: 36px; }
.cn-item { display: grid; grid-template-columns: 64px 1fr; gap: 28px; align-items: start; }
.cn-num { width: 64px; height: 64px; border-radius: 50%; background: var(--cn-accent); color: var(--cn-accent-fg); font-size: 32px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
/* 번호는 칠한 동그라미 대신 얇은 선 동그라미 — 칠하면 번호마다 강조가 되어 한 장에 강조가 여러 곳(kelsey ⑤ · AGY 판정 2026-11-04). 팝은 일부러 굵은 모양 */
.cn-card:not(.t-pop) .cn-num { background: transparent; color: var(--cn-accent-ink); border: 2px solid var(--cn-accent-ink); }
.cn-item-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cn-body { color: var(--cn-sub); }
.l-quote .cn-box { gap: 28px; }
.cn-qmark { font-size: 220px; font-weight: 800; line-height: 0.7; height: 120px; color: var(--cn-accent); opacity: 0.25; }
.cn-number { color: var(--cn-accent-ink); letter-spacing: -0.04em; }
.l-stat .cn-box { gap: 32px; }
/* 비교: 두 칸 나란히 — 왼쪽은 흐리게(이렇게 말고), 오른쪽은 포인트 선(이렇게).
   두꺼운 상자 대신 얇은 선(kelseygraphy «AI 티 없애기» ④) — 왼쪽 1px 흐린 선, 오른쪽 2px 포인트 선 */
.l-compare .cn-box { gap: 40px; }
.cn-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cn-side { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 16px; min-width: 0; }
.cn-side-left { opacity: 0.62; }
.cn-side-right { border: 2px solid var(--cn-accent); }
.cn-side .cn-body { color: inherit; }
.cn-cta { align-self: flex-start; padding: 22px 44px; border-radius: 999px; background: var(--cn-accent); color: var(--cn-accent-fg); }

/* 편집 표시(저장할 때 지운다 — data-edit-ui · .is-editing · contenteditable) */
.cn-photo-hint { position: absolute; left: 24px; bottom: 24px; z-index: 2; font-size: 26px; font-weight: 600; padding: 6px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; opacity: 0; transition: opacity .15s; }
.cn-card:hover .cn-photo-hint { opacity: 1; }
.cn-card [contenteditable] { outline: none; border-radius: 6px; cursor: text; } /* 크롬은 고치는 칸을 pre-wrap 으로 바꾼다 — 줄바꿈은 그대로 산다 */
.cn-card [contenteditable]:hover { box-shadow: 0 0 0 3px rgba(129, 52, 175, 0.25); }
.cn-card [contenteditable]:focus, .cn-card .is-picked { outline: 4px dashed #8134af; outline-offset: 6px; }
.is-moving .cn-label, .is-moving .cn-page { cursor: grab; touch-action: none; outline: 4px dashed #8134af; outline-offset: 8px; z-index: 3; }
.is-moving .cn-label:active, .is-moving .cn-page:active { cursor: grabbing; }
.cn-badges { position: absolute; right: var(--cn-edge); top: 52px; display: flex; gap: 10px; }
.cn-badge { font-size: 26px; font-weight: 700; padding: 6px 18px; border-radius: 999px; }
.cn-badge.over { background: #dc2626; color: #fff; }
.cn-badge.warn { background: #fde68a; color: #92400e; }

/* ── 템플릿(디자인 기준 6-3) — 공용 HTML 은 그대로, 아래 블록의 변수와 몇 줄만 다르다.
   브랜드 색에서 오는 값(--cn-accent 등)은 themes.js 의 themeVars 가 카드에 직접 꽂는다(대비 보정 포함) ── */

/* 클린 — 흰 바탕 · 포인트 = 브랜드 1 · 강조는 형광펜 밑줄 · 사진은 위 38% 띠(없으면 숨김) */
.t-clean { --cn-bg: #ffffff; --cn-fg: #111827; --cn-sub: #4b5563; --cn-box-rgb: 255, 255, 255; --cn-box-alpha: 0; --cn-radius: 0px; --cn-dim: 0; }
.t-clean.has-photo .cn-photo { display: block; bottom: 62%; }
.t-clean.has-photo .cn-box { top: calc(38% + 24px); }
.t-clean.has-photo .cn-label, .t-vault.has-photo .cn-label { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } /* 라벨이 사진 띠 위 */

/* 블랙 임팩트 — 바탕 #0b0b0f · 흰 글자 · 포인트 #d4ff3a · 강조는 포인트 색 글자 · 표지 제목 112px */
.t-impact { --cn-bg: #0b0b0f; --cn-fg: #ffffff; --cn-sub: #a1a1aa; --cn-accent: #d4ff3a; --cn-accent-fg: #0b0b0f; --cn-box-rgb: 11, 11, 15; --cn-box-alpha: 0; --cn-radius: 0px; --cn-dim: 0.45; }
.t-impact .cn-title { letter-spacing: -0.04em; }
.t-impact .cn-qmark { opacity: 0.9; }
.t-impact.has-photo .cn-photo { display: block; }

/* 매거진 포토 — 사진이 카드 전체(없으면 브랜드 1 → 2 그라데이션) · 흰 글상자 92% · 모서리 28 · 카드 아래쪽 */
.t-photo { --cn-box-rgb: 255, 255, 255; --cn-box-alpha: 0.92; --cn-radius: 28px; --cn-dim: 0.25; --cn-fg: #111827; --cn-sub: #4b5563; }
.t-photo .cn-photo { display: block; background: linear-gradient(160deg, var(--cn-grad-a, #8134af), var(--cn-grad-b, #dd2a7b)); }
.t-photo:not(.has-photo) .cn-photo::after { background: transparent; }
.t-photo .cn-box { top: auto; max-height: calc(100% - 252px); justify-content: flex-start; }
.t-photo.l-cover .cn-box, .t-photo.l-outro .cn-box { justify-content: flex-end; }

/* 뉴스레터 — 크림 바탕 · 먹색 · 제목만 명조(이 PC 글꼴: 바탕·애플 명조 — 새 글꼴 파일 없음) · 위아래 가는 선 · 강조는 녹슨 주황 밑줄 */
.t-newsletter { --cn-bg: #f7f3ea; --cn-fg: #1c1917; --cn-sub: #57534e; --cn-box-alpha: 0; --cn-radius: 0px; --cn-dim: 0;
  --cn-title-font: "Batang", "바탕", "AppleMyungjo", "Nanum Myeongjo", serif; }
.t-newsletter .cn-box { border-top: 3px solid var(--cn-fg); border-bottom: 1px solid var(--cn-fg); }
.t-newsletter .cn-title, .t-newsletter .cn-quote { letter-spacing: -0.06em; } /* 애플 명조는 글자 사이가 넓다 */
.t-newsletter .cn-em { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.t-newsletter .cn-num { background: transparent; color: var(--cn-accent-ink); border: 3px solid var(--cn-accent-ink); }
.t-newsletter .cn-kicker { background: transparent; color: var(--cn-accent-ink); border: 2px solid var(--cn-accent-ink); border-radius: 0; }
.t-newsletter .cn-cta { border-radius: 0; }
.t-newsletter .cn-qmark { opacity: 0.35; }
.t-newsletter.has-photo .cn-photo { display: block; bottom: 62%; }
.t-newsletter.has-photo .cn-box { top: calc(38% + 24px); }
.t-newsletter.has-photo .cn-label { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }

/* 팝 — 장 종류마다 바탕 원색(themeVars) · 흰 글상자에 굵은 검정 테두리와 그림자 · 강조는 노란 형광펜 · 각진 단추 */
.t-pop { --cn-box-rgb: 255, 255, 255; --cn-box-alpha: 1; --cn-radius: 0px; --cn-dim: 0.3; --cn-fg: #111111; --cn-sub: #3f3f46; }
.t-pop .cn-box { border: 8px solid #111; box-shadow: 16px 16px 0 #111; right: calc(var(--cn-edge) + 16px); }
.t-pop .cn-num { border-radius: 0; border: 4px solid #111; }
.t-pop .cn-kicker, .t-pop .cn-cta { border-radius: 0; border: 4px solid #111; }
.t-pop .cn-title { letter-spacing: -0.04em; }
.t-pop .cn-qmark { opacity: 1; color: #111; }
.t-pop.has-photo .cn-photo { display: block; }

/* ① 디자인 보관함의 디자인 — 색 6가지(바탕·글자·보조·선·면·강조)를 themeVars 가 변수로 꽂는다 */
.t-vault { --cn-box-alpha: 0; --cn-radius: 0px; --cn-dim: 0; }
.t-vault.has-photo .cn-photo { display: block; bottom: 62%; }
.t-vault.has-photo .cn-box { top: calc(38% + 24px); }

/* 미리 보기 칸 */
.cn-frame { position: relative; width: 100%; overflow: hidden; border-radius: 12px; border: 1px solid var(--line, #e5e7eb); background: #fff; }
.cn-frame > .cn-card { position: absolute; left: 0; top: 0; }

/* ── 장 종류가 템플릿보다 앞서는 규칙(파일 맨 끝에 둔다) ── */
/* 사진 한 장: 사진이 위쪽을 크게 차지하고(어느 템플릿이든), 한 줄 설명은 아래 */
.cn-card.l-photo .cn-photo { display: block; left: var(--cn-edge); right: var(--cn-edge); top: 128px; bottom: auto; height: calc(100% - 128px - 380px); border-radius: var(--cn-radius); overflow: hidden; background: color-mix(in srgb, var(--cn-fg) 8%, transparent); }
.cn-card.l-photo .cn-photo::after { background: transparent; }
.cn-card.l-photo .cn-box { top: auto; bottom: 124px; max-height: 300px; justify-content: flex-end; gap: 16px; }
.cn-card.l-photo .cn-label { color: var(--cn-on-bg); text-shadow: none; }
.cn-photo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 600; color: var(--cn-sub); border: 4px dashed color-mix(in srgb, var(--cn-fg) 30%, transparent); border-radius: inherit; }