/* ⑥ 카드 편집: 공용 카드 모양 (디자인 기준 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-text: #8134af;
  --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", "Malgun Gothic", sans-serif;
  --cn-em-bg: transparent; --cn-em-fg: var(--cn-accent-text);
  --cn-photo-h: 0%;
  position: relative; width: 1080px; height: 1350px; overflow: hidden;
  background: var(--cn-bg); color: var(--cn-fg); font-family: var(--cn-font);
  word-break: keep-all; overflow-wrap: anywhere; box-sizing: border-box;
}
.cn-card *, .cn-card *::before, .cn-card *::after { box-sizing: border-box; }
.cn-card.r-11 { height: 1080px; }

/* 사진 자리: 모든 카드에 있다. 보이는 모양은 템플릿이 정한다 */
.cn-photo { position: absolute; left: 0; top: 0; right: 0; height: var(--cn-photo-h); display: none; overflow: hidden; }
.cn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--cn-dim)); }
.cn-card.has-photo .cn-photo { display: block; }

.cn-label { position: absolute; left: 72px; top: 64px; font-size: 30px; font-weight: 600; color: var(--cn-sub); line-height: 1.2; white-space: nowrap; z-index: 2; }
.cn-page { position: absolute; right: 72px; bottom: 64px; font-size: 28px; font-weight: 600; color: var(--cn-sub); line-height: 1.2; white-space: nowrap; z-index: 2; }

.cn-box {
  position: absolute; left: 72px; right: 72px; top: 140px; bottom: 124px; z-index: 1;
  padding: var(--cn-pad-y) var(--cn-pad-x);
  background: rgba(var(--cn-box-rgb), var(--cn-box-alpha)); border-radius: var(--cn-radius);
  display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden;
}
.cn-card.has-photo .cn-box { top: calc(var(--cn-photo-h) + 40px); }

/* 글 칸: 줄바꿈을 그대로 보인다 */
.cn-card [data-field] { white-space: pre-line; margin: 0; line-height: calc(1.3 * var(--cn-line)); outline: none; min-height: 1em; }
.cn-em { font-style: normal; color: var(--cn-em-fg); background: var(--cn-em-bg); }

.cn-kicker { align-self: flex-start; padding: 8px 24px; border-radius: 999px; background: var(--cn-accent); color: var(--cn-accent-fg); }
.cn-title { letter-spacing: -0.01em; }
.cn-sub { color: var(--cn-sub); }

/* 표지 */
.cn-L-cover .cn-box { justify-content: flex-end; gap: 32px; }
.cn-L-cover .cn-title { line-height: calc(1.2 * var(--cn-line)); }

/* 목록 */
.cn-items { display: flex; flex-direction: column; gap: 36px; }
.cn-item { display: grid; grid-template-columns: 60px 1fr; column-gap: 26px; row-gap: 8px; align-items: start; }
.cn-num { grid-row: 1 / span 2; width: 60px; height: 60px; border-radius: 50%; background: var(--cn-accent); color: var(--cn-accent-fg); font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.cn-item .cn-body { color: var(--cn-sub); }

/* 인용 */
.cn-L-quote .cn-box::before { content: "\201C"; position: absolute; left: calc(var(--cn-pad-x) - 8px); top: 0; font-size: 220px; font-weight: 800; line-height: 1; color: var(--cn-accent); opacity: .25; }
.cn-L-quote .cn-title { color: var(--cn-sub); }
.cn-L-quote .cn-quote { line-height: calc(1.45 * var(--cn-line)); }

/* 숫자 */
.cn-L-stat .cn-number { color: var(--cn-accent-text); line-height: 1; letter-spacing: -0.03em; }

/* 마무리 */
.cn-L-outro .cn-box { align-items: center; text-align: center; }
.cn-cta { padding: 20px 48px; border-radius: 999px; background: var(--cn-accent); color: var(--cn-accent-fg); }

/* 편집할 때만 보이는 것 (저장할 때 지운다) */
.cn-badge { position: absolute; right: 16px; top: 16px; z-index: 5; padding: 8px 18px; border-radius: 999px; background: #dc2626; color: #fff; font: 700 28px "Pretendard", sans-serif; }

/* ---------- 템플릿: 클린 ---------- */
.t-clean { --cn-bg: #ffffff; --cn-fg: #111827; --cn-sub: #4b5563; --cn-box-alpha: 0; --cn-radius: 0px; --cn-photo-h: 38%;
  --cn-em-fg: inherit; --cn-em-bg: linear-gradient(transparent 58%, color-mix(in srgb, var(--cn-accent) 32%, transparent) 58%); }

/* ---------- 템플릿: 블랙 임팩트 ---------- */
.t-impact { --cn-bg: #0b0b0f; --cn-fg: #ffffff; --cn-sub: #b4b4c0; --cn-accent: #d4ff3a; --cn-accent-fg: #0b0b0f; --cn-accent-text: #d4ff3a;
  --cn-box-rgb: 255, 255, 255; --cn-box-alpha: 0; --cn-radius: 0px; --cn-photo-h: 100%; --cn-dim: 0.55;
  --cn-em-fg: #d4ff3a; --cn-em-bg: transparent; }
.t-impact .cn-title { font-weight: 900; }
.t-impact.has-photo .cn-box { top: 140px; }

/* ---------- 템플릿: 매거진 포토 ---------- */
.t-photo { --cn-bg: linear-gradient(160deg, var(--cn-brand1, #8134af), var(--cn-brand2, #dd2a7b)); --cn-fg: #111827; --cn-sub: #4b5563;
  --cn-box-rgb: 255, 255, 255; --cn-box-alpha: 0.92; --cn-radius: 28px; --cn-photo-h: 100%; --cn-dim: 0;
  --cn-em-fg: var(--cn-accent-text); --cn-em-bg: transparent; }
.t-photo .cn-box { top: auto; min-height: 46%; max-height: calc(100% - 140px - 124px); justify-content: center; }
.t-photo.has-photo .cn-box { top: auto; }
.t-photo .cn-label, .t-photo .cn-page { color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.t-photo.cn-L-cover .cn-box { min-height: 0; }