/* vignettes.css — 서비스 장면 캔버스 (vignettes.js) 기본 모양 · 디자인 F (2026-10-07)
   - 캔버스 하나면 끝: <canvas data-vignette="boarding"></canvas>
   - 기본 비율 14:9 (280×180 이 기준). 폭은 부모를 따라감 · 높이는 비율로
   - 칸이 또렷하게: 정수 px 폭을 권장 (그리드 칸 폭이 소수점이면 한 줄씩 두꺼워 보일 수 있음)
   - 바탕은 투명 — 부모(카드·종이)의 색이 비침. 연기 속은 엔진이 부모 바탕색으로 칠함 */
:where(canvas[data-vignette]){
  display:block; width:100%; height:auto; aspect-ratio:14 / 9; max-width:100%;
  image-rendering:crisp-edges; image-rendering:pixelated;
  -webkit-user-select:none; user-select:none; pointer-events:none;
}
/* 비율 바꾸기: data-vg-ratio="wide" (16:9) · "tall" (4:3) · "square" (1:1) */
:where(canvas[data-vignette][data-vg-ratio="wide"]){ aspect-ratio:16 / 9; }
:where(canvas[data-vignette][data-vg-ratio="tall"]){ aspect-ratio:4 / 3; }
:where(canvas[data-vignette][data-vg-ratio="square"]){ aspect-ratio:1 / 1; }

/* 선택: 틀 (얇은 선 + 모서리 눈금) — <figure class="vg"><canvas data-vignette="…"></canvas><figcaption>…</figcaption></figure> */
.vg{ position:relative; margin:0; }
.vg > canvas[data-vignette]{ border-radius:2px; }
.vg.is-framed > canvas[data-vignette]{ box-shadow:inset 0 0 0 1px rgba(14,18,16,.09); background:transparent; }
.vg > figcaption{
  margin-top:8px; font:500 11px/1.4 var(--mono-e,"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  letter-spacing:.06em; text-transform:uppercase; color:rgba(14,18,16,.64);
}