/* 카드 편집기(2026-09-30) — 좌측 레일 · 가운데 캔버스 · 우측 패널.
 *
 * 배치와 핸들 모양은 스토리메이커 꾸미기(Documents/story-maker public/css/common.css)에서
 * 가져왔다. 색은 쏘톡 변수를 쓰고, 없는 변수는 여기서 기본값을 준다 — 쏘폼이 이 폴더를
 * 통째로 복사해도 그대로 보이게 하기 위해서다.
 *
 * 화면이 좁으면(휴대전화) 세 단을 위아래로 쌓는다. 캔버스가 먼저 보이고, 도구는 그 아래다.
 */

/*
 * 리아체(2026-10-15 대표님) — 기록증·상장·수료증 글씨체로 고를 수 있다. 롯데GRS 공식 배포
 * OTF 세 굵기를 고치지 않고 그대로 싣는다(라이선스 원문: /fonts/riasans/RiaSans_license.pdf).
 *
 * **굵기마다 집안 이름을 따로 준다.** 글꼴 파일이 스스로 알리는 이름이 이미 그렇게 갈려
 * 있고(리아체 Regular / Bold / ExtraBold), 편집기는 [굵게] 단추가 font-weight를 덮어쓰기
 * 때문에 한 집안에 몰아 두면 ExtraBold를 고를 길이 없다.
 *
 * 그래서 한 집안을 400·700 **양쪽에 같은 파일로** 걸어 둔다 — [굵게]를 눌러도 브라우저가
 * 가짜 굵게를 덧씌우지 않고, 고른 굵기가 그대로 보인다(서버 렌더도 같은 파일 하나를 쓴다).
 */
@font-face {
  font-family: '리아체 Regular';
  src: url('/fonts/riasans/RiaSans-Regular.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '리아체 Bold';
  src: url('/fonts/riasans/RiaSans-Bold.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '리아체 ExtraBold';
  src: url('/fonts/riasans/RiaSans-ExtraBold.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.card-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(17, 19, 24, 0.72);
  display: flex;
  /* 창을 꽉 채운다(2026-09-30 대표님 지시). 앞서는 가운데에 1480×940짜리 상자로 띄워
     좌우·위아래에 검은 여백이 남았다. 남는 자리만큼 캔버스가 작아져 카드가 찌그러져
     보였고, 좁은 창에서는 패널이 서로 밀려 글자가 줄바꿈으로 뭉갰다.
     편집기는 한 번에 하나만 열리고 그 동안 뒤 화면을 볼 일이 없어, 다 쓰는 편이 맞다. */
  align-items: stretch;
  justify-content: stretch;
  padding: 0;

  --ce-primary: #3d6df0;
  --ce-panel: #ffffff;
  --ce-panel-edge: #dfe3ea;
  --ce-ink: #1f2430;
  --ce-ink-soft: #5b6270;
  --ce-rail: #f5f6f9;
}
.card-editor-overlay.hidden { display: none; }

.card-editor {
  width: 100%;
  height: 100%;
  background: var(--ce-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-editor-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ce-panel-edge);
}
.card-editor-title { font-size: 15px; font-weight: 700; color: var(--ce-ink); margin: 0; }
.card-editor-head-spacer { flex: 1; }

/* 규격 3종 고르기 — 편집 중인 판을 바꾼다(판마다 배치가 따로 저장된다). */
.card-editor-shapes { display: flex; gap: 6px; }
.card-editor-shape-btn {
  border: 1px solid var(--ce-panel-edge);
  background: #fff;
  color: var(--ce-ink-soft);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  cursor: pointer;
}
.card-editor-shape-btn.active {
  border-color: var(--ce-primary);
  color: var(--ce-primary);
  font-weight: 700;
}

.card-editor-body { flex: 1; display: flex; min-height: 0; }

.card-editor-left,
.card-editor-right {
  background: var(--ce-rail);
  border-right: 1px solid var(--ce-panel-edge);
  width: 240px;
  flex: 0 0 240px;
  overflow-y: auto;
  padding: 12px;
}
.card-editor-right { border-right: 0; border-left: 1px solid var(--ce-panel-edge); width: 300px; flex-basis: 300px; }

.card-editor-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #eceff4;
}

/* 캔버스가 놓이는 자리 — 스크롤과 가운데 정렬만 맡는다. */
.card-editor-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

/* 확대·축소는 이 래퍼에만 transform으로 건다 — 캔버스 자체는 항상 원본 픽셀
 * (1080×1080 등)이라 서버 렌더와 좌표가 어긋나지 않는다. */
.card-editor-scaler { transform-origin: top left; flex: 0 0 auto; }

.card-editor-canvas {
  position: relative;
  overflow: hidden;
  background: #111111;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.card-editor-bg {
  position: absolute;
  inset: 0;
  background-size: cover; /* cardSpec.js의 BACKGROUND_FIT — 서버 렌더와 같은 규칙 */
  background-repeat: no-repeat;
}

.card-editor-layer {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: move;
  touch-action: none;
  user-select: none;
}
.card-editor-layer.selected { outline: 1.5px solid var(--ce-primary); outline-offset: 0; }
/* 핸들은 **고른 레이어에만** 보인다. 아홉 개가 한꺼번에 보이면 캔버스가 점으로 뒤덮여
 * 무엇을 고른 건지도 알 수 없다(실제로 그렇게 보였다). 누르면 그 레이어만 손잡이가 뜬다. */
.card-editor-layer:not(.primary) > .layer-handle { display: none; }
.card-editor-layer-text { width: 100%; white-space: pre-wrap; word-break: break-word; line-height: 1.2; }

/* 핸들 숨기기(하단 바) — 결과물에 가깝게 보려고 잠깐 끈다. */
.card-editor-canvas.hide-handles .layer-handle,
.card-editor-canvas.hide-handles .card-editor-layer.selected { outline: 0; }
.card-editor-canvas.hide-handles .layer-handle { display: none; }

/* ── 드래그 핸들·스냅 가이드 — 스토리메이커에서 그대로 ────────────────────── */
.layer-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px;
  background: #fff;
  border: 1.5px solid var(--ce-primary);
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  z-index: 20;
}
/* 손가락으로도 잡히게 실제보다 넓은 히트박스를 둔다(보이지는 않는다). */
.layer-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}
.layer-handle-nw { top: 0; left: 0; cursor: nwse-resize; }
.layer-handle-n { top: 0; left: 50%; cursor: ns-resize; }
.layer-handle-ne { top: 0; left: 100%; cursor: nesw-resize; }
.layer-handle-e { top: 50%; left: 100%; cursor: ew-resize; }
.layer-handle-se { top: 100%; left: 100%; cursor: nwse-resize; }
.layer-handle-s { top: 100%; left: 50%; cursor: ns-resize; }
.layer-handle-sw { top: 100%; left: 0; cursor: nesw-resize; }
.layer-handle-w { top: 50%; left: 0; cursor: ew-resize; }
.layer-handle-rotate { top: -28px; left: 50%; cursor: grab; }
.layer-handle-rotate:active { cursor: grabbing; }

.layer-guide { position: absolute; background: var(--ce-primary); pointer-events: none; z-index: 50; }
.layer-guide-v { top: 0; bottom: 0; width: 1px; }
.layer-guide-h { left: 0; right: 0; height: 1px; }
.layer-guide.hidden { display: none; }

/* ── 하단 바 ─────────────────────────────────────────────────────────── */
.card-editor-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--ce-panel-edge);
  background: #fff;
  flex-wrap: wrap;
}
.card-editor-foot-spacer { flex: 1; }

.card-editor-zoom { display: flex; align-items: center; gap: 6px; color: var(--ce-ink-soft); font-size: 12.5px; }
.card-editor-zoom-value { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

.card-editor-btn {
  border: 1px solid var(--ce-panel-edge);
  background: #fff;
  color: var(--ce-ink);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.card-editor-btn:hover { border-color: #c2c8d4; }
.card-editor-btn[aria-pressed='true'] { border-color: var(--ce-primary); color: var(--ce-primary); }
.card-editor-btn-primary { background: var(--ce-primary); border-color: var(--ce-primary); color: #fff; font-weight: 700; }
.card-editor-btn:disabled { opacity: 0.45; cursor: default; }

.card-editor-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ce-ink-soft);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.card-editor-hint { font-size: 11.5px; color: var(--ce-ink-soft); line-height: 1.5; margin: 8px 0 0; }

/* ── 좁은 화면 — 세 단을 위아래로 쌓는다 ─────────────────────────────── */
@media (max-width: 900px) {
  .card-editor-body { flex-direction: column; }
  .card-editor-left,
  .card-editor-right {
    width: auto;
    flex: 0 0 auto;
    max-height: 32vh;
    border: 0;
    border-top: 1px solid var(--ce-panel-edge);
  }
  /* 캔버스가 먼저 보여야 한다 — 도구는 그 아래로 내린다. */
  .card-editor-center { order: -1; min-height: 46vh; }
  .card-editor-stage { padding: 10px; }

  /* 머리말이 두 줄로 접히면서 규격 버튼까지 찌그러졌다 — 좁은 화면에서는 제목을 한 줄로
     줄이고 버튼을 작게 만든다. 무엇을 만드는 중인지는 캔버스가 이미 말해 준다. */
  .card-editor-head { padding: 8px 10px; gap: 8px; }
  .card-editor-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 38%;
  }
  .card-editor-shape-btn { padding: 5px 7px; font-size: 11.5px; white-space: nowrap; }
  .card-editor-shapes { gap: 4px; }
  .card-editor-foot { padding: 8px 10px; gap: 6px; }
  .card-editor-btn { padding: 6px 10px; font-size: 12.5px; }
}

/* ── 좌·우 패널 안의 상자들(3단계) ─────────────────────────────────────
 *
 * 앞으로 도구가 더 붙는다. 상자 하나가 곧 기능 하나이고, 패널은 그 상자를 쌓은 것뿐이라
 * 늘리는 데 화면 구조를 손댈 일이 없다.
 */
.ce-box {
  background: #fff;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.ce-box-head {
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ce-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ce-box-head::-webkit-details-marker { display: none; }
.ce-box-head::before { content: '▾ '; color: var(--ce-ink-soft); }
.ce-box:not([open]) .ce-box-head::before { content: '▸ '; }
.ce-box-body { padding: 4px 11px 11px; }

.ce-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  font-size: 12px;
  color: var(--ce-ink-soft);
}
.ce-row-label { flex: 0 0 auto; min-width: 84px; }
.ce-num,
.ce-select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  padding: 5px 7px;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 7px;
  background: #fff;
  color: var(--ce-ink);
}
.ce-range { flex: 1; min-width: 0; }
.ce-color {
  width: 34px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 6px;
  background: #fff;
}

.ce-field { border-top: 1px solid #f0f2f6; padding: 7px 0; }
.ce-field:first-child { border-top: 0; }
.ce-field-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ce-ink);
  cursor: pointer;
}
.ce-field-name { flex: 0 0 auto; }
/* 끌 수 없는 항목은 이름만으로 알 수 있게 해 둔다 — 체크가 회색인 이유를 찾게 하지 않는다. */
.ce-field-name.is-required::after { content: ' *'; color: var(--ce-primary); }
.ce-field-value {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--ce-ink-soft);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ce-selected-name { margin: 2px 0 8px; font-size: 13px; font-weight: 700; color: var(--ce-ink); }

.ce-toggle {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  margin: 4px 4px 0 0;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 7px;
  background: #fff;
  color: var(--ce-ink);
  cursor: pointer;
}
.ce-toggle[aria-pressed='true'] { border-color: var(--ce-primary); color: var(--ce-primary); font-weight: 700; }

.ce-layer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border-top: 1px solid #f0f2f6;
}
.ce-layer:first-child { border-top: 0; }
.ce-layer.selected .ce-layer-name { color: var(--ce-primary); font-weight: 700; }
.ce-layer-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--ce-ink);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 꺼 둔 항목은 목록에서도 꺼져 보여야 한다 — 캔버스에 없는 이유를 여기서 알 수 있게. */
.ce-layer-name.is-off { color: #9aa2b1; text-decoration: line-through; }
.ce-layer-btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 6px;
  background: #fff;
  color: var(--ce-ink-soft);
  cursor: pointer;
  line-height: 1;
}

.ce-hint { font-size: 11px; color: var(--ce-ink-soft); line-height: 1.55; margin: 8px 0 0; }

/* 끄기 금지 항목 표시 — 잠긴 체크 상자는 "꺼져 있다"로 읽혀서 표로 바꿨다. */
.ce-field-lock {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ce-primary);
  background: color-mix(in srgb, var(--ce-primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--ce-primary) 35%, #fff);
  border-radius: 5px;
  padding: 2px 5px;
  line-height: 1.2;
}

/* 움짤 — 등장 순서와 전환 */
.ce-anim {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 0;
  border-top: 1px solid #f0f2f6;
}
.ce-anim:first-child { border-top: 0; }
.ce-anim-order {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ce-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ce-anim-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ce-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ce-anim .ce-select { flex: 0 0 116px; }
/* 쏘폼에서 잠긴 상자 — 닫혀 있어도 왜 잠겼는지 보이게 흐리게만 둔다. */
.ce-box.is-locked .ce-box-head { color: var(--ce-ink-soft); }

.card-editor-formats { display: flex; gap: 4px; }
.card-editor-make-note { font-size: 12px; color: var(--ce-ink-soft); margin-right: 4px; }

/* 폭죽 같은 효과 레이어 — 안쪽 SVG가 상자를 꽉 채운다. */
.card-editor-layer-effect { width: 100%; height: 100%; pointer-events: none; }
.card-editor-layer-effect svg { width: 100%; height: 100%; display: block; }

/* ── 잠금·잠깐 숨기기·미리보기(2026-09-30) ─────────────────────────────── */

/* 잠긴 레이어는 집히지 않는다. 눌러도 그 뒤에 있는 것이 잡히도록 완전히 통과시킨다. */
.card-editor-layer.is-locked { pointer-events: none; }

/* 잠깐 숨긴 레이어는 목록에서 흐리게 — 캔버스에 없는 이유를 여기서 알 수 있게. */
.ce-layer-name.is-hidden-now { color: #9aa2b1; font-style: italic; }

/* 미리보기 중에는 테두리도 핸들도 감춘다 — 움직임만 보이게. */
.card-editor-canvas.previewing .layer-handle { display: none; }
.card-editor-canvas.previewing .card-editor-layer.selected { outline: 0; }

/* 패널 안의 작은 제목과 경고 줄. */
.ce-sub {
  margin: 10px 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ce-ink-soft);
}
.ce-box-body > .ce-sub:first-child { margin-top: 0; }
.ce-subsection {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f2f6;
}
.ce-warn {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #b4231f;
}

/* 레이어 한 줄은 두 단이다 — 이름이 윗줄, 버튼이 아랫줄.
   버튼 여섯을 이름과 한 줄에 두면 240px 패널에서 이름이 두 글자로 잘린다. */
.ce-layer { flex-wrap: wrap; }
.ce-layer-name { flex: 1 0 100%; padding-bottom: 0; }
.ce-layer-actions {
  display: flex;
  flex: 1 0 100%;
  gap: 4px;
  padding: 0 6px 2px;
}

/* ── 노트북 폭(2026-09-30) ─────────────────────────────────────────────
 *
 * 1024px 창에서 하단 바가 넘쳐 [결과물 만들기]가 혼자 아랫줄로 떨어졌다. 가장 많이 누르는
 * 버튼이 줄 밖으로 밀리면 못 찾는다. 세 단을 쌓기에는 아직 넓은 구간이라, 쌓는 대신
 * 버튼과 패널을 조금씩 줄여 한 줄에 담는다. */
/* 휴대전화 구간(≤900)에서는 세 단을 쌓으므로 이 폭 지정이 끼면 안 된다 — 뒤에 놓인
   규칙이라 그대로 두면 쌓인 패널까지 210px로 묶여 화면 절반이 빈다(실제로 그랬다). */
@media (min-width: 901px) and (max-width: 1180px) {
  .card-editor-left { width: 210px; flex-basis: 210px; }
  .card-editor-right { width: 270px; flex-basis: 270px; }
  .card-editor-foot { gap: 6px; padding: 8px 10px; }
  .card-editor-btn { padding: 6px 9px; font-size: 12px; }
  .card-editor-zoom { gap: 4px; font-size: 12px; }
  .card-editor-zoom-value { min-width: 38px; }
  .card-editor-stage { padding: 12px; }
}

/* ── 파일 고르기(2026-09-30) ───────────────────────────────────────────
 *
 * 브라우저 기본 <input type="file">은 버튼 옆에 "선택된 파일 없음"을 제 마음대로 붙인다.
 * 고칠 수도 없앨 수도 없는 글자라 240px 패널에서 잘렸다. 입력칸은 숨기고 우리 버튼만 둔다. */
.ce-file-input { display: none; }
.ce-file-row { margin: 7px 0; }
.ce-file-btn {
  width: 100%;
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 7px;
  background: #fff;
  color: var(--ce-ink);
  cursor: pointer;
  text-align: center;
}
.ce-file-btn:hover:not(:disabled) { border-color: var(--ce-primary); color: var(--ce-primary); }
.ce-file-btn:disabled { color: #9aa2b1; background: #f5f6f9; cursor: not-allowed; }

/* ── 캔버스 바깥으로 나가기(2026-09-30) ─────────────────────────────────
 *
 * 사진 조각과 폭죽은 가장자리에 걸쳐 쓰는 꾸미기가 흔하다(스토리메이커도 이 방식이다).
 * 편집 중에는 넘치는 쪽도 보여야 어디까지 걸쳤는지 알 수 있어 잘라 내지 않는다.
 * 기록 항목은 애초에 캔버스 안에서만 움직인다(cardSpec.normalizeLayer).
 *
 * 다만 [핸들 숨기기]와 동작 미리보기는 **결과물에 가깝게 보려고** 켜는 것이라, 그때는
 * 실제 카드처럼 잘라서 보여 준다. */
.card-editor-canvas { overflow: visible; }
.card-editor-canvas.hide-handles,
.card-editor-canvas.previewing { overflow: hidden; }

/* ── 여럿 고르기(2026-09-30) ───────────────────────────────────────────
 *
 * Shift·Ctrl을 누른 채 누르면 여럿을 함께 고른다. 핸들은 **마지막에 고른 하나**에만 붙는다 —
 * 여럿에 한꺼번에 뜨면 캔버스가 점으로 덮여 무엇을 고른 건지도 알 수 없다. 나머지는 테두리로만
 * 표시해서 "같이 움직인다"는 것만 알려 준다. */
.card-editor-layer.selected:not(.primary) {
  outline: 1.5px dashed var(--ce-primary);
  outline-offset: 0;
}

/* 숫자가 굴러가는 글자는 자리를 고정한다(2026-09-30). 대부분의 글꼴에서 1이 다른 숫자보다
   좁아, 그냥 두면 카운트업 도중 숫자가 통째로 좌우로 밀린다. 서버 렌더는 글자를 하나씩
   같은 칸에 찍어 같은 결과를 낸다(librsvg가 이 속성을 무시해서 그렇게 했다). */
.card-editor-layer-text.is-counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── 하단 바의 결과물 줄(2026-09-30) ──────────────────────────────────
 *
 * 만들자마자 여기에 깔린다. 앞서는 편집기를 닫고 목록에서 확인한 뒤 다시 들어와야 해서,
 * 한 번 만들 때마다 그 왕복을 하게 되니 다듬을 마음이 사라졌다. */
.card-editor-outputs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  overflow-x: auto;
  max-width: 34vw;
}
.card-editor-output {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}
.card-editor-output:hover { border-color: var(--ce-primary); }
.card-editor-output-img { width: 34px; height: 34px; object-fit: cover; display: block; }
.card-editor-output .card-thumb-video-blank { min-width: 34px; height: 34px; font-size: 9px; }
.card-editor-output-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(17, 19, 24, 0.62);
  color: #fff;
  font-size: 8.5px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: -0.2px;
}

/* 끌어서 여럿 고르기 — 빈 바닥에서 끌면 따라오는 상자(2026-09-30). */
.card-editor-marquee {
  position: absolute;
  z-index: 60;
  border: 1.5px dashed var(--ce-primary);
  background: rgba(61, 109, 240, 0.1);
  pointer-events: none;
}

/* 규격 단추의 비율 아이콘(2026-09-30). 글자로는 4:5와 9:16을 구별할 수 없어 직접 그린다. */
.card-editor-shape-btn { display: inline-flex; align-items: center; gap: 6px; }
.card-editor-shape-icon { display: inline-flex; align-items: center; line-height: 0; }

/* ── 폰 '빠른 만들기'(2026-10-16, cardQuick.js) — 카드는 위에 폭 가득, 아래는 네 단계 탭과 [내 카드 저장] 하나. ── */
.card-editor.is-quick { overflow-y: auto; }
.card-editor.is-quick .card-editor-left,
.card-editor.is-quick .card-editor-right,
.card-editor.is-quick .card-editor-foot,
.card-editor.is-quick .card-editor-shapes { display: none; }
.card-editor.is-quick .card-editor-title { max-width: none; flex: 1; }
.card-editor.is-quick .card-editor-body { flex: 0 0 auto; }
.card-editor.is-quick .card-editor-center { min-height: 0; height: 56vh; }
.card-editor.is-quick .card-editor-stage { padding: 6px; }
.cq-panel { padding: 0 14px 18px; display: flex; flex-direction: column; gap: 12px; color: var(--ce-ink); }
/* 탭이 넷에서 **다섯**으로 늘었다(모션, 2026-10-16). 칸을 넷으로 고정해 두면 다섯째가
   아랫줄로 떨어져 차례가 끊겨 보인다 — 한 줄에 고르게 나눠 담고, 글자가 넘치면 줄인다. */
.cq-tabs { display: flex; border-bottom: 1px solid var(--ce-panel-edge); }
.cq-tab { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.cq-tab { padding: 12px 2px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 14px; font-weight: 600; color: var(--ce-ink-soft); }
.cq-tab.is-on { color: var(--ce-primary); border-bottom-color: var(--ce-primary); }
.cq-body { display: flex; flex-direction: column; gap: 12px; }
.cq-grid { display: grid; gap: 8px; }
.cq-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cq-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cq-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 10px 6px; border: 1px solid var(--ce-panel-edge); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ce-ink); text-align: center; }
.cq-card.is-on { border: 2px solid var(--ce-primary); color: var(--ce-primary); }
.cq-shape-icon { display: block; border: 2px solid currentColor; border-radius: 4px; }
.cq-file { position: relative; overflow: hidden; cursor: pointer; }
.cq-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cq-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; font-size: 14px; }
.cq-row input[type='range'] { width: 100%; }
.cq-swatches { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cq-swatch-label { font-size: 14px; min-width: 74px; }
.cq-swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ce-panel-edge); padding: 0; }
.cq-swatch.is-on { outline: 3px solid var(--ce-primary); outline-offset: 2px; }
.cq-list { display: flex; flex-direction: column; gap: 2px; }
.cq-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: 15px; border-bottom: 1px solid var(--ce-rail); }
.cq-toggle input { width: 20px; height: 20px; }
.cq-tune { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--ce-rail); }
.cq-nudge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cq-btn { min-height: 44px; border: 1px solid var(--ce-panel-edge); border-radius: 10px; background: #fff; font-size: 16px; color: var(--ce-ink); }
/* 저장 줄 — 단추(와 형식 단추)는 한 줄, 안내문은 그 아래 줄이다.
   전에는 모두 한 줄이라, 넉 장이 차서 안내문이 들어오면 단추가 세로 띠로 눌렸다. */
.cq-save { display: flex; flex-wrap: wrap; gap: 8px; }
.cq-save > .cq-hint { flex: 1 0 100%; }
/* 더 못 만드는 단추는 눌러도 되는 것처럼 보이지 않게. */
.cq-primary:disabled, .cq-keep-btn:disabled { opacity: 0.45; }
.cq-format { flex: 0 0 auto; min-height: 50px; border: 1px solid var(--ce-panel-edge); border-radius: 12px; padding: 0 10px; font-size: 15px; background: #fff; }
.cq-primary { flex: 1; min-height: 50px; border: 0; border-radius: 12px; background: var(--ce-primary); color: #fff; font-size: 17px; font-weight: 700; }
.cq-panel .card-editor-make-note { font-size: 13px; color: var(--ce-ink-soft); text-align: center; }
.cq-link { border: 0; background: none; color: var(--ce-ink-soft); font-size: 13px; text-decoration: underline; padding: 4px; }
.cq-hint { margin: 0; font-size: 13px; color: var(--ce-ink-soft); line-height: 1.5; }
.cq-sub { margin: 0; font-size: 14px; font-weight: 600; }

/* 빠른 만들기 — 고르는 알약(항목·굵기·나타나는 방법·폭죽). 폰에서 손가락으로 누르는 것이라
   줄 높이를 넉넉히 두고, 넘치면 가로로 밀어 본다(세로로 쌓이면 설정이 화면 밖으로 밀린다). */
.cq-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }

.cq-pill {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 999px;
  background: var(--ce-panel);
  color: var(--ce-ink);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.cq-pill.is-on { border-color: var(--ce-primary); color: var(--ce-primary); font-weight: 600; }
/* 숨긴 항목은 알약에서도 흐리게 — 왜 카드에 안 보이는지 여기서 알 수 있어야 한다. */
.cq-pill.is-off { opacity: 0.5; text-decoration: line-through; }

.cq-sub-label { margin: 2px 0 0; font-size: 12px; color: var(--ce-ink-soft); }

/* 글꼴 단추는 그 글꼴로 적는다 — 이름만 읽고 고르는 것보다 눈으로 보고 고르는 쪽이 빠르다. */
.cq-fonts .cq-card { font-size: 15px; padding: 10px 6px; }

.cq-text-tools { display: flex; flex-wrap: wrap; gap: 12px; }
.cq-center { text-align: center; }

/* 움짤·영상 길이를 넘겼을 때 — 만들고 나서 알면 늦다. */
.cq-warn { margin: 0; font-size: 13px; line-height: 1.5; color: #b3261e; }

/* 동작 미리보기 — 저장 단추 바로 위에 놓는다(모션 탭). 저장만큼 눈에 띌 필요는 없어 테두리만. */
.cq-preview { width: 100%; padding: 12px; font-size: 15px; }

/* 저장 단추 아래 한 줄 — 폰에 [자세히 꾸미기]를 두지 않은 대신 어디서 하면 되는지 적는다.
   테두리를 둘러 단추가 아니라 **안내**임을 보이게 한다. */
/* 만든 카드 띠 — 편집기 아래 바에서 옮겨 온 그대로다(클래스는 card-editor-outputs).
   폰에서는 가로로 밀어 본다. */
.card-editor.is-quick .card-editor-outputs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; }

/* 만든 카드 띠의 내려받기 — 카드 하나하나 옆에 작게. */
.card-editor-output-get {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  align-self: center;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 8px;
  color: var(--ce-ink-soft);
  text-decoration: none;
  font-size: 15px;
}

.card-editor-output-get:hover { color: var(--ce-primary); border-color: var(--ce-primary); }

.cq-keep { display: flex; flex-direction: column; gap: 6px; }
.cq-keep-btn { width: 100%; padding: 12px; font-size: 15px; }

.cq-note {
  margin: 0;
  padding: 12px;
  border: 1px solid #f0bcb8;
  border-radius: 12px;
  color: #b3261e;
  font-size: 14px;
  text-align: center;
}

/* 모양 탭 — 축마다 한 줄, 아이콘이 '카드 안 어디'를 그대로 보인다(2026-10-17). */
.cq-spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cq-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 12px;
  background: #fff;
  color: var(--ce-ink);
}
.cq-spot.is-on { border: 2px solid var(--ce-primary); color: var(--ce-primary); }
.cq-spot-icon { display: block; line-height: 0; }
/* 24px로는 네모 안의 막대가 어디 붙었는지 한눈에 안 들어온다. */
.cq-spot-icon svg { width: 32px; height: 32px; }
.cq-spot-label { font-size: 12px; font-weight: 600; }

/* 잠긴 모션 탭 — 안쪽은 부르는 쪽이 채운다(쏘폼 로그인·가입). */
.cq-locked { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--ce-panel-edge); border-radius: 12px; background: var(--ce-panel); }
.cq-locked-head { margin: 0; font-size: 14px; font-weight: 600; color: var(--ce-ink); }
.cq-locked .cq-hint { margin: 0; }

/* 만든 카드 줄(폰) — 고른 것이 작업 대상이라 테두리로 드러낸다. */
.cq-outs-wrap { display: grid; gap: 6px; }
/* 위 여백은 ✕ 자리다 — 섬네일 모서리 밖으로 나와 있어 좁으면 잘린다. */
.cq-outs { display: flex; gap: 10px; overflow-x: auto; padding: 9px 3px 3px; -webkit-overflow-scrolling: touch; }
.cq-out { position: relative; flex: 0 0 auto; border: 2px solid transparent; border-radius: 12px; }
.cq-out.is-on { border-color: var(--ce-primary); }
.cq-out-tile {
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ce-panel);
}
/* 잘라내지 않고 통째로 보인다 — 판형(정사각·세로)이 한눈에 구별돼야 고를 수 있다. */
.cq-out-img { display: block; width: 100%; height: 100%; object-fit: contain; background: #0f1115; }
.cq-out-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  text-align: center;
}
/* ✕는 섬네일 위 모서리에 — 좁은 줄에서 자리를 더 쓰지 않는다. */
.cq-out-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 50%;
  background: #fff;
  color: var(--ce-ink-soft);
  font-size: 12px;
  line-height: 1;
}

/* PC 줄의 지우기 — 내려받기(⤓) 옆에 같은 크기로. */
.card-editor-output-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  align-self: center;
  padding: 0;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 8px;
  background: #fff;
  color: var(--ce-ink-soft);
  font-size: 13px;
}
.card-editor-output-del:hover { color: #c0392b; border-color: #c0392b; }

/* 되돌리기 줄 — 탭 바로 아래, 어느 탭에서나 같은 자리. */
.cq-history { display: flex; justify-content: flex-end; gap: 6px; margin: -2px 0 2px; }
.cq-undo {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ce-panel-edge);
  border-radius: 999px;
  background: #fff;
  color: var(--ce-ink-soft);
  font-size: 13px;
}
.cq-undo:disabled { opacity: 0.4; }