/* STAGE X · 아트웍 — 값은 토큰에서만 쓴다 (글자 --fs-*, 간격 --sp-*, 모서리 --r-*, 그림자 --sh-*, 색 토큰) */

:root {
  color-scheme: light;

  /* 회색 (바탕·글자·선) */
  --gray-0: #ffffff;   --gray-25: #fafbfc;  --gray-50: #f5f6f8;  --gray-100: #eef0f3;
  --gray-200: #e3e6ea; --gray-300: #cdd2d9; --gray-400: #9aa2ad; --gray-500: #646c78;
  --gray-600: #4b5360; --gray-700: #343b46; --gray-800: #232932; --gray-900: #151a21;

  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-2: var(--gray-25);
  --ink: var(--gray-900);
  --ink-2: var(--gray-700);
  --muted: var(--gray-500);
  --faint: var(--gray-400);
  --line: var(--gray-200);
  --line-strong: var(--gray-300);
  --white: #ffffff;

  /* 주 색 = 브랜드 청록 = 2차(연출컷) */
  --accent-50: #e9f5f3; --accent-100: #cdeae6; --accent-200: #9fd3cd;
  --accent-500: #23807a; --accent-600: #1d6d68; --accent-700: #175854;
  --accent: var(--accent-500);
  --accent-ink: #ffffff;

  /* 단계 색 */
  --p1-50: #eef0fc; --p1-100: #dde1f9; --p1-500: #4b5bd0; --p1-700: #3542a6;
  --p2-50: var(--accent-50); --p2-100: var(--accent-100); --p2-500: var(--accent-500); --p2-700: var(--accent-700);

  /* 상태 */
  --ok: #17663a;     --ok-bg: #eaf7ef;     --ok-line: #bfe3cc;
  --warn: #8f4a06;   --warn-bg: #fff5e6;   --warn-line: #f3d3a6;
  --danger: #b42318; --danger-bg: #fdecea; --danger-line: #f6c9c4;
  --info: #2f5aa8;   --info-bg: #eef3fc;   --info-line: #cddbf5;

  /* 어두운 바탕(토스트·뷰어·말풍선) 위 글자 */
  --on-dark: #f1f4f7; --on-dark-2: #c8ced6; --on-dark-muted: #9aa2ad;
  --ok-on-dark: #6fd3a3; --danger-on-dark: #ff9b91; --info-on-dark: #93b8ff;
  --checker: #e9ecef;
  --scrim: rgba(16, 20, 28, 0.5);
  --viewer-bg: rgb(10, 12, 16); /* 불투명: 뒤 화면이 비치지 않게 */
  --glass: rgba(255, 255, 255, 0.92);
  --dark-chip: rgba(21, 26, 33, 0.78);
  /* 어두운 바탕 위 단계 색(로고 타일 위 색과 같다), 로그인 그림판 바탕·그림 위 어둡게 까는 색 */
  --p1-on-dark: #7482f2; --p2-on-dark: #4fd1c5;
  --art-shade: #080a0e;
  /* 그림 위 어둡게 까는 층의 투명도 판(--art-shade rgb(8,10,14), --p2-on-dark rgb(79,209,197), 흰색).
     color-mix 를 모르는 옛 브라우저(Safari 16.2·Chrome 111 미만)에서도 층이 사라지지 않게 rgba 로 풀어 둔다 */
  --art-shade-20: rgba(8, 10, 14, 0.2);  --art-shade-35: rgba(8, 10, 14, 0.35); --art-shade-50: rgba(8, 10, 14, 0.5);
  --art-shade-62: rgba(8, 10, 14, 0.62); --art-shade-64: rgba(8, 10, 14, 0.64); --art-shade-70: rgba(8, 10, 14, 0.7);
  --art-shade-80: rgba(8, 10, 14, 0.8);  --art-shade-86: rgba(8, 10, 14, 0.86); --art-shade-95: rgba(8, 10, 14, 0.95);
  --p2-on-dark-16: rgba(79, 209, 197, 0.16); --p2-on-dark-45: rgba(79, 209, 197, 0.45);
  --on-dark-line: rgba(255, 255, 255, 0.22);

  /* 글자 */
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, Consolas, "D2Coding", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: clamp(2.25rem, 3.4vw, 3rem); /* 로그인 큰 제목 36~48(그림판 위). 8단계의 맨 위 칸 — 따로 9번째 크기를 두지 않는다 */
  --lh-tight: 1.3;
  --lh-base: 1.55;

  /* 간격: 4px 단위 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --gutter: 24px;

  /* 모서리 4종 + 알약 */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* 그림자 3종 */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-2: 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.08);
  --sh-3: 0 24px 48px -12px rgba(16, 24, 40, 0.28);
  --ring: 0 0 0 3px var(--accent-100);

  /* 크기 */
  --h-control: 40px;
  --h-control-sm: 32px;
  --h-header: 56px;
  --w-page: 1280px;
  --w-aside: 360px;

  /* 움직임 */
  --dur: 160ms;
  --dur-fade: 1.2s; /* 로그인 그림판 그림이 천천히 바뀌는 시간 */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* 겹침 순서 */
  --z-bar: 20; --z-header: 30; --z-menu: 40; --z-modal: 50; --z-builder: 55; --z-viewer: 80; --z-toast: 85; --z-tip: 90;

  /* 1차/2차 (화면마다 body[data-phase]로 바뀐다) */
  --phase: var(--accent-500); --phase-50: var(--accent-50); --phase-700: var(--accent-700);
}
@media (max-width: 600px) {
  :root { --gutter: 16px; --h-control: 44px; --h-control-sm: 36px; }
}
body[data-phase="p1"] { --phase: var(--p1-500); --phase-50: var(--p1-50); --phase-700: var(--p1-700); }
body[data-phase="p2"], body[data-phase="prep"] { --phase: var(--accent-500); --phase-50: var(--accent-50); --phase-700: var(--accent-700); }

/* ───────── 기본 ───────── */
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-base);
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-base); font-weight: 600; }
h4 { font-size: var(--fs-sm); font-weight: 600; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--accent-600); }
code, pre { font-family: var(--mono); }
ul, ol { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; }
.pre { white-space: pre-wrap; }
.warn-text { color: var(--warn); }
.one-line { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.two-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spacer { flex: 1; }
.show-sm { display: none !important; }
@media (max-width: 600px) {
  .hide-sm { display: none !important; }
  .show-sm { display: revert !important; }
  span.show-sm { display: inline !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
::selection { background: var(--accent-100); }
:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.i { display: inline-flex; flex: none; line-height: 0; }
.i.fill svg { fill: currentColor; }

/* ───────── 배치 ───────── */
#app { min-height: 100vh; display: flex; flex-direction: column; }
#app > main { flex: 1 0 auto; width: 100%; }
.page { max-width: var(--w-page); margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-16); }
.page.has-bar { padding-bottom: var(--sp-8); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack.tight { gap: var(--sp-2); }
.stack.loose { gap: var(--sp-6); }
.row { display: flex; gap: var(--sp-2); align-items: center; }
.row.tight { gap: var(--sp-1); }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; flex-wrap: wrap; }
.row.two > * { flex: 1; min-width: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-aside); gap: var(--sp-6); align-items: start; }
.two-col > aside { position: sticky; top: calc(var(--h-header) + var(--sp-4));
  max-height: calc(100vh - var(--h-header) - 112px); max-height: calc(100dvh - var(--h-header) - 112px);
  overflow: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; scrollbar-width: thin; }
@media (max-width: 960px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .two-col > aside { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
  .row.two { flex-direction: column; align-items: stretch; }
}

/* ───────── 버튼 ───────── */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-control); padding: 0 var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-md); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  box-shadow: var(--sh-1); cursor: pointer;
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur);
}
.btn:hover { background: var(--gray-50); border-color: var(--gray-400); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.primary { background: var(--accent-500); border-color: var(--accent-500); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--gray-100); }
.btn.danger { color: var(--danger); }
.btn.danger.solid { background: var(--danger); border-color: var(--danger); color: var(--white); }
.btn.positive { color: var(--ok); border-color: var(--ok-line); }
.btn.positive:hover { background: var(--ok-bg); }
.btn.small { height: var(--h-control-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn.large { height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-base); }
.btn.block { width: 100%; }
.btn.icon-only { width: var(--h-control); padding: 0; }
.btn.small.icon-only { width: var(--h-control-sm); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--gray-100); border-color: var(--gray-200); color: var(--faint); box-shadow: none; cursor: not-allowed;
}
.btn.ghost:disabled { background: transparent; border-color: transparent; }
.btn .cost { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--sp-1); padding-left: var(--sp-2);
  border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 35%, transparent); font-weight: 500; }
.btn[aria-busy="true"] { cursor: progress; }
.btn.google { background: var(--surface); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-600); cursor: pointer; text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }
.spinner { width: 16px; height: 16px; border: 2px solid transparent; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; /* color-mix 를 모르면 위쪽 호만 돈다 */ border-radius: 50%; display: inline-block; flex: none; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────── 입력, 라벨, 스위치 ───────── */
input, select, textarea {
  font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  height: var(--h-control); padding: 0 var(--sp-3); width: 100%; min-width: 0;
  transition: border-color var(--dur), box-shadow var(--dur);
}
textarea { height: auto; padding: 10px var(--sp-3); line-height: 1.5; resize: vertical; }
select { appearance: none; padding-right: 34px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646c78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--gray-400); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-500); box-shadow: var(--ring); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; padding: 0; accent-color: var(--accent-500); }
input[type="number"] { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { input, select, textarea { font-size: 16px; } }

label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
label .opt, .opt { font-weight: 400; color: var(--muted); }
.help { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.input-suffix { position: relative; display: block; }
.input-suffix input { padding-right: 56px; }
.input-suffix::after { content: attr(data-suffix); position: absolute; right: var(--sp-3); top: 50%; translate: 0 -50%; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; pointer-events: none; }

.field-rows { display: flex; flex-direction: column; }
.field-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.field-row:first-child { border-top: 0; padding-top: 0; }
.field-row > .name { padding-top: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); display: flex; gap: var(--sp-1); align-items: baseline; flex-wrap: wrap; }
.field-row .name-note { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: var(--sp-2); } .field-row > .name { padding-top: 0; } }

input.switch { appearance: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--gray-300);
  position: relative; cursor: pointer; flex: none; transition: background var(--dur); box-shadow: none; }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); box-shadow: var(--sh-1); transition: transform var(--dur); }
input.switch:checked { background: var(--accent-500); }
input.switch:checked::after { transform: translateX(16px); }
input.switch:disabled { opacity: 0.5; cursor: not-allowed; }
input.switch:focus-visible { outline: none; box-shadow: var(--ring); }
label.toggle { flex-direction: row; align-items: center; gap: var(--sp-2); font-weight: 500; color: var(--ink); cursor: pointer; }
label.toggle.small { font-size: var(--fs-sm); }
@media (max-width: 600px) { label.toggle { min-height: 44px; } }

/* ───────── 꼬리표, 고르기 칩, 나눔 단추 ───────── */
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; line-height: 1;
  background: var(--gray-100); color: var(--gray-600); border: 0; vertical-align: middle; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.no { background: var(--gray-100); color: var(--gray-500); }
.chip.danger { background: var(--danger-bg); color: var(--danger); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.p1 { background: var(--p1-50); color: var(--p1-700); }
.chip.p2 { background: var(--p2-50); color: var(--p2-700); }
.chip.dark { background: var(--dark-chip); color: var(--white); }
.chip.from-element { background: var(--gray-100); color: var(--gray-600); }
.chip.from-fix { background: var(--warn-bg); color: var(--warn); }
.chip.from-user { background: var(--info-bg); color: var(--info); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--surface);
  font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--dur), background var(--dur); }
.chip-btn:hover { border-color: var(--gray-400); }
.chip-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.chip-btn.on, .chip-btn[aria-pressed="true"] { background: var(--accent-50); border-color: var(--accent-500); color: var(--accent-700); font-weight: 600; }
.chip-btn.on::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.chip-btn.small { min-height: 30px; padding: 0 10px; font-size: var(--fs-sm); }
.chip-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 600px) { .chip-btn { min-height: 40px; } .chip-btn.small { min-height: 36px; } }
.chips-field, .seg-field { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; max-width: 100%; }
.chip-hint { font-size: var(--fs-sm); color: var(--muted); }

.seg, .seg-field { align-self: flex-start; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--gray-100); border-radius: var(--r-md); max-width: 100%; overflow-x: auto; scrollbar-width: none; vertical-align: middle; }
.seg::-webkit-scrollbar { display: none; }
.seg > button { flex: none; height: 32px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--gray-600); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; transition: background var(--dur), color var(--dur); }
.seg > button:hover { color: var(--ink); }
.seg > button:focus-visible { outline: 2px solid var(--accent-500); outline-offset: -2px; }
.seg > button[aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); }
.seg > button:disabled { opacity: 0.5; cursor: not-allowed; }
.seg.verdict > [data-v="use"][aria-checked="true"] { color: var(--ok); }
.seg.verdict > [data-v="fix"][aria-checked="true"] { color: var(--warn); }
.seg.verdict > [data-v="no"][aria-checked="true"] { color: var(--danger); }
@media (max-width: 600px) {
  .seg > button { height: 36px; }
  .seg-field:has(> .seg.ratio), .seg-field > .seg.ratio { align-self: stretch; }
  .seg.ratio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg.ratio > button { justify-content: center; }
}

/* 고르기 카드: 이름 + 한 줄 설명 */
.option-card, .stage-card {
  position: relative; text-align: left; display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); font: inherit; color: inherit; cursor: pointer; box-shadow: none; min-width: 0;
  transition: border-color var(--dur), background var(--dur);
}
.option-card:hover, .stage-card:hover { border-color: var(--gray-400); }
.option-card:focus-visible, .stage-card:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent-500); }
.option-card .t { font-size: var(--fs-md); font-weight: 600; color: var(--ink); padding-right: var(--sp-5); }
.option-card .d { font-size: var(--fs-sm); color: var(--muted); }
.option-card > .chip { align-self: flex-start; margin-top: var(--sp-1); }
.option-card.on, .stage-card.on { border-color: var(--accent-500); background: var(--accent-50); box-shadow: inset 0 0 0 1px var(--accent-500); }
.option-card.on::after, .stage-card.on::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.option-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.option-grid.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.option-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option-grid.one { grid-template-columns: minmax(0, 1fr); }
.stage-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-grid.four { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.stage-card { align-items: center; text-align: center; padding: var(--sp-2); gap: var(--sp-1); }
.stage-card .stage-icon { width: 100%; max-width: 96px; aspect-ratio: 80 / 56; }
.stage-card .stage-icon svg { display: block; }
.stage-card b { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.stage-icon-ai { width: 100%; height: 100%; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--accent-50); color: var(--accent-500); border: 1px solid var(--accent-200); }
@media (max-width: 600px) { .stage-grid.four { grid-template-columns: repeat(3, minmax(0, 1fr)); } .option-grid.two { grid-template-columns: minmax(0, 1fr); } }

/* ───────── 카드와 구획 머리 ───────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); min-width: 0; }
.card.flat { box-shadow: none; background: var(--surface-2); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-head .sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.card-head .right { display: flex; gap: var(--sp-2); align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.head-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.section-title { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-lg); font-weight: 700; }
.section-title .count { color: var(--muted); font-weight: 500; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--sp-1); }
.eyebrow.p1 { color: var(--p1-700); }
.eyebrow.p2 { color: var(--p2-700); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); flex: none; }
.dot.warn { background: var(--warn); }
.dot.ok { background: var(--ok); }
@media (max-width: 600px) { .card { padding: var(--sp-4); } .card-head { flex-wrap: wrap; } }

/* 알림 상자 */
.notice { display: flex; align-items: flex-start; gap: var(--sp-2); border-radius: var(--r-md); padding: 10px var(--sp-3); background: var(--gray-100); color: var(--ink-2); font-size: var(--fs-sm); }
.notice > .i { margin-top: 1px; }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice.info { background: var(--info-bg); color: var(--info); flex-direction: column; gap: var(--sp-1); }
.notice ul { padding-left: 1.1em; }

/* 전문가용 (운영자만) */
details.dev { font-size: var(--fs-xs); color: var(--muted); }
details.dev > summary { cursor: pointer; width: fit-content; min-height: 32px; padding: 6px 0; }
details.dev .dev-body { margin-top: var(--sp-1); }
details.dev code, details.dev pre { display: block; white-space: pre-wrap; font-size: var(--fs-xs); color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-2); max-height: 280px; overflow: auto; }

/* ───────── 머리띠 ───────── */
.top { position: sticky; top: 0; z-index: var(--z-header); height: var(--h-header); flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 0 var(--gutter);
  background: var(--glass); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); color: var(--ink); }
.top-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
/* 이름 'STAGE X · 아트웍': 글자 로고 SVG(대문자 높이 14, 로그인 18) + 회색 가운뎃점 + '아트웍'(SemiBold).
   '아트웍' 글자 크기 = 대문자 높이의 약 0.83배(머리띠 12/14, 로그인 15/18) → 글자 폭이 대문자의 2.14~2.22배로
   가로 묶음(logo-final/lockup-h-light.svg, 2.14배)과 맞는다.
   간격·점 크기도 가로 묶음 비율: 사이 0.46배, 점 지름 0.18배. 로고 비율을 따르는 값이라 4px 단위 예외로 둔다(6px = 14×0.46) */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-base); }
.brand-mark { display: inline-flex; line-height: 0; }
.brand .name { display: inline-flex; align-items: center; gap: 6px; }
.brand .brand-word { display: inline-flex; line-height: 0; }
.brand .name .dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.brand .name .sub { font-size: var(--fs-xs); font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--muted); }
.brand.big { gap: var(--sp-3); font-size: var(--fs-lg); }
.brand.big .name { gap: 8px; }
.brand.big .name .sub { font-size: var(--fs-base); }
.login-hero .tagline { margin: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink-2); font-size: var(--fs-base); }
.login-hero .tagline b { font-weight: 700; color: var(--ink); }
.login-hero .maker { margin: var(--sp-8) 0 0; letter-spacing: 0.14em; font-weight: 600; }
.top-right { display: flex; align-items: center; gap: var(--sp-2); }
.top-link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; font-size: var(--fs-md); font-weight: 500; }
.top-link:hover { background: var(--gray-100); }
.top-link[aria-current="page"] { color: var(--ink); font-weight: 700; background: var(--gray-100); }
.credit-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-full);
  background: var(--gray-100); color: var(--ink); font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.credit-pill.low { background: var(--warn-bg); color: var(--warn); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-100); color: var(--accent-700); font: inherit; font-weight: 700; font-size: var(--fs-sm); border: 0; cursor: pointer; }
.avatar:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 600px) { .top .brand .name { display: none; } .top-link .label { display: none; } }

/* ───────── 더보기 메뉴, 도움말 ───────── */
.menu-wrap { position: relative; display: inline-flex; }
.menu-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: var(--z-menu); min-width: 200px; padding: var(--sp-1);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); animation: pop 140ms var(--ease); }
.menu-pop.up { top: auto; bottom: calc(100% + 4px); }
.menu-pop.start { right: auto; left: 0; }
.menu-head { padding: var(--sp-2) 10px; font-size: var(--fs-sm); color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-1); }
.menu-pop button { display: flex; align-items: center; gap: var(--sp-2); width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-md); color: var(--ink); text-align: left; cursor: pointer; white-space: nowrap; }
.menu-pop button:hover, .menu-pop button:focus-visible { background: var(--gray-100); outline: none; }
.menu-pop button.danger { color: var(--danger); }
.menu-pop button:disabled { color: var(--faint); cursor: not-allowed; }
.tip-wrap { display: inline-flex; vertical-align: middle; }
.help-btn { border: 0; background: none; padding: 2px; color: var(--faint); cursor: pointer; border-radius: 50%; display: inline-grid; line-height: 0; }
.help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--accent-600); }
.help-btn:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 600px) { .help-btn { position: relative; } .help-btn::after { content: ""; position: absolute; inset: -12px; } }
.tip-pop { position: fixed; z-index: var(--z-tip); max-width: 280px; padding: 10px var(--sp-3); border-radius: var(--r-md);
  background: var(--gray-900); color: var(--on-dark); font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; box-shadow: var(--sh-2); letter-spacing: 0; text-align: left; }

/* ───────── 창(모달), 시트 ───────── */
.modal-wrap { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-6);
  background: var(--scrim); animation: fade var(--dur) ease; }
.modal { display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  min-width: 0; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-3); animation: pop 180ms var(--ease); outline: none; }
.modal.sm { width: min(440px, 100%); }
.modal.lg { width: min(800px, 100%); }
.modal.xl { width: min(1080px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: var(--fs-lg); }
.modal-head .sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.modal-x { margin: -4px -8px 0 0; }
.modal-body { padding: var(--sp-5); overflow: auto; min-height: 0; min-width: 0; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modal-foot .left { margin-right: auto; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes sheet { from { transform: translateY(100%); } }
@media (max-width: 600px) {
  .modal-wrap { padding: 0; place-items: end stretch; }
  .modal, .modal.sm, .modal.lg, .modal.xl { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet 220ms var(--ease); }
  .modal-head { position: relative; padding-top: var(--sp-5); }
  .modal-head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--gray-300); }
  .modal-foot { border-radius: 0; padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .modal-foot > .btn { flex: 1; }
  .modal-foot .left { flex: none; }
}

/* ───────── 토스트 ───────── */
#toasts { position: fixed; z-index: var(--z-toast); top: calc(var(--h-header) + 12px); right: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: var(--sp-3) 14px; border-radius: var(--r-md);
  background: var(--gray-900); color: var(--on-dark); font-size: var(--fs-md); box-shadow: var(--sh-3); pointer-events: auto;
  animation: pop 180ms var(--ease); transition: opacity 300ms, transform 300ms; }
.toast .i { margin-top: 1px; }
.toast.ok > .i { color: var(--ok-on-dark); }
.toast.err > .i { color: var(--danger-on-dark); }
.toast.info > .i { color: var(--info-on-dark); }
.toast .msg { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.toast-x { border: 0; background: none; color: var(--on-dark-muted); cursor: pointer; padding: 2px; margin: -2px -4px 0 0; border-radius: var(--r-sm); line-height: 0; }
.toast-x:hover { color: var(--on-dark); }
.toast.out { opacity: 0; transform: translateY(-6px); }
@media (max-width: 600px) { #toasts { left: 50%; right: auto; translate: -50% 0; top: var(--sp-2); } }

/* ───────── 빈 상태, 진행 표시 ───────── */
.empty-state { grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-6); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2); }
.empty-state .empty-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); color: var(--gray-500); margin-bottom: var(--sp-1); }
.empty-state p { max-width: 40ch; font-size: var(--fs-sm); color: var(--muted); }
.empty-state .btn { margin-top: var(--sp-2); }
.empty-state.compact { padding: var(--sp-5) var(--sp-4); gap: var(--sp-1); }
.empty-state.compact .empty-icon { width: 36px; height: 36px; }
.empty-state.compact h3 { font-size: var(--fs-md); }

.thumb { position: relative; aspect-ratio: 16 / 10; background: var(--gray-100); border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; }
.thumb.wide { aspect-ratio: 16 / 9; }
.thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.thumb-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); color: var(--faint); }
.thumb-empty .xs { color: var(--muted); }
.thumb-tag { position: absolute; top: var(--sp-2); left: var(--sp-2); }
.thumb-badge { position: absolute; top: var(--sp-2); right: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-1); height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; color: var(--white); background: var(--accent-500); }
.thumb-badge.p1 { background: var(--p1-500); }
.space-card .thumb-badge, .view-item .thumb-badge { left: var(--sp-2); right: auto; }
.gen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--sp-4); text-align: center; font-size: var(--fs-sm); color: var(--gray-600); }
.gen .xs { color: var(--muted); }
.gen.run { background: linear-gradient(100deg, var(--gray-100) 30%, var(--gray-50) 50%, var(--gray-100) 70%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; }
.gen.err { color: var(--danger); background: var(--danger-bg); }
.gen.err .xs { color: var(--danger); }
.gen-err { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.progress-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: var(--gray-200); }
.progress-line::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--phase, var(--accent-500)); animation: indet 1.4s var(--ease) infinite; }
.cut-card.p1 .progress-line::after { background: var(--p1-500); }
.skeleton { background: linear-gradient(100deg, var(--gray-100) 30%, var(--gray-50) 50%, var(--gray-100) 70%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.boot { min-height: 60vh; display: grid; place-items: center; color: var(--muted); }
/* 첫 로딩: 브랜드 마크가 천천히 숨 쉬듯 옅어졌다 짙어진다(움직임 줄이기면 가만히) */
.boot-mark { display: block; width: 48px; height: 48px; /* 64 격자가 픽셀에 맞는 16·32·48 중 하나(logo-final README §8). index.html 의 width/height 와 같게 */ animation: boot-breathe 1.8s ease-in-out infinite alternate; }
@keyframes boot-breathe { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; } }
.boot-skeleton { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ───────── 크게 보기 (뷰어) ───────── */
.viewer { position: fixed; inset: 0; z-index: var(--z-viewer); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--viewer-bg); color: var(--on-dark); animation: fade var(--dur); outline: none; }
.viewer-top { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.viewer-title { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; flex: 1; }
.viewer-top .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-top .meta { color: var(--on-dark-muted); font-size: var(--fs-sm); white-space: nowrap; }
.viewer-top .count { color: var(--on-dark-muted); font-size: var(--fs-sm); }
.viewer-stage { position: relative; display: grid; place-items: center; padding: 0 72px; min-height: 0; touch-action: pan-y; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); user-select: none; -webkit-user-drag: none; }
.viewer-stage img.checker { background: repeating-conic-gradient(var(--checker) 0% 25%, var(--white) 0% 50%) 50% / 16px 16px; }
.viewer-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.12); color: var(--white); display: grid; place-items: center; cursor: pointer; }
.viewer-nav:hover { background: rgba(255, 255, 255, 0.22); }
.viewer-nav.prev { left: var(--sp-4); }
.viewer-nav.next { right: var(--sp-4); }
.viewer-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); }
.viewer-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2); }
.viewer .btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: var(--white); box-shadow: none; }
.viewer .btn:hover { background: rgba(255, 255, 255, 0.16); }
.viewer .seg { background: rgba(255, 255, 255, 0.1); }
.viewer .seg > button { color: var(--on-dark-2); }
.viewer .seg > button[aria-checked="true"] { background: var(--white); }
.viewer .chip.ok { background: rgba(111, 211, 163, 0.16); color: var(--ok-on-dark); height: var(--h-control); padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-md); }
.viewer-dev { width: min(900px, 100%); color: var(--on-dark-muted); }
.viewer-dev pre, .viewer-dev ul, .viewer-dev p { color: var(--on-dark-2); }
.viewer-dev pre { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); max-height: 28vh; }
@media (max-width: 600px) { .viewer-stage { padding: 0; } .viewer-nav { display: none; } .viewer-top .meta { display: none; } }

/* ───────── 아래 고정 행동 막대 ───────── */
.action-bar-slot { position: sticky; bottom: 0; z-index: var(--z-bar); }
.action-bar { background: var(--glass); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--line); }
.action-bar-inner { max-width: var(--w-page); margin: 0 auto; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom)); }
.bar-back { flex: none; }
.bar-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.bar-status .bar-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-status.warn { color: var(--warn); }
.bar-actions { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 600px) {
  .action-bar-inner { flex-wrap: wrap; gap: var(--sp-2); padding-top: 10px; }
  .bar-status { order: -1; flex-basis: 100%; }
  .bar-status .bar-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .bar-status:has(.bar-text:empty) { display: none; }
  .bar-back { width: var(--h-control); padding: 0; }
  .bar-actions { flex: 1; min-width: 0; }
  .bar-actions .btn { min-width: 0; }
  .bar-actions .btn.primary { flex: 1; }
}

/* ───────── 프로젝트 목록 ───────── */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head h1 { display: flex; align-items: baseline; gap: var(--sp-2); }
.page-head h1 .count { font-size: var(--fs-lg); color: var(--muted); font-weight: 500; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); }
.project-card { padding: var(--sp-3); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--sp-3); transition: border-color var(--dur), box-shadow var(--dur); }
.project-card:hover { border-color: var(--gray-400); box-shadow: var(--sh-2); }
.project-card:focus-visible { outline: none; box-shadow: var(--ring); }
.project-body { display: flex; flex-direction: column; gap: var(--sp-1); padding: 0 var(--sp-1) var(--sp-1); min-width: 0; }
.project-body h3 { font-size: var(--fs-base); font-weight: 600; }
.project-foot { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.project-foot span + span::before { content: "·"; margin-right: var(--sp-2); }
@media (max-width: 600px) { .project-grid { grid-template-columns: 1fr; } .project-card .thumb { aspect-ratio: 16 / 9; } }

/* ───────── 프로젝트 머리, 단계 표시줄 ───────── */
.proj-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.back-link { display: inline-flex; align-items: center; gap: 2px; width: fit-content; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; margin-left: -4px; padding-block: 12px; margin-block: -12px; }
.back-link:hover { color: var(--ink); }
.proj-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.proj-title-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.proj-sum { font-size: var(--fs-sm); color: var(--muted); }

.stepper { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-6); }
.step-group { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); padding-top: 20px; }
.step-group::before { content: attr(data-label); position: absolute; top: 0; left: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.step-group.p1::before { color: var(--p1-700); }
.step-group.p2::before { color: var(--p2-700); }
.step { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none;
  transition: border-color var(--dur); }
.step:hover { border-color: var(--gray-400); }
.step:focus-visible { outline: none; box-shadow: var(--ring); }
.step .num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gray-100); color: var(--gray-500); font-size: var(--fs-xs); font-weight: 700; }
.step .txt { display: flex; flex-direction: column; min-width: 0; }
.step .label { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step .sub { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.done .num { background: var(--ok-bg); color: var(--ok); }
.step.on { border-color: var(--accent-500); box-shadow: inset 0 0 0 1px var(--accent-500); }
.step.on .num { background: var(--accent-500); color: var(--white); }
.step-group.p1 .step.on { border-color: var(--p1-500); box-shadow: inset 0 0 0 1px var(--p1-500); }
.step-group.p1 .step.on .num { background: var(--p1-500); }
@media (max-width: 960px) {
  .stepper { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: var(--sp-3) calc(-1 * var(--gutter)) var(--sp-4); padding: 0 var(--gutter) var(--sp-1); }
  .stepper::-webkit-scrollbar { display: none; }
  .step-group { display: contents; }
  .step-group::before { display: none; }
  .step { flex: none; scroll-snap-align: center; padding: var(--sp-2) var(--sp-3); border-top-width: 3px; }
  .step[data-phase="prep"] { border-top-color: var(--gray-300); }
  .step[data-phase="p1"] { border-top-color: var(--p1-500); }
  .step[data-phase="p2"] { border-top-color: var(--p2-500); }
  .step .sub { display: none; }
}

/* ───────── ① 기본 정보 ───────── */
.form-section { padding-top: var(--sp-5); }
.form-section:first-of-type { padding-top: 0; }
.form-section + .form-section { border-top: 1px solid var(--line); margin-top: var(--sp-5); }
.form-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.group-title { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-bottom: var(--sp-2); letter-spacing: 0.02em; }
.venue-more > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-1); min-height: 32px; margin-bottom: 0; cursor: pointer; width: fit-content; }
.venue-more[open] > summary { margin-bottom: var(--sp-2); }
.venue-more > summary::-webkit-details-marker { display: none; }
.venue-more > summary .num { font-weight: 500; }
.venue-more > summary > .i { transition: transform var(--dur); }
.venue-more[open] > summary > .i { transform: rotate(180deg); }
.venue-more > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
/* 휴대폰에서만 접는 칸 (① 더 적기, ⑤ 덧붙일 말·소스·에셋) */
.fold-sm-head { display: none; }
@media (max-width: 600px) {
  .fold-sm:not(.open) > .fold-sm-head { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 56px; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
  .fold-sm:not(.open) > .fold-sm-head:not(.card) { background: none; border: 0; padding: 0; }
  .fold-sm:not(.open) > :not(.fold-sm-head) { display: none; }
  .fold-sm-head:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-md); }
  .fold-sm-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .fold-sm-text > b { font-size: var(--fs-md); }
  .fold-sm-sum { font-size: var(--fs-sm); color: var(--muted); }
}
.cap-row { align-items: flex-start; }
.cap-input { width: 160px; }
@media (max-width: 600px) {
  /* 폰: 장소 종류는 두 칸, 설명은 고른 것만 */
  .form-section .venue-group .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-section .venue-group .option-card { padding: var(--sp-2) 10px; }
  .form-section .venue-group .option-card .d { display: none; }
  /* 폰: 구획 사이와 칩을 조금 좁혀 한 화면에 더 들어오게 */
  .form-section { padding-top: var(--sp-4); }
  .form-section + .form-section { margin-top: var(--sp-4); }
  .form-section.stack { gap: var(--sp-3); }
  .form-section .chips { gap: 6px; }
  .form-section .chip-btn { min-height: 36px; padding: 0 12px; }
  .form-section .venue-group .option-card.on { grid-column: 1 / -1; }
  .form-section .venue-group .option-card.on .d { display: block; }
}
.summary-card .summary-list { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; color: var(--ink); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.summary-list dd.empty { color: var(--muted); font-weight: 400; }

/* ───────── ② 장소 ───────── */
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.method-wrap { position: relative; display: flex; }
.method-wrap > .method-card { flex: 1; }
.method-card { display: flex; align-items: flex-start; gap: var(--sp-4); text-align: left; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-1); font: inherit; color: inherit; cursor: pointer; transition: border-color var(--dur), box-shadow var(--dur); min-width: 0; }
.method-card:hover { border-color: var(--accent-500); box-shadow: var(--sh-2); }
.method-card:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent-500); }
.method-card:disabled { cursor: not-allowed; background: var(--surface-2); box-shadow: none; border-color: var(--line); }
.method-card:disabled .method-icon { background: var(--gray-100); color: var(--faint); }
.method-icon { flex: none; width: 48px; height: 48px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--accent-50); color: var(--accent-600); }
.method-text { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding-right: var(--sp-6); }
.method-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-base); }
.method-text .d { font-size: var(--fs-sm); color: var(--ink-2); }
.method-help { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.space-section { margin-top: var(--sp-6); }
.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.space-card { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.space-card.base { border-color: var(--accent-500); }
.space-meta { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.space-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; padding-left: var(--sp-1); }
.space-name .name-text { min-width: 0; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-name input { height: var(--h-control-sm); font-size: var(--fs-md); }
@media (max-width: 600px) { .method-grid { grid-template-columns: 1fr; gap: var(--sp-3); } .method-card { padding: var(--sp-4); } .space-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } }

/* ───────── ③ 무대 디자인 ───────── */
.step-intro { display: flex; flex-direction: column; gap: 2px; }
.step-intro h2 { font-size: var(--fs-xl); }
.step-section { padding: 0; }
.step-section > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; border-radius: var(--r-lg); }
.step-section > summary::-webkit-details-marker { display: none; }
.step-section > summary:hover { background: var(--surface-2); }
.step-section > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.step-section > summary > .i:last-child { color: var(--muted); transition: transform var(--dur); }
.step-section[open] > summary > .i:last-child { transform: rotate(180deg); }
.step-section[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sec-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--phase-50); color: var(--phase-700); font-size: var(--fs-xs); font-weight: 700; }
.sec-num.done { background: var(--ok-bg); color: var(--ok); }
.sec-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sec-text b { font-size: var(--fs-base); }
.sec-sum { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-section[open] .sec-sum { display: none; }
.section-body { padding: var(--sp-5); }
.result-card { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 1fr); gap: var(--sp-5); border-color: var(--p1-500); box-shadow: inset 0 0 0 1px var(--p1-500), var(--sh-1); }
.result-media img { width: 100%; border-radius: var(--r-md); cursor: zoom-in; }
.result-info { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; align-items: flex-start; }
.result-info .chip { margin-bottom: var(--sp-1); }
.angle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); width: 100%; margin-top: var(--sp-2); }
.angle { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.angle .gen { padding: var(--sp-1); font-size: var(--fs-xs); }
.angle .gen .xs { display: none; }
.thumb.skeleton { border-radius: var(--r-md); }
.dir-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dir-item { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.dir-item > .option-card { flex: 1; }
.dir-card .t { font-size: var(--fs-base); }
@media (max-width: 960px) { .result-card { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .step-section > summary { padding: var(--sp-3) var(--sp-4); } .section-body { padding: var(--sp-4); } .dir-grid { grid-template-columns: 1fr; } }

/* 시안·연출컷 카드 */
.cut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-5); }
.cut-card { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-3); }
.cut-card .thumb img { cursor: zoom-in; }
.cut-card.approved { border-color: var(--p1-500); box-shadow: inset 0 0 0 1px var(--p1-500); }
.cut-card.canon { border-color: var(--accent-500); box-shadow: inset 0 0 0 1px var(--accent-500); }
.cut-meta { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); min-width: 0; }
.cut-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.cut-title b { font-size: var(--fs-md); min-width: 0; }
.cut-title .xs { flex: none; }
.cut-actions { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.cut-meta > .seg { align-self: flex-start; }
@media (max-width: 600px) { .cut-grid { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ───────── ⑥ 연출컷 뽑기 설정 ───────── */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: flex-start; }
.tool { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tool-label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.tool select { width: auto; min-width: 160px; height: 38px; }
.tool-note { padding-left: 2px; }
.info-line { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
@media (max-width: 600px) { .toolbar { gap: var(--sp-3) var(--sp-4); } .tool select { min-width: 0; width: 100%; } .tool:has(select) { flex-basis: 100%; } }

/* 고치기 창 */
.fix-layout { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.fix-image { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.fix-image-btn { padding: 0; border: 0; background: var(--gray-100); border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; line-height: 0; }
.fix-image-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.fix-image img { width: 100%; }
.fix-side-head { display: flex; align-items: center; gap: var(--sp-1); }
.fix-row { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.fix-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(-1 * var(--sp-1)); }
.fix-badge { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-500); color: var(--white); font-size: var(--fs-xs); font-weight: 700; }
.fix-x { margin: -6px -8px -6px 0; }
.ref-slot { display: flex; }
.ref-chip { display: flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ref-chip img { width: 48px; height: 32px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
@media (max-width: 960px) { .fix-layout { grid-template-columns: 1fr; } .fix-image { position: static; } }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.pick { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: var(--sp-1); cursor: pointer; display: flex; flex-direction: column; gap: var(--sp-1); font: inherit; text-align: left; color: inherit; min-width: 0; }
.pick:hover { border-color: var(--accent-500); }
.pick:focus-visible { outline: none; box-shadow: var(--ring); }
.pick img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); width: 100%; }
.pick span { padding: 0 2px; }
pre.prompt { white-space: pre-wrap; font-size: var(--fs-xs); }

/* ───────── ④ 요소 합의 ───────── */
.el-intro .card-head { margin-bottom: 0; }
.read-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.read-card img { width: 100%; border-radius: var(--r-md); }
.read-card .card-head { margin-bottom: 0; }
.el-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.el-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.el-head h3 { font-size: var(--fs-base); }
.el-head .menu-wrap { margin: -4px -8px -4px 0; }
.el-actions { margin-top: var(--sp-1); }
.editor { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px dashed var(--line); }
.el-list { padding: 0; }
.el-row + .el-row { border-top: 1px solid var(--line); }
.el-row-top { display: flex; align-items: center; gap: var(--sp-1); padding-right: var(--sp-2); }
.el-row-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4); border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-lg); }
.el-row-main:focus-visible { outline: none; box-shadow: var(--ring); }
.el-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.el-mark.ok { background: var(--ok-bg); color: var(--ok); }
.el-mark.no { background: var(--gray-100); color: var(--gray-500); }
.el-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.el-row-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-md); }
.el-row-what { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-row-where { display: none; font-size: var(--fs-sm); color: var(--muted); }
.el-row.open .el-row-what { white-space: normal; color: var(--ink-2); }
.el-row.open .el-row-where { display: block; }
.el-row > div:not(.el-row-top):not(:empty) { padding: 0 var(--sp-4) var(--sp-3); }
.el-row:not(.open) .el-row-dev { display: none; }
.el-excluded > summary { list-style: none; cursor: pointer; }
.el-excluded > summary::-webkit-details-marker { display: none; }
.el-excluded > summary > .i { color: var(--muted); transition: transform var(--dur); }
.el-excluded[open] > summary > .i { transform: rotate(180deg); }
.questions { padding-left: 1.2em; color: var(--warn); margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.constraints-card { padding: 0; }
.cons-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); cursor: pointer; }
.cons-summary::-webkit-details-marker { display: none; }
.cons-summary > .i { color: var(--muted); transition: transform var(--dur); }
.constraints-card[open] > .cons-summary > .i { transform: rotate(180deg); }
.cons-body { padding: 0 var(--sp-5) var(--sp-5); }
.cons-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
.cons-note { display: flex; align-items: center; gap: var(--sp-1); }
.constraints { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.c-item { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 6px var(--sp-1); border-radius: var(--r-md); font-size: var(--fs-sm); }
.c-item:hover { background: var(--surface-2); }
.c-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-50); color: var(--accent-700); font-size: var(--fs-xs); font-weight: 700; }
.c-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding-top: 2px; }
.c-text .en { color: var(--muted); font-family: var(--mono); }
.c-x { margin: -4px -4px 0 0; opacity: 0; transition: opacity var(--dur); }
.c-item:hover .c-x, .c-x:focus-visible { opacity: 1; }
@media (hover: none) { .c-x { opacity: 1; } }
.cons-add input { flex: 1; }
.cons-add .btn { flex: none; }
.gone summary { cursor: pointer; }
.gone ul { padding-left: 1.2em; margin-top: var(--sp-1); }
@media (min-width: 961px) {
  .cons-summary { cursor: default; }
  .cons-summary > .i { display: none; }
  /* 넓은 화면에서는 접힌 채로 남아도 내용을 보인다 (화면 폭이 바뀔 때 스크립트가 여는 것의 보험) */
  .constraints-card::details-content { content-visibility: visible; display: block; }
}
@media (max-width: 960px) {
  .el-layout > aside { order: -1; }
  .read-card { grid-template-columns: 120px minmax(0, 1fr); }
}

/* ───────── ⑤ 장면 ───────── */
.scene-card .t { font-size: var(--fs-md); }
@media (max-width: 600px) {
  .option-grid.compact .option-card { padding: var(--sp-2) 10px; }
  /* 폰: 장면 설명은 고른 것만 */
  .option-grid.compact .option-card .d { display: none; }
  .option-grid.compact .option-card.on .d { display: block; }
}
.composed .pre { font-size: var(--fs-md); color: var(--ink-2); }
@media (max-width: 600px) {
  .field-row { padding: 10px 0; }
  .field-row .chips { gap: 6px; }
  .field-row .chip-btn { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); }
  .field-row .chips-field, .field-row .seg-field { gap: var(--sp-1); }
  .field-row .chip-hint { font-size: var(--fs-xs); }
  /* 나눔 단추 한 줄짜리(그림 느낌·시간)는 이름을 옆에 둔다 */
  .field-row:has(> div > .seg), .field-row:has(> div > .seg-field) { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
  .field-row:has(> div > .seg) > .name, .field-row:has(> div > .seg-field) > .name { padding-top: 9px; }
}

/* ───────── 소스·에셋 ───────── */
.assets-panel.embedded { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.assets-panel .card-head { margin-bottom: var(--sp-3); }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.asset-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; min-width: 0; }
.asset-tile.on { border-color: var(--accent-500); box-shadow: inset 0 0 0 1px var(--accent-500); }
.checker { background: repeating-conic-gradient(var(--gray-100) 0% 25%, var(--white) 0% 50%) 50% / 12px 12px; }
.asset-img { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.asset-img img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.asset-edit { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; padding: var(--sp-2) 10px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.asset-edit b { font-size: var(--fs-sm); max-width: 100%; }
.asset-edit:hover b { text-decoration: underline; }
.asset-edit:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.asset-sub { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.asset-use { justify-content: space-between; padding: var(--sp-2) 10px; color: var(--ink-2); }
.asset-preview { aspect-ratio: 16 / 9; border-radius: var(--r-md); display: grid; place-items: center; overflow: hidden; }
.asset-preview img { max-height: 100%; object-fit: contain; }
.skeleton-tile { padding-bottom: var(--sp-2); gap: var(--sp-2); }
.skeleton-tile .asset-img { border-radius: 0; }
.skeleton-tile > :not(.asset-img) { margin: 0 10px; }
.assets-empty { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
@media (max-width: 600px) { .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } }

/* ───────── 3D 장소 만들기 ───────── */
.builder-wrap { position: fixed; inset: 0; z-index: var(--z-builder); display: grid; place-items: center; padding: var(--sp-4); background: var(--scrim); animation: fade var(--dur) ease; }
.builder { display: flex; flex-direction: column; width: min(1440px, 100%); height: auto; min-height: min(640px, calc(100dvh - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-3); outline: none; }
.builder-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); }
.builder-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.builder-title h2 { font-size: var(--fs-lg); }
.builder-title .sub { font-size: var(--fs-sm); color: var(--muted); margin-left: var(--sp-2); }
.builder-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.builder-left { overflow: auto; padding: var(--sp-3); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface-2); }
.builder-right { overflow: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.acc { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.acc.open { border-color: var(--line-strong); }
.acc-head { width: 100%; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); min-height: 48px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; border-radius: var(--r-md); }
.acc-head:focus-visible { outline: none; box-shadow: var(--ring); }
.acc-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); color: var(--gray-600); font-size: var(--fs-xs); font-weight: 700; }
.acc.open .acc-num { background: var(--accent-500); color: var(--white); }
.acc-title { flex: none; font-size: var(--fs-md); font-weight: 600; }
.acc-value { flex: 1; min-width: 0; text-align: right; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-head > .i:last-child { color: var(--muted); transition: transform var(--dur); }
.acc.open .acc-head > .i:last-child { transform: rotate(180deg); }
.acc-body { padding: 0 var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.acc-body .venue-group + .venue-group { margin-top: var(--sp-1); }
.more-shapes summary { cursor: pointer; color: var(--ink-2); font-weight: 500; margin-bottom: var(--sp-2); }
.viewport-wrap { position: relative; width: min(100%, calc((100dvh - 330px) * 16 / 9)); min-width: min(100%, 480px); margin: 0 auto; }
.viewport { width: 100%; aspect-ratio: 16 / 9; background: var(--gray-100); border-radius: var(--r-md); overflow: hidden; position: relative; display: grid; place-items: center; }
.viewport canvas { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; }
.viewport canvas:active { cursor: grabbing; }
.viewport-msg { color: var(--muted); display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.vp-legend { position: absolute; top: var(--sp-2); left: var(--sp-2); padding: 3px var(--sp-2); border-radius: var(--r-sm); background: var(--glass); font-size: var(--fs-xs); color: var(--ink-2); pointer-events: none; }
.viewport-toolbar { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-2); pointer-events: none; }
.viewport-toolbar > * { pointer-events: auto; min-width: 0; }
.viewport-toolbar .seg { background: var(--glass); box-shadow: var(--sh-1); }
.vp-cams { min-width: 0; flex: 0 1 auto; }
.vp-lens { flex: none; }
.saved-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.saved-views { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.saved-views > .empty-state { flex: 1; }
.view-item { margin: 0; flex: none; width: 168px; display: flex; flex-direction: column; gap: var(--sp-1); }
.builder-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); background: var(--surface-2); }
.builder-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.builder-status.warn { color: var(--warn); }
@media (max-width: 960px) {
  .builder-wrap { padding: 0; }
  .builder { width: 100%; height: 100vh; height: 100dvh; min-height: 0; max-height: none; border-radius: 0; }
  .builder-body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: auto; align-content: start; }
  .builder-right { order: -1; overflow: visible; padding: var(--sp-3); }
  .builder-left { overflow: visible; border-right: 0; border-top: 1px solid var(--line); }
  .viewport-wrap { width: 100%; min-width: 0; }
  .viewport-toolbar { position: static; flex-direction: column; align-items: stretch; margin-top: var(--sp-2); }
  .viewport-toolbar .seg { background: var(--gray-100); box-shadow: none; }
  .vp-cams .seg { flex-wrap: wrap; overflow: visible; }
  .vp-lens .seg { width: auto; }
  .save-view { width: 100%; }
  .saved-head { flex-direction: column; align-items: stretch; }
  .builder-foot { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .builder-foot .btn.primary { flex: none; }
}
@media (max-width: 600px) {
  .builder-status { flex-basis: 100%; }
  .builder-foot { flex-wrap: wrap; }
  .builder-foot .btn.primary { flex: 1; }
}

/* ───────── 운영 ───────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.stat-icon { width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--gray-100); color: var(--gray-600); }
.stat-num { font-size: var(--fs-xl); font-weight: 700; }
.meter { height: 6px; border-radius: var(--r-full); background: var(--gray-100); overflow: hidden; margin-top: var(--sp-2); }
.meter > span { display: block; height: 100%; background: var(--accent-500); border-radius: var(--r-full); }
.grant { margin-bottom: var(--sp-4); }
.grant .card-head { margin-bottom: var(--sp-3); }
.grant-row { display: grid; grid-template-columns: minmax(0, 2fr) 140px minmax(0, 2fr) auto; gap: var(--sp-3); align-items: end; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; padding: var(--sp-2) var(--sp-3); background: var(--gray-50); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; border-bottom: 1px solid var(--line); }
.table td { text-align: left; padding: 10px var(--sp-3); border-bottom: 1px solid var(--line); }
.table .r { text-align: right; }
.table tbody tr:hover { background: var(--surface-2); }
.user-cards { list-style: none; padding: 0; }
.user-cards li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.user-cards li:first-child { border-top: 0; }
@media (max-width: 960px) { .grant-row { grid-template-columns: 1fr 1fr; } .grant-row .btn { grid-column: 1 / -1; } }
@media (max-width: 600px) { .grant-row { grid-template-columns: 1fr; } }

/* ───────── 로그인 ───────── */
.login { width: 100%; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 400px); gap: var(--sp-12); align-items: center; max-width: 1080px; margin: 0 auto; padding: var(--sp-8) var(--gutter); }
.login.single { grid-template-columns: minmax(0, 400px); justify-content: center; }
.login-hero h1 { font-size: var(--fs-3xl); margin: var(--sp-6) 0 var(--sp-6); letter-spacing: -0.03em; }
.steps-intro { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.steps-intro li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.step-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-50); color: var(--accent-700); font-size: var(--fs-sm); font-weight: 700; }
.steps-intro b { font-size: var(--fs-base); }
.login-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); }
.or { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 960px) {
  .login { grid-template-columns: 1fr; gap: var(--sp-6); min-height: auto; }
  .login-card { order: -1; }
  .login-hero h1 { font-size: var(--fs-2xl); margin: var(--sp-4) 0; }
}
@media (max-width: 600px) { .login-card { padding: var(--sp-5); } .steps-intro { gap: var(--sp-2); } }

/* ───────── 로그인 그림판 (채택안 A: 브랜딩/hero/mock-login-a.html) ─────────
   넓은 화면: 왼쪽 그림판(그림 위 브랜드·제목·단계) + 오른쪽 카드 · 흐름 세 장.
   960px 이하: 그림 띠(브랜드 · AI 이미지 칩) → 카드(첫 화면 안) → 제목·단계 → 흐름 세 장.
   그림 위 글자는 위·아래만 어둡게 깔아 대비 4.5:1 이상을 지킨다(재는 법: 브랜딩/tools/login-harness/README.md). */
.login.with-art { max-width: none; margin: 0; padding: 0; gap: 0; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 34vw); grid-template-rows: 1fr auto auto 1fr; }
.with-art .login-hero { grid-row: 1 / -1; grid-column: 1; position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-12); color: var(--white); background: var(--art-shade); }
.with-art .art { position: absolute; inset: 0; z-index: -2; margin: 0; background: var(--art-shade); }
/* 그림 바꾸기: 들어오는 그림(.on)이 바로 위로 올라와 0→1로 나타나고, 나가는 그림은 그동안 밑에서 그대로 있다가
   다 덮인 뒤(--dur-fade 뒤)에 한 번에 0이 된다. 두 장이 함께 투명해지지 않아 어두운 바탕이 비치지 않는다 */
.with-art .art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; z-index: 0; transition: opacity 0s linear var(--dur-fade); }
.with-art .art img.on { opacity: 1; z-index: 1; transition: opacity var(--dur-fade) var(--ease); }
/* 글자 자리만 어둡게: 위(브랜드·한 줄)와 아래(제목·단계) 글자 묶음 뒤에 붙여, 화면 높이·그림이 바뀌어도 글자 뒤는 늘 어둡다 */
.with-art .hero-top, .with-art .hero-bottom { position: relative; }
.with-art .hero-top::before, .with-art .hero-bottom::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: calc(-1 * var(--sp-12)); right: calc(-1 * var(--sp-12)); }
.with-art .hero-top::before { top: calc(-1 * var(--sp-10)); bottom: calc(-1 * var(--sp-16));
  background: linear-gradient(180deg, var(--art-shade-80) 0%, var(--art-shade-64) calc(100% - var(--sp-16)), transparent 100%); }
.with-art .hero-bottom::before { top: calc(-2 * var(--sp-16)); bottom: calc(-1 * var(--sp-10));
  background: linear-gradient(180deg, transparent 0, var(--art-shade-62) var(--sp-16), var(--art-shade-86) calc(2 * var(--sp-16)), var(--art-shade-95) 100%); }
.with-art .brand { color: var(--white); }
/* 사진 위라 대비 4.5 확보용(logo-final README §4 '사진 위' 줄 참고) — 단색 어두운 바탕 색표 #9aa2ad로 되돌리면 사진 위 최저 4.3:1 */
.with-art .brand .name .sub { color: var(--on-dark-2); }
.with-art .brand .name .dot { background: var(--muted); }
.with-art .login-hero .tagline { margin-top: var(--sp-5); color: var(--on-dark-2); }
.with-art .login-hero .tagline b { color: var(--white); font-size: var(--fs-lg); letter-spacing: -0.01em; }
.with-art .hero-bottom { margin-top: auto; }
/* 글자 뒤는 hero-bottom::before 가 어둡게 깔아 대비를 지킨다(따로 글자 그림자를 두지 않는다) */
.with-art .login-hero h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); margin: 0 0 var(--sp-6); color: var(--white); }
.with-art .steps-intro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); margin: 0; }
.with-art .steps-intro li { flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--on-dark-line); }
.with-art .steps-intro b { color: var(--white); }
.with-art .steps-intro .muted { color: var(--on-dark-2); }
.with-art .step-dot { background: var(--p2-on-dark-16); color: var(--p2-on-dark); box-shadow: inset 0 0 0 1px var(--p2-on-dark-45); }
.with-art .login-hero .maker { margin: var(--sp-6) 0 0; color: var(--on-dark-muted); }
.art-caption { position: absolute; top: var(--sp-10); right: var(--sp-10); display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); background: var(--dark-chip); color: var(--on-dark);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.art-caption .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--p1-on-dark); }
.art-caption[data-phase="p2"] .dot { background: var(--p2-on-dark); }
/* 그림 넘김 멈춤 단추(칩 맨 앞, 24px 둥근 단추). 위아래·왼쪽을 칩 여백만큼 당겨 칩 높이는 그대로 둔다 */
.art-pause { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px;
  margin: calc(-1 * var(--sp-1)) 0 calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2)); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; }
.art-pause:hover { background: var(--on-dark-line); }
.art-pause:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 1px; }
.art-pause[hidden] { display: none; }
.with-art .login-card { grid-column: 2; grid-row: 2; width: min(400px, calc(100% - 2 * var(--sp-6))); justify-self: center; box-shadow: var(--sh-2); }
.with-art > .flow { grid-column: 2; grid-row: 3; width: min(400px, calc(100% - 2 * var(--sp-6))); justify-self: center; margin: var(--sp-6) 0 var(--sp-8); }
@media (max-width: 1279px) and (min-width: 961px) {
  /* 그림판이 좁으면 칩을 브랜드 아래로 내려 겹치지 않게 하고, 단계는 2칸씩 */
  .art-caption { position: static; align-self: flex-start; margin-top: calc(var(--sp-4) - var(--sp-8)); }
  .with-art .steps-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 이 폭에서는 아래 글자 묶음(제목 + 단계 2줄)이 높아져 무대가 어둡게 깐 층 밑에 가린다.
     ① 아래 층이 제목 위로 뻗는 길이를 줄인다(제목 바로 뒤 어두움은 그대로).
     ② 그림 상자를 위쪽 84%로 줄여 무대 본체를 칩과 제목 사이로 올린다. 그림판이 세로로 길어 그림은 높이에 맞춰
        그려지므로(object-fit: cover) object-position 세로 값으로는 움직이지 않는다. 상자 아래는 바탕색(--art-shade)이고
        그 위를 아래 층(86~95%)이 덮어 경계가 보이지 않는다. 세 장 모두 무대가 그림 세로 가운데쯤이라 같은 값을 쓴다 */
  .with-art .hero-bottom::before { top: calc(-1 * var(--sp-16));
    background: linear-gradient(180deg, transparent 0, var(--art-shade-62) var(--sp-8), var(--art-shade-86) var(--sp-16), var(--art-shade-95) 100%); }
  .with-art .art img { height: 84%; }
  /* 좁은 그림판에서는 hero-06 불꽃이 한 줄 소개 바로 뒤에 온다(961·1024 폭 4.4:1) → 위 층을 조금 더 진하게(64 → 70%) */
  .with-art .hero-top::before { background: linear-gradient(180deg, var(--art-shade-80) 0%, var(--art-shade-70) calc(100% - var(--sp-16)), transparent 100%); }
}

/* 흐름 세 장: 3D 기준 → 1차 무대 시안 → 2차 연출컷 (로그인, 빈 프로젝트 목록) */
.flow { margin: 0; }
.flow figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.flow .ai-note { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.flow li { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.flow img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--gray-100); }
.flow .tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.flow .tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); }
.flow .p1 .tag { color: var(--p1-700); }
.flow .p1 .tag::before { background: var(--p1-500); }
.flow .p2 .tag { color: var(--accent-700); }
.flow .p2 .tag::before { background: var(--accent-500); }
.flow li + li::before { /* 사이 화살표 */
  content: ""; position: absolute; z-index: 1; left: -15px; top: calc((100% - 24px) / 2 - 4px); width: 8px; height: 8px;
  border-top: 2px solid var(--gray-400); border-right: 2px solid var(--gray-400); transform: rotate(45deg); }
.flow.compact { width: 100%; max-width: 440px; margin-top: var(--sp-6); text-align: left; }
.flow.compact ol { gap: var(--sp-4); }
.flow.compact li + li::before { left: -12px; }

@media (max-width: 960px) {
  .login.with-art { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; padding: 0 0 var(--sp-10); min-height: 100vh; }
  .with-art .login-hero { display: contents; }
  .with-art .hero-bottom::before { content: none; }
  /* 그림 띠는 1·2줄을 함께 덮는다. 1줄 = 브랜드·한 줄 소개, 2줄 = 'AI 이미지' 칩.
     칩이 자기 줄을 가지므로 글자를 크게 보거나 칩이 두 줄로 꺾여도 소개와 겹치지 않고, 띠가 함께 늘어난다(높이는 최소값만 둔다) */
  .with-art .art { position: relative; inset: auto; z-index: 0; grid-row: 1 / 3; grid-column: 1; align-self: stretch;
    height: auto; min-height: clamp(220px, 34vh, 300px); overflow: hidden; }
  /* 위에 놓인 그림(z-index 1)보다 위에 깐다 */
  .with-art .art::after { content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, var(--art-shade-35) 0%, var(--art-shade-20) 60%, var(--art-shade-50) 100%); }
  .with-art .hero-top { grid-row: 1; grid-column: 1; z-index: 1; align-self: start; min-width: 0; padding: var(--sp-5) var(--gutter) 0; color: var(--white); }
  .with-art .hero-top::before { top: 0; left: 0; right: 0; bottom: calc(-1 * var(--sp-10));
    background: linear-gradient(180deg, var(--art-shade-80) 0%, var(--art-shade-70) calc(100% - var(--sp-10)), transparent 100%); }
  .with-art .login-hero .tagline { margin-top: var(--sp-3); }
  .with-art .login-hero .tagline b { font-size: var(--fs-base); }
  .art-caption { grid-row: 2; grid-column: 1; z-index: 1; position: static; align-self: end; justify-self: start;
    margin: var(--sp-3) var(--gutter) calc(var(--sp-12) + var(--sp-1)); }
  .with-art .login-card { grid-row: 3; grid-column: 1; order: 0; z-index: 2; width: auto; justify-self: stretch; margin: calc(-1 * var(--sp-10)) var(--gutter) 0; box-shadow: var(--sh-3); }
  .with-art .hero-bottom { display: contents; }
  .with-art .login-hero h1 { grid-row: 4; grid-column: 1; margin: 0; padding: var(--sp-8) var(--gutter) var(--sp-4); font-size: var(--fs-2xl); color: var(--ink); }
  .with-art .steps-intro { grid-row: 5; grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: 0 var(--gutter); }
  .with-art .steps-intro li { flex-direction: row; padding-top: 0; border-top: 0; }
  .with-art .steps-intro b { color: var(--ink); }
  .with-art .steps-intro .muted { color: var(--muted); }
  .with-art .step-dot { background: var(--accent-50); color: var(--accent-700); box-shadow: none; }
  .with-art > .flow { grid-row: 6; grid-column: 1; width: auto; justify-self: stretch; margin: var(--sp-8) var(--gutter) 0; }
  .with-art .login-hero .maker { grid-row: 7; grid-column: 1; margin: var(--sp-8) var(--gutter) 0; color: var(--muted); }
}
/* 휴대폰 가로(높이 500px 이하): 위아래로 쌓으면 그림 띠가 첫 화면을 다 써서 로그인 단추가 밀려난다.
   데스크톱처럼 두 칸으로 나눠 왼쪽에 그림·로고·브랜드 라인·'AI 이미지' 칩(하나도 숨기지 않음), 오른쪽에 로그인 카드를 둔다.
   제목·단계·흐름 세 장은 그 아래 두 칸 너비로 이어진다 */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
  .login.with-art { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .with-art .art { min-height: 100vh; min-height: 100dvh; }
  .art-caption { margin-bottom: var(--sp-5); }
  .with-art .login-card { grid-row: 1 / 3; grid-column: 2; align-self: stretch; justify-content: center; margin: 0;
    padding: var(--sp-5) var(--gutter); gap: var(--sp-3); border: 0; border-radius: 0; box-shadow: none; }
  .with-art .login-hero h1, .with-art .steps-intro, .with-art > .flow, .with-art .login-hero .maker { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .with-art .steps-intro { gap: var(--sp-2); }
  .flow ol { gap: var(--sp-4); }
  .flow li + li::before { left: -12px; }
}