/* 카드뉴스 화면 부분(무대·미리보기·편집 칸). 카드 틀 모양은 public/tpl/base.css + public/tpl/<틀>.css(디자인팀 6종) */
.cd-stage-out { position: fixed; left: -30000px; top: 0; width: 1080px; pointer-events: none; }
.cd-stage { width: 1080px; }

/* 틀 고르기 */
.tpl-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tpl-choice { border: 2px solid var(--line); border-radius: 12px; padding: 4px; background: var(--card); cursor: pointer; text-align: center; font: inherit; color: inherit; min-width: 0; }
.tpl-choice.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.tpl-choice .cd-thumb { border-radius: 8px; }
.tpl-choice b { display: block; font-size: 12.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.acc-row input[type=color] { width: 52px; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--card); }
@media (min-width: 860px) { .tpl-choices { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 화면 미리보기(작게) */
.cd-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cd-thumb { position: relative; aspect-ratio: 1080 / 1350; overflow: hidden; border-radius: 10px; background: #0A0C11; border: 1px solid var(--line); }
.cd-thumb .cd-scale { position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; transform-origin: 0 0; }
.cd-thumb.warn { outline: 3px solid var(--wait); outline-offset: 1px; }
.cd-thumb .no { position: absolute; left: 6px; bottom: 6px; z-index: 2; font-size: 11px; font-weight: 700; color: #0A0C11; background: #C6FF1A; border-radius: 99px; padding: 1px 7px; }
@media (min-width: 860px) { .cd-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 편집 칸 */
.cd-ed h3 { display: flex; align-items: center; gap: 8px; }
.cd-ed h3 .pill { font-weight: 700; }
.cd-ed textarea.t1 { min-height: 64px; }
.cd-ed textarea.t2 { min-height: 120px; }
.cd-ed .imgbox img { width: 64px; height: 64px; }
.cd-ed .warns { margin-top: 8px; }
.cd-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cd-res figure { margin: 0; font-size: 11.5px; color: var(--sub); text-align: center; }
.cd-res img { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--line); }
.cd-res button { margin-top: 4px; width: 100%; }
.vd-canvas, .vd-out { display: block; width: 100%; max-width: 270px; aspect-ratio: 1080 / 1920; margin: 12px auto 0; border-radius: 12px; background: #0A0C11; border: 1px solid var(--line); }
.pm-list { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--soft); }
.pm-list .pm { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.pm-list .pm span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 8px; }
.meter i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; }
.st-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
.st-tab th, .st-tab td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line); }
.st-tab td:nth-child(n+2), .st-tab th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
input[type=range] { accent-color: var(--accent); }
.logo-prev { max-width: 220px; max-height: 64px; display: block; background: #fff; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; }