/*
 * Granter slide kit — 서비스 화면 재현 범위(service-ui) v2
 *
 * 장표 안에서 그랜터 서비스 화면(기능 시연·기능 영역)을 재현할 때만 써요(D-004 · D-006 · L-009 · L-011).
 * 장표 자체의 색·글자·여백은 랜딩 디자인 시스템 기준인 tokens.css · slides.css 가 맡아요.
 * 이 파일의 규칙은 모두 .svc-ui 로 시작해요. .svc-ui 밖으로 새지 않아요.
 *
 * 절차: harness/09-service-screens.md — 실제 서비스에서 흐름·UI 를 확인하고, 구조·순서·문구는 그대로, 데이터는 가상으로 옮겨요.
 * 정본: 실제 서비스 화면 > 서비스 디자인 시스템 https://app-develop.granter.biz/design-system/button
 * 옮겨 온 곳(읽기만): ../granter_mkt_contents/kit/css/granter-ui.css · tokens.css(화면 재현 CSS v2),
 *   harness/04-ui-fidelity.md · reference/service-live-audit-20261013.md(측정값, 최우선) · service-components-20261013.md
 *   클래스 이름은 광고 키트의 .gx-* 를 .svc-* 로 바꿨어요(같은 이름 = 같은 부품).
 * 색: lab()/oklch()/color-mix() 관측값을 sRGB hex·rgba 로 옮겼어요(PPTX 색이 맞아야 해서요, harness/05).
 * 크기: 두 가지 중 하나를 창마다 하나만 써요. ① 창 하나에 zoom(.svc-ui.svc-zoom: --svc-scale 1 + zoom, L-016 기본)
 *   ② 크기마다 calc(<앱 px> * var(--svc-scale)) (기본 1.5, 벤토 칸 속 작은 화면처럼 창이 아닌 조각). transform 은 쓰지 않아요.
 *   앱 14px → 21px, 앱 12px → 18px(장표 최소). 앱에서 10~11px 인 글자(배지 xs·알림 숫자·API 배지)는 12px 로 올려 그렸어요.
 * 아이콘: Phosphor(실제 앱과 같은 세트). <i class="ph ph-house"></i> · 채움 <i class="ph-fill ph-check-circle"></i>,
 *   덱에 <script src="../../kit/service-ui/icons.js"></script> 를 deck.js 보다 먼저 넣어요(MIT, PHOSPHOR-LICENSE.txt).
 *
 * 쓰는 법(예시는 decks/_kit-smoke 서비스 화면 장)
 *   <div class="svc-ui" data-pptx="raster" data-copy-ignore> … </div>
 *   화면 아래 장표 각주: <p class="source">예시 화면 · 가상 데이터</p>
 */
.svc-ui {
  /* ── 서비스 DS 토큰(라이트) ───────────────────────────── */
  --svc-background: #ffffff;
  --svc-foreground: #0a0a0a;
  --svc-card: #ffffff;
  --svc-primary: #171717;
  --svc-primary-foreground: #fafafa;
  --svc-secondary: #f5f5f5;
  --svc-secondary-foreground: #171717;
  --svc-secondary-hover: #e5e5e5;
  --svc-tonal: #ebebeb;
  --svc-muted: #f5f5f5;
  --svc-muted-foreground: #737373;
  --svc-placeholder: #9d9d9d;      /* muted-foreground 70% */
  --svc-border: #e5e5e5;
  --svc-border-soft: #ededed;      /* border 70% — 표 행 선 · 파일 카드 */
  --svc-border-faint: #f2f2f2;     /* border 50% — 에이전트 패널 경계 */
  --svc-input: #e5e5e5;
  --svc-ring: #a1a1a1;
  --svc-destructive: #e7000b;
  --svc-brand: #00a5ef;            /* sky-500, 테마 불변 */
  --svc-brand-strong: #0069a4;     /* 흰 바탕 위 브랜드 글자 */
  --svc-brand-soft: #e6f6fd;       /* brand 10% */
  --svc-ai: #8e51ff;               /* violet-500 — AI 반짝 아이콘 · ai 버튼 · 에이전트 표식에만 */
  --svc-ai-strong: #7f22fe;        /* violet-600 */
  --svc-ai-border: #ddd6ff;        /* violet-200 */
  --svc-frame: #ecedee;            /* 창 바탕(회사 레일 · 본문 패널 바깥) */
  --svc-app-background: #f9f9fa;   /* 본문 패널 */
  --svc-sidebar: #f3f3f4;          /* 사이드바(= filter-bar) */
  --svc-sidebar-selected: #e7e7e8; /* 선택 메뉴 */
  --svc-nav-foreground: rgba(10, 10, 10, 0.7);
  --svc-ribbon: #fffbeb;           /* 공지 리본(amber-50) */
  --svc-table-head: #6b7280;       /* AG Grid 머리 글자 */
  --svc-table-ink: #181d1f;        /* AG Grid 본문 글자 */
  --svc-amount-positive: #0284c7;  /* 금액 + (청) */
  --svc-amount-negative: #e11d48;  /* 금액 − (적) */
  --svc-toast-success: #f0fdf4;
  --svc-toast-success-foreground: #016630;
  --svc-toast-success-border: #b9f8cf;
  --svc-toast-error: #fef2f2;
  --svc-toast-error-foreground: #9f0712;
  --svc-toast-error-border: #ffc9c9;
  --svc-wave-bottom: #9cc8fa;      /* 에이전트 빛(Wave Shader 'agent') */
  --svc-wave-top: #dcebfc;
  /* 계정과목 아이콘 타일(서비스 큐레이션 배경 일부) */
  --svc-cat-green: #bbf7d0; --svc-cat-amber: #fde68a; --svc-cat-sky: #bae6fd; --svc-cat-violet: #ddd6fe;
  --svc-cat-rose: #fecdd3; --svc-cat-slate: #e2e8f0; --svc-cat-orange: #fed7aa; --svc-cat-teal: #99f6e4;
  /* 모서리: md 12 · lg 14 · xl 18 · 2xl 22, squircle 전역 */
  --svc-radius-md: calc(12px * var(--svc-scale));
  --svc-radius: calc(14px * var(--svc-scale));
  --svc-radius-xl: calc(18px * var(--svc-scale));
  --svc-radius-2xl: calc(22px * var(--svc-scale));
  /* 떠 있는 표면 그림자(링 1px 포함) — 테두리와 함께 쓰지 않아요 */
  --svc-hairline: 0 0 0 calc(0.5px * var(--svc-scale)) rgba(0, 0, 0, 0.06);
  --svc-shadow-panel: 0 calc(18px * var(--svc-scale)) calc(47px * var(--svc-scale)) rgba(0, 0, 0, .03), 0 calc(7.5px * var(--svc-scale)) calc(19px * var(--svc-scale)) rgba(0, 0, 0, .02), 0 calc(4px * var(--svc-scale)) calc(10.5px * var(--svc-scale)) rgba(0, 0, 0, .02);
  --svc-shadow-ring-md: 0 calc(17.54px * var(--svc-scale)) calc(23.39px * var(--svc-scale)) rgba(0, 0, 0, .04), 0 calc(9.4px * var(--svc-scale)) calc(12.5px * var(--svc-scale)) rgba(0, 0, 0, .03), 0 calc(5.25px * var(--svc-scale)) calc(7px * var(--svc-scale)) rgba(0, 0, 0, .02), 0 calc(2.79px * var(--svc-scale)) calc(3.72px * var(--svc-scale)) calc(-2px * var(--svc-scale)) rgba(0, 0, 0, .02), 0 calc(1.16px * var(--svc-scale)) calc(1.5px * var(--svc-scale)) rgba(0, 0, 0, .02), 0 0 0 calc(1px * var(--svc-scale)) rgba(0, 0, 0, .05);
  --svc-shadow-ring-lg: 0 calc(25px * var(--svc-scale)) calc(50px * var(--svc-scale)) rgba(0, 0, 0, .05), 0 calc(12px * var(--svc-scale)) calc(24px * var(--svc-scale)) rgba(0, 0, 0, .04), 0 calc(6px * var(--svc-scale)) calc(12px * var(--svc-scale)) rgba(0, 0, 0, .03), 0 calc(3px * var(--svc-scale)) calc(6px * var(--svc-scale)) rgba(0, 0, 0, .02), 0 calc(1.5px * var(--svc-scale)) calc(3px * var(--svc-scale)) rgba(0, 0, 0, .02), 0 0 0 calc(1px * var(--svc-scale)) rgba(0, 0, 0, .05);
  --svc-scale: 1.5;

  font-family: var(--font-sans);
  font-size: calc(14px * var(--svc-scale)); line-height: 1.5; font-weight: 400;
  letter-spacing: 0;
  color: var(--svc-foreground);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.svc-ui *, .svc-ui *::before, .svc-ui *::after { box-sizing: border-box; corner-shape: squircle; }
.svc-ui :is(.svc-badge, .svc-cat i, .svc-avatar, .svc-approve-pill, .svc-usage, .svc-round) { corner-shape: round; }
.svc-ui p, .svc-ui h1, .svc-ui h2, .svc-ui h3, .svc-ui h4, .svc-ui ul, .svc-ui ol { margin: 0; }
.svc-ui .ph, .svc-ui .ph-fill { font-size: calc(16px * var(--svc-scale)); line-height: 1; }
.svc-ui .svc-muted { color: var(--svc-muted-foreground); }
.svc-ui .svc-ph-text { color: var(--svc-placeholder); }
.svc-ui .svc-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-ui .svc-num { font-variant-numeric: tabular-nums; }

/* ── 창 · 앱 셸 ───────────────────────────────────────────── */
.svc-ui.svc-frame, .svc-ui .svc-frame { background: var(--svc-frame); padding: calc(8px * var(--svc-scale)) calc(8px * var(--svc-scale)) calc(8px * var(--svc-scale)) 0; display: flex; border-radius: calc(18px * var(--svc-scale)); }
.svc-ui .svc-rail { width: calc(56px * var(--svc-scale)); flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--svc-scale)); padding-top: calc(64px * var(--svc-scale)); }
.svc-ui .svc-rail .svc-ws-logo { width: calc(34px * var(--svc-scale)); height: calc(34px * var(--svc-scale)); border-radius: calc(4px * var(--svc-scale)); background: var(--svc-card); display: grid; place-items: center; font-weight: 700; font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-rail .svc-ws-logo.is-on { box-shadow: 0 0 0 calc(1px * var(--svc-scale)) var(--svc-frame), 0 0 0 calc(3px * var(--svc-scale)) var(--svc-brand); }
.svc-ui .svc-app {
  flex: 1; min-width: 0;
  background: var(--svc-app-background); border-radius: calc(14px * var(--svc-scale));
  box-shadow: var(--svc-shadow-panel), var(--svc-hairline); overflow: hidden;
  display: grid; grid-template-columns: calc(226px * var(--svc-scale)) minmax(0, 1fr);
}
.svc-ui .svc-app.no-side { grid-template-columns: minmax(0, 1fr); }
.svc-ui .svc-app.has-agent { grid-template-columns: calc(226px * var(--svc-scale)) minmax(0, 1fr) calc(400px * var(--svc-scale)); }
.svc-ui .svc-app.no-side.has-agent { grid-template-columns: minmax(0, 1fr) calc(400px * var(--svc-scale)); }

/* 사이드바 226px */
.svc-ui .svc-side { background: var(--svc-sidebar); border-bottom-right-radius: calc(14px * var(--svc-scale)); padding: calc(10px * var(--svc-scale)) calc(8px * var(--svc-scale)); display: flex; flex-direction: column; gap: calc(2px * var(--svc-scale)); min-width: 0; }
.svc-ui .svc-side-head { height: calc(32px * var(--svc-scale)); display: flex; align-items: center; gap: calc(6px * var(--svc-scale)); padding: 0 calc(8px * var(--svc-scale)); font-size: calc(15px * var(--svc-scale)); font-weight: 600; }
.svc-ui .svc-side-head .ph-caret-down { font-size: calc(12px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-side-head .svc-api { margin-left: auto; height: calc(22px * var(--svc-scale)); padding: 0 calc(8px * var(--svc-scale)); border-radius: calc(8px * var(--svc-scale)); background: var(--svc-card); box-shadow: var(--svc-hairline); font-size: calc(12px * var(--svc-scale)); font-weight: 600; display: inline-flex; align-items: center; }
.svc-ui .svc-side-icons { display: flex; align-items: center; gap: calc(4px * var(--svc-scale)); padding: calc(4px * var(--svc-scale)) calc(6px * var(--svc-scale)) calc(8px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-side-icons > span { height: calc(28px * var(--svc-scale)); min-width: calc(28px * var(--svc-scale)); padding: 0 calc(6px * var(--svc-scale)); border-radius: calc(10px * var(--svc-scale)); display: inline-flex; align-items: center; justify-content: center; gap: calc(4px * var(--svc-scale)); font-size: calc(13px * var(--svc-scale)); position: relative; }
.svc-ui .svc-side-icons > .is-on { background: var(--svc-card); color: var(--svc-foreground); box-shadow: var(--svc-hairline); }
.svc-ui .svc-count-dot { position: absolute; top: calc(-2px * var(--svc-scale)); right: calc(-6px * var(--svc-scale)); min-width: calc(16px * var(--svc-scale)); height: calc(16px * var(--svc-scale)); padding: 0 calc(4px * var(--svc-scale)); border-radius: 999px; background: var(--svc-destructive); color: #ffffff; font-size: calc(12px * var(--svc-scale)); font-weight: 600; display: grid; place-items: center; }
.svc-ui .svc-nav-label { height: calc(20px * var(--svc-scale)); display: flex; align-items: center; padding: 0 calc(8px * var(--svc-scale)); margin: calc(10px * var(--svc-scale)) 0 calc(4px * var(--svc-scale)); color: var(--svc-muted-foreground); font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-nav-item { height: calc(32px * var(--svc-scale)); display: flex; align-items: center; gap: calc(8px * var(--svc-scale)); padding: 0 calc(8px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); color: var(--svc-nav-foreground); font-size: calc(14px * var(--svc-scale)); white-space: nowrap; }
.svc-ui .svc-nav-item.is-active { background: var(--svc-sidebar-selected); color: var(--svc-foreground); }

/* 본문 · 머리 48px(‹ 브레드크럼 · 오른쪽 고객지원 + AI 버튼) */
.svc-ui .svc-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.svc-ui .svc-head { height: calc(48px * var(--svc-scale)); flex: none; display: flex; align-items: center; gap: calc(10px * var(--svc-scale)); padding: 0 calc(16px * var(--svc-scale)); color: var(--svc-muted-foreground); font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-head-right { margin-left: auto; display: flex; align-items: center; gap: calc(10px * var(--svc-scale)); color: var(--svc-foreground); }
.svc-ui .svc-head-ai { height: calc(32px * var(--svc-scale)); padding: 0 calc(10px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); background: var(--svc-card); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-border); font-size: calc(14px * var(--svc-scale)); font-weight: 500; display: inline-flex; align-items: center; }
.svc-ui .svc-ribbon { height: calc(40px * var(--svc-scale)); flex: none; display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--svc-scale)); background: var(--svc-ribbon); font-size: calc(16px * var(--svc-scale)); font-weight: 500; }
.svc-ui .svc-page { padding: calc(16px * var(--svc-scale)) calc(20px * var(--svc-scale)); display: flex; flex-direction: column; gap: calc(12px * var(--svc-scale)); min-height: 0; }
.svc-ui .svc-title-row { display: flex; align-items: center; gap: calc(14px * var(--svc-scale)); }
.svc-ui .svc-title { font-size: calc(24px * var(--svc-scale)); line-height: calc(32px * var(--svc-scale)); font-weight: 600; letter-spacing: calc(-0.6px * var(--svc-scale)); display: inline-flex; align-items: center; gap: calc(6px * var(--svc-scale)); }
.svc-ui .svc-title .ph { font-size: calc(18px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-summary { display: inline-flex; gap: calc(14px * var(--svc-scale)); font-size: calc(16px * var(--svc-scale)); letter-spacing: calc(-0.16px * var(--svc-scale)); }
.svc-ui .svc-summary b { font-weight: 400; font-variant-numeric: tabular-nums; margin-left: calc(6px * var(--svc-scale)); }

/* 툴바 · 기간 · 보기 탭 · 세그먼트 · 검색 · 페이지 탭 */
.svc-ui .svc-toolbar { height: calc(32px * var(--svc-scale)); display: flex; align-items: center; gap: calc(8px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-date { display: inline-flex; align-items: center; gap: calc(2px * var(--svc-scale)); height: calc(32px * var(--svc-scale)); padding: 0 calc(2px * var(--svc-scale)); }
.svc-ui .svc-date > span { height: calc(32px * var(--svc-scale)); padding: 0 calc(6px * var(--svc-scale)); display: inline-flex; align-items: center; gap: calc(3px * var(--svc-scale)); border-radius: calc(8px * var(--svc-scale)); }
.svc-ui .svc-date .ph { font-size: calc(12px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-tools { margin-left: auto; display: inline-flex; gap: calc(4px * var(--svc-scale)); }
.svc-ui .svc-icon-btn { width: calc(28px * var(--svc-scale)); height: calc(28px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); display: inline-grid; place-items: center; color: var(--svc-muted-foreground); }
.svc-ui .svc-icon-btn.is-ai { color: var(--svc-ai); }
.svc-ui .svc-viewtabs { display: inline-flex; gap: calc(8px * var(--svc-scale)); font-size: calc(16px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-viewtabs .is-on { color: var(--svc-foreground); font-weight: 600; }
.svc-ui .svc-seg { display: inline-flex; align-items: center; height: calc(32px * var(--svc-scale)); padding: calc(2px * var(--svc-scale)); border-radius: calc(14px * var(--svc-scale)); background: var(--svc-tonal); flex: none; }
.svc-ui .svc-seg > span { height: calc(28px * var(--svc-scale)); padding: 0 calc(12px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); display: inline-flex; align-items: center; gap: calc(6px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); line-height: calc(22px * var(--svc-scale)); }
.svc-ui .svc-seg > .is-on { background: var(--svc-card); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-border); font-weight: 500; }
.svc-ui .svc-count { color: var(--svc-muted-foreground); font-variant-numeric: tabular-nums; font-weight: 400; }
.svc-ui .svc-ctrl-row { display: flex; align-items: center; gap: calc(8px * var(--svc-scale)); }
.svc-ui .svc-search { width: calc(230px * var(--svc-scale)); height: calc(32px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); background: #fafafa; display: inline-flex; align-items: center; gap: calc(6px * var(--svc-scale)); padding: 0 calc(10px * var(--svc-scale)); color: var(--svc-muted-foreground); font-size: calc(14px * var(--svc-scale)); flex: none; }
.svc-ui .svc-filter-chip { height: calc(32px * var(--svc-scale)); padding: 0 calc(10px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-input); background: var(--svc-card); display: inline-flex; align-items: center; gap: calc(6px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-pagetabs { display: flex; gap: calc(6px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); line-height: calc(22px * var(--svc-scale)); font-weight: 500; color: var(--svc-muted-foreground); }
.svc-ui .svc-pagetabs > span { height: calc(32px * var(--svc-scale)); padding: calc(4px * var(--svc-scale)) calc(8px * var(--svc-scale)) calc(6px * var(--svc-scale)); display: inline-flex; align-items: center; gap: calc(6px * var(--svc-scale)); }
.svc-ui .svc-pagetabs > .is-on { color: var(--svc-foreground); box-shadow: inset 0 calc(-2px * var(--svc-scale)) 0 var(--svc-foreground); }

/* ── 배지 · 계정과목 · 아바타 · 버튼 ─────────────────────── */
.svc-ui .svc-badge { display: inline-flex; align-items: center; height: calc(22px * var(--svc-scale)); padding: 0 calc(10px * var(--svc-scale)); border-radius: 999px; font-size: calc(12px * var(--svc-scale)); font-weight: 500; background: var(--svc-muted); color: var(--svc-muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-ui .svc-badge.is-sky { background: var(--svc-brand-soft); color: var(--svc-brand-strong); }
.svc-ui .svc-badge.is-red { background: #fee2e2; color: #b91c1c; }
.svc-ui .svc-badge.is-green { background: #dcfce7; color: #15803d; }
.svc-ui .svc-badge.is-violet { background: #ede9fe; color: #6d28d9; }
.svc-ui .svc-badge.is-amber { background: #fef3c7; color: #b45309; }
.svc-ui .svc-badge.is-black { background: var(--svc-primary); color: var(--svc-primary-foreground); }
/* 계정과목: 20px 원형 아바타(이모지 + 큐레이션 파스텔) + 이름 */
.svc-ui .svc-cat { display: inline-flex; align-items: center; gap: calc(4px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); line-height: calc(22px * var(--svc-scale)); white-space: nowrap; }
.svc-ui .svc-cat i { font-style: normal; width: calc(20px * var(--svc-scale)); height: calc(20px * var(--svc-scale)); border-radius: 999px; display: grid; place-items: center; font-size: calc(12px * var(--svc-scale)); line-height: 1; background: var(--svc-cat-slate); flex: none; }
.svc-ui .svc-avatar { width: calc(20px * var(--svc-scale)); height: calc(20px * var(--svc-scale)); border-radius: 999px; display: inline-grid; place-items: center; font-size: calc(12px * var(--svc-scale)); font-weight: 600; background: var(--svc-cat-amber); flex: none; }
/* 버튼: 기본 40 · compact 32 · 모서리 12 · 500. 강조는 검정 하나 */
.svc-ui .svc-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--svc-scale)); height: calc(40px * var(--svc-scale)); padding: 0 calc(16px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); font-weight: 500; letter-spacing: calc(-0.14px * var(--svc-scale)); white-space: nowrap; background: var(--svc-secondary); color: var(--svc-secondary-foreground); }
.svc-ui .svc-btn.is-compact { height: calc(32px * var(--svc-scale)); padding: 0 calc(10px * var(--svc-scale)); }
.svc-ui .svc-btn.is-black { background: var(--svc-primary); color: var(--svc-primary-foreground); }
.svc-ui .svc-btn.is-white-border { background: var(--svc-card); color: var(--svc-foreground); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-input); }
.svc-ui .svc-btn.is-gray { background: var(--svc-secondary); color: var(--svc-secondary-foreground); }
.svc-ui .svc-btn.is-ai { background: var(--svc-card); color: var(--svc-ai-strong); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-ai-border), 0 calc(1px * var(--svc-scale)) calc(2px * var(--svc-scale)) rgba(0, 0, 0, .05); }
.svc-ui .svc-btn.is-ai .ph, .svc-ui .svc-btn.is-ai .ph-fill { color: var(--svc-ai); }
.svc-ui .svc-btn.is-flex { flex: 1; }

/* ── 표(AG Grid): 머리 32/13 · 행 52(두 줄 70) · 금액 400 ─────── */
.svc-ui .svc-grid { font-size: calc(14px * var(--svc-scale)); color: var(--svc-table-ink); background: var(--svc-card); }
.svc-ui .svc-gr { display: grid; grid-template-columns: var(--cols, calc(28px * var(--svc-scale)) calc(110px * var(--svc-scale)) 1fr calc(120px * var(--svc-scale)) calc(140px * var(--svc-scale))); align-items: center; column-gap: calc(12px * var(--svc-scale)); min-height: calc(52px * var(--svc-scale)); padding: 0 calc(12px * var(--svc-scale)); border-bottom: calc(1px * var(--svc-scale)) solid var(--svc-border-soft); position: relative; }
.svc-ui .svc-gr.is-two { min-height: calc(70px * var(--svc-scale)); }
.svc-ui .svc-gr.svc-gh { min-height: calc(32px * var(--svc-scale)); height: calc(32px * var(--svc-scale)); font-size: calc(13px * var(--svc-scale)); color: var(--svc-table-head); border-bottom-color: var(--svc-border); }
.svc-ui .svc-gr.is-selected { background: var(--svc-secondary-hover); }
.svc-ui .svc-check { width: calc(16px * var(--svc-scale)); height: calc(16px * var(--svc-scale)); border-radius: calc(5px * var(--svc-scale)); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-input); background: var(--svc-card); }
.svc-ui .svc-check.is-on { background: var(--svc-brand); box-shadow: none; }
.svc-ui .svc-dt { display: flex; flex-direction: column; line-height: calc(20px * var(--svc-scale)); }
.svc-ui .svc-dt small { font-size: calc(14px * var(--svc-scale)); color: var(--svc-placeholder); }
.svc-ui .svc-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 400; display: flex; flex-direction: column; align-items: flex-end; line-height: calc(16px * var(--svc-scale)); gap: calc(2px * var(--svc-scale)); }
.svc-ui .svc-amt small { font-size: calc(12px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-amount-plus { color: var(--svc-amount-positive); }
.svc-ui .svc-amount-minus { color: var(--svc-amount-negative); }
/* 디자인 시스템 Table(AG 아님): 위아래 선 · 가로선만 · 마지막 행 선 없음 · 행 40 */
.svc-ui .svc-table { border-top: calc(1px * var(--svc-scale)) solid var(--svc-border); border-bottom: calc(1px * var(--svc-scale)) solid var(--svc-border); font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-tr { display: grid; grid-template-columns: var(--cols, calc(84px * var(--svc-scale)) 1fr calc(96px * var(--svc-scale)) calc(120px * var(--svc-scale))); align-items: center; gap: calc(12px * var(--svc-scale)); height: calc(40px * var(--svc-scale)); border-bottom: calc(1px * var(--svc-scale)) solid var(--svc-border); }
.svc-ui .svc-tr:last-child { border-bottom: 0; }
.svc-ui .svc-tr.svc-th { font-size: calc(12px * var(--svc-scale)); font-weight: 500; color: var(--svc-muted-foreground); }
.svc-ui .svc-td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 요약 통계 줄: 0.5px 세로 구분선만 */
.svc-ui .svc-stats { display: flex; gap: calc(16px * var(--svc-scale)); }
.svc-ui .svc-stat { width: calc(150px * var(--svc-scale)); display: flex; flex-direction: column; gap: calc(2px * var(--svc-scale)); padding: calc(8px * var(--svc-scale)) calc(12px * var(--svc-scale)); }
.svc-ui .svc-stat + .svc-stat { box-shadow: calc(-0.5px * var(--svc-scale)) 0 0 var(--svc-border); }
.svc-ui .svc-stat small { font-size: calc(14px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-stat b { font-size: calc(16px * var(--svc-scale)); font-variant-numeric: tabular-nums; font-weight: 400; }

/* 면: 본문 패널 · 위젯(18 · 0.5px 외곽선 · 안쪽 4) · 카드(18 · 1px 선) */
.svc-ui .svc-panel { background: var(--svc-app-background); border-radius: calc(14px * var(--svc-scale)); padding: calc(16px * var(--svc-scale)); }
.svc-ui .svc-widget { border-radius: calc(18px * var(--svc-scale)); background: var(--svc-card); box-shadow: var(--svc-hairline); padding: calc(4px * var(--svc-scale)); display: flex; flex-direction: column; }
.svc-ui .svc-widget-head { height: calc(32px * var(--svc-scale)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(10px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); font-weight: 500; }
.svc-ui .svc-widget-row { min-height: calc(32px * var(--svc-scale)); display: flex; align-items: center; gap: calc(8px * var(--svc-scale)); padding: 0 calc(10px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-widget-row .svc-amt { margin-left: auto; }
.svc-ui .svc-card { background: var(--svc-card); border: calc(1px * var(--svc-scale)) solid var(--svc-border); border-radius: calc(18px * var(--svc-scale)); padding: calc(16px * var(--svc-scale)); }

/* 토스트(sonner success) */
.svc-ui .svc-toast { display: inline-flex; align-items: center; gap: calc(8px * var(--svc-scale)); min-height: calc(44px * var(--svc-scale)); padding: 0 calc(16px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); font-weight: 500; background: var(--svc-toast-success); color: var(--svc-toast-success-foreground); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-toast-success-border), 0 calc(10px * var(--svc-scale)) calc(24px * var(--svc-scale)) calc(-12px * var(--svc-scale)) rgba(0, 0, 0, .2); white-space: nowrap; }
.svc-ui .svc-toast.is-error { background: var(--svc-toast-error); color: var(--svc-toast-error-foreground); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-toast-error-border), 0 calc(10px * var(--svc-scale)) calc(24px * var(--svc-scale)) calc(-12px * var(--svc-scale)) rgba(0, 0, 0, .2); }

/* 대시보드 하단 입력창("무엇이든 물어보세요.") */
.svc-ui .svc-ask { height: calc(48px * var(--svc-scale)); border-radius: calc(18px * var(--svc-scale)); background: var(--svc-card); box-shadow: var(--svc-shadow-ring-md); display: flex; align-items: center; gap: calc(8px * var(--svc-scale)); padding: calc(8px * var(--svc-scale)); font-size: calc(16px * var(--svc-scale)); color: var(--svc-muted-foreground); }

/* ── 에이전트 패널: 흰 바탕 · 400px · 머리 48 · 왼쪽 경계 border 50% ─── */
.svc-ui .svc-agent { position: relative; background: var(--svc-card); border-left: calc(1px * var(--svc-scale)) solid var(--svc-border-faint); display: flex; flex-direction: column; min-width: 0; overflow: hidden; font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-agent.is-floating { border-left: 0; border-radius: calc(18px * var(--svc-scale)); box-shadow: var(--svc-shadow-ring-lg); }
.svc-ui .svc-agent-head { height: calc(48px * var(--svc-scale)); flex: none; display: flex; align-items: center; gap: calc(8px * var(--svc-scale)); padding: 0 calc(16px * var(--svc-scale)); border-bottom: calc(1px * var(--svc-scale)) solid var(--svc-border-faint); }
.svc-ui .svc-agent-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-ui .svc-agent-head .ph { color: var(--svc-muted-foreground); }
.svc-ui .svc-agent-body { position: relative; flex: 1; min-height: 0; padding: calc(16px * var(--svc-scale)); display: flex; flex-direction: column; gap: calc(12px * var(--svc-scale)); overflow: hidden; }
.svc-ui .svc-agent-body.is-bottom { justify-content: flex-end; }
/* 사용자 메시지: 회색 말풍선(22px). 에이전트 응답: 말풍선 없이 마크다운 14 · 1.65 */
.svc-ui .svc-msg-user { align-self: flex-end; max-width: 80%; min-width: calc(112px * var(--svc-scale)); padding: calc(6px * var(--svc-scale)) calc(12px * var(--svc-scale)); border-radius: calc(22px * var(--svc-scale)); background: var(--svc-muted); font-size: calc(14px * var(--svc-scale)); line-height: calc(21.7px * var(--svc-scale)); box-shadow: 0 calc(1px * var(--svc-scale)) calc(2px * var(--svc-scale)) rgba(0, 0, 0, .04); }
.svc-ui .svc-msg-agent { font-size: calc(14px * var(--svc-scale)); line-height: 1.65; }
.svc-ui .svc-msg-agent p { margin: calc(6px * var(--svc-scale)) 0; }
.svc-ui .svc-msg-agent strong { font-weight: 600; }
.svc-ui .svc-msg-agent ul, .svc-ui .svc-msg-agent ol { margin: calc(8px * var(--svc-scale)) 0; padding-left: calc(20px * var(--svc-scale)); }
.svc-ui .svc-msg-agent li { padding-left: calc(4px * var(--svc-scale)); }
.svc-ui .svc-msg-agent li::marker { color: var(--svc-muted-foreground); }
.svc-ui .svc-thought { display: inline-flex; align-items: center; gap: calc(4px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); font-weight: 500; color: var(--svc-muted-foreground); }
.svc-ui .svc-thought-steps { display: flex; flex-direction: column; gap: calc(6px * var(--svc-scale)); }
.svc-ui .svc-thought-step { display: flex; align-items: flex-start; gap: calc(8px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); line-height: calc(20px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-thought-step > .ph { flex: none; margin-top: calc(2px * var(--svc-scale)); }
.svc-ui .svc-msg-actions { display: flex; gap: calc(12px * var(--svc-scale)); color: var(--svc-muted-foreground); }
/* 작업(승인) 블록: 바탕 없음 · 제목 14/500 + 상태 12/500 + 설명 */
.svc-ui .svc-task { display: flex; flex-direction: column; gap: calc(4px * var(--svc-scale)); padding: calc(2px * var(--svc-scale)) 0; }
.svc-ui .svc-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); font-weight: 500; }
.svc-ui .svc-task-status { font-size: calc(12px * var(--svc-scale)); font-weight: 500; color: var(--svc-muted-foreground); flex: none; }
.svc-ui .svc-task-status.is-cancel { color: var(--svc-destructive); }
.svc-ui .svc-task-status.is-wait { color: var(--svc-brand-strong); }
.svc-ui .svc-task-status.is-done { color: var(--svc-toast-success-foreground); }
.svc-ui .svc-task-desc { font-size: calc(14px * var(--svc-scale)); line-height: calc(22.4px * var(--svc-scale)); }
.svc-ui .svc-task-note { font-size: calc(12px * var(--svc-scale)); line-height: calc(16px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-task-actions { display: flex; gap: calc(8px * var(--svc-scale)); margin-top: calc(6px * var(--svc-scale)); }
/* 파일 카드(산출물) */
.svc-ui .svc-file { display: flex; align-items: center; gap: calc(8px * var(--svc-scale)); padding: calc(8px * var(--svc-scale)) calc(12px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); background: var(--svc-card); border: calc(1px * var(--svc-scale)) solid var(--svc-border-soft); }
.svc-ui .svc-file b { display: block; font-weight: 500; }
.svc-ui .svc-file small { display: block; font-size: calc(12px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-file .ph-arrow-square-out { margin-left: auto; }
.svc-ui .svc-datesep { display: flex; align-items: center; gap: calc(12px * var(--svc-scale)); padding: calc(16px * var(--svc-scale)) calc(12px * var(--svc-scale)); font-size: calc(12px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-datesep::before, .svc-ui .svc-datesep::after { content: ""; flex: 1; height: calc(1px * var(--svc-scale)); background: var(--svc-border); }
/* 첫 인사 · 제안 칩 */
.svc-ui .svc-hello { font-size: calc(14px * var(--svc-scale)); line-height: 1.65; }
.svc-ui .svc-chip-q { display: inline-flex; align-items: center; gap: calc(12px * var(--svc-scale)); min-height: calc(40px * var(--svc-scale)); padding: calc(10px * var(--svc-scale)) calc(12px * var(--svc-scale)); border-radius: calc(18px * var(--svc-scale)); background: var(--svc-muted); font-size: calc(14px * var(--svc-scale)); line-height: calc(20px * var(--svc-scale)); align-self: flex-start; }
.svc-ui .svc-chip-q .ph { color: var(--svc-muted-foreground); }
/* 입력창(18 · ring 1px · 8) + 아래 줄: + · 사용량 원 · '승인 요청' pill · 보내기 */
.svc-ui .svc-agent-input { position: relative; z-index: 1; margin: 0 calc(16px * var(--svc-scale)) calc(16px * var(--svc-scale)); border-radius: calc(18px * var(--svc-scale)); background: var(--svc-card); box-shadow: 0 0 0 calc(1px * var(--svc-scale)) var(--svc-border); padding: calc(8px * var(--svc-scale)); display: flex; flex-direction: column; gap: calc(8px * var(--svc-scale)); }
.svc-ui .svc-agent-input.is-focus { box-shadow: 0 0 0 calc(1px * var(--svc-scale)) var(--svc-border), 0 0 0 calc(3px * var(--svc-scale)) rgba(0, 165, 239, .3); }
.svc-ui .svc-field { min-height: calc(28px * var(--svc-scale)); padding: calc(2px * var(--svc-scale)) calc(8px * var(--svc-scale)); font-size: calc(16px * var(--svc-scale)); line-height: calc(24px * var(--svc-scale)); }
.svc-ui .svc-agent-tools { display: flex; align-items: center; gap: calc(6px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-usage { width: calc(16px * var(--svc-scale)); height: calc(16px * var(--svc-scale)); border-radius: 999px; box-shadow: inset 0 0 0 calc(2px * var(--svc-scale)) var(--svc-brand); }
.svc-ui .svc-approve-pill { height: calc(32px * var(--svc-scale)); padding: 0 calc(8px * var(--svc-scale)); border-radius: 999px; display: inline-flex; align-items: center; gap: calc(6px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); color: var(--svc-foreground); }
.svc-ui .svc-send { margin-left: auto; width: calc(28px * var(--svc-scale)); height: calc(28px * var(--svc-scale)); border-radius: calc(10px * var(--svc-scale)); background: var(--svc-muted); color: var(--svc-muted-foreground); display: grid; place-items: center; flex: none; }
.svc-ui .svc-send.is-ready { background: var(--svc-primary); color: var(--svc-primary-foreground); }
/* 에이전트 빛(Wave Shader 'agent' 근사) */
.svc-ui .svc-wave { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 60%; pointer-events: none; z-index: 0; background: radial-gradient(60% 70% at 50% 100%, rgba(156, 200, 250, .7) 0%, rgba(220, 235, 252, .55) 45%, rgba(255, 255, 255, 0) 75%); filter: blur(calc(6px * var(--svc-scale))); opacity: .9; }

/* 상세 패널(Detail Sidebar) */
.svc-ui .svc-sheet { background: var(--svc-card); box-shadow: var(--svc-shadow-ring-lg); border-radius: calc(18px * var(--svc-scale)) 0 0 calc(18px * var(--svc-scale)); display: flex; flex-direction: column; overflow: hidden; font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-sheet-head { min-height: calc(64px * var(--svc-scale)); display: flex; align-items: center; gap: calc(10px * var(--svc-scale)); padding: calc(12px * var(--svc-scale)) calc(24px * var(--svc-scale)); }
.svc-ui .svc-sheet-head small { display: block; font-size: calc(12px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-sheet-head b { display: block; font-size: calc(20px * var(--svc-scale)); font-weight: 600; font-variant-numeric: tabular-nums; }
.svc-ui .svc-sheet-sec { padding: calc(12px * var(--svc-scale)) calc(24px * var(--svc-scale)); display: flex; flex-direction: column; box-shadow: 0 calc(-0.5px * var(--svc-scale)) 0 var(--svc-border); }
.svc-ui .svc-sheet-sec > h4 { min-height: calc(36px * var(--svc-scale)); display: flex; align-items: center; font-size: calc(14px * var(--svc-scale)); font-weight: 500; }
.svc-ui .svc-sheet-row { min-height: calc(36px * var(--svc-scale)); display: grid; grid-template-columns: calc(120px * var(--svc-scale)) 1fr; align-items: center; }
.svc-ui .svc-sheet-row > span:first-child { color: var(--svc-muted-foreground); padding: 0 calc(8px * var(--svc-scale)) 0 0; }

/* ── 장표 표시(제품 요소 아님, 09 §5) ──────────────────────
 * 지금 눌러야 할 곳: 브랜드 sky 외곽선 · AI 가 한 일: AI 보라 외곽선 · 단계 번호 */
.svc-ui .svc-focus { box-shadow: 0 0 0 calc(2px * var(--svc-scale)) #00a5ef, 0 0 0 calc(6px * var(--svc-scale)) rgba(0, 165, 239, .18); }
.svc-ui .svc-focus-ai { box-shadow: 0 0 0 calc(2px * var(--svc-scale)) #8e51ff, 0 0 0 calc(6px * var(--svc-scale)) rgba(142, 81, 255, .16); }

/* ── 시연 연결(kit/demo.js) ─────────────────────────────────
 * 입력창 글자(.demo-type)는 끝난 화면에서 비어 있어요. 포커스 링 · 보내기 활성은 속성으로 켜요. */
.svc-ui .svc-field.demo-field { display: grid; }
.svc-ui .svc-field.demo-field > * { grid-area: 1 / 1; }
.svc-ui .demo-type { opacity: 0; color: var(--svc-foreground); }
.svc-ui .svc-agent-input[data-demo-focus="1"] { box-shadow: 0 0 0 calc(1px * var(--svc-scale)) var(--svc-border), 0 0 0 calc(3px * var(--svc-scale)) rgba(0, 165, 239, 0.3); }
.svc-ui .svc-send[data-demo-ready="1"] { background: var(--svc-primary); color: var(--svc-primary-foreground); }
.svc-ui .svc-toast-wrap { position: absolute; left: 0; right: 0; bottom: calc(16px * var(--svc-scale)); display: flex; justify-content: center; pointer-events: none; }

/* ── 창 하나에 배율 하나(L-016 · I-013) ──────────────────────
 * 완전한 앱 창을 실제 px 1:1(--svc-scale: 1)로 짓고, 그 창 하나에만 zoom 을 걸어요.
 * 서비스 화면은 늘 data-pptx="raster" 라 lint 글자 크기 검사·PPTX 글자 추출을 거치지 않아요(그림으로 굳혀요).
 * 배율 기본 1.5(앱 12px → 장표 18px). 덱에서 --svc-zoom 으로 바꿔요. 덱에 같은 이름의 규칙이 있으면 덱 쪽이 이겨요. */
.svc-ui.svc-zoom { --svc-scale: 1; zoom: var(--svc-zoom, 1.5); }