/* 그랜터 앱 화면 — 덱(deck.html)에서 더한 .svc-ui 부품 사본(10/22 실제 화면 기준, reference/service-check-20261022.md).
   크기: 창은 실제 px 그대로 짓고 .svc-zoom 하나에 배율 하나(L-016). 색은 kit/service-ui/service-ui.css 토큰 = 서비스 DS 토큰(reference/service-ds-check-20261022.md). */
.svc-ui .svc-sub { padding: 0 calc(8px * var(--svc-scale)); display: flex; flex-direction: column; gap: calc(2px * var(--svc-scale)); min-width: 0; overflow: hidden; }
.svc-ui .svc-sub > * { min-width: 0; max-width: 100%; }
.svc-ui .svc-agent-item > span:last-child { min-width: 0; overflow: hidden; }
.svc-ui .svc-sub-head { height: calc(48px * var(--svc-scale)); display: flex; align-items: center; gap: calc(10px * var(--svc-scale)); padding: 0 calc(8px * var(--svc-scale)); font-size: calc(16px * var(--svc-scale)); font-weight: 600; }
.svc-ui .svc-sub-head .icons { margin-left: auto; display: inline-flex; gap: calc(10px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-sub-label { height: calc(28px * var(--svc-scale)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(8px * var(--svc-scale)); margin-top: calc(8px * var(--svc-scale)); font-size: calc(12px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-sub-label .ph { font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-agent-item { display: flex; align-items: center; gap: calc(10px * var(--svc-scale)); padding: calc(6px * var(--svc-scale)) calc(8px * var(--svc-scale)); border-radius: calc(12px * var(--svc-scale)); min-width: 0; }
.svc-ui .svc-agent-item.is-on { background: var(--svc-sidebar-selected); }
.svc-ui .svc-agent-item b { display: block; font-size: calc(14px * var(--svc-scale)); line-height: calc(20px * var(--svc-scale)); font-weight: 500; }
.svc-ui .svc-agent-item small { display: block; font-size: calc(12px * var(--svc-scale)); line-height: calc(16px * var(--svc-scale)); color: var(--svc-muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-ui .svc-orb { width: calc(28px * var(--svc-scale)); height: calc(28px * var(--svc-scale)); border-radius: 999px; flex: none; corner-shape: round; background: radial-gradient(circle at 35% 30%, var(--svc-card) 0%, var(--svc-wave-top) 40%, var(--svc-wave-bottom) 100%); }
.svc-ui .svc-orb.is-green { background: radial-gradient(circle at 35% 30%, var(--svc-card) 0%, var(--svc-cat-green) 55%, var(--svc-cat-teal) 100%); }
.svc-ui .svc-orb.is-amber { background: radial-gradient(circle at 35% 30%, var(--svc-card) 0%, var(--svc-cat-amber) 55%, var(--svc-cat-orange) 100%); }
.svc-ui .svc-orb.is-rose { background: radial-gradient(circle at 35% 30%, var(--svc-card) 0%, var(--svc-cat-rose) 55%, var(--svc-cat-violet) 100%); }
.svc-ui .svc-chat-title { height: calc(32px * var(--svc-scale)); display: flex; align-items: center; padding: 0 calc(8px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); color: var(--svc-nav-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-ui .svc-chat-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)); }
.svc-ui .svc-chat-head b { display: block; font-size: calc(14px * var(--svc-scale)); line-height: calc(18px * var(--svc-scale)); font-weight: 600; }
.svc-ui .svc-chat-head small { display: block; font-size: calc(12px * var(--svc-scale)); line-height: calc(16px * var(--svc-scale)); color: var(--svc-muted-foreground); }
.svc-ui .svc-chat-head .ph-sidebar-simple { margin-left: auto; color: var(--svc-muted-foreground); }
.svc-ui .svc-chat-col { width: calc(600px * var(--svc-scale)); margin: calc(12px * var(--svc-scale)) auto 0; display: flex; flex-direction: column; gap: calc(8px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); line-height: 1.6; }
.svc-ui .svc-chat-col .hello { font-size: calc(16px * var(--svc-scale)); font-weight: 600; }
.svc-ui .svc-chat-col .muted { color: var(--svc-muted-foreground); }
.svc-ui .svc-chat-col b { font-weight: 600; }
.svc-ui .svc-example { display: flex; align-items: center; justify-content: space-between; height: calc(40px * var(--svc-scale)); padding: 0 calc(12px * 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); }
.svc-ui .svc-example .ph { color: var(--svc-muted-foreground); font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-chat-input { width: calc(600px * var(--svc-scale)); margin: calc(14px * var(--svc-scale)) auto 0; 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-rbox { border-radius: calc(12px * var(--svc-scale)); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-border); background: var(--svc-card); padding: calc(8px * var(--svc-scale)); display: flex; flex-direction: column; gap: calc(6px * var(--svc-scale)); }
.svc-ui .svc-rbox-head { display: flex; align-items: center; gap: calc(6px * var(--svc-scale)); padding: calc(2px * var(--svc-scale)) calc(4px * var(--svc-scale)); font-size: calc(13px * var(--svc-scale)); }
.svc-ui .svc-rbox-head b { font-weight: 600; }
.svc-ui .svc-rbox-head .ph { margin-left: auto; color: var(--svc-muted-foreground); font-size: calc(14px * var(--svc-scale)); }
.svc-ui .svc-rrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(10px * var(--svc-scale)); padding: calc(8px * var(--svc-scale)) calc(10px * var(--svc-scale)); border-radius: calc(10px * var(--svc-scale)); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-border-soft); }
.svc-ui .svc-rrow-top { display: flex; justify-content: space-between; gap: calc(8px * var(--svc-scale)); font-size: calc(14px * var(--svc-scale)); line-height: calc(20px * var(--svc-scale)); font-weight: 500; }
.svc-ui .svc-rrow-top .svc-num { font-weight: 400; }
.svc-ui .svc-rrow-sub { display: flex; align-items: center; gap: calc(4px * var(--svc-scale)); font-size: calc(12px * var(--svc-scale)); line-height: calc(18px * var(--svc-scale)); color: var(--svc-muted-foreground); white-space: nowrap; }
.svc-ui .svc-rrow-sub .svc-cat { font-size: calc(12px * var(--svc-scale)); color: var(--svc-foreground); }
.svc-ui .svc-rrow-sub .svc-cat i { width: calc(16px * var(--svc-scale)); height: calc(16px * var(--svc-scale)); font-size: calc(12px * var(--svc-scale)); }
.svc-ui .svc-rrow-act { display: flex; gap: calc(6px * var(--svc-scale)); }
.svc-ui .svc-circle { width: calc(24px * var(--svc-scale)); height: calc(24px * var(--svc-scale)); border-radius: 999px; corner-shape: round; display: grid; place-items: center; }
.svc-ui .svc-circle .ph { font-size: calc(12px * var(--svc-scale)); }
.svc-ui .svc-circle.is-x { background: var(--svc-card); box-shadow: inset 0 0 0 calc(1px * var(--svc-scale)) var(--svc-border); color: var(--svc-muted-foreground); }
.svc-ui .svc-circle.is-ok { background: var(--svc-primary); color: var(--svc-primary-foreground); }
.svc-ui .svc-task-status.is-pending { color: #b45309; }
.svc-ui .svc-mdtable { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--svc-scale)); line-height: calc(19px * var(--svc-scale)); }
.svc-ui .svc-mdtable th, .svc-ui .svc-mdtable td { border-bottom: calc(1px * var(--svc-scale)) solid var(--svc-border); padding: calc(6px * var(--svc-scale)) calc(8px * var(--svc-scale)); text-align: left; vertical-align: top; }
.svc-ui .svc-mdtable th { font-weight: 600; }
.svc-ui .svc-mdtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.svc-ui .svc-nudge { display: flex; gap: calc(8px * var(--svc-scale)); }
.svc-ui .svc-rail2 { width: calc(64px * var(--svc-scale)); background: var(--svc-sidebar); display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--svc-scale)); padding: calc(12px * var(--svc-scale)) 0; border-radius: calc(14px * var(--svc-scale)); }
.svc-ui .svc-rail2 .svc-ws-logo { width: calc(40px * var(--svc-scale)); height: calc(40px * 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)); box-shadow: var(--svc-hairline); }
.svc-ui .svc-rail2 .svc-ws-logo.is-on { box-shadow: 0 0 0 calc(1px * var(--svc-scale)) var(--svc-sidebar), 0 0 0 calc(3px * var(--svc-scale)) var(--svc-brand); }
.svc-ui .svc-rail2 .svc-ws-logo.is-all { background: var(--svc-card); color: var(--svc-brand-strong); }
.svc-ui .svc-tip { position: absolute; padding: calc(4px * var(--svc-scale)) calc(10px * var(--svc-scale)); border-radius: calc(8px * var(--svc-scale)); background: var(--svc-primary); color: var(--svc-primary-foreground); font-size: calc(12px * var(--svc-scale)); white-space: nowrap; }
.svc-ui.svc-zoom { --svc-scale: 1; zoom: var(--win-zoom, 1.35); }
.svc-ui.svc-win { border-radius: 14px; overflow: hidden; background: var(--svc-sidebar); box-shadow: var(--svc-shadow-ring-lg); display: grid; position: relative; flex: none; }
.svc-ui.svc-win.win-full { width: 1256px; height: 440px; grid-template-columns: 64px 226px minmax(0, 1fr); }
.svc-ui.svc-win.win-right { width: 712px; height: 440px; grid-template-columns: minmax(0, 1fr); background: var(--svc-app-background); }
.svc-ui.svc-zoom.win-panel { width: 400px; height: 440px; display: flex; flex: none; }
.svc-ui .svc-cats { display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.svc-ui .svc-catb { width: 55px; height: 54px; display: flex; flex-direction: column; align-items: center; color: rgba(10, 10, 10, 0.75); }
.svc-ui .svc-catb .ico { width: 36px; height: 36px; border-radius: 14px; display: grid; place-items: center; }
.svc-ui .svc-catb svg { width: 20px; height: 20px; fill: currentColor; }
.svc-ui .svc-catb.is-on { color: var(--svc-foreground); }
.svc-ui .svc-catb.is-on .ico { background: rgba(0, 0, 0, 0.05); }
.svc-ui .svc-catb > span:last-child { font-size: 12px; line-height: 16px; }
.svc-ui .svc-main2 { margin: 8px 8px 8px 0; background: var(--svc-app-background); border-radius: 14px; box-shadow: var(--svc-shadow-panel), var(--svc-hairline); display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; }
.svc-ui .svc-win.win-right > .svc-main2 { margin: 0; border-radius: 0; box-shadow: none; }
.svc-ui .svc-head > .ph-sidebar-simple { color: var(--svc-muted-foreground); }
.svc-ui .svc-hl { box-shadow: inset 0 0 0 2px var(--svc-brand); background: rgba(0, 165, 239, 0.07); border-radius: 10px; }
.svc-ui .svc-hl-ai { box-shadow: 0 0 0 2px var(--svc-ai), 0 0 0 6px rgba(142, 81, 255, 0.14); border-radius: 10px; }
.svc-ui .svc-summary-2 { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-left: -10px; width: max-content; }
.win-stage { display: flex; justify-content: center; align-items: flex-start; }