/* BMYM Desktop System — macOS kit의 계층·여백·상태 원칙을 서비스 문법으로 번역한다. */
:root {
  color-scheme: light;
  --brand-cyan: #ff2400;
  --brand-cyan-dark: #e52200;
  --brand-red: #ff2400;
  --background: #f5f5f7;
  --foreground: #1d1d1f;
  --card: #ffffff;
  --card-foreground: #1d1d1f;
  --popover: #ffffff;
  --popover-foreground: #1d1d1f;
  --secondary: #f0f0f2;
  --secondary-foreground: #1d1d1f;
  --muted: #f0f0f2;
  --muted-foreground: #6e6e73;
  --accent: #f0f0f2;
  --accent-foreground: #1d1d1f;
  --border: rgba(0, 0, 0, .10);
  --input: rgba(0, 0, 0, .12);
  --ring: #d94f00;
  --ds-bg: #f5f5f7;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f9f9fb;
  --ds-ink: #1d1d1f;
  --ds-ink-2: #6e6e73;
  --ds-ink-3: #86868b;
  --ds-line: rgba(0, 0, 0, .10);
  --ds-line-strong: rgba(0, 0, 0, .16);
  /* 액센트(선택·포커스·링크)는 브랜드 계열 주황이다. macOS 의 시스템 파랑 자리를 그대로 물려받되
     애플의 색 규칙은 지킨다: 의미색과 겹치지 않고(경고 #ff9f0a 는 앰버, 오류 #ff3b30 은 적색),
     다크에서는 같은 색을 더 밝게 올린다. 흰 배경 대비 4.14 로 바꾸기 전 파랑(4.02)보다 낫다.
     시스템 주황(#ff9500)을 그대로 쓰지 않는 이유: 다크 값(#ff9f0a)이 경고색과 같은 색이라 뜻이 겹친다. */
  --ds-focus: #d94f00;
  --ds-on-focus: #ffffff;   /* 액센트 배경 위 글자 — 라이트는 흰색(대비 4.14) */
  --ds-success: #34c759;
  --ds-warning: #ff9f0a;
  --ds-error: #ff3b30;
  --ds-r-control: 10px;
  --ds-r-card: 16px;
  --ds-r-panel: 20px;
  --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .06);
  /* Apple macOS 27 UI Kit 실측값 (Forms/Example Forms, Group Boxes, Image Wells).
     macOS 그룹박스·이미지 웰은 테두리가 없다 — 아주 옅은 채움과 헤어라인만으로 나눈다.
     테두리를 겹쳐 쓰면(카드>패널>컨트롤) 선이 3겹이 되어 오히려 안 읽힌다. */
  --mac-fill-group: rgba(0, 0, 0, .03);
  --mac-fill-well: rgba(0, 0, 0, .02);
  --mac-hairline: rgba(0, 0, 0, .05);
  --mac-label-2: rgba(0, 0, 0, .50);
  --mac-label-3: rgba(0, 0, 0, .25);
}

.dark {
  color-scheme: dark;
  --background: #1c1c1e;
  --foreground: #f5f5f7;
  --card: #2c2c2e;
  --card-foreground: #f5f5f7;
  --popover: #2c2c2e;
  --popover-foreground: #f5f5f7;
  --secondary: #3a3a3c;
  --secondary-foreground: #f5f5f7;
  --muted: #3a3a3c;
  --muted-foreground: #aeaeb2;
  --accent: #3a3a3c;
  --accent-foreground: #f5f5f7;
  --border: rgba(255, 255, 255, .12);
  --input: rgba(255, 255, 255, .16);
  --ring: #ff7a33;
  --ds-bg: #1c1c1e;
  --ds-surface: #2c2c2e;
  --ds-surface-soft: #242426;
  --ds-ink: #f5f5f7;
  --ds-ink-2: #aeaeb2;
  --ds-ink-3: #8e8e93;
  --ds-line: rgba(255, 255, 255, .12);
  --ds-line-strong: rgba(255, 255, 255, .20);
  --ds-focus: #ff7a33;   /* 다크는 같은 색을 밝게 올린다 (애플 규칙) — 경고 #ff9f0a 와 구분되는 값 */
  --ds-on-focus: #1c1c1e;   /* 다크는 액센트를 밝게 올렸으므로 어두운 글자라야 읽힌다 (흰색 2.6 → 6.55) */
  --ds-shadow-float: 0 12px 30px rgba(0, 0, 0, .28);
  --mac-fill-group: rgba(255, 255, 255, .03);
  --mac-fill-well: rgba(255, 255, 255, .02);
  --mac-hairline: rgba(255, 255, 255, .05);
  --mac-label-2: rgba(255, 255, 255, .55);
  --mac-label-3: rgba(255, 255, 255, .25);
}

html { background: var(--ds-bg); }
body {
  min-width: 320px;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -.012em;
  /* 한국어 줄바꿈 — 기본값(normal)은 어절 한가운데서 끊어 "레퍼런/스가"처럼 읽힌다.
     keep-all 로 어절 단위로 끊고, 끊을 자리가 없는 긴 URL·파일명만 강제로 줄바꿈한다.
     (지금까지는 화면마다 break-keep 클래스를 손으로 붙여 왔고 빠진 곳이 더 많았다) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

::selection { background: rgba(0, 122, 255, .20); }

/* Controls */
.ui-btn {
  min-height: 36px;
  border-radius: var(--ds-r-control);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .08s ease;
}
.ui-btn:active:not(:disabled) { transform: scale(.985); }
/* 갤러리 카드 우상단의 즐겨찾기 — 바로 옆 상태 배지("완료")와 한 세트로 보여야 한다.
   .ui-btn 의 min-height 36px 가 h-6(24px)을 눌러, 24px 배지 옆에서 혼자 길쭉한 사각형이 됐다.
   높이·둥글기·그림자를 배지에 맞춘다(배지 실측 24.2px, rounded-full, shadow-sm). */
.g-fav {
  min-height: 0;
  height: 24px;
  width: 24px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}
.ui-btn:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-focus) 28%, transparent) !important;
}
.ui-btn:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed !important;
  opacity: .42;
  filter: saturate(.65);
}
.ui-input {
  min-height: 44px;
  border-color: var(--ds-line-strong);
  border-radius: var(--ds-r-control) !important;
  background: color-mix(in srgb, var(--ds-surface) 94%, transparent);
  color: var(--ds-ink);
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.ui-input:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ds-ink) 28%, transparent); }
.ui-input:focus,
.ui-input:focus-visible {
  border-color: var(--ds-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-focus) 22%, transparent);
}
.ui-input::placeholder { color: var(--ds-ink-3); }
/* Select — 브라우저 기본 화살표는 테두리에 바짝 붙어 그려져 상자에 낀 것처럼 보인다.
   화살표를 직접 그려 오른쪽에서 12px 들여놓고(.u-selwrap 의 셰브론과 같은 위치),
   글자가 화살표를 밀고 들어오지 않게 오른쪽 여백을 함께 확보한다.
   .u-select 는 lucide 셰브론을 따로 얹으므로 제외한다 — 안 빼면 화살표가 두 개 겹친다. */
select:not(.u-select) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}
.dark select:not(.u-select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── 선택 메뉴 (core.js enhanceSelect) ────────────────────────────────────
   원래 select 는 값 보관용으로 남겨 두고 화면에서만 뺀다. display:none 이면
   <label for> 클릭이 포커스를 못 넘겨 주므로 크기만 없앤다. */
.ui-menu-src {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
/* 트리거는 원래 select 의 클래스를 그대로 물려받는다 — 화면마다 크기가 안 달라진다.
   너비도 물려받은 클래스(w-auto·flex-1·prompt-model 의 100%)가 정하게 둔다 —
   여기서 100% 를 박으면 w-auto 로 내용만큼만 넓던 컨트롤이 행 전체로 늘어난다. */
.ui-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 30px !important;
  text-align: left;
  cursor: pointer;
}
.ui-menu-btn .ui-menu-txt { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-menu-btn .ui-menu-ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--mac-label-2); }
.ui-menu-btn .ui-menu-chev {
  position: absolute;
  right: 12px;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ds-ink-3);
  pointer-events: none;
}
.ui-menu-btn { position: relative; }
.ui-menu-btn[aria-expanded="true"] { border-color: var(--ds-focus); }
/* 사용량 화면의 필 버튼 — 셰브론은 .u-selwrap 이 이미 그리고 있다.
   여기서 상자를 다시 적는 이유: index.html 의 .u-select 는 @layer components 안이라
   레이어 없는 이 파일에 진다. 헤더의 세 컨트롤이 같은 높이로 서려면 이 값이 정본이다. */
.ui-menu-btn.u-select { height: 2rem; padding: 0 2rem 0 .9rem !important; font-weight: 600; }
.u-selwrap .ui-menu-btn .ui-menu-chev { display: none; }

.ui-menu {
  position: fixed;
  margin: 0;
  z-index: 90;
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(340px, calc(100dvh - 24px));
  overflow: hidden auto;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  padding: 6px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-float);
  overscroll-behavior: contain;
}
.ui-menu::backdrop { background: transparent; }
.ui-menu-search { position: sticky; top: -6px; display: flex; align-items: center; gap: 7px; margin: -6px -6px 4px; padding: 10px 12px; border-bottom: 1px solid var(--mac-hairline); background: var(--ds-surface); }
.ui-menu-search svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ds-ink-3); }
.ui-menu-search input { width: 100%; border: 0; background: transparent; color: var(--ds-ink); font-size: 13px; outline: none; }
.ui-menu-search input::placeholder { color: var(--mac-label-3); }
.ui-menu-list { display: flex; flex-direction: column; gap: 1px; }
.ui-menu-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  background: transparent;
  color: var(--ds-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color .14s ease;
}
.ui-menu-row:hover:not(:disabled),
.ui-menu-row:focus-visible { background: var(--mac-fill-group); outline: none; }
.ui-menu-row:disabled { cursor: not-allowed; opacity: .42; }
.ui-menu-row.on { background: color-mix(in srgb, var(--ds-focus) 8%, transparent); }
.ui-menu-tile {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--mac-fill-group);
  color: var(--ds-ink-2);
}
.ui-menu-tile svg { width: 15px; height: 15px; }
.ui-menu-row.on .ui-menu-tile { background: color-mix(in srgb, var(--ds-focus) 14%, transparent); color: var(--ds-focus); }
.ui-menu-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.ui-menu-title { display: flex; align-items: center; gap: 6px; color: var(--ds-ink); font-size: 13px; font-weight: 600; line-height: 17px; }
.ui-menu-desc { color: var(--mac-label-2); font-size: 11px; font-weight: 400; line-height: 14px; }
.ui-menu-badge {
  flex-shrink: 0;
  border-radius: 5px;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--brand-red) 12%, transparent);
  color: var(--brand-red);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ui-menu-check { width: 15px; height: 15px; flex-shrink: 0; color: var(--ds-focus); opacity: 0; }
.ui-menu-row.on .ui-menu-check { opacity: 1; }

/* App shell */
#sidebar {
  width: 256px;
  padding: 20px 16px;
  border-color: var(--ds-line);
  background: color-mix(in srgb, var(--ds-surface) 86%, transparent);
  box-shadow: inset -1px 0 rgba(255, 255, 255, .35);
}
#sidebar button[data-nav], #themeBtn { min-height: 42px; }
#sidebar button[data-nav] > span[aria-hidden="true"],
#themeBtn > span[aria-hidden="true"] { border-radius: 10px !important; }
#sidebar .nav-sec { letter-spacing: .16em; }
#sidebar .nav-lbl { font-size: 14px; font-weight: 600; }
#sidebar .nav-badge { letter-spacing: 0; }
.app-build {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-left: 4px;
  max-width: 215px;
  overflow: hidden;
  color: var(--ds-ink-3);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 개발 빌드도 회색으로 — 주황 강조는 눈에 계속 걸린다. 환경 구분은 "DEV" 글자로 충분하다 */
#sidebar.folded .app-build { display: none; }
#mainWrap { min-height: 100dvh; }
@media (min-width: 768px) {
  #mainWrap.md\:pl-60 { padding-left: 256px; }
  /* 접힘 폭은 반드시 여기서도 정해야 한다. core.js 는 접을 때 w-60 을 떼고 w-[5.5rem] 을 붙이는데,
     임의값 유틸은 ZET 컴파일 시트에 없어 조용히 무시된다 — 그러면 위의 #sidebar{width:256px} 가
     그대로 남아 '라벨만 사라진 256px 짜리 빈 사이드바'가 된다.
     768px 미만은 사이드바가 width:100% 하단 바로 바뀌므로 이 규칙이 거기까지 가면 안 된다. */
  #sidebar.folded { width: 88px; padding-left: 12px; padding-right: 12px; }   /* 88px = 5.5rem, mainWrap 접힘 padding 과 같은 값 */
}

#stepbar {
  min-height: 68px;
  padding: 12px 24px 10px;
  border-color: var(--ds-line);
  background: color-mix(in srgb, var(--ds-surface) 88%, transparent);
  box-shadow: 0 1px rgba(255, 255, 255, .45);
}
#stepBack { border-color: var(--ds-line); border-radius: 10px; box-shadow: none; }

/* Page rhythm */
#view-home > div,
#view-search > div,
#view-refs > div,
#view-gallery > div,
#view-w1 > div,
#view-w2 > div,
#view-w3 > div { max-width: 1336px; }

#view-search h1,
#view-refs h1,
#view-gallery h1,
#view-usage h1 { color: var(--ds-ink) !important; font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }

/* Home */
#view-home { background: var(--ds-bg); }
#view-home .home-grid > aside > div {
  border-color: var(--ds-line);
  border-radius: var(--ds-r-panel) !important;
  background: color-mix(in srgb, var(--ds-surface) 96%, transparent);
  box-shadow: none !important;
}
#view-home #url,
#view-home #scrapeBtn,
#view-home button[onclick*="pdfFile"] { min-height: 52px; border-radius: 12px !important; }
#view-home .marquee-track > div,
#homeMarquee .rounded-\[22px\] { border-radius: 14px !important; box-shadow: none !important; }
#view-home .marquee-tint { opacity: .42; }

/* Analysis journey */
#view-ws > div { border-radius: 0 !important; background: var(--ds-bg) !important; }
#view-ws aside,
#view-ws main > section {
  border-color: var(--ds-line) !important;
  border-radius: var(--ds-r-panel) !important;
  background: var(--ds-surface) !important;
  box-shadow: none !important;
}
#view-ws #jStep1Body { border-radius: 12px; }
#view-ws #wsStatus > div { border-radius: 999px; box-shadow: var(--ds-shadow-float); }

/* Wizard surfaces */
#view-w1 details,
#view-w1 .rounded-xl.border,
#view-w2 section,
#view-w2 aside > div > div > div,
#view-w3 section {
  border-color: var(--ds-line) !important;
  border-radius: var(--ds-r-card) !important;
  background: var(--ds-surface) !important;
  box-shadow: none !important;
}
#view-w2 [role="tablist"] { min-height: 44px; border-radius: 10px; background: var(--ds-bg); }
#view-w2 [role="tab"] { border-radius: 8px; font-size: 14px; }
#view-w2 [role="tab"][data-state="active"] { box-shadow: 0 1px 4px rgba(0, 0, 0, .07); }
#tplList > *, #w2qGrid > *, #refGrid > *, #out > * {
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ── 1단계: 타겟·소구점 패널 — macOS 27 Kit 규칙 ──────────────────────────
   Kit 실측 — Sidebar 는 3% 채움 위에 좌우 8px 인셋 pill, 선택만 액센트로 채운다.
   콘텐츠 영역은 중립면이다: 예전엔 우측 본문 전체를 브랜드색 6% 로 물들여
   "선택됨"과 "그냥 배경"이 같은 색이라 액센트가 뜻을 잃었다.
   Group Box 는 테두리 없이 3% 채움 — 카드>패널>컨트롤로 선을 겹치지 않는다. */
.mac-w1-card {
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
}
.mac-w1-head {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  box-shadow: inset 0 -1px var(--mac-hairline);
}
.mac-w1-head h2 { color: var(--ds-ink); font-size: 17px; font-weight: 700; line-height: 22px; letter-spacing: -.01em; }
.mac-w1-why {
  min-height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: var(--mac-fill-group);
  color: var(--ds-ink);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .16s ease;
}
.mac-w1-why:hover { background: rgba(0, 0, 0, .07); }
.dark .mac-w1-why:hover { background: rgba(255, 255, 255, .09); }
.mac-w1-body { display: grid; grid-template-columns: 224px minmax(0, 1fr); }
/* 사이드바는 본문과 다른 재질이어야 두 칸 구조가 읽힌다 — 3% 채움은 옆칸의 그룹박스와
   같은 값이라 경계가 사라졌다. macOS 처럼 한 단 더 눌러 둔다. */
.mac-w1-side { padding: 10px 8px; background: var(--ds-surface-soft); box-shadow: inset -1px 0 var(--ds-line); }
.mac-w1-main { min-width: 0; padding: 24px; }

/* Sidebar — 선택은 pill 채움 하나로 말한다 (좌측 액센트 바 + 틴트 + 점 3중 표시를 걷어냈다) */
.mac-sb-row {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  border-radius: var(--ds-r-control);
  padding: 6px 10px;
  color: var(--ds-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  transition: background-color .14s ease, color .14s ease;
}
.mac-sb-row + .mac-sb-row { margin-top: 2px; }
.mac-sb-row:hover { background: rgba(0, 0, 0, .05); }
.dark .mac-sb-row:hover { background: rgba(255, 255, 255, .07); }
.mac-sb-row[aria-current="true"],
.mac-sb-row[aria-current="true"]:hover { background: var(--brand-red); color: #fff; font-weight: 600; }
.mac-sb-del {
  display: inline-flex;
  height: 18px;
  width: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, .7);
  transition: background-color .14s ease, color .14s ease;
}
.mac-sb-del:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.mac-sb-add {
  display: flex;
  width: 100%;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--ds-r-control);
  padding: 5px 10px;
  background: transparent;
  color: var(--mac-label-2);
  font-size: 12px;
  font-weight: 500;
  transition: background-color .14s ease, color .14s ease;
}
.mac-sb-add:hover { background: rgba(0, 0, 0, .05); color: var(--ds-ink); }
.dark .mac-sb-add:hover { background: rgba(255, 255, 255, .07); }
.mac-sb-sep { margin: 8px 10px; height: 1px; border: 0; background: var(--mac-hairline); }
/* 아이콘 크기는 여기서 못 박는다 — ZET 시트에 h-3.5/w-3.5 같은 임의값 유틸이 없어
   클래스로 주면 lucide 기본 24px 이 그대로 남는다(행 높이가 통째로 밀린다). */
.mac-sb-add > svg, .mac-sb-del > svg, .mac-add-row > svg { height: 14px; width: 14px; flex-shrink: 0; }

/* 본문 — 섹션 헤더/설명은 3단계와 같은 스케일을 쓴다 */
#view-w1 .mac-section-title { color: var(--ds-ink); font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; }
#view-w1 .mac-section-desc { margin-top: 4px; color: var(--mac-label-2); font-size: 13px; line-height: 19px; }
#view-w1 .mac-section-desc strong { color: var(--ds-ink); font-weight: 600; }
#view-w1 .mac-sep { margin: 24px 0; height: 1px; border: 0; background: var(--mac-hairline); }
.mac-group { border-radius: var(--ds-r-card); padding: 20px; background: var(--mac-fill-group); }
.mac-group-title { color: var(--ds-ink); font-size: 14px; font-weight: 600; line-height: 21px; }
.mac-group-hair { margin: 12px 0; height: 1px; border: 0; background: var(--mac-hairline); }
#personaBody { max-width: 42rem; color: var(--ds-ink); font-size: 13.5px; line-height: 1.65; }
/* 자식 선택자(>)로 좁혀 둔다 — 안쪽 HSO 카드까지 margin 을 0 으로 밀면 ID 특이도가
   .mb-3 을 이겨서 'HSO 분석' 과 'HOOK' 이 맞붙는다 */
#personaBody > p, #personaBody > ul, #personaBody > ol, #personaBody li { margin: 0; }
#personaBody > p + p, #personaBody > ul, #personaBody > ol { margin-top: 8px; }
#personaBody li + li { margin-top: 3px; }
#personaBody strong { font-weight: 600; }
.mac-link-btn {
  min-height: 24px;
  border: 0;
  background: transparent;
  color: var(--mac-label-2);
  font-size: 12px;
  font-weight: 500;
  transition: color .14s ease;
}
.mac-link-btn:hover { color: var(--ds-focus); }

/* 소구점 카드 — Image Well 규칙(2% 채움·테두리 없음). 선택은 액센트 링 1겹만. */
.mac-rtb {
  overflow: hidden;
  border-radius: 12px;
  background: var(--mac-fill-well);
  transition: background-color .16s ease, box-shadow .16s ease;
}
.mac-rtb + .mac-rtb { margin-top: 6px; }
/* 선택 표시는 링 1겹뿐이다 — 채움까지 얹으면 펼친 카드가 통째로 분홍 덩어리가 된다 */
.mac-rtb[data-core="1"] { box-shadow: inset 0 0 0 1.5px var(--brand-red); }
.mac-rtb-head { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.mac-rtb:not([data-core="1"]) .mac-rtb-head:hover { background: rgba(0, 0, 0, .03); }
.dark .mac-rtb:not([data-core="1"]) .mac-rtb-head:hover { background: rgba(255, 255, 255, .05); }
.mac-rtb-head > svg { height: 14px; width: 14px; flex-shrink: 0; color: var(--mac-label-3); transition: transform .2s ease; }
/* 두 줄 클램프 — -webkit-box 는 flex 아이템이 되면 blockify 돼 클램프가 죽는다(예전 마크업이
   그래서 안 먹었다). flex 아이템은 바깥 span 이 맡고, 클램프는 안쪽 span 이 한다. */
.mac-rtb-label { min-width: 0; flex: 1 1 auto; }
.mac-rtb-label > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ds-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  word-break: keep-all;
}
.mac-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
  background: color-mix(in srgb, var(--ds-warning) 16%, transparent);
  color: var(--ds-warning);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.mac-rtb-body { padding: 0 12px 14px 38px; box-shadow: inset 0 1px var(--mac-hairline); }
.mac-rtb-well { border-radius: 10px; padding: 12px 14px; background: var(--ds-surface); }
.mac-rtb-well, .mac-rtb-well * { color: var(--ds-ink); font-size: 13px; line-height: 1.7; word-break: keep-all; }
.mac-rtb-well strong { font-weight: 600; }
.mac-caption { display: block; color: var(--mac-label-2); font-size: 11px; font-weight: 600; line-height: 15px; letter-spacing: .04em; text-transform: uppercase; }
.mac-field + .mac-field { margin-top: 12px; }
.mac-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mac-link-btn > svg { height: 12px; width: 12px; }

/* HSO — H/S/O 는 대등한 세 칸이다. 예전엔 빨강·보라·초록 3색이라 색이 뜻을 잃었다. */
.mac-hso { margin-top: 16px; border-radius: 12px; padding: 16px; background: var(--ds-surface); }
.mac-hso-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .mac-hso-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mac-hso-grid p { margin-top: 4px; color: var(--ds-ink); font-size: 13px; line-height: 1.7; word-break: keep-all; }

/* Segmented Control — Kit 실측: 인셋 트랙 위 선택 세그먼트만 올라온다 */
/* 트랙은 3% 로는 카드(2% 채움) 위에서 안 보인다 — 세그먼트 컨트롤은 트랙이 보여야 컨트롤로 읽힌다 */
.mac-seg { display: flex; flex-shrink: 0; gap: 2px; border-radius: 8px; padding: 2px; background: rgba(0, 0, 0, .07); }
.dark .mac-seg { background: rgba(255, 255, 255, .10); }
.mac-seg button {
  min-height: 24px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  background: transparent;
  color: var(--ds-ink);
  font-size: 12px;
  font-weight: 500;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.mac-seg button:hover { background: rgba(0, 0, 0, .05); }
.dark .mac-seg button:hover { background: rgba(255, 255, 255, .07); }
.mac-seg button[aria-pressed="true"] { background: var(--ds-surface); color: var(--ds-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.mac-seg button[data-k="core"][aria-pressed="true"] { background: var(--brand-red); color: #fff; }
.mac-add-row {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--mac-fill-group);
  color: var(--mac-label-2);
  font-size: 12px;
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease;
}
.mac-add-row:hover { background: rgba(0, 0, 0, .07); color: var(--ds-ink); }
.dark .mac-add-row:hover { background: rgba(255, 255, 255, .09); }
@media (max-width: 860px) {
  .mac-w1-body { grid-template-columns: minmax(0, 1fr); }
  .mac-w1-side { box-shadow: inset 0 -1px var(--mac-hairline); }
  .mac-w1-main { padding: 20px 16px; }
}

/* ── 3단계: macOS 27 폼 규칙 ──────────────────────────────────────────────
   Kit 실측 — Form 컨테이너는 3% 채움에 테두리 없음, 행은 40/48px, 행 사이는
   5% 헤어라인, 라벨은 leading·컨트롤은 trailing.
   라벨과 컨트롤 사이 간격을 규칙으로 못 박아 둔다 — 예전엔 flex-wrap 한 줄에
   라벨+셀렉트를 여러 쌍 흘려 넣어 앞 컨트롤과 다음 라벨이 맞붙어 읽혔다. */
#view-w3 > div { max-width: 1120px; }
#view-w3 > div > div { max-width: none; }
#view-w3 h2 { font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -.02em; }
#view-w3 h2 + p { color: var(--mac-label-2); font-size: 13px; line-height: 18px; }
#view-w3 .mac-section-title { color: var(--ds-ink); font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; }
#view-w3 .mac-section-title .opt { margin-left: 6px; color: var(--mac-label-2); font-size: 12px; font-weight: 400; }
.mac-form {
  border-radius: 10px;
  padding: 0 10px;
  background: var(--mac-fill-group);
}
.mac-row {
  display: flex;
  min-height: 48px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;   /* 20px: 라벨과 컨트롤이 절대 맞붙지 않는 하한 */
  padding: 10px 0;
}
.mac-row + .mac-row { box-shadow: inset 0 1px var(--mac-hairline); }
.mac-row-lead { min-width: 0; flex: 1 1 auto; color: var(--ds-ink); font-size: 13px; line-height: 16px; }
/* display 를 안 주면 인라인이라 라벨 뒤에 그대로 붙는다 ("후보 장수비율마다 …") — margin-top 도 안 먹는다 */
.mac-row-lead .desc { display: block; margin-top: 3px; color: var(--mac-label-2); font-size: 12px; line-height: 17px; }
.mac-row-trail { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
#view-w3 .mac-row-trail .ui-input { min-height: 28px; border-radius: 8px !important; font-size: 13px; }
/* 비율 체크박스 — 알약마다 테두리를 두르면 행 안에 선이 4개 더 생긴다. 채움으로 구분한다. */
#view-w3 #ratios { display: flex; flex-wrap: wrap; gap: 6px; }
#view-w3 #ratios label {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: var(--mac-fill-group);
  color: var(--ds-ink);
  font-size: 12px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
#view-w3 #ratios label:hover { background: rgba(0, 0, 0, .07); }
#view-w3 #ratios label:has(input:checked) { background: color-mix(in srgb, var(--ds-focus) 14%, transparent); color: var(--ds-focus); font-weight: 600; }
.dark #view-w3 #ratios label:hover { background: rgba(255, 255, 255, .09); }

/* 카드 바깥 섹션 — 테두리 1겹만 남긴다 (예전엔 section > 패널 > 컨트롤로 3겹이었다) */
#view-w3 .mac-card {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card);
  padding: 20px;
  background: var(--ds-surface);
}
#view-w3 .mac-card > * + * { margin-top: 12px; }
/* 사이즈 참고 이미지 — Kit 의 Image Well 규칙(2% 채움·테두리 없음)을 그대로 쓴다. */
#sizeRefBox { border: 0; background: var(--mac-fill-well); }
#sizeRefBox:hover { background: rgba(0, 0, 0, .05); }
.dark #sizeRefBox:hover { background: rgba(255, 255, 255, .06); }

/* Prompt cards */
.prompt-card {
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
}
.prompt-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.prompt-reference {
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--ds-line);
  background: var(--ds-surface-soft);
}
.prompt-reference-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--mac-fill-well);
}
/* 썸네일 바로 밑에 캡션이 붙어 이미지의 일부처럼 읽혔다 — 한 칸 띄운다. */
.prompt-reference-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--mac-label-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}
/* 생성 모델 — 광고마다 다를 수 있어 카드 안에 둔다. 위쪽 헤어라인으로 레퍼런스와 구분한다. */
.prompt-model { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mac-hairline); }
.prompt-model-label { display: block; margin-bottom: 5px; color: var(--mac-label-2); font-size: 11px; font-weight: 500; line-height: 14px; }
#view-w3 .prompt-model .ui-input {
  width: 100%;
  min-height: 28px;
  border-color: var(--ds-line);
  border-radius: 8px !important;
  padding-left: 8px;
  background-color: var(--ds-surface);
  font-size: 13px;
}
.prompt-content { min-width: 0; padding: 18px; }
.prompt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: 10px; }
.prompt-head-title { color: var(--ds-ink); font-size: 13px; font-weight: 600; line-height: 16px; }
.prompt-head-title span { margin-left: 6px; color: var(--mac-label-2); font-size: 12px; font-weight: 400; }
.prompt-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prompt-head-actions .ui-btn {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ds-focus);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.prompt-head-actions .ui-btn:hover { background: var(--mac-fill-group); }
.prompt-panel {
  border-radius: 10px;
  background: var(--mac-fill-group);
  padding: 16px;
}
.prompt-panel .layer-label { margin-bottom: 6px; color: var(--ds-ink); font-size: 11px; font-weight: 600; line-height: 14px; }
.prompt-panel .layer-label span { color: var(--mac-label-2); font-weight: 400; }
/* 이 카드에서 사용자가 가장 많이 쓰는 입력이다 — 예전엔 테두리·배경·패딩이 전부 0 이라
   3% 회색 패널 위에 글자만 떠 있었다. 바로 아래 텍스트 레이어는 .ui-input(흰 배경+테두리)
   이라, 같은 패널에서 정작 중요한 쪽만 '입력창이 아닌 것'처럼 보였다. 재질을 맞춘다. */
.prompt-panel .layer-textarea {
  display: block;
  width: 100%;
  min-height: 92px;   /* 약 4줄 — 56px(3줄)에서는 연출 지시 한 문장에도 스크롤이 생겼다 */
  resize: vertical;   /* 더 길게 쓰는 사람은 직접 늘린다 (브라우저 기본 핸들 — JS 없음) */
  border: 1px solid var(--ds-line);
  border-radius: 8px;
  background: var(--ds-surface);
  padding: 9px 12px;
  color: var(--ds-ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 19px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.prompt-panel .layer-textarea::placeholder { color: var(--mac-label-3); }
.prompt-panel .layer-textarea:focus { border-color: var(--ds-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-focus) 28%, transparent); }
#view-w3 .prompt-panel .ui-input { min-height: 32px; border-color: var(--ds-line); border-radius: 8px !important; font-size: 13px; }
.prompt-panel .panel-sep { height: 1px; margin: 12px 0; background: var(--mac-hairline); }
/* 디자인 색상 — 카드>패널 안의 세 번째 테두리 상자였다. 헤어라인으로 나눈 폼 행으로 바꾼다. */
.prompt-panel .pal-row { min-height: 0; padding: 0; box-shadow: none; }
.prompt-panel .pal-lead { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 500; }
.prompt-panel .pal-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 2px 6px;
  background: var(--mac-fill-group);
  color: var(--mac-label-2);
  font-size: 10px;
  font-weight: 500;
}
.prompt-panel .pal-chip .dot { width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
#view-w3 .pal-btn {
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 0 0 1px var(--ds-line);
}
#view-w3 .pal-btn:hover { background: var(--mac-fill-group); }
#view-w3 .pal-btn-icon { width: 28px; padding: 0; color: var(--mac-label-2); }
.prompt-assets { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 12px; margin-top: 16px; }
/* 에셋 칸: 사진 위에 글자를 얹지 않는다 — 칸은 그림만, 이름은 칸 아래 캡션으로 내린다. */
.asset-well { width: 88px; }
.asset-well-frame { position: relative; width: 88px; height: 88px; }
.asset-well-frame > button:first-child {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--mac-fill-well) !important;
}
.asset-well-caption {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--mac-label-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-well-caption.on { color: var(--ds-ink); font-weight: 600; }
.quantity-control {
  min-width: 160px;
  min-height: 88px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mac-fill-group);
}
.quantity-control [data-cv] { min-width: 42px; font-size: 13px; }   /* Body 13 — 마크업의 text-sm(14px)은 램프 밖 */
.image-load-error {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  color: var(--ds-ink-2);
  font-size: 12px;
  text-align: center;
  background: var(--ds-bg);
}
.image-load-error .ui-btn { min-height: 30px; margin-top: 3px; border: 1px solid var(--ds-line-strong); padding: 4px 10px; background: var(--ds-surface); color: var(--ds-ink); font-size: 11px; }

/* Bottom action bars */
#wNextWrap,
#genBarWrap { right: max(24px, calc((100vw - 256px - 1336px) / 2)) !important; bottom: 20px; }
#wNextWrap > div,
#genBarWrap > div { filter: none; }
#genBarWrap > div > div,
#wNextWrap .pointer-events-auto > div {
  border-color: var(--ds-line) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--ds-surface) 90%, transparent) !important;
  box-shadow: var(--ds-shadow-float) !important;
}
.generation-cost {
  min-width: 88px;
  padding: 5px 12px;
  text-align: center;
}
.generation-cost .total { color: var(--brand-red); font-size: 17px; font-weight: 800; white-space: nowrap; }

/* 광고 검색 — 메타 광고 라이브러리 결과 카드 */
.adq-sources { display: inline-flex; gap: 3px; border-radius: 10px; padding: 3px; background: var(--mac-fill-group); }
.adq-sources button { display: inline-flex; min-width: 82px; min-height: 32px; cursor: pointer; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; padding: 0 10px; background: transparent; color: var(--mac-label-2); font-size: 13px; font-weight: 600; }
/* 안 고른 쪽 로고는 색을 뺀다 — 브랜드 색 둘이 나란히 켜져 있으면 어느 쪽이 켜진 탭인지 안 보인다 */
.adq-sources button img { width: 16px; height: 16px; flex: none; filter: grayscale(1); opacity: .55; transition: filter .15s ease, opacity .15s ease; }
.adq-sources button.is-active img { filter: none; opacity: 1; }
.adq-sources button:hover { color: var(--ds-ink); }
.adq-sources button:hover img { opacity: .8; }
.adq-sources button:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-focus) 24%, transparent); }
.adq-sources button.is-active { background: var(--ds-surface); color: var(--ds-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.adq-busy { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--mac-label-2); font-size: 13px; }
.adq-busy .spin { width: 16px; height: 16px; border: 2px solid var(--ds-line); border-top-color: var(--ds-focus); border-radius: 999px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.adq-cancel { min-height: 28px; border-radius: 8px; padding: 0 10px; background: var(--mac-fill-group); font-size: 12px; font-weight: 500; }
.adq-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  background: var(--ds-surface);
}
.adq-card { position: relative; }
.adq-card > img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--mac-fill-well); }
.adq-badge { position: absolute; top: 8px; right: 8px; border-radius: 999px; padding: 2px 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 10px; font-weight: 600; }
/* 게재 기간 — 오래 도는 광고일수록 성과가 좋다는 신호라 카드에서 가장 눈에 띄어야 한다. */
.adq-run { display: flex; align-items: center; gap: 4px; color: var(--ds-ink); font-size: 11px; }
.adq-run b { color: var(--ds-focus); font-weight: 700; }
.adq-meta { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.adq-adv { color: var(--ds-ink); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adq-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--mac-label-2);
  font-size: 12px;
  line-height: 17px;
}
.adq-sub { color: var(--mac-label-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adq-land { color: var(--ds-focus); text-decoration: none; }
.adq-land:hover { text-decoration: underline; }
.adq-actions { display: flex; margin-top: auto; padding-top: 8px; gap: 6px; }
.adq-save { min-height: 30px; flex: 1; border-radius: 8px; background: var(--mac-fill-group); color: var(--ds-ink); font-size: 12px; font-weight: 600; }
.adq-save:hover:not(:disabled) { background: color-mix(in srgb, var(--ds-focus) 14%, transparent); color: var(--ds-focus); }
.adq-open { display: inline-flex; width: 30px; min-height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: var(--mac-fill-group); color: var(--mac-label-2); }

/* Libraries, editor and dashboard */
#view-search,
#view-refs,
#view-gallery,
#view-usage { background: var(--ds-bg); }
#view-refs .ui-input[style], #view-search .ui-input { background: var(--ds-surface); }
#view-editor > div:first-child { border-color: var(--ds-line); background: var(--ds-surface) !important; }
#view-editor .editor-split > div { background: var(--ds-bg) !important; }
#view-editor .editor-split > div:first-child { background: var(--ds-surface) !important; }
#view-editor .editor-col.rounded-2xl { border-color: var(--ds-line); border-radius: var(--ds-r-card); background: var(--ds-surface); }
#view-editor #edPreview,
#view-editor #edBusy { border-color: var(--ds-line); border-radius: 12px; }
.u-card, .u-panel { border-color: var(--ds-line) !important; border-radius: var(--ds-r-card) !important; box-shadow: none !important; }
.bk-bar, .bk-menu, .gb-panel { border-color: var(--ds-line) !important; box-shadow: var(--ds-shadow-float) !important; }

/* Floating surfaces */
#jobsPanel,
#modalCard,
#lightbox > div {
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-panel) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-float) !important;
}
#jobsFab { box-shadow: var(--ds-shadow-float) !important; }
#modal, #lightbox { backdrop-filter: blur(14px); }
#toast { position: fixed; top: 20px; right: 20px; border-radius: 12px; box-shadow: var(--ds-shadow-float); }

@media (max-width: 1023px) {
  .prompt-layout { grid-template-columns: 210px minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  #sidebar {
    display: flex !important;
    top: auto;
    bottom: 0;
    width: 100%;
    height: calc(70px + env(safe-area-inset-bottom));
    flex-direction: row;
    padding: 6px 8px env(safe-area-inset-bottom);
    border-top: 1px solid var(--ds-line);
    border-right: 0;
    overflow-x: auto;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .06);
  }
  #sidebar > div:first-child,
  #sidebar > div.mt-auto,
  #sidebar .scrollbar-on-hover > .mt-auto,
  #sidebar .nav-sec,
  #sidebar .nav-badge { display: none !important; }
  #sidebar .scrollbar-on-hover {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #sidebar .scrollbar-on-hover::-webkit-scrollbar { display: none; }
  #sidebar .scrollbar-on-hover > div,
  #sidebar .scrollbar-on-hover > div > div { display: contents; }
  #sidebar button[data-nav] {
    width: 70px;
    min-width: 70px;
    height: 58px;
    flex-direction: column;
    justify-content: center;
    padding: 5px 4px;
  }
  #sidebar button[data-nav] > div { flex-direction: column; gap: 4px; }
  #sidebar button[data-nav] svg { width: 18px; height: 18px; }
  #sidebar button[data-nav] .nav-lbl { max-width: 64px; font-size: 10px; line-height: 1.1; }
  #sidebar button[data-nav] > span[aria-hidden="true"] { inset: 2px; }
  .app-build {
    position: fixed;
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
    margin: 0;
    z-index: 60;
    max-width: 190px;
    border: 1px solid var(--ds-line);
    border-radius: 999px;
    padding: 5px 8px;
    background: color-mix(in srgb, var(--ds-surface) 90%, transparent);
    backdrop-filter: blur(12px);
  }
  #stepbar { top: 0; min-height: 62px; padding-inline: 12px; }
  #stepBack { width: 34px; height: 34px; }
  #view-home .home-grid > aside { position: static; }
  #view-w1 > div,
  #view-w2 > div,
  #view-w3 > div { padding-bottom: 154px; }
  .prompt-layout { display: block; }
  .prompt-reference { border-right: 0; border-bottom: 1px solid var(--ds-line); }
  .prompt-reference-frame { max-width: 360px; margin: 0 auto; }
  .prompt-content { padding: 14px; }
  .prompt-panel { padding: 14px; }
  .prompt-assets { justify-content: flex-start; }
  .asset-well { width: 76px; }
  .asset-well-frame { width: 76px; height: 76px; }
  .quantity-control { min-height: 76px; flex: 1; }
  #view-w3 .mac-card { padding: 16px; }
  /* 좁은 화면에서는 라벨 아래로 컨트롤이 내려간다 — 억지로 한 줄에 두면 다시 맞붙는다. */
  .mac-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .mac-row-trail { justify-content: flex-start; }
  #wNextWrap,
  #genBarWrap { inset-inline: 10px !important; right: 10px !important; bottom: calc(78px + env(safe-area-inset-bottom)); }
  #genBarWrap > div > div { flex-wrap: wrap; }
  .generation-cost { order: -1; width: 100%; min-width: 0; border-bottom: 1px solid var(--ds-line); padding: 8px 10px 10px; }
  #lightbox > div { max-height: 90dvh; flex-direction: column; }
  #lightbox #lbSide { width: 100% !important; border-top: 1px solid var(--ds-line); border-left: 0; }
  #modal { align-items: flex-end; padding: 0; }
  #modalCard { max-width: none; max-height: 92dvh !important; border-radius: 20px 20px 0 0 !important; }
  #jobsPanel { right: 10px !important; bottom: calc(80px + env(safe-area-inset-bottom)) !important; width: calc(100vw - 20px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Font finder — Sandoll's compact search flow with the shared macOS-inspired tokens. */
#view-fonts { min-height: 100%; background: var(--ds-bg); color: var(--ds-ink); }
.font-page { width: min(100%, 960px); margin: 0 auto; padding: 40px 24px 64px; }
.font-page-head { margin-bottom: 24px; }
.font-title-row { display: flex; align-items: center; gap: 10px; }
.font-title-row h1 { margin: 0; font-size: 28px; font-weight: 750; line-height: 34px; letter-spacing: -.035em; }
.font-beta { border-radius: 999px; padding: 4px 8px; background: color-mix(in srgb, var(--ds-focus) 12%, transparent); color: var(--ds-focus); font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .06em; }
.font-page-head > p { margin: 6px 0 0; color: var(--ds-ink-2); font-size: 15px; line-height: 22px; }
.font-workbench,
.font-result-panel { border: 1px solid var(--ds-line); border-radius: var(--ds-r-panel); background: var(--ds-surface); }
.font-workbench { padding: 24px; }
.font-panel-head { width: min(100%, 768px); margin: 0 auto 16px; }
.font-panel-head h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; letter-spacing: -.015em; }
.font-panel-head p { margin: 2px 0 0; color: var(--ds-ink-2); font-size: 13px; line-height: 18px; }
.font-drop { display: flex; width: min(100%, 768px); min-height: 260px; margin: 0 auto; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--ds-line-strong); border-radius: var(--ds-r-card); padding: 32px; background: var(--ds-surface-soft); text-align: center; transition: border-color .16s ease, background .16s ease; }
.font-drop:hover,
.font-drop.is-dragging { border-color: var(--ds-focus); background: color-mix(in srgb, var(--ds-focus) 4%, var(--ds-surface)); }
.font-drop:focus-within { border-color: var(--ds-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-focus) 22%, transparent); }
.font-drop-icon,
.font-state-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--ds-line); border-radius: 50%; background: var(--ds-surface); color: var(--ds-ink-2); }
.font-drop-icon svg { width: 20px; height: 20px; }
.font-drop b { margin-top: 14px; font-size: 15px; line-height: 22px; }
.font-drop > span:last-child { margin-top: 3px; color: var(--ds-ink-3); font-size: 12px; line-height: 17px; }
.font-image-stage { display: flex; width: min(100%, 768px); max-height: 432px; margin: 0 auto; align-items: center; justify-content: center; border: 1px solid var(--ds-line); border-radius: var(--ds-r-card); padding: 16px; overflow: hidden; background: var(--ds-bg); }
.font-image-stage:has(.font-preview-wrap[hidden]) { display: none; }
.font-preview-wrap { position: relative; display: inline-block; max-width: 100%; max-height: 400px; overflow: hidden; border-radius: 10px; line-height: 0; }
#fontPreview { display: block; width: auto; height: auto; max-width: 100%; max-height: 400px; object-fit: contain; }
.font-box-layer { position: absolute; inset: 0; }
.font-box { position: absolute; cursor: pointer; border: 2px solid rgba(255,255,255,.92); border-radius: 4px; background: rgba(0,0,0,.12); box-shadow: 0 1px 5px rgba(0,0,0,.22); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.font-box:hover,
.font-box.is-selected { border-color: var(--ds-focus); background: color-mix(in srgb, var(--ds-focus) 20%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-focus) 24%, transparent); }
.font-box span { position: absolute; top: 0; left: 0; min-width: 20px; border-radius: 0 0 6px 0; padding: 3px 6px; background: var(--ds-ink); color: var(--ds-surface); font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; }
.font-box:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-focus) 35%, transparent); }
.font-actions { display: flex; width: min(100%, 768px); margin: 16px auto 0; align-items: center; justify-content: flex-end; gap: 8px; }
.font-primary-btn,
.font-secondary-btn { min-height: 44px; padding: 0 16px; font-size: 13px; font-weight: 650; }
.font-primary-btn { background: var(--brand-red); color: #fff; }
.font-primary-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-red) 88%, #000); }
.font-primary-btn svg { width: 16px; height: 16px; }
.font-button-spinner { animation: spin 1s linear infinite; }
.font-secondary-btn { border: 1px solid var(--ds-line-strong); background: var(--ds-surface); color: var(--ds-ink); }
.font-secondary-btn:hover:not(:disabled) { background: var(--ds-surface-soft); }
.font-error { width: min(100%, 768px); margin: 0 auto; color: var(--ds-error); font-size: 13px; line-height: 18px; }
.font-error:not(:empty) { margin-top: 12px; border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--ds-error) 8%, transparent); }
.font-result-panel { min-height: 240px; margin-top: 20px; padding: 24px; }
.font-state { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.font-state-icon { margin-bottom: 12px; }
.font-state-icon svg { width: 20px; height: 20px; }
.font-state b { font-size: 15px; line-height: 22px; }
.font-state p { margin: 3px 0 0; color: var(--ds-ink-2); font-size: 13px; line-height: 18px; }
.font-spinner { width: 22px; height: 22px; margin-bottom: 12px; color: var(--ds-focus); animation: spin 1s linear infinite; }
.font-result-head { margin-bottom: 4px; }
.font-result-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.font-result-title-row h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; letter-spacing: -.015em; }
.font-result-count { flex: none; border-radius: 999px; padding: 4px 9px; background: var(--ds-surface-soft); color: var(--ds-ink-2); font-size: 11px; font-weight: 650; line-height: 16px; }
.font-result-head > p { max-width: 720px; margin: 5px 0 0; color: var(--ds-ink-2); font-size: 13px; line-height: 19px; }
.font-region-tabs { display: flex; margin-top: 18px; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.font-region-tab { display: inline-flex; min-width: 0; cursor: pointer; align-items: center; gap: 7px; border: 1px solid var(--ds-line); border-radius: 999px; padding: 7px 11px 7px 7px; background: var(--ds-surface); color: var(--ds-ink-2); transition: border-color .15s ease, background .15s ease, color .15s ease; }
.font-region-tab:hover { border-color: var(--ds-line-strong); background: var(--ds-surface-soft); }
.font-region-tab:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-focus) 24%, transparent); }
.font-region-tab span { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 50%; background: var(--ds-ink); color: var(--ds-surface); font-size: 10px; font-weight: 750; }
.font-region-tab strong { max-width: 150px; overflow: hidden; font-size: 12px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.font-region-tab.is-selected { border-color: color-mix(in srgb, var(--ds-focus) 35%, var(--ds-line)); background: color-mix(in srgb, var(--ds-focus) 8%, transparent); color: var(--ds-ink); }
.font-region-tab.is-selected span { background: var(--ds-focus); color: var(--ds-on-focus); }
.font-region-results { border-top: 1px solid var(--ds-line); padding-top: 18px; }
.font-selected-region-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.font-selected-region-head > div { min-width: 0; }
.font-selected-region-head strong { display: block; overflow: hidden; font-size: 15px; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; }
.font-selected-region-head p { margin: 3px 0 0; color: var(--ds-ink-2); font-size: 12px; line-height: 17px; }
.font-style-chip { flex: none; border: 1px solid var(--ds-line); border-radius: 999px; padding: 4px 8px; color: var(--ds-ink-2); font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.font-candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.font-candidate-card { min-width: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-r-card); padding: 16px; background: var(--ds-surface); transition: border-color .15s ease, background .15s ease; }
.font-candidate-card:hover { border-color: var(--ds-line-strong); background: color-mix(in srgb, var(--ds-focus) 3%, var(--ds-surface)); }
.font-candidate-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.font-candidate-rank { color: var(--ds-focus); font-size: 11px; font-weight: 750; line-height: 16px; }
.font-candidate-match { color: var(--ds-ink-2); font-size: 11px; font-weight: 700; line-height: 16px; }
.font-candidate-card h4 { margin: 3px 0 0; overflow: hidden; font-size: 16px; font-weight: 700; line-height: 22px; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.font-candidate-sample { margin-top: 12px; border-top: 1px solid var(--ds-line); padding-top: 12px; }
.font-candidate-sample span { display: block; color: var(--ds-ink-3); font-size: 10px; font-weight: 650; line-height: 14px; }
.font-candidate-sample.is-live span { color: var(--ds-focus); }
.font-candidate-sample strong { display: block; margin-top: 2px; overflow: hidden; font-size: 32px; font-weight: 400; line-height: 42px; letter-spacing: normal; text-overflow: ellipsis; white-space: nowrap; }
.font-candidate-reason { margin: 8px 0 0; color: var(--ds-ink-2); font-size: 11px; line-height: 16px; }
.font-no-candidates { grid-column: 1 / -1; margin: 0; border-radius: 12px; padding: 20px; background: var(--ds-surface-soft); color: var(--ds-ink-2); font-size: 13px; text-align: center; }
.font-disclaimer { display: flex; margin: 12px 4px 0; align-items: flex-start; gap: 6px; color: var(--ds-ink-3); font-size: 11px; line-height: 16px; }
.font-disclaimer svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

@media (max-width: 767px) {
  .font-page { padding: 24px 14px 40px; }
  .font-title-row h1 { font-size: 24px; line-height: 30px; }
  .font-workbench,
  .font-result-panel { border-radius: var(--ds-r-card); padding: 16px; }
  .font-drop { min-height: 220px; padding: 24px 16px; }
  .font-image-stage { max-height: 352px; padding: 10px; }
  #fontPreview,
  .font-preview-wrap { max-height: 330px; }
  .font-actions { align-items: stretch; }
  .font-actions .ui-btn { flex: 1; justify-content: center; }
  .font-candidate-grid { grid-template-columns: 1fr; }
  .font-region-tab strong { max-width: 108px; }
  .font-style-chip { display: none; }
}

/* ── 이미지 리사이징 ────────────────────────────────────────────────────────
   Apple macOS 27 UI Kit 규칙만 쓴다.
     · 타이포는 키트 램프 그대로 — LargeTitle 26/32, Title3 15/20, Headline·Body 13/16,
       Callout 12/15, Subheadline 11/14, Caption1 10/13. 히어로 제목도 26px 를 넘지 않는다.
     · 그룹 박스와 이미지 웰에는 테두리가 없다 — 채움(--mac-fill-*)과 헤어라인으로만 구분한다.
       테두리 있는 상자를 겹쳐 쌓는 것이 이전 화면의 가독성을 깎던 원인이었다.
     · 상태는 선택 링(--ds-focus)과 라벨 단계(--mac-label-*)로만 표시한다.
   화면 구성(부채꼴 미리보기 → 배지 → 한 줄 헤드라인 → 단일 CTA → 프로젝트 목록)은
   Higgsfield Layers 랜딩을 참고했다. */
/* 제목은 오른쪽에 뭐가 있든 늘 가운데 — 1fr 로 양쪽을 잡아 두면 오른쪽 칸이 비어도 안 밀린다 */
.rz-head { display: grid; height: 3.5rem; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; box-shadow: inset 0 -1px var(--ds-line); background: var(--ds-surface); padding: 0 20px; }
.rz-head h1 { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; }
.rz-back { justify-self: start; }
.rz-back { display: inline-flex; align-items: center; gap: 6px; color: var(--mac-label-2); font-size: 13px; font-weight: 600; line-height: 16px; }
.rz-back:hover { color: var(--ds-ink); }

/* ── 랜딩 ────────────────────────────────────────────────────────────────── */
.rz-landing { margin: 0 auto; width: 100%; max-width: 1000px; padding: 40px 24px 72px; text-align: center; }
.rz-landing h2 { margin: 14px 0 0; font-size: 26px; font-weight: 700; line-height: 32px; letter-spacing: -.02em; }
/* 영문 대문자에는 한글용 음수 자간을 쓰지 않는다 — 글자가 서로 붙어 읽기 어려워진다 */
.rz-title-en { letter-spacing: .02em; }
.rz-landing > p { margin: 12px auto 0; max-width: 560px; color: var(--mac-label-2); font-size: 13px; line-height: 20px; }
.rz-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--mac-fill-group); padding: 4px 10px; color: var(--mac-label-2); font-size: 10px; font-weight: 600; line-height: 13px; letter-spacing: .04em; }
.rz-badge svg { flex: none; }

/* 소개 영상. 폭은 본문 단(560px)보다 조금만 넓게 잡아 제목·문단과 한 덩어리로 읽히게 한다.
   aspect-ratio 를 박아 두면 영상이 로드되기 전에도 자리가 잡혀 아래 내용이 안 밀린다(레이아웃 시프트 방지). */
/* 인트로 캐러셀 — 가운데가 크고 양옆으로 갈수록 작아지며 뒤로 밀린다.
   카드는 가운데 기준으로 놓고 translateX 로 벌린다(퍼센트라 폭이 바뀌어도 간격 비율이 유지된다).
   가로로 넘치는 카드는 컨테이너가 잘라 낸다 — 옆 카드가 화면 밖으로 새면 가로 스크롤이 생긴다. */
.rz-intro { position: relative; overflow: hidden; margin: 0 auto clamp(14px, 1.2vw, 22px); width: 100%; max-width: 1120px; height: clamp(190px, 22vw, 320px); }
.rz-icard { position: absolute; left: 50%; top: 50%; margin: 0; width: min(46%, 540px); overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 9; background: var(--mac-fill-group); box-shadow: var(--ds-shadow-float); transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .55s ease, visibility .55s; }
.rz-icard video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .rz-icard { transition: none; } }

.rz-cta { display: flex; margin-top: 22px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
/* rz-primary·rz-quiet 는 마크업에만 있고 정의가 없었다 — 배경도 테두리도 없는 맨 글자로 나와
   '어디를 눌러야 하는지'가 안 보였다(아이콘과 글자도 붙어 있었다).
   색은 앱의 주요 버튼과 같은 --brand-red 를 쓴다. --ds-focus(#d94f00)는 링크·포커스용이라
   여기에 쓰면 이 화면만 다른 주황이 되어 튄다 — 위의 .font-primary-btn 과 같은 규칙으로 맞춘다.
   보조는 흰 판 + 헤어라인. 둘의 무게가 달라야 눈이 먼저 갈 곳을 안다. 높이는 키트 상한(36px)을 지킨다.
   실행 바의 rzRunBtn·rzCancelBtn 도 같은 정의를 쓴다. */
.rz-primary, .rz-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 16px; border-radius: var(--ds-r-control);
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
}
.rz-primary { border: 0; background: var(--brand-red); color: #fff; }
.rz-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-red) 88%, #000); }
.rz-quiet { border: 1px solid var(--ds-line-strong); background: var(--ds-surface); color: var(--ds-ink); }
.rz-quiet:hover:not(:disabled) { border-color: var(--ds-ink-3); background: var(--mac-fill-group); }
/* 36px = 키트 컨트롤 램프의 최대치(5 XL). 히어로 버튼이라고 그 위로 키우지 않는다. */
.rz-cta-main { min-height: 36px; padding: 0 20px; }

/* 최근 만든 규격 — 결과물의 정본은 '제작한 광고'다. 여기서는 되짚어 보기만 하고 목록은 갤러리로 넘긴다. */
.rz-recent { margin-top: 56px; text-align: left; }
.rz-recent-head { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; border: 0; background: none; padding: 0 0 12px; color: var(--ds-ink); font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; }
.rz-recent-head svg { color: var(--mac-label-3); }
.rz-recent-head:hover svg { color: var(--ds-ink); }
.rz-recent-body { display: flex; min-height: 128px; flex-wrap: wrap; align-items: center; gap: 10px; border-radius: 12px; background: var(--mac-fill-group); padding: 14px; }
.rz-recent-body.is-empty { justify-content: center; border: 1px dashed var(--ds-line-strong); background: none; }
.rz-rec-empty { display: grid; margin: 0; gap: 4px; padding: 16px; text-align: center; }
.rz-rec-empty b { font-size: 13px; font-weight: 600; line-height: 16px; }
.rz-rec-empty span { color: var(--mac-label-2); font-size: 12px; line-height: 17px; }
.rz-rec { position: relative; height: 92px; flex: none; cursor: pointer; overflow: hidden; border: 0; border-radius: 8px; padding: 0; background: var(--mac-fill-well); }
.rz-rec img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rz-rec span { position: absolute; right: 0; bottom: 0; left: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); padding: 10px 6px 4px; color: #fff; font-size: 10px; font-weight: 600; line-height: 13px; }

/* ── 진행 중 표시 ────────────────────────────────────────────────────────────
   다른 화면으로 가도 '어디서 뭐가 돌고 있는지'가 보여야 나가기 경고가 뜬금없지 않다.
   사이드바 항목 오른쪽에 맥박 점 하나 — 라벨을 밀지 않게 absolute 로 띄운다. */
#sidebar .nav-busy > div { padding-right: 16px; }
#sidebar .nav-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 10;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-red);
  margin-top: -3px;
  animation: nav-busy-pulse 1.4s ease-in-out infinite;
}
@keyframes nav-busy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #sidebar .nav-busy::after { animation: none; } }

/* ── 제작 직전 화면 ──────────────────────────────────────────────────────────
   macOS 인스펙터 배치: 왼쪽은 대상(원본 → 결과), 오른쪽은 설정과 실행 한 열.
   컨트롤 높이는 키트 램프(16 / 20 / 24 / 28 / 36)를 넘지 않는다 — 36 이 최대다.
   그룹 박스에는 테두리를 두르지 않고 채움과 헤어라인으로만 나눈다. */
.rz-work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: calc(100dvh - 3.5rem); }
.rz-stage { display: flex; min-width: 0; flex-direction: column; gap: 22px; padding: 22px 24px 60px 28px; }
/* 넓은 화면에서 열 전체로 늘리지 않는다 — 2000px 스테이지에 원본 한 장과 작은 결과 타일만 놓이면
   h2 의 space-between 이 '결과 / 개수 / 전체 저장' 을 화면 끝까지 흩어 놓고 나머지는 통째로 여백이 된다.
   스크롤바는 열 가장자리에 남겨야 하므로 폭은 스테이지가 아니라 자식에 건다. */
.rz-stage > * { width: 100%; max-width: 880px; margin-inline: auto; }
.rz-inspector { display: flex; min-width: 0; flex-direction: column; box-shadow: inset 1px 0 var(--ds-line); background: var(--ds-surface); }
.rz-insp-scroll { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 20px; overflow-y: auto; padding: 20px 20px 24px; }
@media (min-width: 1024px) {
  .rz-work { height: calc(100dvh - 3.5rem); min-height: 0; }
  .rz-stage { overflow-y: auto; }
}

/* 그룹 박스 — 라벨은 박스 위에 Body/Emphasized(13/16) 로 둔다 (키트의 Group Box 규칙) */
.rz-group { display: flex; min-width: 0; flex-direction: column; }
.rz-group > h2 { display: flex; margin: 0 0 8px 2px; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--mac-label-2); font-size: 13px; font-weight: 600; line-height: 16px; }
.rz-linkbtn { cursor: pointer; border: 0; background: none; padding: 0; color: var(--ds-focus); font-size: 12px; font-weight: 600; line-height: 15px; }
.rz-linkbtn:hover { text-decoration: underline; }
/* space-between 인 h2 에서 개수는 제목에 붙어 있어야 읽힌다 — 남는 폭은 여기서 다 먹어
   '전체 저장' 만 오른쪽 끝으로 가고 개수가 열 한가운데 떠다니지 않는다. */
.rz-badge-count { margin-right: auto; border-radius: 999px; background: var(--mac-fill-group); padding: 1px 7px; color: var(--mac-label-2); font-size: 10px; font-weight: 600; line-height: 14px; }

/* 원본 — 결과가 생기면 자리를 내주고 줄어든다 */
/* 원본 — 그림 폭에 맞춰 감싼다. 예전엔 웰이 열 전체(1257px)를 먹어 그 안에 371px 그림이 놓였고,
   헤더의 '다른 이미지'와 파일명이 그림에서 900px 가까이 떨어져 있었다.
   이름·치수는 그림 바로 아래로 붙여 어느 그림의 정보인지가 눈으로 이어지게 한다.
   여러 장을 넣으면 같은 타일이 옆으로 늘어난다 — 한 장일 때만 크게 본다. */
.rz-src > h2 { justify-content: flex-start; gap: 12px; }
/* 원본이 여러 장일 때만 나오는 이동 — 지금 몇 번째인지와 다음으로 가는 길을 한 덩어리로 둔다 */
.rz-nav { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--mac-fill-group); padding: 1px 3px; }
.rz-nav > b { min-width: 34px; color: var(--mac-label-2); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.rz-navbtn { display: grid; width: 18px; height: 18px; cursor: pointer; place-items: center; border: 0; border-radius: 999px; padding: 0; background: none; color: var(--mac-label-2); }
.rz-navbtn:hover:not(:disabled) { background: var(--mac-fill-well); color: inherit; }
.rz-navbtn:disabled { cursor: default; opacity: .3; }
.rz-srcs { display: flex; flex-wrap: wrap; gap: 12px; }
.rz-srcitem { position: relative; display: flex; margin: 0; min-width: 0; flex-direction: column; gap: 8px; }
/* 타일을 누르면 그 이미지의 비율을 편집한다 — 지금 편집 중인 것은 테두리로 표시한다 */
.rz-srcbtn { position: relative; display: block; cursor: pointer; border: 0; border-radius: 10px; padding: 0; background: none; box-shadow: 0 0 0 1px transparent; transition: box-shadow .15s ease; }
.rz-srcbtn:hover { box-shadow: 0 0 0 2px var(--mac-hairline); }
.rz-srcitem.is-active .rz-srcbtn { box-shadow: 0 0 0 2px var(--ds-focus); }
.rz-srcitem > .rz-srcbtn > img { display: block; border-radius: 10px; padding: 10px; width: auto; max-width: 100%; max-height: 132px; background: var(--mac-fill-well); object-fit: contain; transition: max-height .2s ease; }
.rz-srcs.is-single .rz-srcitem > .rz-srcbtn > img { padding: 14px; max-height: min(52vh, 460px); }
/* 결과가 쌓이면 원본은 자리를 내준다 */
.rz-src.is-compact .rz-srcs.is-single .rz-srcitem > .rz-srcbtn > img { padding: 10px; max-height: min(30vh, 280px); }
.rz-srcitem figcaption { display: flex; max-width: 240px; flex-direction: column; gap: 1px; padding-left: 2px; }
.rz-srcitem figcaption b { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.rz-srcitem figcaption span { color: var(--mac-label-2); font-size: 11px; line-height: 14px; }
/* 이 이미지가 어떤 비율로 나가는지 — 타일에서 바로 읽힌다 */
.rz-srcitem figcaption em { overflow: hidden; color: var(--ds-focus); font-size: 11px; font-style: normal; font-weight: 600; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.rz-srcitem figcaption em.is-none { color: var(--mac-label-3); font-weight: 500; }
.rz-srcitem .rz-icon { position: absolute; right: 6px; top: 6px; }
/* 고른 비율 개수 — 타일 위에 얹어 캡션까지 내려가지 않아도 읽히게 한다.
   빼기(×)와 자리를 나눠 쓰므로 여러 장일 때는 그만큼 왼쪽으로 물린다. */
.rz-srccount { position: absolute; right: 6px; top: 6px; display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; padding: 0 6px; background: var(--mac-fill-group); color: var(--mac-label-2); font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 1px var(--mac-hairline); }
.rz-srccount.is-on { background: var(--ds-focus); color: var(--ds-on-focus); box-shadow: none; }
.rz-srcs:not(.is-single) .rz-srccount { right: 34px; }
/* 지금 오른쪽 비율 패널이 어느 이미지를 편집 중인지 — 테두리만으로는 눈에 안 들어온다 */
.rz-srcnow { position: absolute; left: 6px; top: 6px; border-radius: 999px; padding: 2px 8px; background: var(--ds-focus); color: var(--ds-on-focus); font-size: 10px; font-weight: 700; line-height: 14px; }
.rz-h2-acts { display: flex; align-items: baseline; gap: 12px; }
/* 여러 장 고를 때 무엇을 골랐는지 */
.rz-pick.is-selected { box-shadow: 0 0 0 2px var(--ds-focus); }
/* 파일명이 길어도 패널 밖으로 새지 않게 — 공백 없는 이름이라 단어 단위 줄바꿈으로는 안 접힌다 */
.rz-note { margin: -4px 0 0; color: var(--mac-label-2); font-size: 11px; line-height: 15px; overflow-wrap: anywhere; }
.rz-note b { color: var(--mac-label-1); font-weight: 600; }
.rz-hint { display: flex; margin: 10px 2px 0; align-items: flex-start; gap: 6px; color: var(--mac-label-2); font-size: 11px; line-height: 16px; }
.rz-hint svg { flex: none; margin-top: 1px; }
.rz-hint b { font-weight: 600; }

/* 비율 타일 — 프레임 안 밝은 사각형이 원본이 놓이는 자리, 나머지 빗금이 AI 가 새로 그릴 영역 */
.rz-ratios { display: grid; gap: 6px; border-radius: 10px; background: var(--mac-fill-group); padding: 6px; }
.rz-ratio { display: grid; cursor: pointer; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; border: 0; border-radius: 8px; padding: 8px 10px; background: var(--ds-surface); text-align: left; box-shadow: 0 0 0 1px transparent; transition: box-shadow .16s ease, background .16s ease; }
.rz-ratio:hover { background: var(--ds-surface-soft); }
.rz-ratio.is-selected { background: var(--ds-surface); box-shadow: 0 0 0 2px var(--ds-focus); }
/* 진행 중에는 눌러도 안 먹는다 — 눌리지 않는다는 걸 보이게 해야 고장으로 안 읽힌다 */
.rz-ratios.is-locked { opacity: .55; }
.rz-ratios.is-locked .rz-ratio { cursor: not-allowed; }
.rz-ratios.is-locked .rz-ratio:hover { background: var(--ds-surface); }
.rz-ratio-frame { position: relative; display: grid; width: 100%; max-height: 64px; place-items: center; justify-self: center; overflow: hidden; border-radius: 5px; background: repeating-linear-gradient(135deg, var(--mac-fill-group) 0 5px, transparent 5px 10px), var(--mac-fill-well); }
.rz-ratio-src { position: relative; display: block; overflow: hidden; border-radius: 2px; background: var(--ds-surface); }
.rz-ratio-src img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rz-ratio-meta { min-width: 0; }
.rz-ratio-meta strong { display: block; font-size: 13px; font-weight: 600; line-height: 16px; }
.rz-ratio-meta > span { display: block; overflow: hidden; color: var(--mac-label-2); font-size: 11px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.rz-ratio-meta em { display: block; margin-top: 2px; color: var(--mac-label-3); font-size: 10px; font-style: normal; font-weight: 600; line-height: 13px; }
.rz-ratio.is-selected .rz-ratio-meta em { color: var(--ds-focus); }
/* 안전영역 가이드 — 채널 UI가 덮는 자리. 미리보기에만 그리고 결과물에는 들어가지 않는다. */
.rz-safe { position: absolute; left: 0; width: 100%; background: rgba(0, 0, 0, .30); pointer-events: none; }

/* 세그먼티드 컨트롤 — 키트 3 Rg(24px) */
.rz-seg { display: inline-flex; border-radius: 7px; background: var(--mac-fill-group); padding: 2px; gap: 2px; }
.rz-seg button { min-height: 24px; cursor: pointer; border: 0; border-radius: 5px; padding: 0 11px; background: none; color: var(--mac-label-2); font-size: 12px; font-weight: 600; line-height: 15px; transition: background .14s ease, color .14s ease; }
.rz-seg button:hover:not(:disabled) { color: var(--ds-ink); }
.rz-seg .is-selected { background: var(--ds-surface); color: var(--ds-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .10); }
.rz-inspector input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ds-focus); }

/* 실행 바 — 인스펙터 맨 아래 고정. 누르면 돈이 나가므로 장수·비용이 버튼 바로 위에 붙어 있다. */
.rz-runbar { display: flex; flex: none; flex-direction: column; gap: 10px; box-shadow: inset 0 1px var(--ds-line); background: var(--ds-surface); padding: 14px 20px 18px; }
.rz-cost b { display: block; font-size: 13px; font-weight: 600; line-height: 16px; }
.rz-cost span { display: block; margin-top: 2px; color: var(--mac-label-2); font-size: 11px; line-height: 15px; }
.rz-run-actions { display: flex; align-items: center; gap: 8px; }
.rz-run-actions .rz-primary { flex: 1 1 auto; }

/* 결과 — 만들어진 순서대로 쌓인다 */
.rz-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.rz-res { position: relative; margin: 0; overflow: hidden; border-radius: 10px; background: var(--mac-fill-well); }
.rz-res img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 결과물 자체가 광고라 아래쪽에 이미 글자가 있다 — 폭 전체를 덮는 그라디언트는 그 위에 겹쳐 둘 다 안 읽힌다.
   필요한 만큼만 차지하는 알약으로 둔다. */
.rz-res figcaption { position: absolute; bottom: 6px; left: 6px; display: inline-flex; align-items: baseline; gap: 5px; border-radius: 999px; background: rgba(0, 0, 0, .72); padding: 2px 8px; color: #fff; font-size: 10px; font-weight: 600; line-height: 14px; backdrop-filter: blur(6px); }
.rz-res figcaption span { color: rgba(255, 255, 255, .65); }
.rz-res .rz-icon { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .55); color: #fff; }
.rz-res .rz-icon:hover { background: rgba(0, 0, 0, .75); color: #fff; }
.rz-res.is-pending { display: grid; aspect-ratio: 1; place-items: center; gap: 6px; align-content: center; color: var(--mac-label-3); font-size: 11px; }


/* 빈 상태 · 원본 선택 모달 */
.rz-empty { margin: 0; padding: 64px 16px; color: var(--mac-label-3); font-size: 13px; line-height: 16px; text-align: center; }
.rz-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.rz-pick { aspect-ratio: 1; cursor: pointer; overflow: hidden; border: 0; border-radius: 10px; padding: 0; background: var(--mac-fill-well); box-shadow: 0 0 0 1px transparent; transition: box-shadow .15s ease; }
.rz-pick:hover { box-shadow: 0 0 0 2px var(--ds-focus); }
.rz-pick img { width: 100%; height: 100%; object-fit: contain; }
.rz-pick-foot { display: flex; margin-top: 16px; align-items: center; gap: 12px; box-shadow: inset 0 1px var(--mac-hairline); padding-top: 14px; }
.rz-pick-foot span { color: var(--mac-label-3); font-size: 10px; line-height: 15px; }

@media (max-width: 1279px) { .rz-work { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 1023px) {
  /* 한 열로 눕는다 — 설정이 위, 대상이 아래. 실행 바는 스크롤 끝이 아니라 화면 아래에 붙여 둔다. */
  .rz-work { display: flex; height: auto; flex-direction: column-reverse; }
  .rz-stage { padding: 16px 16px 60px; overflow: visible; }
  .rz-inspector { box-shadow: inset 0 -1px var(--ds-line); }
  .rz-insp-scroll { overflow: visible; padding: 16px; }
  .rz-runbar { position: sticky; bottom: 0; z-index: 5; }
}
@media (max-width: 767px) {
  .rz-head { padding: 0 14px; }
  .rz-landing { padding: 24px 16px 56px; }
  .rz-cta-main { width: 100%; }
  .rz-results { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* ── 컨셉 레퍼런스(2단계) 좁은 화면 대응 ─────────────────────────────────────
   임의값 Tailwind 클래스(sm:[grid-template-columns:...] 등)는 ZET 컴파일 시트에 없어
   조용히 무시된다. 반응형 규칙은 여기 CSS 로 둔다. */

/* '선택한 레퍼런스' 패널 — 데스크톱은 오른쪽 세로 카드(156px), 좁은 화면은 탭 위 가로 요약.
   예전엔 hidden md:block 이라 모바일에서 선택 개수·썸네일·안내가 통째로 사라졌다. */
.sel-panel > div { width: 156px; }
@media (max-width: 767px) {
  .sel-panel > div { width: 100%; }
  .sel-panel #selEmpty { padding-top: 1rem; padding-bottom: 1rem; }
  .sel-panel #selThumbs { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .sel-panel #selThumbs > li > div { width: 84px; }
}
/* 레퍼런스 그리드 — minmax(180px) 는 390px 화면에서 1열이 돼 타일 하나가 화면을 통째로 먹는다.
   #refGrid 는 인라인 style 로 열을 잡아서 !important 가 필요하다. */
@media (max-width: 480px) {
  #tplList, #refGrid, #w2qGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* 탭이 여럿이던 시절 390px 에서 마지막 탭이 화면 밖으로 잘렸다 (스크롤된다는 표시도 없다) */
  [data-w2tab] { padding-left: .55rem; padding-right: .55rem; font-size: 13px; }
}

/* ── 로그인 문 ────────────────────────────────────────────────────────────
   앱 위를 통째로 덮는다. 기본이 '보임'이고 통과했을 때만 auth.js 가 걷어낸다 —
   반대로 두면(기본 숨김) 스크립트가 늦게 뜨는 순간 앱이 그대로 노출된다. */
.lg-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 24px;
  background: var(--background);
}
.lg-card {
  width: 100%; max-width: 380px; padding: 40px 32px; text-align: center;
  border: 1px solid var(--border); border-radius: 24px; background: var(--background);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
}
.lg-logo { height: 34px; margin: 0 auto 28px; display: block; }
.lg-title { margin: 0 0 24px; font-size: 18px; font-weight: 700; line-height: 1.55; color: var(--foreground); }
.lg-err {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.5; text-align: left;
  background: color-mix(in oklab, #ef4444 12%, transparent); color: #dc2626;
}
/* 구글 버튼은 다크에서도 흰색이다 — 구글 브랜드 규정이고, 색을 뒤집으면 로고가 배경에 묻힌다. */
.lg-google {
  display: flex; width: 100%; height: 44px; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid #dadce0; border-radius: 12px; background: #fff; color: #1f2937;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.lg-google:hover { background: #f8fafc; }
.lg-hint { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted-foreground); }
/* 확인하는 동안 도는 점. 로고만 있으면 '멈춘 화면'과 구별되지 않는다. */
.lg-wait {
  width: 22px; height: 22px; margin: 4px auto 0; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--muted-foreground);
  animation: lg-spin .7s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }
/* 움직임을 줄이라고 설정한 사용자에게는 돌리지 않는다 — 점만 남겨 '진행 중'은 그대로 보인다 */
@media (prefers-reduced-motion: reduce) { .lg-wait { animation: none; } }

/* ── 사용량: 범위 배지와 잠금 해제 ────────────────────────────────────────
   지금 '내 것'을 보는지 '전체'를 보는지는 늘 제목 옆에서 보여야 한다 —
   숫자만 바뀌는 화면이라, 표시가 없으면 남의 비용을 내 것으로 읽는다. */
.u-scope {
  display: inline-block; margin-left: .6rem; vertical-align: middle;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
  background: var(--sf-glass2); color: var(--sf-ink2); border: 1px solid var(--sf-line);
}
.u-scope.is-all { background: color-mix(in oklab, var(--brand-cyan) 18%, transparent); color: var(--brand-cyan); border-color: transparent; }
.u-unlock {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1rem; padding: .85rem 1rem; border-radius: 14px;
  background: var(--sf-glass); border: 1px solid var(--sf-line);
}
.u-unlock label { font-size: .8125rem; font-weight: 700; color: var(--sf-ink2); }
.u-unlock .ui-input { width: 200px; flex: none; background: var(--sf-bg); color: var(--sf-ink); }
/* 입력칸(2.25rem)과 나란히 서므로 버튼도 같은 키로 맞춘다 — 헤더 도구(2rem)보다 한 단계 크다 */
.u-unlock .u-select { height: 2.25rem; }
/* 확인이 이 폼의 본 동작이다. 취소와 같은 무게로 두면 어느 쪽을 눌러야 할지 매번 읽어야 한다 */
.u-unlock button[type="submit"] { border-color: transparent; background: var(--u-accent); color: #fff; }
.u-unlock button[type="submit"]:hover { color: #fff; filter: brightness(1.06); }
.u-pwerr { flex-basis: 100%; margin: 0; font-size: .8125rem; color: #dc2626; }