/* Workbench "Studio Graphite" layer (Claude 2026-10-13) for the guided imported-model
   workbench (내 3D 작업대). Its own file, linked after workbench.css, workbench-companion.css,
   the gesture coach and the camera guide, so it restyles them without editing those files.
   Every rule is scoped to .wb[data-workspace-ui="guided"] (or .wb[data-workspace="imported"]);
   the sample (template) workbench is unchanged. Presentation only; no keyframes. */
/* Polish v4 "Studio" (Claude 2026-10-13): a calm, neutral studio for the guided
   imported-model workbench in place of the cyan hologram look. Presentation
   only, appended after v3: the same nodes, ids, names, values and listeners stay
   in place. No keyframes here.
   - Type: Pretendard (official KS X 1001 subset, self-hosted under
     vendor/pretendard, SIL OFL 1.1) under its own family name, so the sample
     (template) workbench keeps its font stack.
   - Colour: graphite neutrals; one blue for actions, selection and focus; amber
     only for proposals and affected parts; 자비스 keeps a small cyan accent.
   - Surfaces: opaque panels, glass instruments over the 3D stage; no glows,
     gradients on controls, corner brackets or scan lines.
   - 3D stage: the renderer's 'studio' theme (neutral light, clay parts, faint
     floor grid, contact shadow) is chosen here through --wb-render-theme. */
@font-face { font-family: 'WB Pretendard'; font-style: normal; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), local('Pretendard-Regular'), url(vendor/pretendard/Pretendard-Regular.subset.woff2) format('woff2'); }
@font-face { font-family: 'WB Pretendard'; font-style: normal; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), local('Pretendard-Medium'), url(vendor/pretendard/Pretendard-Medium.subset.woff2) format('woff2'); }
@font-face { font-family: 'WB Pretendard'; font-style: normal; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), local('Pretendard-SemiBold'), url(vendor/pretendard/Pretendard-SemiBold.subset.woff2) format('woff2'); }
@font-face { font-family: 'WB Pretendard'; font-style: normal; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), local('Pretendard-Bold'), url(vendor/pretendard/Pretendard-Bold.subset.woff2) format('woff2'); }

/* 0. Tokens. The renderer reads --wb-render-theme once when it is created (the
   workspace attribute is set before that); the template never gets it. */
.wb[data-workspace="imported"] { --wb-render-theme: studio; }
.wb[data-workspace-ui="guided"] {
  --g-bg: #0B0C0F; --g-panel: #141619; --g-raised: #1A1D21; --g-sunken: #0E1013; --g-dialog: #17191D;
  --g-line: rgba(255, 255, 255, .07); --g-line-2: rgba(255, 255, 255, .10); --g-line-3: rgba(255, 255, 255, .16);
  --g-field-line: #68707C; --g-field-line-hover: #828A96;
  --g-fill: rgba(255, 255, 255, .05); --g-fill-2: rgba(255, 255, 255, .08); --g-fill-3: rgba(255, 255, 255, .12);
  --g-t1: #ECEEF1; --g-t2: #B2B8C1; --g-t3: #8B939E; --g-t4: #747C88;
  --g-accent: #2563EB; --g-accent-hover: #2D6CF0; --g-accent-press: #1D4FD1;
  --g-accent-text: #8AB4FF; --g-accent-mid: #5B93F7; --g-accent-soft: rgba(59, 130, 246, .16); --g-accent-line: rgba(138, 180, 255, .45);
  --g-amber: #F5A524; --g-amber-hover: #F7B23F; --g-amber-press: #E0951A; --g-amber-ink: #1F1400;
  --g-amber-text: #FFC266; --g-amber-soft: rgba(245, 165, 36, .12); --g-amber-line: rgba(245, 165, 36, .5);
  --g-ok: #6EE7A8; --g-ok-soft: rgba(110, 231, 168, .12); --g-ok-line: rgba(110, 231, 168, .45);
  --g-bad: #FF8A8E; --g-bad-soft: rgba(255, 99, 105, .12); --g-bad-line: rgba(255, 138, 142, .5);
  --g-jarvis: #4FD1E8;
  --g-glass: rgba(30, 33, 38, .74); --g-glass-strong: rgba(26, 29, 34, .94); --g-glass-line: rgba(255, 255, 255, .09); --g-glass-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
  --g-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .25);
  --g-shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .75), 0 6px 18px rgba(0, 0, 0, .3);
  --g-r-ctl: 10px; --g-r-card: 12px; --g-r-panel: 16px; --g-r-dlg: 20px;
  --g-ico-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); --g-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E"); --g-ico-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5.5 12h13'/%3E%3C/svg%3E");
  --g-font: 'WB Pretendard', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --g-stage-bg: radial-gradient(110% 85% at 50% 46%, #24272D 0%, #17191D 50%, #0A0B0D 100%);
  /* Earlier layers and the base read these names. */
  --wb-text-1: var(--g-t1); --wb-text-2: var(--g-t2); --wb-text-3: var(--g-t3);
  --wb-accent: var(--g-accent-mid); --wb-accent-hi: var(--g-accent-text); --wb-accent-ink: #FFFFFF;
  --wb-hair: var(--g-line); --wb-hair-2: var(--g-line-2); --wb-ctl: var(--g-line-3); --wb-ctl-strong: var(--g-field-line); --wb-line: var(--g-line-2);
  --wb-fill: var(--g-fill); --wb-fill-hover: var(--g-fill-2); --wb-fill-on: var(--g-accent-soft);
  --wb-panel: var(--g-panel); --wb-primary: var(--g-accent); --wb-primary-hover: var(--g-accent-hover);
  --wb-r-ctl: var(--g-r-ctl); --wb-r-card: var(--g-r-panel);
  --ink: var(--g-t1); --ink-hi: #F7F8FA; --t2: var(--g-t2); --t3: var(--g-t3);
  --line: var(--g-line-2); --line2: var(--g-line-3); --line3: rgba(255, 255, 255, .28);
  --panel: var(--g-panel); --panel-hi: var(--g-raised);
  --cyan: var(--g-accent-mid); --cyan2: var(--g-accent-text); --cyan-soft: var(--g-accent-soft);
  --aff: var(--g-amber); --aff-soft: var(--g-amber-soft); --aff-line: var(--g-amber-line);
  --bad: var(--g-bad); --bad-soft: var(--g-bad-soft); --good: var(--g-ok); --good-soft: var(--g-ok-soft);
  --font: var(--g-font);
  font-family: var(--g-font); color: var(--g-t1); background: var(--g-bg);
  letter-spacing: -.005em;
}
/* Numbers that are compared (sizes, versions, values) line up; running text keeps proportional digits. */
.wb[data-workspace-ui="guided"] :is(.wb-part-dims, .wb-strip-item, .wb-dim-label, .wb-table, .wb-input, .wb-kv dd, .wb-prep-row dd, .wb-hist-rev, .wb-review-sum, .wb-flow-state) { font-variant-numeric: tabular-nums; }
html:has(> body > .wb[data-workspace-ui="guided"]), body:has(> .wb[data-workspace-ui="guided"]) { background: #0B0C0F; }
.wb[data-workspace-ui="guided"] :where(select, textarea) { font-family: inherit; }
.wb[data-workspace-ui="guided"], .wb[data-workspace-ui="guided"] * { scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.wb[data-workspace-ui="guided"] ::selection { background: rgba(59, 130, 246, .38); color: #FFFFFF; }
.wb[data-workspace-ui="guided"] :focus-visible:not(.wb-canvas-host) { outline: 2px solid var(--g-accent-text); outline-offset: 2px; box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-skip { background: var(--g-raised); color: var(--g-t1); border: 1px solid var(--g-accent-line); border-radius: var(--g-r-ctl); }

/* 1. Type. */
.wb[data-workspace-ui="guided"] .wb-h2 { gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-h2::before { content: none; }
.wb[data-workspace-ui="guided"] .wb-h3 { margin: 20px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-note { color: var(--g-t3); line-height: 1.6; }
.wb[data-workspace-ui="guided"] :is(.wb-label, .wb-model-fields label, .wb-guide-answer label) { color: var(--g-t2); font-weight: 500; }
.wb[data-workspace-ui="guided"] :is(.wb-start h3, .wb-notice-title, .wb-studio-title, .wb-prep-title, .wb-dialog .wb-h2) { text-wrap: balance; }
.wb[data-workspace-ui="guided"] :is(.wb-note, .wb-start-lead, .wb-workspace-hint, .wb-notice-reason, .wb-prep-detail) { text-wrap: pretty; }
.wb[data-workspace-ui="guided"] kbd { font: 600 12px/1.4 var(--mono); color: var(--g-t1); border: 1px solid var(--g-line-3); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: var(--g-fill); }

/* 2. Controls. Filled blue = the one main action of a place; secondary = a
   quiet grey fill; amber = applying a proposal. Disabled always reads disabled. */
.wb[data-workspace-ui="guided"] .wb-btn {
  border: 1px solid transparent; border-radius: var(--g-r-ctl);
  background: var(--g-accent); color: #FFFFFF;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .4);
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.wb[data-workspace-ui="guided"] .wb-btn:hover:not(:disabled) { background: var(--g-accent-hover); filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .4); }
.wb[data-workspace-ui="guided"] .wb-btn:active:not(:disabled) { background: var(--g-accent-press); box-shadow: none; }
.wb[data-workspace-ui="guided"] :is(.wb-btn-ghost, [id="wbExplodeBtn"], [id="wbGuideStart"], .wb-cmd [type="submit"]),
.wb[data-workspace-ui="guided"] [id="wbHelp"] form[method="dialog"] .wb-btn {
  color: var(--g-t1); background: var(--g-fill-2); border-color: transparent; box-shadow: none; font-weight: 500;
}
.wb[data-workspace-ui="guided"] :is(.wb-btn-ghost, [id="wbExplodeBtn"], [id="wbGuideStart"], .wb-cmd [type="submit"]):hover:not(:disabled),
.wb[data-workspace-ui="guided"] [id="wbHelp"] form[method="dialog"] .wb-btn:hover { color: #FFFFFF; background: var(--g-fill-3); border-color: transparent; box-shadow: none; }
.wb[data-workspace-ui="guided"] :is(.wb-btn-ghost, [id="wbExplodeBtn"], [id="wbGuideStart"], .wb-cmd [type="submit"]):active:not(:disabled) { background: rgba(255, 255, 255, .16); }
.wb[data-workspace-ui="guided"] .wb-btn-ghost[aria-pressed="true"] { color: var(--g-accent-text); background: var(--g-accent-soft); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-btn-danger { color: var(--g-bad); background: var(--g-bad-soft); border-color: transparent; }
/* The main action of a place (the start screen, import units, ④ next step). */
.wb[data-workspace-ui="guided"] :is(.wb-start-actions [data-model-act="open"], [id="wbImportUnits"] [data-model-act="import-confirm"], .wb-prep-go) {
  color: #FFFFFF; background: var(--g-accent); border-color: transparent; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .4);
}
.wb[data-workspace-ui="guided"] :is(.wb-start-actions [data-model-act="open"], [id="wbImportUnits"] [data-model-act="import-confirm"], .wb-prep-go):hover:not(:disabled) { background: var(--g-accent-hover); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-cmd:has(.wb-input:not(:placeholder-shown)) [type="submit"] { color: #FFFFFF; background: var(--g-accent); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-cmd:has(.wb-input:not(:placeholder-shown)) [type="submit"]:hover:not(:disabled) { background: var(--g-accent-hover); }
/* Applying a proposal is the one amber action. */
.wb[data-workspace-ui="guided"] .wb-review-actions [data-model-act="commit"] { color: var(--g-amber-ink); background: var(--g-amber); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(0, 0, 0, .4); }
.wb[data-workspace-ui="guided"] .wb-review-actions [data-model-act="commit"]:hover:not(:disabled) { background: var(--g-amber-hover); }
.wb[data-workspace-ui="guided"] .wb-review-actions [data-model-act="commit"]:active:not(:disabled) { background: var(--g-amber-press); }
.wb[data-workspace-ui="guided"] .wb-icon-btn { color: var(--g-t2); background: transparent; border-color: transparent; box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-icon-btn:hover:not(:disabled) { color: var(--g-t1); background: var(--g-fill-2); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-icon-btn[aria-pressed="true"] { color: var(--g-accent-text); background: var(--g-accent-soft); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-chip { border: 1px solid var(--g-line-2); background: transparent; color: var(--g-t2); font-size: 13px; font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-chip:hover:not(:disabled) { color: var(--g-t1); background: var(--g-fill-2); border-color: var(--g-line-3); }
.wb[data-workspace-ui="guided"] :is(.wb-btn, .wb-icon-btn, .wb-chip):is([disabled], [aria-disabled="true"]):not([data-studio-busy]) {
  opacity: 1; filter: none; cursor: not-allowed; box-shadow: none;
  color: var(--g-t4); background: rgba(255, 255, 255, .035); border-color: transparent;
}
.wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-btn:disabled { background: transparent; }
/* Fields: a visible (>= 3:1) edge on a sunken fill; selects get a drawn chevron. */
.wb[data-workspace-ui="guided"] .wb-input { border: 1px solid var(--g-field-line); border-radius: var(--g-r-ctl); background-color: var(--g-sunken); color: var(--g-t1); caret-color: var(--g-accent-text); }
.wb[data-workspace-ui="guided"] .wb-input:hover:not(:disabled) { border-color: var(--g-field-line-hover); }
.wb[data-workspace-ui="guided"] .wb-input:focus-visible { border-color: var(--g-accent-mid); }
.wb[data-workspace-ui="guided"] .wb-input::placeholder { color: #7A828D; }
.wb[data-workspace-ui="guided"] .wb-input:disabled { border-color: var(--g-line-2); background-color: rgba(255, 255, 255, .02); color: var(--g-t3); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] select.wb-input {
  -webkit-appearance: none; appearance: none; padding-right: 36px;
  background-color: var(--g-sunken);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B939E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
.wb[data-workspace="imported"][data-workspace-ui="guided"] select.wb-input:disabled { background-color: rgba(255, 255, 255, .02); }
.wb[data-workspace-ui="guided"] select.wb-input option { background-color: var(--g-raised); color: var(--g-t1); }
@media (pointer: fine) {
  /* Mouse screens: body-size field text; touch screens keep 16px (no zoom on focus). */
  .wb[data-workspace-ui="guided"] .wb-input { font-size: 14px; }
}
.wb[data-workspace-ui="guided"] :is(input[type="checkbox"], input[type="radio"], progress, .wb-range) { accent-color: var(--g-accent-mid); }
.wb[data-workspace-ui="guided"] .wb-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(59, 130, 246, .35), 0 1px 3px rgba(0, 0, 0, .45); }
.wb[data-workspace-ui="guided"] .wb-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.wb[data-workspace-ui="guided"] .wb-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(59, 130, 246, .35), 0 1px 3px rgba(0, 0, 0, .45); }
.wb[data-workspace-ui="guided"] a:not(.wb-btn):not(.wb-logo):not(.wb-file) { color: var(--g-accent-text); text-decoration-color: rgba(138, 180, 255, .45); text-underline-offset: 3px; }

/* 3. Header: brand · scope · live status on the left; inputs and help on the right. */
.wb[data-workspace-ui="guided"] .wb-top { min-height: 56px; padding: 6px 16px; gap: 6px 12px; background: var(--g-bg); border-bottom: 1px solid var(--g-line); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-brand { gap: 0; }
.wb[data-workspace-ui="guided"] .wb-logo { padding: 0 12px 0 0; font-size: 15px; font-weight: 700; letter-spacing: -.025em; color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-logo:hover { color: #FFFFFF; }
.wb[data-workspace-ui="guided"] .wb-title { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; letter-spacing: -.02em; color: var(--g-t2); text-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-title::before { content: ''; flex: none; width: 1px; height: 16px; background: var(--g-line-3); }
.wb[data-workspace-ui="guided"] .wb-sample { min-height: 26px; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--g-fill); color: var(--g-t3); font-size: 12px; font-weight: 500; line-height: 1.5; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status { font-size: 13px; color: var(--g-t3); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status::before { width: 6px; height: 6px; background: var(--g-t4); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status[data-fresh] { color: var(--g-t1); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status[data-fresh]::before { background: var(--g-accent-mid); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status[data-tone="bad"]::before { background: var(--g-bad); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbInputs button { font-size: 13px; font-weight: 500; }
/* Header actions stay quiet until hovered (the hand-mode select keeps its visible field edge). */
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbInputs .wb-btn-ghost:not(:disabled), .wb[data-workspace-ui="guided"] .wb-btn-ghost.wb-help-btn:not(:disabled) { color: var(--g-t2); background: transparent; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbInputs .wb-btn-ghost:not(:disabled):hover, .wb[data-workspace-ui="guided"] .wb-btn-ghost.wb-help-btn:not(:disabled):hover { color: var(--g-t1); background: var(--g-fill-2); }
/* Before a model the camera and voice controls cannot be used yet: they step out of the start screen. */
.wb[data-workspace="imported"][data-workspace-ui="guided"]:not([data-model-ready]) #wbInputs:not(:has(button:enabled)) { display: none; }
.wb[data-workspace="imported"][data-workspace-ui="guided"]:not([data-model-ready]):has(#wbInputs:not(:has(button:enabled))) .wb-help-btn { margin-left: auto; }

/* 4. Tool bar: four numbered steps; tools are quiet tabs, the current one a filled pill. */
.wb[data-workspace-ui="guided"] .wb-tabs { gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--g-line); border-radius: var(--g-r-panel); background: var(--g-panel); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-tab { border: 1px solid transparent; border-radius: var(--g-r-ctl); background: transparent; color: var(--g-t2); font-weight: 500; letter-spacing: -.01em; box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-tab:hover:not(:disabled) { color: var(--g-t1); background: var(--g-fill); }
.wb[data-workspace-ui="guided"] .wb-tab[aria-pressed="true"] { color: var(--g-t1); background: var(--g-fill-3); border-color: transparent; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.wb[data-workspace-ui="guided"] .wb-tab:disabled { color: var(--g-t4); background: transparent; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-tab[data-tab-btn="parts"][aria-pressed="true"] { color: var(--g-t2); background: transparent; box-shadow: none; font-weight: 500; }
/* 다른 파일 열기 is an action, not a tool tab: plain text with an open-file mark. */
.wb[data-workspace-ui="guided"] .wb-flow-open { color: var(--g-accent-text); background: transparent; border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-flow-open:hover:not(:disabled) { color: #B5CEFF; background: var(--g-accent-soft); }
.wb[data-workspace-ui="guided"] .wb-flow-open::before {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5L12 4l4.5 4.5'/%3E%3Cpath d='M4 14.5v3.5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5L12 4l4.5 4.5'/%3E%3Cpath d='M4 14.5v3.5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wb[data-workspace-ui="guided"] .wb-flow-step,
.wb[data-workspace-ui="guided"] .wb-flow-step[data-current],
.wb[data-workspace-ui="guided"] .wb-flow-step[data-next]:not([data-current]) { padding: 2px 4px 2px; border: 0; background: transparent; }
.wb[data-workspace-ui="guided"] .wb-flow-head { min-height: 22px; gap: 6px; padding: 0 8px; font-size: 12px; color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-flow-num { width: 20px; height: 20px; border: 1px solid var(--g-line-3); background: transparent; color: var(--g-t3); font: 600 12px/1 var(--g-font); }
.wb[data-workspace-ui="guided"] .wb-flow-title { font-weight: 600; color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-flow-state { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-flow-state::before { color: var(--g-t4); }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-status="done"] .wb-flow-num { background: var(--g-ok-soft); border-color: transparent; color: var(--g-ok); }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-status="done"] .wb-flow-state { color: #A6EFC8; }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-status="attention"] .wb-flow-num { background: var(--g-amber-soft); border-color: transparent; color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-status="attention"] .wb-flow-state { color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-status="limited"] .wb-flow-num { border-style: dashed; color: var(--g-t2); }
/* Steps that open later stay readable (no see-through dimming): quieter colours instead. */
.wb[data-workspace-ui="guided"] .wb-flow-step[data-status="locked"] .wb-flow-head { opacity: 1; }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-status="locked"] :is(.wb-flow-title, .wb-flow-state) { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-current] .wb-flow-num { background: var(--g-accent); border-color: var(--g-accent); color: #FFFFFF; }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-current] .wb-flow-title { color: var(--g-t1); }
/* The suggested next step: a small amber dot after its name. */
.wb[data-workspace-ui="guided"] .wb-flow-step[data-next]:not([data-current]) .wb-flow-title::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--g-amber); vertical-align: 2px; }
.wb[data-workspace-ui="guided"] .wb-flow-arrow { color: var(--g-t4); font-size: 15px; padding-bottom: 18px; }
@media (min-width:1360px) {
  /* One row: each step keeps its width while its status text changes, so the tools never shift sideways. */
  .wb[data-workspace-ui="guided"] .wb-flow-state { flex: none; width: 8.5em; }
}
.wb[data-workspace-ui="guided"] .wb-flow-aside { border-left-color: var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-workspace-hint { color: var(--g-t3); font-size: 13px; }
.wb[data-workspace-ui="guided"] .wb-workspace-step { color: var(--g-accent-text); background: var(--g-accent-soft); border-color: transparent; font-weight: 600; }
.wb[data-workspace-ui="guided"] #wbReviewShortcut { color: var(--g-t1); background: var(--g-fill-2); border: 1px solid transparent; box-shadow: none; }
.wb[data-workspace-ui="guided"] #wbReviewShortcut::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--g-amber); vertical-align: 1px; }
.wb[data-workspace-ui="guided"] #wbReviewShortcut:hover:not(:disabled) { color: #FFFFFF; background: var(--g-fill-3); }
/* 작품 크게 보기 is a view action, not a tool tab: an outlined button. */
.wb[data-workspace-ui="guided"] #wbFocusToggle { color: var(--g-t1); background: transparent; border: 1px solid var(--g-line-3); box-shadow: none; }
.wb[data-workspace-ui="guided"] #wbFocusToggle:hover:not(:disabled) { background: var(--g-fill); }
.wb[data-workspace-ui="guided"] #wbFocusToggle:disabled { color: var(--g-t4); background: transparent; border-color: var(--g-line); }
.wb[data-workspace-ui="guided"] #wbFocusToggle[aria-pressed="true"] { color: var(--g-accent-text); background: var(--g-accent-soft); border-color: transparent; }

/* 5. The 3D stage: a soft studio backdrop (the model gets the light), no HUD. */
.wb[data-workspace-ui="guided"] .wb-stage { background: transparent; border: 0; box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-viewport { background: var(--g-stage-bg); border: 1px solid var(--g-line); border-radius: var(--g-r-panel); overflow: hidden; }
@media (min-width:1100px) {
  /* Wide screens: the stage spans the page; the light sits over the free area between the panels. */
  .wb[data-workspace-ui="guided"] .wb-viewport {
    --g-cx: calc(var(--fl, var(--fl0, 0px)) + (100% - var(--fl, var(--fl0, 0px)) - var(--fr, var(--fr0, 0px))) / 2);
    border: 0; border-radius: 0;
    background: radial-gradient(60% 72% at var(--g-cx) 52%, #262A31 0%, #1A1D22 35%, #111317 65%, #090A0C 100%);
  }
}
.wb[data-workspace-ui="guided"] .wb-empty { background: transparent; }
.wb[data-workspace-ui="guided"] .wb-hud-c { display: none; }
.wb[data-workspace-ui="guided"] .wb-hud-deco::before, .wb[data-workspace-ui="guided"] .wb-hud-deco::after, .wb[data-workspace-ui="guided"] .wb-canvas-host::after { content: none; }
.wb[data-workspace-ui="guided"] .wb-canvas-host:focus-visible ~ .wb-hud-deco { outline: 2px solid var(--g-accent-text); outline-offset: -2px; box-shadow: none; border-radius: 14px; }
/* Chips over the stage: small glass pills. The "N PARTS" count is already in step ① and the parts list. */
.wb[data-workspace-ui="guided"] .wb-stage-strip { gap: 6px; }
.wb[data-workspace-ui="guided"] .wb-strip-item {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px;
  border: 1px solid var(--g-glass-line); border-radius: 999px; background: var(--g-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--g-t2); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; box-shadow: var(--g-glass-hi);
}
.wb[data-workspace-ui="guided"] .wb-stage-strip > .wb-strip-item:first-child:not([data-kind]) { display: none; }
.wb[data-workspace-ui="guided"] .wb-strip-item[data-kind="note"] { color: var(--g-t3); font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-strip-item[data-kind="preview"] { color: var(--g-amber-text); border: 1px solid var(--g-amber-line); background: rgba(40, 29, 10, .85); }
.wb[data-workspace-ui="guided"] .wb-strip-item[data-appearance="ok"] { color: var(--g-t2); border-color: var(--g-glass-line); }
.wb[data-workspace-ui="guided"] .wb-strip-item[data-appearance="ok"]::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--g-ok); }
.wb[data-workspace-ui="guided"] .wb-strip-item[data-appearance="bad"] { color: var(--g-amber-text); border-color: var(--g-amber-line); }
/* Names, leaders and the selection on the model. */
.wb[data-workspace-ui="guided"] .wb-leaders line { stroke: rgba(236, 238, 241, .4); stroke-width: 1; }
.wb[data-workspace-ui="guided"] .wb-leaders line.ghost { stroke: rgba(245, 165, 36, .85); stroke-dasharray: 3 3; }
.wb[data-workspace-ui="guided"] .wb-leaders circle { fill: #ECEEF1; }
.wb[data-workspace-ui="guided"] .wb-leaders circle.ghost { fill: var(--g-amber); }
.wb[data-workspace-ui="guided"] .wb-bracket { stroke: rgba(138, 180, 255, .4); stroke-width: 1; filter: none; }
.wb[data-workspace-ui="guided"] .wb-label3d {
  column-gap: 6px; padding: 5px 10px; border: 1px solid var(--g-glass-line); border-radius: 999px;
  background: rgba(20, 22, 26, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--g-t1); font: 600 12px/1.35 var(--g-font); letter-spacing: -.005em; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6);
}
.wb[data-workspace-ui="guided"] .wb-label3d:has(.wb-ln-detail) { border-radius: 10px; }
.wb[data-workspace-ui="guided"] .wb-label3d small { color: var(--g-t2); font-size: 12px; font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-label3d .wb-ln-detail { font: 500 12px/1.4 var(--g-font); color: var(--g-t2); font-variant-numeric: tabular-nums; }
.wb[data-workspace-ui="guided"] .wb-label3d[data-selected] { background: var(--g-accent); border-color: transparent; color: #FFFFFF; }
.wb[data-workspace-ui="guided"] .wb-label3d[data-selected] :is(small, .wb-ln-detail) { color: #FFFFFF; }
.wb[data-workspace-ui="guided"] .wb-label3d[data-affected] small { color: var(--g-amber-text); }
/* While a proposal waits, amber belongs to the proposal: the original's label turns neutral. */
.wb[data-workspace-ui="guided"][data-preview] .wb-label3d[data-selected] { background: rgba(30, 33, 38, .9); border: 1px solid var(--g-glass-line); color: var(--g-t1); }
.wb[data-workspace-ui="guided"][data-preview] .wb-label3d[data-selected] .wb-ln-detail { color: var(--g-t2); }
.wb[data-workspace-ui="guided"][data-preview] .wb-label3d[data-selected][data-affected] small { color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-label3d[data-ghost] { background: var(--g-amber); border: 0; color: var(--g-amber-ink); }
.wb[data-workspace-ui="guided"] .wb-label3d[data-ghost] small { color: rgba(31, 20, 0, .72); }
.wb[data-workspace-ui="guided"] .wb-dim-label { padding: 3px 8px; border: 1px solid var(--g-glass-line); border-radius: 8px; background: rgba(20, 22, 26, .88); color: var(--g-t1); font: 600 12px/1.4 var(--g-font); font-variant-numeric: tabular-nums; }
.wb[data-workspace-ui="guided"] .wb-dim-label-ghost { color: var(--g-amber-text); border-color: var(--g-amber-line); background: rgba(40, 29, 10, .9); }
/* Alerts over the stage. */
.wb[data-workspace-ui="guided"] .wb-input-alert-row { border: 1px solid var(--g-bad-line); border-radius: var(--g-r-card); background: rgba(34, 18, 20, .95); color: #FFDADC; box-shadow: var(--g-shadow); }
.wb[data-workspace-ui="guided"] .wb-input-alert-row b { color: var(--g-bad); }

/* 6. View pad: a glass instrument; icons in the button's colour; 연출 does not
   exist on the studio stage (its button is disabled, so it steps out). */
.wb[data-workspace-ui="guided"] .wb-view-ctrl { border: 1px solid var(--g-glass-line); background: var(--g-glass); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: var(--g-shadow); }
@media (min-width:721px) {
  /* Four pairs, no empty cell: 처음·비침 / 왼쪽·오른쪽 / 위·아래 / 확대·축소. */
  .wb[data-workspace-ui="guided"][data-model-ready] .wb-view-ctrl {
    gap: 2px; padding: 4px; border-radius: 14px; background: var(--g-glass); box-shadow: var(--g-shadow), var(--g-glass-hi);
    grid-template-columns: repeat(2, 44px); grid-template-areas: "reset surface" "left right" "up down" "zin zout";
  }
  .wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-btn { border-radius: 10px; }
  .wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="reset-view"] { background: var(--g-fill); border-color: transparent; }
}
@media (max-width:720.98px) {
  .wb[data-workspace-ui="guided"][data-model-ready] .wb-view-ctrl { padding: 3px; border-radius: 14px; }
}
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="motion"]:disabled { display: none; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-pitch="1"] { --wb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 15l6.5-6.5 6.5 6.5'/%3E%3C/svg%3E"); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-pitch="-1"] { --wb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9l6.5 6.5L18.5 9'/%3E%3C/svg%3E"); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="surface"] { --wb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 4.3v8.6L12 20.2l-7.5-4.3V7.3z'/%3E%3Cpath d='M12 11.6v8.6M4.5 7.3L12 11.6l7.5-4.3' stroke-dasharray='2 2.2'/%3E%3C/svg%3E"); }

/* 7. Panels: opaque graphite cards with one hairline; content rows breathe. */
.wb[data-workspace-ui="guided"] .wb-holo { background: var(--g-panel); border: 1px solid var(--g-line); border-radius: var(--g-r-panel); box-shadow: var(--g-shadow); }
@media (min-width:860px) {
  .wb[data-workspace-ui="guided"] .wb-parts::before { background: linear-gradient(180deg, var(--g-panel) 35%, rgba(20, 22, 25, 0)); }
}
.wb[data-workspace-ui="guided"] .wb-model-import { border-bottom-color: var(--g-line); }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import > [data-model-act="open"] { color: var(--g-t1); background: var(--g-fill-2); border-color: transparent; font-weight: 500; }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import > [data-model-act="open"]:hover { background: var(--g-fill-3); }
/* Parts: borderless rows; the selected one is tinted with a blue edge. */
.wb[data-workspace-ui="guided"] .wb-part-list { gap: 2px; margin-inline: -12px; }
.wb[data-workspace-ui="guided"] .wb-part { position: relative; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; transition: background-color .12s ease; }
.wb[data-workspace-ui="guided"] .wb-part:hover { background: var(--g-fill); }
.wb[data-workspace-ui="guided"] .wb-part[data-selected] { background: var(--g-accent-soft); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-part:is([data-selected], [data-affected])::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--g-accent-mid); pointer-events: none; }
.wb[data-workspace-ui="guided"] .wb-part[data-affected]:not([data-selected])::before { background: var(--g-amber); }
.wb[data-workspace-ui="guided"] .wb-part[data-affected] { box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-part[data-selected][data-affected] { box-shadow: inset 0 0 0 1px var(--g-amber-line); }
.wb[data-workspace-ui="guided"] .wb-part-main { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 9px 12px; border-radius: 10px; color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-part-main > * { grid-column: 1 / -1; }
.wb[data-workspace-ui="guided"] .wb-part-swatch { display: none; }
.wb[data-workspace-ui="guided"] .wb-part-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-part-dims { font-size: 12px; color: var(--g-t3); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-structure-path, .wb-structure-badge) { grid-column: 1 / -1; color: var(--g-t3); font-size: 12px; }
.wb[data-workspace-ui="guided"] .wb-part-tools .wb-btn[aria-pressed="true"] { color: var(--g-accent-text); background: var(--g-accent-soft); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-tag { border-radius: 6px; font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-tag-sel { color: var(--g-accent-text); border-color: transparent; background: var(--g-accent-soft); }
.wb[data-workspace-ui="guided"] .wb-tag-aff { color: var(--g-amber-text); border: 1px dashed var(--g-amber-line); background: var(--g-amber-soft); }
.wb[data-workspace-ui="guided"] .wb-tag-hidden { color: var(--g-t3); border-color: var(--g-line-3); }
.wb[data-workspace-ui="guided"] .wb-tag-ghost { color: var(--g-amber-text); border: 1px dotted var(--g-amber-line); }
.wb[data-workspace-ui="guided"] .wb-pill { border-radius: 6px; background: var(--g-accent); color: #FFFFFF; font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-pill-warn { background: var(--g-amber); color: var(--g-amber-ink); }
/* Structure, disassembly and folded specialist tools. */
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-structure-tools, .wb-structure-selected, .wb-disassembly, .wb-advanced, .wb-model-joints, .wb-joint-motion) { border-color: var(--g-line); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-structure-node { border-left-color: var(--g-line-2); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-structure-node, .wb-disassembly-candidates) [aria-pressed="true"] { color: var(--g-accent-text); background: var(--g-accent-soft); border-color: transparent; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-structure-tools summary, .wb-disassembly > summary) { color: var(--g-t2); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-disassembly-candidate span { color: var(--g-t3); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-advanced > summary { color: var(--g-t2); font-weight: 600; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-advanced > summary:hover { color: var(--g-t1); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-advanced > summary::after,
.wb[data-workspace-ui="guided"] :is(.wb-verify-detail, .wb-notice-detail, #wbAccountShelf, #wbStructureTree, .wb-disassembly, .wb-motion-pairs details) > summary::after { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-advanced-tag { color: var(--g-t3); font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-motion-pairs > li { border-left-color: var(--g-line-2); }

/* 8. Callouts: one raised card shape; the left edge carries the tone. */
.wb[data-workspace-ui="guided"] :is(.wb-notice, .wb-studio) { border: 1px solid var(--g-line); border-left: 3px solid var(--g-accent-mid); border-radius: var(--g-r-card); background: var(--g-raised); }
.wb[data-workspace-ui="guided"] :is(.wb-notice, .wb-studio)[data-tone="warn"] { border-color: var(--g-line); border-left-color: var(--g-amber); background: linear-gradient(var(--g-amber-soft), var(--g-amber-soft)), var(--g-raised); }
.wb[data-workspace-ui="guided"] :is(.wb-notice, .wb-studio)[data-tone="error"] { border-color: var(--g-line); border-left-color: var(--g-bad); background: linear-gradient(var(--g-bad-soft), var(--g-bad-soft)), var(--g-raised); }
.wb[data-workspace-ui="guided"] :is(.wb-notice-title, .wb-studio-title) { color: var(--g-t1); font-weight: 600; letter-spacing: -.015em; }
.wb[data-workspace-ui="guided"] .wb-notice :is(.wb-notice-reason) { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-notice .wb-notice-kept { color: #A6EFC8; }
.wb[data-workspace-ui="guided"] .wb-notice .wb-notice-label { color: var(--g-t3); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-notice-next { color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-studio-eyebrow { color: var(--g-accent-text); font-weight: 600; letter-spacing: 0; }
.wb[data-workspace-ui="guided"] .wb-assistant-mode { border: 1px solid var(--g-line); border-radius: var(--g-r-card); background: var(--g-fill); color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-assistant-mode[data-mode="live"] { border-color: var(--g-ok-line); background: var(--g-ok-soft); color: #C9F5DD; }
.wb[data-workspace-ui="guided"] .wb-assistant-mode[data-mode="error"] { border-color: var(--g-amber-line); color: #FFE1AE; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-source-note { border: 1px solid var(--g-line); border-radius: var(--g-r-card); background: var(--g-fill); color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-verify { border: 1px solid var(--g-ok-line); border-radius: var(--g-r-card); background: var(--g-ok-soft); }
.wb[data-workspace-ui="guided"] .wb-verify-main { color: #C9F5DD; font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-verify-main::before { box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-dimension-check { border: 1px solid var(--g-line-2); border-radius: var(--g-r-card); background: var(--g-raised); }
.wb[data-workspace-ui="guided"] .wb-dimension-check:is([data-dimension-status="mismatch"], [data-dimension-status="indeterminate"]) { border-color: var(--g-amber-line); color: #FFE1AE; }
.wb[data-workspace-ui="guided"] .wb-repair-panel { border: 1px solid var(--g-line); border-radius: var(--g-r-card); background: var(--g-fill); }
.wb[data-workspace-ui="guided"] .wb-prep-next { border: 1px solid var(--g-line-2); border-radius: var(--g-r-card); background: var(--g-raised); }
.wb[data-workspace-ui="guided"] .wb-prep-next[data-next="none"] { border-style: solid; border-color: var(--g-line); background: transparent; }
.wb[data-workspace-ui="guided"] .wb-prep-eyebrow { color: var(--g-accent-text); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-prep-title { font-weight: 600; letter-spacing: -.015em; }
.wb[data-workspace-ui="guided"] .wb-prep-row { border-top-color: var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-prep-row[data-tone="ok"]::before { color: var(--g-ok); }
.wb[data-workspace-ui="guided"] .wb-prep-row[data-tone="attention"]::before, .wb[data-workspace-ui="guided"] .wb-prep-row[data-tone="attention"] dd { color: var(--g-amber-text); }
/* Versions, files and key–value lists. */
.wb[data-workspace-ui="guided"] .wb-hist li { border: 1px solid var(--g-line); border-radius: var(--g-r-card); background: var(--g-fill); }
.wb[data-workspace-ui="guided"] .wb-hist li[data-current] { border-color: var(--g-accent-line); box-shadow: inset 2px 0 0 var(--g-accent-mid); }
.wb[data-workspace-ui="guided"] .wb-file { border: 1px solid var(--g-line-2); border-radius: var(--g-r-card); background: var(--g-fill); color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-file:hover { background: var(--g-fill-2); border-color: var(--g-line-3); }
.wb[data-workspace-ui="guided"] .wb-file-name { font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-file-meta { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-kv dt { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-kv dd { font-weight: 600; }
.wb[data-workspace-ui="guided"] :is(.wb-dim-list li, .wb-table th, .wb-table td) { border-bottom-color: var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-table th { color: var(--g-t3); font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-table td.after { color: var(--g-amber-text); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-busy { color: var(--g-accent-text); }

/* 9. The proposal review card: raised, with an amber edge; apply is the one amber button. */
.wb[data-workspace-ui="guided"] .wb-review,
.wb[data-workspace-ui="guided"] .wb-review:is([data-state="ready"], [data-state="committing"]) { background: var(--g-raised); border: 1px solid var(--g-line-2); box-shadow: var(--g-shadow), inset 0 2px 0 var(--g-amber); }
.wb[data-workspace-ui="guided"] .wb-review:is([data-state="failed"], [data-state="uncertain"], [data-state="stale"]) { border-color: var(--g-bad-line); box-shadow: var(--g-shadow), inset 0 2px 0 var(--g-bad); }
/* Room for the focus ring around 수정안 적용 · 취소 inside the scrolling card. */
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbReviewBody { padding-inline: 4px; margin-inline: -4px; }
.wb[data-workspace-ui="guided"] .wb-review > .wb-h2::before { content: ''; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g-amber); transform: none; box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-review-sum { font-weight: 600; letter-spacing: -.015em; }
.wb[data-workspace-ui="guided"] .wb-review-actions { padding-bottom: 6px; background: var(--g-raised); border-top-color: var(--g-line); }
@media (max-width:859.98px) {
  .wb[data-workspace-ui="guided"][data-preview] .wb-review { background: var(--g-raised); box-shadow: 0 -12px 32px rgba(0, 0, 0, .55), inset 0 2px 0 var(--g-amber); }
}

/* 10. Command line and conversation. */
.wb[data-workspace-ui="guided"] .wb-prompt { display: none; }
/* Pretendard's narrow space reads "자비스제작" at a glance; open the word gap a little. */
.wb[data-workspace-ui="guided"] [id="wbGuideStart"] { word-spacing: .12em; }
.wb[data-workspace-ui="guided"] [id="wbGuideStart"]::before {
  content: ''; display: inline-block; flex: none; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; background-color: var(--g-jarvis);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M11 3.5l1.9 5.2 5.2 1.9-5.2 1.9-1.9 5.2-1.9-5.2-5.2-1.9 5.2-1.9z'/%3E%3Cpath d='M18.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M11 3.5l1.9 5.2 5.2 1.9-5.2 1.9-1.9 5.2-1.9-5.2-5.2-1.9 5.2-1.9z'/%3E%3Cpath d='M18.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wb[data-workspace-ui="guided"] .wb-log li { border: 1px solid transparent; border-radius: 12px; background: var(--g-fill); color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-log li[data-role="user"] { background: var(--g-accent-soft); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-log li[data-role="engine"] { background: transparent; border-color: var(--g-line-2); }
.wb[data-workspace-ui="guided"] .wb-log li[data-role="ai"] { background: rgba(79, 209, 232, .08); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-log li[data-tone="bad"] { background: var(--g-bad-soft); border-color: var(--g-bad-line); color: #FFD9DB; }
.wb[data-workspace-ui="guided"] .wb-who { color: var(--g-t3); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-question { border: 1px solid var(--g-accent-line); border-radius: var(--g-r-card); background: var(--g-raised); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-question p { color: var(--g-t1); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-caption { border-left: 2px solid var(--g-jarvis); border-radius: 0 8px 8px 0; background: rgba(79, 209, 232, .07); color: #BDEFF7; }
.wb[data-workspace-ui="guided"] #wbMic[data-listening] { color: #FFD9DB; background: var(--g-bad-soft); border-color: var(--g-bad-line); }
.wb[data-workspace-ui="guided"] #wbMic[data-listening]::before { box-shadow: none; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-guide { border: 1px solid var(--g-line); background: var(--g-raised); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-guide-plan dt { color: var(--g-t3); }

/* 11. Dialogs. */
.wb[data-workspace-ui="guided"] .wb-dialog { padding: 24px; border: 1px solid var(--g-line-2); border-radius: var(--g-r-dlg); background: var(--g-dialog); color: var(--g-t1); box-shadow: var(--g-shadow-lg); }
.wb[data-workspace-ui="guided"] .wb-dialog::backdrop { background: rgba(5, 6, 8, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wb[data-workspace-ui="guided"] .wb-dialog .wb-h2 { font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.wb[data-workspace-ui="guided"] .wb-dialog > p { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-help-list { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-help-list li::marker { color: var(--g-t4); }
.wb[data-workspace-ui="guided"] #wbHelp form[method="dialog"] { background: linear-gradient(180deg, rgba(23, 25, 29, 0), var(--g-dialog) 32%); }
.wb[data-workspace-ui="guided"] :is(.wb-open-item) { border: 1px solid var(--g-line-2); border-radius: var(--g-r-card); background: var(--g-fill); }
.wb[data-workspace-ui="guided"] :is(.wb-open-item):hover { background: var(--g-fill-2); border-color: var(--g-line-3); }

/* 12. Start screen: a quiet mark, one headline, one blue action. */
.wb[data-workspace-ui="guided"] .wb-start-eyebrow { display: none; }
.wb[data-workspace-ui="guided"] .wb-start::before {
  content: ''; display: block; width: 60px; height: 60px; margin: 0 auto 22px; border: 1px solid var(--g-line-2); border-radius: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B2B8C1' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l8 4.6v9.2l-8 4.6-8-4.6V7.4z'/%3E%3Cpath d='M4 7.4l8 4.6 8-4.6M12 12v9.2'/%3E%3C/svg%3E") center / 30px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: var(--g-shadow);
}
.wb[data-workspace-ui="guided"] .wb-start h3 { margin: 0 0 12px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.25; letter-spacing: -.035em; color: var(--g-t1); text-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-start-lead { margin: 0 0 28px; font-size: 16px; line-height: 1.65; color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-start-actions { gap: 10px; }
.wb[data-workspace-ui="guided"] .wb-start-actions .wb-btn { min-width: 168px; min-height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15px; }
.wb[data-workspace-ui="guided"] .wb-start-actions [data-model-act="open"]::before {
  content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5L12 4l4.5 4.5'/%3E%3Cpath d='M4 14.5v3.5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5L12 4l4.5 4.5'/%3E%3Cpath d='M4 14.5v3.5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wb[data-workspace-ui="guided"] .wb-start > .wb-note { margin-top: 14px; color: var(--g-t3); font-size: 13px; }
.wb[data-workspace-ui="guided"] .wb-start > .wb-note:last-child { margin-top: 6px; color: var(--g-t4); font-size: 12px; }
.wb[data-workspace-ui="guided"] .wb-start-sample { margin: 28px auto 6px; padding: 16px 18px; border: 1px solid var(--g-line); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.wb[data-workspace-ui="guided"] .wb-start-sample p { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-start-sample strong { color: var(--g-t1); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-start-sample .wb-btn { margin: 4px 0 8px; }
.wb[data-workspace-ui="guided"] .wb-model-template { color: var(--g-accent-text); text-decoration: underline; text-decoration-color: rgba(138, 180, 255, .4); text-underline-offset: 3px; }
.wb[data-workspace-ui="guided"] .wb-start-steps { border-color: var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-start-steps li + li, .wb[data-workspace-ui="guided"] .wb-start-steps li { border-color: var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-start-steps b { font: 600 12px/1.5 var(--g-font); color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-start-steps strong { color: var(--g-t1); font-weight: 600; }

/* 13. The camera overlay guide (Codex): the same nodes and placement, dressed as a
   studio instrument (colours, radii and type only). */
.wb[data-workspace-ui="guided"] .wb-camera-guide { border: 1px solid var(--g-glass-line); border-radius: 14px; background: var(--g-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--g-t1); font-family: var(--g-font); box-shadow: var(--g-shadow); }
.wb[data-workspace-ui="guided"] .wb-camera-guide-summary { background: #14161A; color: var(--g-t1); font-weight: 600; }
.wb[data-workspace-ui="guided"] :is(.wb-camera-guide-live, .wb-camera-guide-practice-bar) { border-bottom-color: var(--g-line); }
.wb[data-workspace-ui="guided"] :is(.wb-camera-guide-eyebrow, .wb-camera-guide-live-title) { color: var(--g-t3); font-weight: 600; letter-spacing: 0; }
.wb[data-workspace-ui="guided"] .wb-camera-guide-step { border-left: 2px solid var(--g-accent-mid); border-radius: 0 8px 8px 0; background: var(--g-fill); }
.wb[data-workspace-ui="guided"] .wb-camera-guide button { border: 1px solid transparent; border-radius: var(--g-r-ctl); background: var(--g-fill-2); color: var(--g-t1); font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-camera-guide button:hover:not(:disabled) { background: var(--g-fill-3); }
.wb[data-workspace-ui="guided"] .wb-camera-guide button[aria-pressed="true"] { color: #C9F5DD; background: var(--g-ok-soft); border-color: var(--g-ok-line); }
.wb[data-workspace-ui="guided"] .wb-camera-guide :is(button, summary):focus-visible { outline: 2px solid var(--g-accent-text); outline-offset: -2px; }
.wb[data-workspace-ui="guided"] .wb-camera-guide :is(.wb-camera-guide-limit, .wb-camera-guide-scope, .wb-camera-guide-speech span, .wb-camera-guide-speech-status, .wb-camera-guide-practice-scope, .wb-camera-guide-practice-local, .wb-camera-guide-practice-limits > summary) { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-camera-guide-practice { border-color: var(--g-line-2); border-radius: var(--g-r-ctl); }
.wb[data-workspace-ui="guided"] .wb-camera-guide-practice-summary { color: var(--g-t1); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-camera-guide-live .wb-camera-guide-live-release { font-size: 12px; color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-camera-guide-practice-bar-title { color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-camera-guide-practice-bar-status { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-camera-guide-practice-bar-note { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-gesture-coach { border: 1px solid var(--g-glass-line); background: var(--g-glass-strong); color: var(--g-t1); box-shadow: var(--g-shadow); }
.wb[data-workspace-ui="guided"] .wb-gesture-limit { color: var(--g-t3); }

/* 14. Narrow screens. */
@media (max-width:1099.98px) {
  .wb[data-workspace-ui="guided"] .wb-tabs { background: var(--g-panel); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .8); }
}
@media (max-width:720.98px) {
  .wb[data-workspace-ui="guided"] .wb-top { padding: 6px 12px 8px; }
  .wb[data-workspace-ui="guided"] .wb-start h3 { font-size: 26px; }
  .wb[data-workspace-ui="guided"] .wb-start-lead { font-size: 15px; margin-bottom: 22px; }
  .wb[data-workspace-ui="guided"] .wb-start::before { width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px; background-size: 26px, auto; }
  .wb[data-workspace-ui="guided"] .wb-start-actions .wb-btn { flex: 1 1 100%; }
  .wb[data-workspace-ui="guided"] #wbFocusToggle::before {
    content: ''; content: '' / ''; width: 18px; height: 18px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4H20v5.5M9.5 20H4v-5.5M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4H20v5.5M9.5 20H4v-5.5M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .wb[data-workspace-ui="guided"] #wbFocusToggle[aria-pressed="true"]::before {
    content: ''; content: '' / '';
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9.5h-5.5V4M4 14.5h5.5V20M14.5 9.5L21 3M9.5 14.5L3 21'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9.5h-5.5V4M4 14.5h5.5V20M14.5 9.5L21 3M9.5 14.5L3 21'/%3E%3C/svg%3E");
  }
}

/* 15. Preferences: opaque glass when transparency is reduced; system colours and
   the original glyphs in forced colours. */
@media (prefers-reduced-transparency: reduce) {
  .wb[data-workspace-ui="guided"] { --g-glass: #16181C; --g-glass-strong: #16181C; }
  .wb[data-workspace-ui="guided"] :is(.wb-strip-item, .wb-view-ctrl, .wb-label3d, .wb-camera-guide) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wb[data-workspace-ui="guided"] .wb-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .wb[data-workspace-ui="guided"] :is(.wb-strip-item, .wb-label3d, .wb-dim-label, .wb-camera-guide, .wb-part[data-selected], .wb-review, .wb-dialog) { border: 1px solid CanvasText; }
  .wb[data-workspace-ui="guided"] .wb-part[data-selected] { outline: 2px solid Highlight; outline-offset: -2px; }
  .wb[data-workspace-ui="guided"] .wb-start::before, .wb[data-workspace-ui="guided"] [id="wbGuideStart"]::before, .wb[data-workspace-ui="guided"] .wb-start-actions [data-model-act="open"]::before, .wb[data-workspace-ui="guided"] .wb-flow-open::before { display: none; }
  .wb[data-workspace-ui="guided"] #wbFocusToggle { font-size: 13px; width: auto; padding: 0 10px; }
  .wb[data-workspace-ui="guided"] #wbFocusToggle::before { display: none; }
}

/* 16. Second review: one disclosure style, calmer floating panels, fixed rhythm. */
/* Every fold reads the same: 13px semibold label, a drawn ＋ / － at the right. */
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-verify-detail, .wb-notice-detail, .wb-advanced, .wb-disassembly, [id="wbStructureTree"], [id="wbProjectShelf"], [id="wbAccountShelf"], .wb-model-account) > summary { min-height: 44px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--g-t2); list-style: none; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] [id="wbProjectShelf"] > summary::before { content: none; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-verify-detail, .wb-notice-detail, .wb-advanced, .wb-disassembly, [id="wbStructureTree"], [id="wbProjectShelf"], [id="wbAccountShelf"], .wb-motion-pairs details) > summary::after {
  content: ''; content: '' / ''; flex: none; width: 14px; height: 14px; margin-left: auto; padding: 0; background-color: var(--g-t3);
  -webkit-mask: var(--g-ico-plus) center / contain no-repeat; mask: var(--g-ico-plus) center / contain no-repeat;
}
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-verify-detail, .wb-notice-detail, .wb-advanced, .wb-disassembly, [id="wbStructureTree"], [id="wbProjectShelf"], [id="wbAccountShelf"], .wb-motion-pairs details)[open] > summary::after { -webkit-mask-image: var(--g-ico-minus); mask-image: var(--g-ico-minus); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is([id="wbProjectShelf"], [id="wbAccountShelf"], .wb-model-account) > summary { display: flex; align-items: center; gap: 8px; }
/* The camera overlay guide: body text at 13px, drawn chevrons, a soft fade where its content scrolls on, and
   only its title bar while a proposal waits or the model is shown large. */
.wb[data-workspace-ui="guided"] .wb-camera-guide { font-size: 13px; }
.wb[data-workspace-ui="guided"] .wb-camera-guide > details[open] { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
.wb[data-workspace-ui="guided"] .wb-camera-guide-body { padding-bottom: 28px; }
.wb[data-workspace-ui="guided"]:is([data-preview], [data-focus-mode]) .wb-camera-guide > details[open] > :not(summary) { display: none; }
.wb[data-workspace-ui="guided"]:is([data-preview], [data-focus-mode]) .wb-camera-guide > details[open] { -webkit-mask-image: none; mask-image: none; }
.wb[data-workspace-ui="guided"] .wb-camera-guide-chevron { display: inline-block; flex: none; width: 16px; height: 16px; font-size: 0; background-color: currentColor; -webkit-mask: var(--g-ico-chev) center / contain no-repeat; mask: var(--g-ico-chev) center / contain no-repeat; }
.wb[data-workspace-ui="guided"] :is(.wb-camera-guide-practice-summary, .wb-camera-guide-practice-limits > summary)::after { content: ''; display: inline-block; flex: none; width: 14px; height: 14px; padding: 0; background-color: currentColor; -webkit-mask: var(--g-ico-chev) center / contain no-repeat; mask: var(--g-ico-chev) center / contain no-repeat; }
.wb[data-workspace-ui="guided"] .wb-camera-guide :is(details[open] > .wb-camera-guide-practice-summary, details[open] > summary)::after { transform: rotate(180deg); }
@media (max-width:720.98px) {
  /* Phones: the guide's own scroll hands over to the page at its ends (no scroll trap under the stage). */
  .wb[data-workspace-ui="guided"] .wb-camera-guide > details { overscroll-behavior: auto; }
}
/* The camera quick-stop rail (Codex a4edfd2; ≤859px, only while the camera runs): a Graphite bar with the
   live line in amber and the two stop actions as ordinary buttons. Layout and behaviour stay Codex's. */
@media (max-width:859.98px) {
  .wb[data-workspace-ui="guided"] .wb-camera-safety:not([hidden]) { border-block: 1px solid var(--g-line-2); background: rgba(20, 22, 25, .96); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .wb[data-workspace-ui="guided"] .wb-camera-safety-status { color: var(--g-amber-text); font-weight: 500; }
  .wb[data-workspace-ui="guided"] .wb-camera-safety-status::before { content: ''; content: '' / ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--g-amber); vertical-align: 2px; }
  .wb[data-workspace-ui="guided"] .wb-camera-safety button { border: 1px solid var(--g-line-2); border-radius: var(--g-r-ctl); background: var(--g-fill-2); color: var(--g-t1); font-weight: 600; }
  .wb[data-workspace-ui="guided"] .wb-camera-safety button:not(:disabled):hover { background: var(--g-fill-3); }
  .wb[data-workspace-ui="guided"] .wb-camera-safety button:focus-visible { outline: 2px solid var(--g-accent-text); outline-offset: 2px; box-shadow: none; }
}
@media (max-width:859.98px) and (prefers-reduced-transparency: reduce) {
  .wb[data-workspace-ui="guided"] .wb-camera-safety:not([hidden]) { background: #141619; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Dialogs keep their title in view while the content scrolls. */
.wb[data-workspace-ui="guided"] .wb-dialog > .wb-h2:first-child { position: sticky; top: -24px; z-index: 2; margin: -24px -24px 12px; padding: 24px 24px 12px; background: var(--g-dialog); border-bottom: 1px solid var(--g-line); }
@media (min-width:1100px) {
  /* The right column's cards share one edge with the review card and the conversation panel. */
  .wb[data-workspace-ui="guided"] .wb-panel.wb-side { padding: 0; }
  /* One control height (44px) across header, tool bar, panels and the command line. */
  .wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-btn, .wb-chip, .wb-input, .wb-icon-btn, .wb-part-main, .wb-model-template, .wb-tab, .wb-workspace-actions button) { min-height: 44px; }
}
@media (min-width:1100px) and (max-height:760px) {
  /* Short desktops (a 13" MacBook window): the start screen fits without an inner scroll. */
  .wb[data-workspace-ui="guided"] .wb-top { min-height: 52px; padding-block: 4px; }
  .wb[data-workspace-ui="guided"] .wb-flow-head { min-height: 20px; }
  .wb[data-workspace-ui="guided"] .wb-start::before { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 14px; background-size: 24px, auto; }
  .wb[data-workspace-ui="guided"] .wb-start h3 { margin-bottom: 8px; font-size: 28px; }
  .wb[data-workspace-ui="guided"] .wb-start-lead { margin-bottom: 18px; }
  .wb[data-workspace-ui="guided"] .wb-start-sample { margin-top: 18px; padding: 12px 16px; }
  .wb[data-workspace-ui="guided"] .wb-start > .wb-note { margin-top: 10px; }
}
/* Each step-③ tool has one main action. */
.wb[data-workspace-ui="guided"] .wb-btn:is([data-model-act="cut"], [data-model-act="placement"]):not(:disabled) { color: #FFFFFF; background: var(--g-accent); border-color: transparent; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .4); }
.wb[data-workspace-ui="guided"] .wb-btn:is([data-model-act="cut"], [data-model-act="placement"]):hover:not(:disabled) { color: #FFFFFF; background: var(--g-accent-hover); }
.wb[data-workspace-ui="guided"] .wb-note + .wb-model-fields { margin-top: 12px; }
/* Type scale: 12 / 13 / 14 / 15 / 18 / 26–34. */
.wb[data-workspace-ui="guided"] :is(.wb-log li, .wb-assistant-mode) { font-size: 13px; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-advanced > summary { font-size: 13px; }
/* ④ next step: one marker style; units stay with their numbers. */
.wb[data-workspace-ui="guided"] .wb-prep-row::before, .wb[data-workspace-ui="guided"] .wb-prep-row[data-tone]::before { font: 600 13px/1.5 var(--g-font); }
.wb[data-workspace-ui="guided"] .wb-prep-row dd { text-wrap: pretty; }
/* A heading focused by the page to announce a notice needs no ring (it is not a control). */
.wb[data-workspace-ui="guided"] :is(.wb-notice-title, .wb-studio-title, .wb-prep-title)[tabindex="-1"]:focus-visible { outline: none; }
.wb[data-workspace-ui="guided"] .wb-notice[data-tone="error"] .wb-notice-kept { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-notice[data-tone="warn"] .wb-notice-label { color: var(--g-t2); }
/* The stage scrolls into view below the sticky tool bar; a docked proposal never hides the focused control. */
.wb[data-workspace-ui="guided"] .wb-viewport { scroll-margin-top: calc(var(--wb-bar, 0px) + 8px); }
@media (max-width:1099.98px) {
  :root:has(.wb[data-workspace-ui="guided"][data-preview]) { scroll-padding-bottom: min(46dvh, 380px); }
}
@media (max-width:480px) {
  /* Narrow phones: the command input takes the full row (its example stays readable). */
  .wb[data-workspace-ui="guided"] .wb-cmd { flex-wrap: wrap; }
  .wb[data-workspace-ui="guided"] .wb-cmd .wb-input { flex: 1 1 100%; }
  .wb[data-workspace-ui="guided"] .wb-cmd .wb-btn { flex: 1 1 0; }
}
@media (max-width:720.98px) {
  /* Phones: the tool bar spans the screen (nothing peeks past it while stuck) and keeps one tab row. */
  .wb[data-workspace-ui="guided"] .wb-tabs { margin-inline: -8px; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); gap: 4px; border-width: 0 0 1px; border-radius: 0; }
  .wb[data-workspace-ui="guided"] .wb-tabs .wb-tab { padding: 6px 2px; letter-spacing: -.02em; }
  .wb[data-workspace-ui="guided"] .wb-top { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .wb[data-workspace-ui="guided"][data-preview] .wb-review { bottom: calc(8px + env(safe-area-inset-bottom)); max-height: min(34dvh, 260px); }
  .wb[data-workspace-ui="guided"] [id="wbImportUnits"] [data-model-act="import-confirm"] { order: -1; flex: 1 1 100%; }
}
@media (min-width:360px) and (max-width:720.98px) {
  .wb[data-workspace-ui="guided"] .wb-tabs .wb-tab { white-space: nowrap; overflow-wrap: normal; }
}
@media (max-width:360px) {
  /* 320px: the remaining view tools share one row. */
  .wb[data-workspace-ui="guided"] .wb-view-ctrl { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
}
@media (prefers-reduced-transparency: reduce) {
  .wb[data-workspace-ui="guided"] :is(.wb-label3d, .wb-dim-label, .wb-camera-guide-summary) { background-color: #16181C; }
  .wb[data-workspace-ui="guided"] :is(.wb-dim-label-ghost, .wb-strip-item[data-kind="preview"]) { background-color: #281D0A; }
  .wb[data-workspace-ui="guided"] .wb-input-alert-row { background-color: #221214; }
}
@media (forced-colors: active) {
  .wb[data-workspace-ui="guided"] .wb-range { forced-color-adjust: none; }
  .wb[data-workspace-ui="guided"] .wb-range::-webkit-slider-runnable-track { background: CanvasText; }
  .wb[data-workspace-ui="guided"] .wb-range::-webkit-slider-thumb { background: Canvas; border: 2px solid Highlight; box-shadow: none; }
  .wb[data-workspace-ui="guided"] .wb-range::-moz-range-track { background: CanvasText; }
  .wb[data-workspace-ui="guided"] .wb-range::-moz-range-thumb { background: Canvas; border: 2px solid Highlight; box-shadow: none; }
  .wb[data-workspace-ui="guided"] .wb-flow-step[data-next]:not([data-current]) .wb-flow-title::after { forced-color-adjust: none; background: Highlight; }
  .wb[data-workspace-ui="guided"] :is(.wb-camera-guide-chevron) { forced-color-adjust: none; background-color: CanvasText; }
  /* Mask icons that carry state (open/closed) are painted with background-color, which forced colors would
     turn into Canvas; draw them in the text color. (Decorative button icons are hidden above.) */
  .wb[data-workspace="imported"][data-workspace-ui="guided"] :is(.wb-verify-detail, .wb-notice-detail, .wb-advanced, .wb-disassembly, [id="wbStructureTree"], [id="wbProjectShelf"], [id="wbAccountShelf"], .wb-motion-pairs details) > summary::after,
  .wb[data-workspace-ui="guided"] :is(.wb-camera-guide-practice-summary, .wb-camera-guide-practice-limits > summary)::after { forced-color-adjust: none; background-color: CanvasText; }
}

/* Scroll areas end in a soft fade instead of a hard cut line. */
.wb[data-workspace-ui="guided"] .wb-log { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 16px), transparent); }
@media (min-width:860px) {
  .wb[data-workspace-ui="guided"] .wb-parts::after { content: ''; display: block; position: sticky; bottom: -16px; z-index: 2; height: 24px; margin: 0 -16px -16px; background: linear-gradient(180deg, rgba(20, 22, 25, 0), var(--g-panel) 70%); pointer-events: none; }
}

/* Polish v4 "Studio" (Claude 2026-10-13): 자비스 as a small glass capsule with a
   lens face (the robot's eyes and mouth on a dark screen; its state expressions
   stay), neutral text when it is off, its own cyan only on the face. The open
   panel is a studio card and is never cut off by the stage on medium screens.
   Presentation only; no keyframes. */
.wb[data-workspace-ui="guided"] .wb-companion { --companion-ink: var(--g-t1); --companion-muted: var(--g-t3); --companion-accent: var(--g-jarvis); color: var(--g-t1); font-family: var(--g-font); }
.wb[data-workspace-ui="guided"] .wb-companion[data-state="listening"] { --companion-accent: var(--g-ok); }
.wb[data-workspace-ui="guided"] .wb-companion[data-state="error"] { --companion-accent: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-bar,
.wb[data-workspace-ui="guided"] .wb-companion[data-layout] .wb-companion-bar {
  gap: 10px; padding: 6px 6px 6px 6px; border: 1px solid var(--g-glass-line); border-radius: 14px;
  background: var(--g-glass-strong); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--g-shadow), var(--g-glass-hi);
}
/* The lens: a dark screen tile; only the face of the drawn robot shows. */
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-avatar {
  position: relative; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; overflow: hidden;
  border: 1px solid rgba(79, 209, 232, .26); border-radius: 10px;
  background: radial-gradient(120% 100% at 50% 20%, #17303A 0%, #0C161A 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transform: none;
}
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-avatar:not(:disabled):hover { transform: none; border-color: rgba(79, 209, 232, .5); }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-robot { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; transform: translate(-50%, -51%); overflow: visible; }
.wb[data-workspace-ui="guided"] .wb-companion-robot > :is(ellipse.wb-companion-shadow, circle, rect, path[fill*="Shell"], path[fill*="Visor"], path[stroke="#b8efff"], path[stroke="#83c9df"], path[stroke="#85deef"]) { display: none; }
.wb[data-workspace-ui="guided"] .wb-companion-eyes, .wb[data-workspace-ui="guided"] .wb-companion-mouth { fill: var(--companion-accent); }
.wb[data-workspace-ui="guided"] .wb-companion-smile { stroke: var(--companion-accent); opacity: .75; }
.wb[data-workspace-ui="guided"] .wb-companion[data-state="offline"] .wb-companion-eyes { opacity: .6; }
.wb[data-workspace-ui="guided"] .wb-companion[data-state="listening"] .wb-companion-avatar { border-color: var(--g-ok-line); }
.wb[data-workspace-ui="guided"] .wb-companion[data-state="speaking"] .wb-companion-avatar { border-color: rgba(79, 209, 232, .6); }
.wb[data-workspace-ui="guided"] .wb-companion[data-state="error"] .wb-companion-avatar { border-color: var(--g-amber-line); }
/* Name, state and the one-line caption. */
.wb[data-workspace-ui="guided"] .wb-companion-heading { gap: 6px; }
.wb[data-workspace-ui="guided"] .wb-companion-heading strong { font-size: 14px; font-weight: 600; letter-spacing: -.015em; color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-companion-state { font-size: 12px; font-weight: 500; color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-companion:is([data-state="connecting"], [data-state="thinking"], [data-state="speaking"], [data-state="ready"]) .wb-companion-state { color: var(--g-jarvis); }
.wb[data-workspace-ui="guided"] .wb-companion[data-state="listening"] .wb-companion-state { color: var(--g-ok); }
.wb[data-workspace-ui="guided"] .wb-companion[data-state="error"] .wb-companion-state { color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-companion-caption { margin-top: 1px; color: var(--g-t2); }
/* 대화·설정 is a 44px chevron button at the capsule's right edge (its words stay its accessible name). */
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-summary, .wb[data-workspace-ui="guided"] .wb-companion[data-layout] .wb-companion-summary { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto; column-gap: 4px; align-items: center; }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-heading { grid-column: 1; grid-row: 1; }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-caption { grid-column: 1; grid-row: 2; }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-details-toggle, .wb[data-workspace-ui="guided"] .wb-companion[data-layout] .wb-companion-details-toggle {
  grid-column: 2; grid-row: 1 / span 2; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  border-radius: 10px; color: var(--g-t3) !important; font-size: 0 !important;
}
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-details-toggle:hover { color: var(--g-t1) !important; background: var(--g-fill-2); }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-details-toggle span { display: block; width: 16px; height: 16px; font-size: 0; background-color: currentColor; transform: rotate(180deg); -webkit-mask: var(--g-ico-chev) center / contain no-repeat; mask: var(--g-ico-chev) center / contain no-repeat; }
.wb[data-workspace-ui="guided"] .wb-companion[data-expanded] .wb-companion-details-toggle span { transform: none; }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-stop { border: 1px solid transparent; border-radius: 12px; background: var(--g-fill-2); color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-stop:hover { background: var(--g-fill-3); }
.wb[data-workspace-ui="guided"] .wb-companion button:focus-visible, .wb[data-workspace-ui="guided"] .wb-companion [tabindex]:focus-visible { outline: 2px solid var(--g-accent-text); outline-offset: 2px; box-shadow: none; }
/* The open panel: a studio card. */
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-panel { padding: 16px; border: 1px solid var(--g-line-2); border-radius: 14px; background: var(--g-dialog); color: var(--g-t1); box-shadow: var(--g-shadow-lg); }
.wb[data-workspace-ui="guided"] .wb-companion-panel-title strong { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-close { border-radius: 10px; color: var(--g-t3) !important; }
.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-close:hover { background: var(--g-fill-2); color: var(--g-t1) !important; }
.wb[data-workspace-ui="guided"] .wb-companion-reply { border-left: 2px solid var(--g-jarvis); border-radius: 0 10px 10px 0; background: rgba(79, 209, 232, .07); color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-companion :is(.wb-companion-controls button, .wb-companion-consent button, .wb-companion-guide) { border: 1px solid transparent; border-radius: 10px; background: var(--g-fill-2); color: var(--g-t1); font-size: 13px !important; font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-companion :is(.wb-companion-controls button, .wb-companion-consent button, .wb-companion-guide):not(:disabled):hover { background: var(--g-fill-3); }
.wb[data-workspace-ui="guided"] .wb-companion :is(.wb-companion-talk, .wb-companion-wake)[aria-pressed="true"] { border-color: var(--g-ok-line); background: var(--g-ok-soft); color: #C9F5DD; }
.wb[data-workspace-ui="guided"] .wb-companion-consent { border: 1px solid var(--g-line-2); border-radius: 12px; background: var(--g-raised); }
.wb[data-workspace-ui="guided"] .wb-companion-consent .wb-companion-confirm { color: #FFFFFF; background: var(--g-accent); border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-companion-mode { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-companion-modes { border: 1px solid var(--g-line); border-radius: 12px; background: var(--g-fill); }
.wb[data-workspace-ui="guided"] .wb-companion-mode-row { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-companion-mode-row strong { color: var(--g-t1); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-companion-audio { border-color: var(--g-amber-line); background: var(--g-amber-soft); color: #FFE1AE; }
.wb[data-workspace-ui="guided"] :is(.wb-companion-privacy, .wb-companion-footnote) { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-companion-privacy { border-top-color: var(--g-line); }
@media (min-width:860px) {
  /* Floating capsule: symmetric corners; the open panel stays inside the stage
     (the stage is a size container, so the panel can measure the room above the card). */
  .wb[data-workspace-ui="guided"] .wb-stage { container-type: size; }
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] .wb-companion-bar { border-radius: 14px; padding: 6px; }
  /* One right edge (12px) with the view pad and the camera guide. */
  .wb[data-workspace-ui="guided"][data-model-ready] .wb-companion[data-layout="floating"] { right: calc(var(--fr, 0px) + 12px); bottom: calc(var(--fb, 0px) + 12px); }
  /* The open panel is the only instrument then (no edges of the pad or guide peeking past it). */
  .wb[data-workspace-ui="guided"]:has(.wb-companion[data-layout="floating"][data-expanded]) :is(.wb-view-ctrl, .wb-camera-guide) { visibility: hidden; }
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] .wb-companion-panel {
    max-height: max(160px, calc(100cqh - var(--ft, 0px) - var(--fb, 0px) - 16px - 60px - 10px - 12px));
  }
}
@media (max-width:859.98px) {
  .wb[data-workspace-ui="guided"] .wb-companion-bar { padding: 6px; }
  /* In the page flow the card spans the column (no half-empty row). */
  .wb[data-workspace-ui="guided"] .wb-companion:not([data-layout="floating"]) { width: 100%; margin: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .wb[data-workspace-ui="guided"] .wb-companion .wb-companion-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #16181C; }
}
@media (forced-colors: active) {
  .wb[data-workspace-ui="guided"] .wb-companion .wb-companion-avatar { border: 1px solid ButtonText; }
  .wb[data-workspace-ui="guided"] .wb-companion-eyes, .wb[data-workspace-ui="guided"] .wb-companion-mouth { fill: ButtonText; }
  .wb[data-workspace-ui="guided"] .wb-companion-smile { stroke: ButtonText; }
  .wb[data-workspace-ui="guided"] .wb-companion .wb-companion-details-toggle span { forced-color-adjust: none; background-color: ButtonText; }
}

.wb[data-workspace-ui="guided"] .wb-companion .wb-companion-panel::after { content: ''; display: block; position: sticky; bottom: -16px; height: 24px; margin: 0 -16px -16px; background: linear-gradient(180deg, rgba(23, 25, 29, 0), var(--g-dialog) 70%); pointer-events: none; }

/* 새 질문하기 (Codex, in progress in workbench-companion.mjs): the same quiet card and secondary button. */
.wb[data-workspace-ui="guided"] .wb-companion-question { border: 1px solid var(--g-line); border-radius: 12px; background: var(--g-fill); }
.wb[data-workspace-ui="guided"] .wb-companion-question button { border: 1px solid transparent; border-radius: 10px; background: var(--g-fill-2); color: var(--g-t1); font-size: 13px !important; font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-companion-question button:not(:disabled):hover { background: var(--g-fill-3); }
.wb[data-workspace-ui="guided"] .wb-companion-question button[aria-pressed="true"] { border-color: var(--g-ok-line); background: var(--g-ok-soft); color: #C9F5DD; }
.wb[data-workspace-ui="guided"] .wb-companion-question p { color: var(--g-t2); }

/* ④ MODU3D 견적 접수 (Claude 2026-10-14): one card, three explicit steps, the
   adapter's state in words. Blue = the one main action shown; amber = a result
   that still needs checking; green only for steps that are done. No keyframes. */
.wb[data-workspace-ui="guided"] .wb-request-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; border-top: 1px solid var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-request-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 6px 0; border-bottom: 1px solid var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-request-step-n { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--g-line-3); border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--g-t2); font-variant-numeric: tabular-nums; }
.wb[data-workspace-ui="guided"] .wb-request-step-name { font-size: 13px; font-weight: 500; color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-request-step-state { font-size: 12px; font-weight: 600; color: var(--g-t3); white-space: nowrap; }
.wb[data-workspace-ui="guided"] [data-step-state="done"] .wb-request-step-n { border-color: var(--g-ok-line); background: var(--g-ok-soft); color: var(--g-ok); }
.wb[data-workspace-ui="guided"] [data-step-state="done"] .wb-request-step-state { color: var(--g-ok); }
.wb[data-workspace-ui="guided"] [data-step-state="active"] .wb-request-step-n { border-color: var(--g-accent-line); background: var(--g-accent-soft); color: var(--g-accent-text); }
.wb[data-workspace-ui="guided"] [data-step-state="active"] .wb-request-step-state { color: var(--g-accent-text); }
.wb[data-workspace-ui="guided"] [data-step-state="attention"] .wb-request-step-n { border-color: var(--g-amber-line); background: var(--g-amber-soft); color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] [data-step-state="attention"] .wb-request-step-state { color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] [data-step-state="locked"] .wb-request-step-name { color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-request-status { margin: 14px 0 4px; font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; color: var(--g-t1); text-wrap: pretty; }
.wb[data-workspace-ui="guided"] .wb-request-status:focus-visible { outline: 2px solid var(--g-accent-text); outline-offset: 3px; border-radius: 4px; }
.wb[data-workspace-ui="guided"] .wb-request-detail { margin: 0 0 8px; }
.wb[data-workspace-ui="guided"] .wb-request-detail:empty { display: none; }
.wb[data-workspace-ui="guided"] :is(.wb-request-busy, .wb-request-gate, .wb-request-pending) { margin: 10px 0; padding: 12px; border: 1px solid var(--g-line-2); border-radius: var(--g-r-card); background: var(--g-raised); }
.wb[data-workspace-ui="guided"] .wb-request-busy { border-color: var(--g-accent-line); background: var(--g-accent-soft); }
.wb[data-workspace-ui="guided"] .wb-request-busy > .wb-note:first-child { margin-top: 0; color: var(--g-t1); font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-request-pending { border-color: var(--g-amber-line); border-left: 3px solid var(--g-amber); background: var(--g-amber-soft); }
.wb[data-workspace-ui="guided"] .wb-request-pending .wb-note { margin: 0; color: #FFE1AE; }
.wb[data-workspace-ui="guided"] :is(.wb-request-gate, .wb-request-busy) .wb-note:first-child { margin-top: 0; }
.wb[data-workspace-ui="guided"] :is(.wb-request-busy, .wb-request-gate) :is(.wb-btn, .wb-model-row > a.wb-btn) { flex: 1 1 auto; }
.wb[data-workspace-ui="guided"] .wb-request-gate .wb-model-row > a.wb-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wb[data-workspace-ui="guided"] :is(.wb-request-form, .wb-request-review, .wb-request-quote) { margin-top: 12px; }
.wb[data-workspace-ui="guided"] :is(.wb-request-form, .wb-request-review, .wb-request-quote) > .wb-h3:first-child { margin-top: 0; }
.wb[data-workspace-ui="guided"] .wb-request-rows { display: grid; margin: 0 0 10px; }
.wb[data-workspace-ui="guided"] .wb-request-row { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr); gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-request-row dt { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-request-row dd { margin: 0; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--g-t1); overflow-wrap: anywhere; white-space: pre-wrap; font-variant-numeric: tabular-nums; }
.wb[data-workspace-ui="guided"] .wb-request-hint { font-size: 12px; font-weight: 400; color: var(--g-t3); }
.wb[data-workspace-ui="guided"] .wb-request-notes { min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.wb[data-workspace-ui="guided"] .wb-request-blockers { margin: 10px 0; padding: 10px 12px 10px 30px; border: 1px solid var(--g-amber-line); border-radius: var(--g-r-card); background: var(--g-amber-soft); color: #FFE1AE; font-size: 13px; line-height: 1.55; }
.wb[data-workspace-ui="guided"] .wb-request-blockers li + li { margin-top: 4px; }
.wb[data-workspace-ui="guided"] .wb-request-main { flex: 1 1 100%; width: 100%; }
.wb[data-workspace-ui="guided"] .wb-request-quote { padding: 12px; border: 1px solid var(--g-line-2); border-left: 3px solid var(--g-ok); border-radius: var(--g-r-card); background: var(--g-raised); }
.wb[data-workspace-ui="guided"] .wb-request-quote [data-quote-amount="unknown"] { color: var(--g-amber-text); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-request-quote > a.wb-btn { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
.wb[data-workspace-ui="guided"] .wb-request-read .wb-btn { flex: 1 1 auto; }
.wb[data-workspace-ui="guided"] .wb-request-recovery { margin-top: 14px; }
.wb[data-workspace-ui="guided"] .wb-request-recovery a.wb-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 100%; text-decoration: none; }
.wb[data-workspace-ui="guided"] .wb-request-warning { color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-request-scope { margin-top: 14px; font-size: 12px; color: var(--g-t3); }
/* Received (green, like done) and an earlier request that needs re-linking (amber). */
.wb[data-workspace-ui="guided"] [data-step-state="sent"] .wb-request-step-n { border-color: var(--g-ok-line); background: var(--g-ok-soft); color: var(--g-ok); }
.wb[data-workspace-ui="guided"] [data-step-state="sent"] .wb-request-step-state { color: var(--g-ok); }
.wb[data-workspace-ui="guided"] :is([data-step-state="detached"], [data-step-state="review"], [data-step-state="stale"]) .wb-request-step-n { border-color: var(--g-amber-line); background: var(--g-amber-soft); color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] :is([data-step-state="detached"], [data-step-state="review"], [data-step-state="stale"]) .wb-request-step-state { color: var(--g-amber-text); }
/* Confirm and submit never share a spot: after 확정 a static chip takes the confirm
   button's place and the intake sits in its own block below it. */
.wb[data-workspace-ui="guided"] .wb-request-block { margin-top: 12px; }
.wb[data-workspace-ui="guided"] .wb-request-block > .wb-note:first-child { margin-top: 0; }
.wb[data-workspace-ui="guided"] .wb-request-final { padding: 12px; border: 1px solid var(--g-accent-line); border-radius: var(--g-r-card); background: var(--g-accent-soft); }
.wb[data-workspace-ui="guided"] .wb-request-final > .wb-h3:first-child { margin-top: 0; color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-request-done { display: flex; align-items: center; min-height: 44px; margin: 12px 0 0; padding: 0 12px; border: 1px solid var(--g-ok-line); border-radius: var(--g-r-ctl); background: var(--g-ok-soft); color: var(--g-ok); font-size: 13px; font-weight: 600; line-height: 1.4; }
.wb[data-workspace-ui="guided"] .wb-request-reason { color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-request-more { margin: 4px 0 8px; }
.wb[data-workspace-ui="guided"] .wb-request-more > .wb-request-rows { margin-top: 8px; }
.wb[data-workspace-ui="guided"] #wbRequestCancelRow .wb-btn { width: 100%; }
@media (forced-colors: active) {
  .wb[data-workspace-ui="guided"] :is(.wb-request-busy, .wb-request-gate, .wb-request-pending, .wb-request-blockers, .wb-request-quote, .wb-request-final, .wb-request-done) { border: 1px solid CanvasText; }
  .wb[data-workspace-ui="guided"] .wb-request-step-n { border: 1px solid CanvasText; }
}

/* ── 카메라로 할 일 (Claude 2026-10-14): why the camera, before how. Three
   tasks from Codex's facts, the camera way and the no-camera way side by
   side, then the chosen part and the existing tools it leads to. ── */
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--g-line-2); }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose p { margin: 0; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-title { margin: 0; color: var(--g-t1); font-size: 13.5px; font-weight: 650; line-height: 1.3; letter-spacing: 0; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-title:focus-visible { outline: 2px solid var(--g-accent-text); outline-offset: 2px; border-radius: 4px; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-pref { flex: none; padding: 2px 8px; border: 1px solid var(--g-line-2); border-radius: 999px; color: var(--g-t2); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-pref[data-preferred="camera"] { border-color: var(--g-accent-line); color: var(--g-accent-text); }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-pref[hidden] { display: none; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-rec { margin: 6px 0 10px; color: var(--g-t2); font-size: 12px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-intro { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-intro li { display: grid; gap: 2px; font-size: 12px; line-height: 1.45; color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-intro strong { color: var(--g-t1); font-weight: 650; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-option { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 56px; padding: 7px 8px; border: 1px solid var(--g-line-2); background: var(--g-fill); color: var(--g-t1); text-align: left; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-option[aria-pressed="true"] { border-color: var(--g-accent-line); background: var(--g-accent-soft); color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-option-name { font-size: 12.5px; font-weight: 650; line-height: 1.25; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-option-state { color: var(--g-t3); font-size: 12px; font-weight: 500; line-height: 1.3; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-option[data-state="ready"] .wb-camera-purpose-option-state { color: var(--g-ok); }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-option[data-state="blocked"] .wb-camera-purpose-option-state { color: var(--g-t4); }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-hint { color: var(--g-t3); font-size: 12px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-name { margin: 0 0 4px; color: var(--g-t1); font-size: 13px; font-weight: 650; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-benefit { margin: 0 0 8px; color: var(--g-t1); font-size: 12.5px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-status { padding: 7px 9px; border-left: 2px solid var(--g-accent-mid); border-radius: 0 8px 8px 0; background: var(--g-fill); color: var(--g-t1); font-size: 12px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-how { margin: 8px 0 0; padding-left: 16px; color: var(--g-t2); font-size: 12px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-how li + li { margin-top: 4px; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-act { width: 100%; padding: 6px 8px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-selected[data-empty] .wb-camera-purpose-act { width: auto; min-width: 50%; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-primary:not(:disabled) { border-color: transparent; background: var(--g-accent); color: #fff; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-primary:not(:disabled):hover { background: var(--g-accent-hover); }
/* “…사용 중” reports the active hand mode: readable, not faded like an unavailable action. */
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-act[aria-pressed="true"]:disabled { opacity: 1; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-selected { margin: 10px 0 0; padding: 10px; border: 1px solid var(--g-line-2); border-radius: var(--g-r-card); background: var(--g-sunken); }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-selected-heading { color: var(--g-t3); font-size: 12px; font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-selected-name { margin: 2px 0; color: var(--g-t1); font-size: 14px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-size { color: var(--g-t1); font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.45; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-basis { margin: 8px 0 6px; color: var(--g-t3); font-size: 12px; line-height: 1.45; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-note { margin: 0 0 6px; color: var(--g-t2); font-size: 12px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] .wb-camera-purpose-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-next button { padding: 6px 4px; font-size: 12px; font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-scope { margin: 10px 0 0; color: var(--g-t3); font-size: 12px; line-height: 1.45; }
/* Focus moved here from another tool lands below the guide's sticky summary. */
.wb[data-workspace-ui="guided"] .wb-camera-purpose :is(button, h3) { scroll-margin-top: 56px; }
.wb[data-workspace-ui="guided"] .wb-camera-guide-modes [data-guide="pick_part"] { grid-column: 1 / -1; }
.wb[data-workspace-ui="guided"] .wb-camera-guide-modes [hidden] { display: none; }

/* A short, narrow stage has no room for the tall pad above a readable guide.
   Measured by fitCameraGuide: keep the existing controls below the model and
   the guide above the companion. This never changes tool or input ownership. */
@media (min-width:860px) and (max-width:1099.98px) {
  /* An error adds a line above/below the stage. Keep recovery instructions from
     collapsing to a 64px strip while a practice is paused; the work area may scroll. */
  .wb[data-workspace-ui="guided"][data-model-ready]:not([data-preview]):not([data-focus-mode]):has(.wb-camera-guide-practice-bar:not([hidden])) .wb-main { grid-template-rows: max-content minmax(440px, 1fr) max-content; overflow-y: auto; }
}
@media (min-width:860px) {
  .wb[data-workspace-ui="guided"][data-model-ready][data-guide-dock="compact"] .wb-view-ctrl {
    top: auto; right: auto; left: calc(var(--fl, 0px) + 12px); bottom: calc(var(--fb, 0px) + 12px);
    grid-template-columns: repeat(4, 44px); grid-template-areas: "reset surface left right" "up down zin zout";
  }
  .wb[data-workspace-ui="guided"][data-guide-dock="compact"] .wb-camera-guide { max-height: min(600px, var(--wb-guide-room, 400px)); }
}
@media (forced-colors: active) {
  .wb[data-workspace-ui="guided"] :is(.wb-camera-purpose-selected, .wb-camera-purpose-pref, .wb-camera-purpose-status) { border: 1px solid CanvasText; }
  .wb[data-workspace-ui="guided"] .wb-camera-guide .wb-camera-purpose-option[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* F1-UI-A '이 작품으로 먼저 할 일' (Claude 2026-10-19), graphite skin. */
.wb[data-workspace-ui="guided"] .wb-first-purpose { border: 1px solid var(--g-line-2); border-radius: var(--g-r-card); background: var(--g-raised); }
.wb[data-workspace-ui="guided"] .wb-fp-title { color: var(--g-t1); font-size: 13.5px; font-weight: 650; line-height: 1.3; letter-spacing: 0; }
.wb[data-workspace-ui="guided"] .wb-fp-title:focus-visible { outline: 2px solid var(--g-accent-text); }
.wb[data-workspace-ui="guided"] .wb-fp-summary { color: var(--g-t2); font-size: 12px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] .wb-fp-option { border-color: var(--g-line-2); border-radius: var(--g-r-ctl); background: var(--g-fill); color: var(--g-t1); }
.wb[data-workspace-ui="guided"] .wb-fp-option:hover { background: var(--g-fill-2); }
.wb[data-workspace-ui="guided"] .wb-fp-option[aria-pressed="true"] { border-color: var(--g-accent-line); background: var(--g-accent-soft); }
.wb[data-workspace-ui="guided"] .wb-fp-option:focus-visible { outline: 2px solid var(--g-accent-text); }
.wb[data-workspace-ui="guided"] .wb-fp-label { font-size: 12.5px; font-weight: 650; }
.wb[data-workspace-ui="guided"] .wb-fp-hint { color: var(--g-t2); font-weight: 500; }
.wb[data-workspace-ui="guided"] .wb-fp-status { color: var(--g-t1); text-wrap: pretty; }
.wb[data-workspace-ui="guided"] .wb-fp-status[data-tone="attention"] { color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-fp-status:is([data-tone="limited"], [data-tone="busy"]) { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-fp-fact { border-top-color: var(--g-line); }
.wb[data-workspace-ui="guided"] .wb-fp-fact dt { color: var(--g-t3); font-weight: 600; }
.wb[data-workspace-ui="guided"] .wb-fp-fact dd { color: var(--g-t1); font-variant-numeric: tabular-nums; }
.wb[data-workspace-ui="guided"] .wb-fp-fact[data-tone="limited"] dd { color: var(--g-t2); }
.wb[data-workspace-ui="guided"] .wb-fp-fact[data-tone="attention"] dd { color: var(--g-amber-text); }
.wb[data-workspace-ui="guided"] .wb-fp-go { color: #FFFFFF; background: var(--g-accent); border-color: transparent; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .4); }
.wb[data-workspace-ui="guided"] .wb-fp-go:hover:not(:disabled) { background: var(--g-accent-hover); }
.wb[data-workspace-ui="guided"] .wb-fp-next .wb-note { color: var(--g-t2); font-size: 12px; line-height: 1.5; }
@media (forced-colors: active) {
  .wb[data-workspace-ui="guided"] :is(.wb-first-purpose, .wb-fp-option, .wb-fp-go) { border: 1px solid CanvasText; }
  .wb[data-workspace-ui="guided"] .wb-fp-option[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}