/* MODU3D 가상 제작실 (workbench.html 전용) — 홀로그램 작업대. 다른 화면의 전역 스타일을 바꾸지 않도록 .wb 아래만 꾸민다.
색 약속: 확정 모델·조작 = 청록 빛, 선택 = 흰빛, 수정안·영향 = 호박색, 오류 = 붉은빛.
넓은 화면(1100px 이상)은 3D 작업대가 화면 전체에 깔리고 패널이 그 위에 살짝 기울어 떠 있다(마우스·포커스가 오면 똑바로 선다).
움직임 줄이기 설정이면 전환·회전 연출을 멈춘다. */
html, body { background: #01060D; }
body { margin: 0; }
.wb {
--ink: #E3F8FF; --ink-hi: #F2FCFF; --t2: #A9D6E6; --t3: #86B9CC;
--line: rgba(84, 214, 255, .2); --line2: rgba(84, 214, 255, .36); --line3: rgba(130, 236, 255, .66);
--panel: rgba(4, 19, 34, .86); --panel-hi: rgba(10, 42, 70, .86);
--cyan: #39E0FF; --cyan2: #7BEAFF; --cyan-soft: rgba(57, 224, 255, .1);
--sel: #FFFFFF;
--aff: #FFB547; --aff-soft: rgba(255, 181, 71, .12); --aff-line: #FFB547;
--bad: #FF6B78; --bad-soft: rgba(255, 107, 120, .12);
--good: #4BE3A1; --good-soft: rgba(75, 227, 161, .12);
--mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
--r: 6px; --r-sm: 6px;
--top-h: 60px;
font-family: 'Toss Product Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
color: var(--ink);
background:
radial-gradient(1100px 640px at 50% 36%, rgba(16, 92, 140, .30), transparent 70%),
radial-gradient(820px 520px at 50% 115%, rgba(0, 170, 230, .14), transparent 70%),
linear-gradient(180deg, #020B16 0%, #01060D 62%);
min-height: 100vh; min-height: 100dvh;
color-scheme: dark;
-webkit-text-size-adjust: 100%;
}
.wb *, .wb *::before, .wb *::after { box-sizing: border-box; }
.wb, .wb * { scrollbar-width: thin; scrollbar-color: rgba(57, 224, 255, .35) transparent; }
.wb :where(button, input) { font: inherit; color: inherit; }
.wb :where(button) { cursor: pointer; }
.wb :focus-visible { outline: 2px solid var(--cyan2); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(57, 224, 255, .22); }
.wb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wb-skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: #04192C; color: var(--ink-hi); border: 1px solid var(--cyan); padding: 10px 14px; border-radius: 6px; text-decoration: none; }
.wb-skip:focus { top: 8px; }
/* ── 상단 ─────────────────────────────────────────────── */
.wb-top {
position: relative; z-index: 3;
display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
padding: 8px 18px; min-height: var(--top-h);
background: linear-gradient(180deg, rgba(5, 24, 42, .94), rgba(2, 12, 22, .84));
border-bottom: 1px solid var(--line);
}
.wb-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(57, 224, 255, .9) 22%, rgba(57, 224, 255, .9) 78%, transparent); opacity: .5; }
@media (min-width: 1100px) { .wb-top { flex-wrap: nowrap; } .wb-engine { flex: 1 1 auto; min-width: 0; } }
@media (min-width: 1100px) and (max-width: 1279.98px) { .wb-sys, .wb-engine-more { display: none; } }
.wb-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.wb-logo { font-weight: 800; color: var(--ink); text-decoration: none; font-size: 15px; padding: 0 2px; min-height: 44px; display: inline-flex; align-items: center; }
.wb-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; color: var(--ink-hi); text-shadow: 0 0 14px rgba(57, 224, 255, .55); }
.wb-sys { font: 600 12px/1 var(--mono); letter-spacing: .18em; color: var(--cyan2); border: 1px solid var(--line2); border-radius: 3px; padding: 5px 7px; background: rgba(57, 224, 255, .06); white-space: nowrap; }
.wb-sample { margin: 0; font-size: 13px; color: var(--aff); background: var(--aff-soft); border: 1px solid rgba(255, 181, 71, .45); padding: 5px 10px; border-radius: 4px; flex: none; }
.wb-engine { margin: 0; font-size: 13px; color: var(--t2); line-height: 1.5; }
.wb-engine b { color: var(--ink-hi); }
.wb[data-engine="local"] .wb-engine b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.wb-engine-warn { color: var(--aff); font-weight: 700; }
.wb[data-engine="none"] .wb-engine, .wb[data-engine="error"] .wb-engine { color: var(--bad); }
.wb-inputs { display: flex; gap: 6px; margin: 0 0 0 auto; padding: 0; list-style: none; flex-wrap: wrap; flex: none; }
.wb-input-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--t2); background: rgba(57, 224, 255, .04); border: 1px solid var(--line); padding: 5px 10px 5px 8px; border-radius: 4px; white-space: nowrap; }
.wb-input-chip::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #4F6B78; }
.wb-input-chip[data-state="denied"], .wb-input-chip[data-state="error"], .wb-input-chip[data-state="lost"], .wb-input-chip[data-state="ended"] { color: var(--bad); border-color: rgba(255, 107, 120, .5); background: var(--bad-soft); }
.wb-input-chip[data-state="denied"]::before, .wb-input-chip[data-state="error"]::before, .wb-input-chip[data-state="lost"]::before, .wb-input-chip[data-state="ended"]::before { background: var(--bad); }
.wb-input-chip[data-state="active"] { color: var(--good); border-color: rgba(75, 227, 161, .5); background: var(--good-soft); }
.wb-input-chip[data-state="active"]::before { background: var(--good); box-shadow: 0 0 8px var(--good); }
/* 카메라·음성 칩은 켜기·끄기 버튼이다(상태 글자 + 누르면 시작·중지). 켜는 중·확인 중은 청록 테두리, 연결 안 됨은 흐리게 */
.wb-input-btn { min-height: 44px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.wb-input-btn:hover { border-color: var(--line3); background: rgba(57, 224, 255, .12); }
.wb-input-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.wb-input-chip[data-state="busy"] { color: var(--cyan2); border-color: var(--line3); }
.wb-input-chip[data-state="busy"]::before { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.wb-input-chip[data-state="none"] { color: var(--t3); border-style: dashed; }
.wb-help-btn { min-height: 44px; flex: none; }
/* ── 버튼·입력 공통 ──────────────────────────────────── */
.wb-btn {
min-height: 44px; padding: 0 16px; border-radius: 6px;
border: 1px solid rgba(150, 240, 255, .85);
background: linear-gradient(180deg, #4BE5FF 0%, #1BB4E0 100%);
color: #00131F; font-weight: 800; font-size: 15px;
box-shadow: 0 0 16px rgba(57, 224, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
transition: box-shadow .15s, background-color .15s, border-color .15s, filter .15s;
}
.wb-btn:hover { filter: brightness(1.08); box-shadow: 0 0 26px rgba(57, 224, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .55); }
.wb-btn-ghost { background: rgba(57, 224, 255, .06); color: var(--ink); border-color: var(--line2); box-shadow: inset 0 0 12px rgba(57, 224, 255, .06); }
.wb-btn-ghost:hover { background: rgba(57, 224, 255, .15); border-color: var(--line3); filter: none; box-shadow: 0 0 14px rgba(57, 224, 255, .22); }
.wb-btn-sm { min-height: 44px; padding: 0 12px; font-size: 14px; }
.wb-btn-danger { background: rgba(255, 107, 120, .08); color: var(--bad); border-color: rgba(255, 107, 120, .55); box-shadow: none; }
.wb-btn[disabled], .wb-btn[aria-disabled="true"], .wb-icon-btn[disabled], .wb-icon-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; box-shadow: none; filter: saturate(.35); }
.wb-icon-btn { min-width: 44px; min-height: 44px; border-radius: 6px; border: 1px solid var(--line2); background: rgba(2, 14, 26, .8); color: var(--cyan2); font-size: 18px; line-height: 1; box-shadow: inset 0 0 10px rgba(57, 224, 255, .08); transition: background-color .15s, border-color .15s, color .15s; }
.wb-icon-btn:hover { background: rgba(57, 224, 255, .16); color: #FFFFFF; border-color: var(--line3); }
.wb-icon-text { font-size: 13.5px; font-weight: 700; padding: 0 10px; white-space: nowrap; }
.wb-view-ctrl .wb-icon-text { padding: 0 2px; font-size: 12.5px; }
.wb-input { min-height: 44px; border: 1px solid var(--line2); border-radius: 6px; padding: 0 12px; background: rgba(1, 10, 18, .8); color: var(--ink-hi); width: 100%; font-size: 16px; caret-color: var(--cyan); }
.wb-input::placeholder { color: #7FA9BA; }
.wb-input:focus-visible { border-color: var(--cyan); }
/* 막대: 가는 빛줄 + 빛나는 손잡이(누르는 영역은 막대 전체 44px) */
.wb-range { -webkit-appearance: none; appearance: none; width: 100%; min-height: 44px; margin: 0; background: transparent; accent-color: var(--cyan); }
.wb-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(57, 224, 255, .9), rgba(57, 224, 255, .25)); box-shadow: 0 0 8px rgba(57, 224, 255, .4); }
.wb-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; border: 1px solid #B8F6FF;
background: radial-gradient(circle, #FFFFFF 0 26%, #39E0FF 30% 58%, rgba(57, 224, 255, .25) 62%); box-shadow: 0 0 12px rgba(57, 224, 255, .85); }
.wb-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(57, 224, 255, .9), rgba(57, 224, 255, .25)); }
.wb-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #B8F6FF; background: radial-gradient(circle, #FFFFFF 0 26%, #39E0FF 30% 58%, rgba(57, 224, 255, .25) 62%); box-shadow: 0 0 12px rgba(57, 224, 255, .85); }
.wb-label { display: block; font-size: 13.5px; color: var(--t2); margin-top: 10px; }
.wb-note { font-size: 13px; color: var(--t3); margin: 6px 0 0; line-height: 1.55; }
.wb-h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; margin: 0 0 10px; color: var(--ink-hi); }
.wb-h2::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 10px var(--cyan); }
.wb-code { margin-left: auto; font: 600 12px/1 var(--mono); letter-spacing: .16em; color: #5FB8D3; }
.wb-h3 { font-size: 13.5px; font-weight: 800; margin: 14px 0 6px; color: var(--t2); }
.wb-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 3px; line-height: 1.5; border: 1px solid transparent; }
.wb-tag-sel { color: #FFFFFF; border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .1); }
.wb-tag-aff { color: var(--aff); border: 1px dashed var(--aff-line); background: var(--aff-soft); }
.wb-tag-hidden { color: var(--t3); border-color: var(--line2); }
.wb-tag-ghost { color: var(--aff); border: 1px dotted var(--aff-line); }
.wb-pill { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 3px; background: var(--cyan); color: #00131F; }
.wb-pill-warn { background: var(--aff); color: #1E1200; }
.wb-keys { width: 100%; margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.wb-keys .wb-keys-state { font-size: 13px; font-weight: 800; padding: 2px 10px; border-radius: 3px; background: rgba(57, 224, 255, .06); border: 1px solid var(--line2); }
.wb-keys[aria-pressed="true"] .wb-keys-state { background: var(--cyan); border-color: var(--cyan); color: #00131F; }
/* ── 홀로그램 패널: 유리판 + 모서리 괄호 + 윗변 빛줄(배경으로 그려 패널을 스크롤해도 제자리에 있다) ── */
.wb-panel, .wb-card, .wb-dock, .wb-joint { border: 1px solid var(--line2); border-radius: var(--r); }
.wb-holo {
--c: rgba(130, 236, 255, .85);
--bk: linear-gradient(var(--c), var(--c));
background:
var(--bk) left top / 16px 2px no-repeat border-box, var(--bk) left top / 2px 16px no-repeat border-box,
var(--bk) right top / 16px 2px no-repeat border-box, var(--bk) right top / 2px 16px no-repeat border-box,
var(--bk) left bottom / 16px 2px no-repeat border-box, var(--bk) left bottom / 2px 16px no-repeat border-box,
var(--bk) right bottom / 16px 2px no-repeat border-box, var(--bk) right bottom / 2px 16px no-repeat border-box,
linear-gradient(90deg, transparent, rgba(120, 232, 255, .55), transparent) center top / 78% 1px no-repeat border-box,
linear-gradient(165deg, var(--panel-hi), var(--panel) 55%) border-box;
box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .3), inset 0 0 28px rgba(57, 224, 255, .05);
}
/* ── 본문 배치(기본: 모든 영역을 보여 준다. 좁은 화면에서만 탭으로 나눈다) ── */
.wb-main { display: grid; gap: 12px; padding: 12px; }
.wb-panel, .wb-dock { padding: 14px; }
.wb-card { padding: 14px; }
.wb-side { padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; gap: 12px; }
.wb-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wb-dock { display: flex; flex-direction: column; min-height: 0; }
.wb-tabs { display: none; }
/* 검토 카드: 내용은 스크롤되고 적용·취소 버튼은 카드 아래에 늘 보인다 */
.wb-review { display: flex; flex-direction: column; min-height: 0; }
.wb-review > .wb-h2 { flex: none; }
#wbReviewBody { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.wb-review-main { min-height: 0; flex: 0 1 auto; overflow: auto; }
.wb-review-actions { flex: none; display: flex; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); }
.wb-review-actions .wb-btn { flex: 1; }
/* Copy comparison stays reachable while the detailed evidence scrolls. */
.wb .wb-copy-compare { flex: none; margin: 0 0 8px; }
.wb .wb-copy-compare > .wb-btn { flex: 1 1 0; min-width: 0; }
/* ── 3D 작업대 ───────────────────────────────────────── */
.wb-stage { position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line2); min-height: 320px;
background: radial-gradient(120% 90% at 50% 34%, rgba(14, 70, 110, .55) 0%, rgba(2, 12, 22, .9) 62%, #01060D 100%); }
.wb-viewport { position: absolute; inset: 0; }
.wb-canvas-host { position: absolute; inset: 0; touch-action: none; outline: none; }
.wb-canvas-host:focus-visible { outline: none; box-shadow: none; }
.wb-canvas-host canvas { display: block; width: 100%; height: 100%; }
/* Static background beneath the alpha canvas; source materials stay untouched. */
.wb-canvas-host.wb-hologram-background {
background-color: #03111f;
background-image: radial-gradient(ellipse at 50% 54%, rgba(24, 151, 190, .22), transparent 66%),
linear-gradient(rgba(80, 176, 211, .08) 1px, transparent 1px),
linear-gradient(90deg, rgba(80, 176, 211, .08) 1px, transparent 1px),
linear-gradient(#061a2d, #020a15);
background-size: auto, 40px 40px, 40px 40px, auto;
background-position: center;
}
.wb-camera-guide-presentation { margin: 8px 0 12px; padding: 9px; border: 1px solid var(--line2, #396276); border-radius: 8px; }
.wb-camera-guide-presentation[hidden] { display: none; }
.wb-camera-guide-presentation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 7px 0; }
.wb-camera-guide-presentation-options button { min-height: 44px; white-space: normal; }
.wb-camera-guide .wb-camera-guide-presentation-note { margin: 0; color: var(--ink, #c4d7e2); font-size: 12px; line-height: 1.5; }
.wb-camera-guide .wb-camera-guide-presentation-status:empty { display: none; }
.wb-camera-guide .wb-camera-guide-presentation-status { margin: 7px 0 0; }
/* 홀로그램 화면 결: 아주 옅은 가로줄 + 가장자리 어둡게(모델·꼬리표 위, 버튼 아래) */
.wb-canvas-host::after { content: ''; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(180deg, rgba(130, 236, 255, .035) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0, 4, 10, .55) 100%); }
.wb-camera-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: .55; transform: scaleX(-1); filter: saturate(.7) contrast(1.05); }
.wb-camera-layer[hidden] { display: none; }
/* 카메라·음성이 멈췄을 때: 원인과 [다시 켜기]를 작업대 아래쪽에 띄운다(같은 멈춤은 닫으면 다시 띄우지 않는다) */
.wb-input-alert { position: absolute; left: 12px; right: 12px; bottom: 64px; z-index: 4; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.wb-input-alert[hidden] { display: none; }
/* Imported-model status shares the measured tool bar, outside the 3D overlays.
Hidden/off status takes no row; long instructions wrap without clipping. */
.wb[data-workspace-ui="guided"] .wb-tabs:has(> #wbInputAlert:not([hidden])) { flex-wrap: wrap; }
.wb[data-workspace-ui="guided"] .wb-tabs > #wbInputAlert {
position: static; inset: auto; order: 5; flex: 0 0 100%; width: 100%; min-width: 0;
margin: 0; padding: 6px 0 0; border-top: 1px solid var(--g-line, var(--line));
}
.wb[data-workspace-ui="guided"] .wb-tabs > #wbInputAlert p { margin: 0; overflow-wrap: anywhere; }
.wb-input-alert-row { pointer-events: auto; margin: 0 auto; max-width: 540px; width: 100%; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 6px 8px 6px 12px; border-radius: 6px;
border: 1px solid rgba(255, 107, 120, .7); background: rgba(30, 6, 12, .92); box-shadow: 0 0 22px rgba(255, 107, 120, .22); color: #FFD5DA; font-size: 13px; line-height: 1.45; }
.wb-input-alert-row p { margin: 0; flex: 1 1 260px; }
.wb-input-alert-row b { color: #FF9AA4; margin-right: 6px; }
.wb-input-alert-btns { display: flex; gap: 6px; flex: none; }
.wb-empty .wb-btn { margin-top: 6px; }
/* 모델 영역 틀: 네 모서리 괄호와 아래 눈금자. 작업대에 키보드 포커스가 오면 틀이 밝아진다 */
.wb-hud-deco { position: absolute; left: 6px; right: 6px; top: 6px; bottom: 6px; pointer-events: none; border-radius: 4px; }
.wb-hud-deco::before { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(24, 120, 180, .16), transparent); }
.wb-hud-deco::after { content: ''; position: absolute; left: 44px; right: 44px; bottom: 2px; height: 7px; opacity: .55;
background: repeating-linear-gradient(90deg, rgba(130, 236, 255, .6) 0 1px, transparent 1px 14px);
-webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.wb-hud-c { position: absolute; width: 24px; height: 24px; border: 0 solid rgba(130, 236, 255, .55); }
.wb-hud-c.tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.wb-hud-c.tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.wb-hud-c.bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.wb-hud-c.br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.wb-canvas-host:focus-visible ~ .wb-hud-deco { outline: 2px solid var(--cyan2); outline-offset: -2px; box-shadow: inset 0 0 24px rgba(57, 224, 255, .25); }
.wb-canvas-host:focus-visible ~ .wb-hud-deco .wb-hud-c { border-color: #FFFFFF; }
/* renderer가 그리는 꼬리표·지시선·선택 괄호·치수 글자 */
.wb-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wb-leaders { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.wb-leaders line { stroke: rgba(130, 236, 255, .72); stroke-width: 1; }
.wb-leaders line.ghost { stroke: rgba(255, 181, 71, .9); stroke-dasharray: 3 3; }
.wb-leaders circle { fill: #9CF2FF; }
.wb-leaders circle.ghost { fill: var(--aff); }
.wb-bracket { fill: none; stroke: #FFFFFF; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(57, 224, 255, .95)); }
.wb-label3d { position: absolute; transform: translate(-50%, -100%); display: grid; grid-template-columns: auto 1fr; justify-items: start; align-items: baseline; column-gap: 6px;
padding: 4px 9px 5px; background: rgba(2, 14, 26, .86); border: 1px solid rgba(130, 236, 255, .5); border-left: 3px solid var(--cyan); border-radius: 2px;
font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--ink-hi); box-shadow: 0 0 16px rgba(57, 224, 255, .22); }
.wb-label3d small { font-size: 12px; font-weight: 700; color: var(--cyan2); }
.wb-label3d .wb-ln-detail { grid-column: 1 / -1; font: 600 12px/1.45 var(--mono); color: var(--t2); }
.wb-labels[data-imported] .wb-label3d { box-sizing: border-box; min-width: 0; max-width: 260px; grid-template-columns: minmax(0, 1fr) auto; }
.wb-labels[data-imported] .wb-ln-name,
.wb-labels[data-imported] .wb-ln-detail { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-label3d[data-selected] { border-color: rgba(255, 255, 255, .85); border-left-color: #FFFFFF; box-shadow: 0 0 22px rgba(57, 224, 255, .45); }
.wb-label3d[data-selected] small { color: #FFFFFF; }
.wb-label3d[data-affected] { border-style: dashed; border-color: rgba(255, 181, 71, .85); border-left: 3px solid var(--aff); }
.wb-label3d[data-affected] small { color: var(--aff); }
.wb-label3d[data-ghost] { color: var(--aff); border: 1px dashed rgba(255, 181, 71, .9); border-left: 3px solid var(--aff); background: rgba(24, 15, 2, .86); box-shadow: 0 0 16px rgba(255, 181, 71, .2); }
.wb-label3d[data-ghost] small { color: #FFD08A; }
.wb-dim-label { position: absolute; z-index: 1; transform: translate(-50%, 0); padding: 2px 7px; font: 700 12.5px/1.4 var(--mono); color: #CFF7FF; white-space: nowrap;
background: rgba(2, 14, 26, .8); border: 1px solid rgba(130, 236, 255, .45); border-radius: 2px; }
.wb-dim-label-ghost { color: var(--aff); border-color: rgba(255, 181, 71, .7); background: rgba(24, 15, 2, .82); }
/* 작업대 위 상태 줄 */
.wb-stage-strip { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.wb-strip-item { font-size: 12.5px; font-weight: 700; color: var(--ink-hi); background: rgba(2, 14, 26, .78); border: 1px solid var(--line2); border-radius: 3px; padding: 4px 8px; font-variant-numeric: tabular-nums; }
.wb-strip-item[data-kind="preview"] { color: var(--aff); border: 1px dashed var(--aff-line); background: rgba(24, 15, 2, .8); }
.wb-strip-item[data-kind="sel"] { color: #FFFFFF; border-color: rgba(255, 255, 255, .85); }
.wb-strip-item[data-kind="moving"] { color: var(--cyan2); border-color: var(--line3); }
.wb-strip-item[data-kind="note"] { font-weight: 600; color: var(--t2); }
.wb-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: rgba(1, 6, 13, .9); }
.wb-empty[hidden] { display: none; }
.wb-empty h3 { margin: 0; font-size: 17px; color: var(--ink-hi); text-shadow: 0 0 12px rgba(57, 224, 255, .5); }
.wb-empty p { margin: 0; color: var(--t2); font-size: 14.5px; line-height: 1.6; max-width: 34em; }
.wb-view-ctrl { position: absolute; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 56%; }
.wb-view-ctrl [hidden] { display: none; }
.wb-motion[aria-pressed="false"] { color: var(--t3); border-style: dashed; }
/* 접힘 칸: 각도 계기(장식) + 막대 + 버튼 */
.wb-joint { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; }
.wb-dial { width: 72px; height: 72px; overflow: visible; }
.wb-dial-track { fill: rgba(57, 224, 255, .05); stroke: rgba(57, 224, 255, .22); stroke-width: 2; }
.wb-dial-ticks { fill: none; stroke: rgba(130, 236, 255, .5); stroke-width: 3; stroke-dasharray: 1 4.236; transform-origin: 32px 32px; }
.wb[data-folding] .wb-dial-ticks { animation: wb-spin 6s linear infinite; } /* 접었다 펴는 동안만 돈다(상태를 보여 주는 움직임) */
.wb-dial-range { fill: none; stroke: rgba(57, 224, 255, .22); stroke-width: 4; stroke-linecap: round; }
.wb-dial-arc { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(57, 224, 255, .9)); }
.wb-dial-needle { stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(57, 224, 255, .9)); }
.wb-dial-hub { fill: var(--cyan2); }
.wb-dial-text { fill: var(--ink-hi); font: 700 12px var(--mono); }
.wb-joint-body { min-width: 0; }
.wb-joint-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wb-joint-title { font-size: 13.5px; font-weight: 800; color: var(--ink-hi); }
.wb-joint-val { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 각도는 계기에 크게 보인다 */
.wb-joint-btns { display: flex; gap: 6px; }
.wb-joint-btns .wb-btn { flex: 1; white-space: nowrap; padding: 0 10px; font-size: 13.5px; }
.wb-joint .wb-note { font-size: 12px; margin-top: 4px; }
@keyframes wb-spin { to { transform: rotate(360deg); } }
/* ── 부품 목록 ───────────────────────────────────────── */
.wb-part-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wb-part { border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: rgba(57, 224, 255, .035); transition: box-shadow .15s, border-color .15s; }
.wb-part[data-selected] { border-color: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 18px rgba(57, 224, 255, .3); background: rgba(57, 224, 255, .08); }
.wb-part[data-affected] { box-shadow: inset 0 0 0 2px rgba(255, 181, 71, .45); }
.wb-part[data-selected][data-affected] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 3px rgba(255, 181, 71, .5), 0 0 18px rgba(57, 224, 255, .3); }
.wb-part-main { width: 100%; text-align: left; border: 0; background: none; padding: 4px; min-height: 44px; border-radius: 4px; display: grid; grid-template-columns: 14px 1fr; gap: 2px 8px; align-items: center; color: var(--ink); }
.wb-part-swatch { width: 11px; height: 11px; margin-left: 1px; border-radius: 2px; grid-row: span 2; transform: rotate(45deg); background: var(--sw, #4ADFFF); box-shadow: 0 0 10px var(--sw, #4ADFFF); }
.wb-part-name { font-weight: 800; font-size: 15px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--ink-hi); }
.wb-part-dims { font-size: 12.5px; line-height: 1.5; color: var(--t2); font-variant-numeric: tabular-nums; }
.wb-part-tools { display: flex; gap: 6px; margin-top: 6px; }
.wb-part-tools .wb-btn { flex: 1; font-size: 13px; padding: 0 6px; }
.wb-part-tools .wb-btn[aria-pressed="true"] { background: var(--cyan); color: #00131F; border-color: var(--cyan); }
.wb-explode-btns { display: flex; gap: 6px; }
.wb-explode-btns .wb-btn { flex: 1; padding: 0 8px; }
.wb-nudge-btns { display: flex; gap: 6px; }
.wb-nudge-btns .wb-icon-btn { flex: 1; }
/* ── 검토 ────────────────────────────────────────────── */
.wb-review[data-state="ready"], .wb-review[data-state="committing"] { --c: #FFB547; border-color: rgba(255, 181, 71, .85);
box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 181, 71, .55), 0 0 30px rgba(255, 181, 71, .18), inset 0 0 28px rgba(255, 181, 71, .05); }
.wb-review[data-state="failed"], .wb-review[data-state="uncertain"], .wb-review[data-state="stale"] { --c: #FF6B78; border-color: rgba(255, 107, 120, .85);
box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 107, 120, .5), 0 0 26px rgba(255, 107, 120, .16); }
.wb-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wb-review-sum { font-size: 17px; font-weight: 800; margin: 2px 0 6px; font-variant-numeric: tabular-nums; color: var(--ink-hi); }
.wb-review-aff { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.wb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wb-table th, .wb-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.wb-table th { font-size: 12.5px; color: var(--t2); font-weight: 700; }
.wb-table td.num { text-align: right; font-family: var(--mono); }
.wb-table td.after { font-weight: 800; color: var(--aff); }
.wb-reason { font-size: 13.5px; color: var(--t2); margin: 6px 0 0; line-height: 1.55; }
.wb-msg-bad { color: var(--bad); font-weight: 700; }
.wb-empty-text { color: var(--t3); font-size: 14px; line-height: 1.6; margin: 0; }
/* ── 치수·이력·제작 준비 ─────────────────────────────── */
.wb-param { display: grid; grid-template-columns: 1fr; gap: 6px; }
.wb-param-row { display: flex; gap: 6px; align-items: center; }
.wb-param-row .wb-input { flex: 1; min-width: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wb-param-unit { font-size: 14px; color: var(--t2); }
.wb-param-meta { font-size: 12.5px; color: var(--t3); }
.wb-dim-list { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.wb-dim-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wb-dim-list li span:first-child { color: var(--t2); }
.wb-dim-list li span:last-child { font-family: var(--mono); font-size: 12.5px; text-align: right; }
.wb-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wb-hist li { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(57, 224, 255, .03); }
.wb-hist li[data-current] { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 14px rgba(57, 224, 255, .2); }
.wb-hist-rev { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-hi); }
.wb-hist-sum { font-size: 13.5px; color: var(--t2); flex: 1; min-width: 8em; }
.wb-hist .wb-btn { min-height: 44px; font-size: 13px; padding: 0 10px; }
.wb-make dl, .wb-kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 13.5px; }
.wb-kv dt { color: var(--t2); }
.wb-kv dd { margin: 0; font-weight: 700; }
.wb-files-title { margin: 12px 0 6px; font-size: 13.5px; font-weight: 800; }
.wb-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wb-file { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 6px; text-decoration: none; color: var(--cyan2); background: rgba(57, 224, 255, .05); }
.wb-file:hover { background: rgba(57, 224, 255, .14); border-color: var(--line3); }
.wb-file-name { font-weight: 800; font-size: 13.5px; overflow-wrap: anywhere; }
.wb-file-meta { font-size: 12.5px; color: var(--t2); }
/* 파일 재검사 결과: 검사 범위를 함께 쓴다(출력·실물 검증 전) */
.wb-verify { margin-top: 10px; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(75, 227, 161, .55); background: var(--good-soft); }
.wb-verify-main { margin: 0; font-size: 13.5px; font-weight: 800; color: #C9F7E3; line-height: 1.5; }
.wb-verify-main::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); vertical-align: 1px; }
.wb-verify-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--t2); }
.wb-verify-detail { margin-top: 6px; font-size: 12.5px; color: var(--t2); }
.wb-verify-detail summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--cyan2); font-weight: 700; }
.wb-verify-detail p { margin: 4px 0; line-height: 1.55; }
.wb-verify-files { margin: 6px 0 0; padding-left: 16px; line-height: 1.55; }
.wb-verify-files ul { margin: 2px 0 6px; padding-left: 14px; font-size: 12px; font-variant-numeric: tabular-nums; }
.wb-verify-frame { display: block; color: var(--t3); font-size: 12px; }
.wb-prep-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
/* 계정 저장 */
.wb-save-title { margin: 0; font-size: 14.5px; color: var(--ink-hi); overflow-wrap: anywhere; }
.wb-save-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wb-save-btns .wb-btn { flex: 1 1 auto; font-size: 14px; padding: 0 12px; }
.wb-save-new { margin-top: 4px; }
.wb-save-new .wb-param-row .wb-input { text-align: left; font-family: inherit; }
.wb-save-new .wb-btn { flex: none; font-size: 14px; padding: 0 12px; }
.wb-save-recovery { margin-top: 10px; width: 100%; }
.wb-btn-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 10px; width: 100%; }
.wb-busy { color: var(--cyan2); }
/* ── 대화·명령 ───────────────────────────────────────── */
.wb-log { list-style: none; margin: 0 0 8px; padding: 0; flex: 1; min-height: 60px; max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.wb-log li { font-size: 14px; line-height: 1.5; padding: 6px 10px; border-radius: 6px; background: rgba(57, 224, 255, .05); border: 1px solid transparent; max-width: 92%; color: var(--ink); }
.wb-log li[data-role="user"] { align-self: flex-end; background: rgba(57, 224, 255, .14); border-color: rgba(57, 224, 255, .3); }
.wb-log li[data-role="engine"] { border-color: var(--line); }
.wb-log li[data-tone="bad"] { background: var(--bad-soft); color: #FFC2C8; border-color: rgba(255, 107, 120, .4); }
.wb-who { font-size: 12px; font-weight: 800; color: var(--cyan2); margin-right: 6px; }
.wb-question { border: 1px solid var(--cyan); border-radius: 6px; padding: 10px; margin-bottom: 8px; background: rgba(57, 224, 255, .08); box-shadow: 0 0 20px rgba(57, 224, 255, .18); flex: none; }
.wb-question p { margin: 0 0 8px; font-weight: 700; font-size: 14.5px; color: var(--ink-hi); }
.wb-question-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-question-btns .wb-btn { flex: 1 1 auto; }
.wb-cmd { display: flex; gap: 6px; flex: none; align-items: center; }
.wb-prompt { flex: none; color: var(--cyan); font-size: 16px; text-shadow: 0 0 8px var(--cyan); }
.wb-cmd .wb-input { flex: 1; min-width: 0; }
.wb-cmd .wb-btn { flex: none; padding: 0 12px; }
.wb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; flex: none; }
.wb-chip { min-height: 44px; border: 1px solid var(--line2); background: rgba(57, 224, 255, .06); color: var(--ink); border-radius: 999px; padding: 0 12px; font-size: 13.5px; font-weight: 600; transition: background-color .15s, border-color .15s; }
.wb-chip:hover { background: rgba(57, 224, 255, .16); border-color: var(--line3); }
/* 음성: 듣는 동안 [말하기 끝내기]가 붉은 점으로 보인다. 자막 줄은 읽기 프로그램에는 숨긴다(끝난 응답은 대화 기록에 남는다) */
#wbMic[data-listening] { background: rgba(255, 107, 120, .16); border-color: var(--bad); color: #FFD5DA; }
#wbMic[data-listening]::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px var(--bad); vertical-align: 1px; }
.wb-caption { margin: 6px 0 0; font-size: 13px; color: var(--cyan2); line-height: 1.5; padding: 4px 8px; border-left: 2px solid var(--cyan); background: rgba(57, 224, 255, .06); flex: none; }
.wb-caption[hidden] { display: none; }
.wb-log li[data-role="ai"] { border-color: var(--line2); background: rgba(57, 224, 255, .09); }
/* ── 도움말 ──────────────────────────────────────────── */
.wb-dialog { border: 1px solid var(--line3); border-radius: 8px; padding: 20px; color: var(--ink); max-width: min(520px, calc(100vw - 24px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(57, 224, 255, .15); }
.wb-dialog::backdrop { background: rgba(0, 6, 14, .72); }
.wb-help-list { padding-left: 18px; line-height: 1.9; font-size: 14.5px; }
.wb-dialog kbd { font-family: var(--mono); font-size: 12.5px; color: var(--ink-hi); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; background: rgba(57, 224, 255, .08); }
.wb-noscript { padding: 20px; }
/* 저장한 설계 열기 */
.wb-open-dlg { width: min(560px, calc(100vw - 24px)); }
.wb-open-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.wb-open-item { width: 100%; text-align: left; min-height: 48px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line2); background: rgba(57, 224, 255, .05); color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.wb-open-item:hover { background: rgba(57, 224, 255, .14); border-color: var(--line3); }
.wb-open-name { font-weight: 800; color: var(--ink-hi); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wb-open-meta { font-size: 12.5px; color: var(--t2); }
.wb-open-head { margin: 0 0 6px; }
.wb-dlg-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
/* ── 화면 크기별 배치 (기본 규칙보다 뒤에 둔다: 같은 선택자는 뒤의 규칙이 이긴다) ── */
@media (min-width: 1100px) {
/* 넓은 화면: 3D 작업대가 본문 전체에 깔리고, 부품(왼쪽)·검토와 치수(오른쪽)·접힘과 대화(아래)가 그 위에 떠 있다 */
.wb { height: 100vh; height: 100dvh; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; }
.wb-main {
--wb-lw: 296px; --wb-rw: 384px;
--fl0: calc(var(--wb-lw) + 28px); --fr0: calc(var(--wb-rw) + 28px); --fb0: 280px;
position: relative; flex: 1; min-height: 0;
grid-template-columns: var(--wb-lw) minmax(0, 1fr) var(--wb-rw);
grid-template-rows: minmax(0, 1fr) auto;
grid-template-areas: "parts free right" "joint dock right";
padding: 14px; gap: 14px;
}
.wb-stage { position: absolute; inset: 0; z-index: 0; min-height: 0; border: 0; border-radius: 0; background: none; overflow: hidden; }
.wb-parts { grid-area: parts; overflow: auto; z-index: 1; }
.wb-right { grid-area: right; z-index: 1; min-height: 0; }
.wb-review { flex: none; max-height: 52vh; overflow: hidden; }
.wb-side { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px; }
.wb-joint { grid-area: joint; z-index: 1; overflow: auto; }
.wb-dock { grid-area: dock; z-index: 1; height: clamp(212px, 29vh, 264px); overflow: auto; }
.wb-log { flex: 1 1 auto; min-height: 44px; max-height: none; }
/* 자주 쓰는 명령은 한 줄로(옆으로 넘겨 보기), 질문이 떠 있으면 잠시 숨긴다 */
.wb-chips { flex-wrap: nowrap; overflow-x: auto; padding: 4px 3px 6px; margin-top: 4px; }
.wb-chip { flex: none; }
.wb[data-question] .wb-chips { display: none; }
/* 작업대 위 표시: 패널 사이 빈 영역(JS가 --fl·--fr·--fb로 알려 준다)에 맞춘다 */
.wb-stage-strip { left: calc(var(--fl, var(--fl0)) + 12px); right: calc(var(--fr, var(--fr0)) + 70px); top: 12px; }
.wb-hud-deco { left: calc(var(--fl, var(--fl0)) + 4px); right: calc(var(--fr, var(--fr0)) + 4px); top: 4px; bottom: calc(var(--fb, var(--fb0)) + 4px); }
.wb-empty { left: var(--fl, var(--fl0)); right: var(--fr, var(--fr0)); bottom: var(--fb, var(--fb0)); background: transparent; }
.wb-input-alert { left: calc(var(--fl, var(--fl0)) + 12px); right: calc(var(--fr, var(--fr0)) + 70px); bottom: calc(var(--fb, var(--fb0)) + 12px); }
.wb-view-ctrl {
top: 52px; right: calc(var(--fr, var(--fr0)) + 12px); bottom: auto; left: auto;
display: grid; grid-template-columns: 44px; gap: 4px; max-width: none;
}
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
/* 패널이 작업대 쪽으로 살짝 기울어 떠 있다(마우스 환경만). 마우스·키보드가 오면 똑바로 선다(읽기·누르기 편하게) */
.wb-parts { transform-origin: 0 50%; transform: perspective(1500px) rotateY(5deg); }
.wb-right { transform-origin: 100% 50%; transform: perspective(1500px) rotateY(-5deg); }
.wb-dock { transform-origin: 50% 100%; transform: perspective(1500px) rotateX(4deg); }
.wb-joint { transform-origin: 0 100%; transform: perspective(1500px) rotateX(4deg) rotateY(3deg); }
.wb-parts, .wb-right, .wb-dock, .wb-joint { transition: transform .32s ease; }
.wb-parts:hover, .wb-parts:focus-within, .wb-right:hover, .wb-right:focus-within,
.wb-dock:hover, .wb-dock:focus-within, .wb-joint:hover, .wb-joint:focus-within { transform: none; }
}
@media (min-width: 1100px) and (min-height: 761px) { .wb-dial { width: 88px; height: 88px; } }
@media (min-width: 1100px) and (max-width: 1279.98px) { .wb-main { --wb-lw: 256px; --wb-rw: 340px; } }
@media (min-width: 1100px) and (max-height: 860px) {
/* 질문이 떠 있으면 같은 문장이 든 대화 기록·도움 문장을 잠시 접어 질문·입력 칸이 함께 보이게 한다 */
.wb[data-question] .wb-log, .wb[data-question] #wbCmdNote { display: none; }
.wb-question { padding: 8px; }
.wb-view-ctrl { grid-template-columns: 44px 44px; } /* 보기 버튼 두 줄(빈 영역이 낮아도 다 보이게) */
}
@media (min-width: 1100px) and (max-height: 760px) {
/* 낮은 노트북 화면: 작업대에 높이를 더 주고 대화 칸과 접힘 칸을 줄인다(대화 칸 제목은 읽기 프로그램에만) */
.wb-top { min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
.wb-main { padding: 10px; gap: 10px; --fl0: calc(var(--wb-lw) + 20px); --fr0: calc(var(--wb-rw) + 20px); --fb0: 210px; }
.wb-review { max-height: 46vh; }
.wb-dock { padding: 10px 14px; height: 196px; }
.wb-dock > .wb-h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wb-log { min-height: 36px; margin-bottom: 6px; }
.wb-chips { margin-top: 6px; }
.wb-joint { padding: 8px 12px; }
}
@media (min-width: 1100px) and (max-height: 760px) and (pointer: fine) { .wb-joint .wb-range { min-height: 36px; } }
@media (min-width: 721px) and (max-width: 1099.98px) {
/* 태블릿: 왼쪽은 작업대 → 접힘 → 대화·명령 → 부품, 오른쪽은 검토 → 치수·버전·제작 준비 */
.wb-main {
grid-template-columns: minmax(0, 1fr) 320px;
grid-template-rows: auto auto auto 1fr;
grid-template-areas: "stage right" "joint right" "dock right" "parts right";
align-items: start;
}
/* 오른쪽 목록이 길어져도 작업대가 같이 늘어나지 않게 높이를 정해 둔다 */
.wb-stage { grid-area: stage; height: min(66vh, 640px); min-height: 440px; align-self: start; }
.wb-right { grid-area: right; }
.wb-joint { grid-area: joint; }
.wb-dock { grid-area: dock; }
.wb-parts { grid-area: parts; }
.wb-review { max-height: 60vh; overflow: hidden; }
}
@media (max-width: 720.98px) {
.wb-top { padding: 6px 10px; gap: 4px 8px; min-height: 0; }
.wb-title { font-size: 17px; }
.wb-sys { display: none; }
.wb-help-btn { margin-left: auto; }
.wb-sample { order: 5; font-size: 12.5px; padding: 3px 8px; }
.wb-engine { order: 6; width: 100%; font-size: 12.5px; line-height: 1.45; }
.wb-engine-more { display: none; }
.wb-inputs { order: 7; margin: 0; width: 100%; gap: 4px; }
.wb-input-chip { font-size: 12px; padding: 2px 8px 2px 6px; }
.wb-main { padding: 8px; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.wb-right { display: contents; }
.wb-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; position: sticky; top: 0; z-index: 5; background: rgba(1, 6, 13, .94); padding: 4px 0; }
.wb-tab { min-height: 44px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(4, 20, 35, .9); color: var(--ink); font-size: 14px; font-weight: 700; padding: 0 4px; white-space: nowrap; }
.wb-tab[aria-pressed="true"] { background: var(--cyan); color: #00131F; border-color: var(--cyan); box-shadow: 0 0 14px rgba(57, 224, 255, .4); }
/* 탭으로 고른 영역만 보인다(기본 규칙보다 우선하도록 .wb를 붙인다) */
.wb .wb-parts, .wb .wb-review, .wb .wb-side, .wb .wb-dock { display: none; }
.wb-side > .wb-card { display: none; }
.wb[data-tab="parts"] .wb-parts { display: block; }
.wb[data-tab="review"] .wb-review { display: flex; }
.wb[data-tab="review"] .wb-side, .wb[data-tab="review"] #wbDims, .wb[data-tab="review"] #wbMake { display: block; }
.wb[data-tab="history"] .wb-side, .wb[data-tab="history"] #wbHistoryCard, .wb[data-tab="history"] #wbSave { display: block; }
.wb[data-tab="dock"] .wb-dock { display: flex; }
/* 수정안·실패·확인 필요가 있으면 어떤 영역을 보고 있든 검토 창을 화면 아래에 띄운다(모델은 위에 그대로 보인다) */
.wb[data-preview] .wb-review {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
max-height: 50vh; max-height: 50dvh; overflow: hidden; border-radius: 12px 12px 0 0;
background-color: #031220;
box-shadow: 0 -10px 40px rgba(0, 0, 0, .65), 0 -1px 0 rgba(130, 236, 255, .5); padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.wb[data-preview] .wb-main { padding-bottom: 52vh; }
/* 아래 검토 창 뒤로 포커스가 숨지 않게 스크롤 여백을 둔다 */
:root:has(.wb[data-preview]) { scroll-padding-bottom: 52vh; }
}
@media (max-width: 720.98px) {
.wb-stage { position: static; overflow: visible; min-height: 0; background: none; border: 0; border-radius: 0; }
.wb-viewport { position: relative; inset: auto; height: 42vh; height: 42dvh; min-height: 240px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line2);
background: radial-gradient(120% 90% at 50% 34%, rgba(14, 70, 110, .55) 0%, rgba(2, 12, 22, .9) 62%, #01060D 100%); }
.wb-joint { padding: 10px 12px; }
.wb-dial { width: 64px; height: 64px; }
.wb-view-ctrl { left: 8px; right: 8px; bottom: 8px; max-width: none; justify-content: space-between; gap: 4px; }
.wb-view-ctrl .wb-icon-btn { flex: 1; min-width: 44px; }
.wb-strip-item[data-kind="note"] { display: none; } /* 좁은 화면: 같은 내용이 머리말 표시에 있다 */
.wb-stage-strip { left: 8px; top: 8px; right: 8px; gap: 4px; }
.wb-strip-item { font-size: 12px; padding: 3px 6px; }
.wb-hud-deco::after { display: none; }
/* 좁은 화면: 모델을 가리지 않게 3D 화면 바로 아래에 놓는다 */
.wb-input-alert { position: static; margin-top: 8px; }
.wb-input-alert-row { max-width: none; padding: 6px 8px 6px 10px; }
}
@media (max-width: 420px) {
.wb-pitch { display: none; }
/* 아주 좁은 화면: 펼침·각도 숫자는 바로 아래 막대에도 있어 작업대 위에서는 뺀다(모델을 덜 가린다) */
.wb-strip-item[data-kind="explode"], .wb-strip-item[data-kind="angle"] { display: none; }
}
@media (max-width: 380px) {
.wb-cmd { flex-wrap: wrap; }
.wb-prompt { display: none; }
.wb-cmd .wb-input { flex-basis: 100%; }
.wb-cmd .wb-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
.wb *, .wb *::before, .wb *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* Imported-model tools reuse Claude's full-stage hologram panels. */
.wb[data-workspace="imported"] .wb-joint { display: block; max-height: 290px; }
.wb-model-import { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.wb-model-import > .wb-btn { width: 100%; }
.wb-model-template { color: var(--t2); font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.wb-model-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wb-model-row > .wb-btn { flex: 1 1 auto; white-space: normal; }
.wb-model-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.wb-model-fields label { min-width: 0; display: grid; gap: 5px; font-size: 13px; color: var(--t2); }
.wb-model-fields .wb-input { width: 100%; min-width: 0; min-height: 44px; }
.wb-model-joints { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.wb-model-joints > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 600; }
.wb-model-joints .wb-input { width: 100%; min-height: 44px; }
.wb-model-joints .wb-range { width: 100%; min-height: 44px; margin: 0; }
.wb-model-joints hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.wb-model-joints .wb-label { display: block; margin-top: 10px; }
.wb[data-workspace="imported"] select.wb-input { min-height: 44px; background: #061724; color: var(--ink); }
.wb-model-status { margin: 0; max-width: 100%; font-size: 12px; line-height: 1.5; color: var(--t2); overflow-wrap: anywhere; }
.wb[data-workspace="imported"] .wb-part-name { overflow-wrap: anywhere; }
.wb[data-workspace="imported"] .wb-canvas-host { touch-action: none; }
.wb[data-workspace="imported"] #wbModelFiles .wb-btn { margin-top: 8px; }
.wb[data-workspace="imported"] #wbMakeBody > .wb-btn { margin: 4px 0; width: 100%; }
.wb[data-workspace="imported"] #wbReviewBody { max-height: inherit; overflow: auto; }
.wb-model-history { padding-left: 20px; font-size: 13px; color: var(--t2); }
.wb-model-history li { margin: 6px 0; }
.wb[data-workspace="imported"] #wbProjectShelf > summary { min-height: 46px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wb[data-workspace="imported"] #wbProjectShelf > summary::before { content: '▸'; }
.wb[data-workspace="imported"] #wbProjectShelf[open] > summary::before { content: '▾'; }
.wb[data-workspace="imported"] #wbInputs { flex-wrap: wrap; }
.wb[data-workspace="imported"] #wbHandMode { max-width: 210px; }
@media (min-width:1100px) {
.wb[data-workspace="imported"] .wb-model-status { flex-basis: 100%; }
.wb[data-workspace="imported"] .wb-top { flex-wrap: wrap; }
}
@media (max-width:720.98px) {
.wb[data-workspace="imported"] .wb-model-status { order: 8; }
.wb[data-workspace="imported"] #wbHandMode { flex: 1 1 100%; max-width: 100%; }
.wb[data-workspace="imported"] .wb-joint { max-height: none; }
}
.wb-model-hand-cursor { position: absolute; width: 24px; height: 24px; border: 2px solid #67ffe1; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 2; box-shadow: 0 0 18px #67ffe155; }
.wb-model-hand-cursor.pinching { background: #ffb547aa; border-color: #ffb547; }
.wb-model-hand-cursor.unreliable { border-style: dashed; border-radius: 5px; border-color: #e6e9ef; background: #25334099; box-shadow: none; }
.wb-model-hand-cursor-label { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); padding: 2px 5px; border: 1px dashed #c4d7e2; border-radius: 4px; background: #071d2ef2; color: #f1f7ff; font: 600 11px/1.35 var(--font, sans-serif); white-space: nowrap; }
.wb-model-hand-cursor-label[hidden] { display: none; }
.wb-model-hand-cursor[hidden] { display: none; }
@media (min-width:1100px) {
.wb[data-workspace="imported"] :is(.wb-btn,.wb-chip,.wb-input,.wb-icon-btn,.wb-part-main,.wb-model-template) { min-height: 46px; }
}
@media (min-width:1100px) {
.wb[data-workspace="imported"] #wbInputs { flex-wrap: nowrap; align-items: center; }
.wb[data-workspace="imported"] .wb-model-status { order: 10; }
.wb[data-workspace="imported"] #wbHandMode { width: 190px; }
}
/* Imported-model account storage uses the existing hologram panel. */
.wb-model-account { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wb-line, #214a58); }
.wb-model-account progress { width: 100%; accent-color: #67ffe1; }
.wb-model-account summary { min-height: 46px; display: flex; align-items: center; cursor: pointer; }
.wb-model-account [hidden] { display: none !important; }
/* Range inspection stays in the existing imported-model hologram panel. */
.wb-joint-motion { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.wb-joint-motion [hidden] { display: none !important; }
.wb-motion-pairs { list-style: none; margin: 12px 0; padding: 0; }
.wb-motion-pairs > li { border-left: 2px solid var(--line); padding: 4px 10px; margin: 12px 0; overflow-wrap: anywhere; }
.wb-motion-pairs p { font-size: 13px; line-height: 1.6; }
.wb-motion-pairs summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 13px; }
.wb-motion-pairs details ul { padding-left: 18px; font-size: 12px; line-height: 1.7; }
.wb-motion-pairs .wb-btn { width: 100%; white-space: normal; }
/* Imported workbench: purpose-led tools around the actual hologram, without
replacing form nodes or changing model/preview ownership. Template stays v3. */
.wb[data-workspace-ui="guided"] { --r: 12px; --r-sm: 8px; }
.wb[data-workspace-ui="guided"] .wb-holo {
background: linear-gradient(155deg,rgba(12,34,51,.96),rgba(3,17,29,.94));
border-color: rgba(123,234,255,.23);
box-shadow: 0 12px 32px #0005, inset 0 1px rgba(175,236,255,.07);
}
.wb[data-workspace-ui="guided"] :is(.wb-parts,.wb-right,.wb-dock,.wb-joint) { transform: none; transition: none; }
.wb[data-workspace-ui="guided"] .wb-h2 { font-size: 15px; letter-spacing: -.02em; }
.wb[data-workspace-ui="guided"] .wb-code { letter-spacing: .08em; opacity: .8; }
.wb[data-workspace-ui="guided"] .wb-btn-ghost { box-shadow: none; background: rgba(89,173,204,.055); }
.wb[data-workspace-ui="guided"] .wb-btn-ghost:hover { background: rgba(89,173,204,.14); }
.wb[data-workspace-ui="guided"] .wb-model-status { font-size: 12px; min-height: 18px; }
.wb[data-workspace-ui="guided"] .wb-tabs {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
border-radius: 12px; background: rgba(3,16,27,.96); z-index: 6;
}
.wb[data-workspace-ui="guided"] .wb-tab {
min-height: 46px; padding: 8px 15px; border: 1px solid transparent;
border-radius: 8px; color: var(--t2); background: transparent;
font-size: 14px; font-weight: 650; white-space: nowrap;
}
.wb[data-workspace-ui="guided"] .wb-tab:hover { color: var(--ink-hi); background: var(--cyan-soft); }
.wb[data-workspace-ui="guided"] .wb-tab[aria-pressed="true"] {
color: var(--cyan2); background: rgba(57,224,255,.13); border-color: var(--line2);
box-shadow: inset 0 -2px var(--cyan);
}
.wb-workspace-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wb-workspace-actions button { min-height: 46px; padding: 7px 12px; font-size: 13px; }
.wb-workspace-actions [hidden] { display: none !important; }
.wb-workspace-hint { flex: 1 1 100%; margin: 0; padding: 0 5px 3px; color: var(--t3); font-size: 12px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] #wbReviewShortcut { color: #ffd18a; border-color: rgba(255,181,71,.55); background: #382b1b; box-shadow: none; }
.wb[data-workspace-ui="guided"] #wbFocusToggle[aria-pressed="true"] { color: var(--cyan2); border-color: var(--cyan); background: var(--cyan-soft); }
.wb[data-workspace-ui="guided"] .wb-model-import { padding-bottom: 12px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }
.wb[data-workspace-ui="guided"] .wb-model-import > .wb-note { font-size: 12px; line-height: 1.6; }
.wb[data-workspace-ui="guided"] .wb-part-main { border-radius: 8px; }
.wb[data-workspace-ui="guided"] .wb-review { border-color: rgba(255,181,71,.5); }
.wb[data-workspace-ui="guided"] .wb-review > .wb-h2::before { background: var(--aff); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-review-actions { position: sticky; bottom: 0; background: #061724; padding-bottom: 2px; }
.wb[data-workspace-ui="guided"] .wb-model-row { gap: 8px; }
.wb[data-workspace-ui="guided"] .wb-input { border-radius: 8px; }
.wb[data-workspace-ui="guided"] #wbJoint { display: none; }
.wb[data-workspace-ui="guided"] :is(#wbDims,#wbHistoryCard,#wbSave,#wbMake) { display: none; }
.wb[data-workspace-ui="guided"][data-tab="section"] #wbJoint { display: block; }
.wb[data-workspace-ui="guided"][data-tab="review"] #wbDims { display: block; }
.wb[data-workspace-ui="guided"][data-tab="history"] :is(#wbHistoryCard,#wbSave,#wbMake) { display: block; }
.wb[data-workspace-ui="guided"]:not([data-preview]) .wb-review { display: none; }
.wb[data-workspace-ui="guided"][data-focus-mode] :is(#wbParts,#wbRight,#wbDock) { display: none; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-view-ctrl { display: none; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]) :is(#wbParts,#wbDock) { display: none; }
.wb[data-workspace-ui="guided"] .wb-empty { padding: 20px; }
.wb-start { width: min(620px,100%); text-align: center; margin: auto; }
.wb-start-eyebrow { font: 600 11px/1.5 var(--mono); letter-spacing: .18em; color: var(--cyan2); }
.wb[data-workspace-ui="guided"] .wb-start h3 { font-size: clamp(24px,2.4vw,36px); line-height: 1.3; font-weight: 750; letter-spacing: -.05em; margin: 16px 0; text-shadow: 0 0 30px #39e0ff33; }
.wb-start-lead { color: var(--t2); font-size: 16px; line-height: 1.8; margin: 0 0 22px; }
.wb-start-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wb[data-workspace-ui="guided"] .wb-start-actions [data-model-act="open"] { color: #00131f; background: var(--cyan2); border-color: var(--cyan2); }
.wb-start-steps { padding: 0; margin: 28px 0 12px; list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wb-start-steps li { padding: 16px 12px; min-width: 0; display: grid; gap: 5px; }
.wb-start-steps li+li { border-left: 1px solid var(--line); }
.wb-start-steps b { font: 500 12px/1.5 var(--mono); color: var(--cyan2); }
.wb-start-steps strong { font-size: 14px; color: var(--ink); }
.wb-start-steps span { font-size: 12px; color: var(--t3); line-height: 1.5; }
@media (min-width:1100px) {
.wb[data-workspace-ui="guided"] .wb-main {
--wb-lw: 248px; --wb-rw: 336px;
grid-template-columns: var(--wb-lw) minmax(0,1fr) var(--wb-rw);
grid-template-rows: auto minmax(0,1fr) auto;
grid-template-areas: "tools tools tools" "parts free right" "parts dock right";
gap: 12px; padding: 12px;
}
.wb[data-workspace-ui="guided"] .wb-tabs { grid-area: tools; position: relative; top: auto; }
.wb[data-workspace-ui="guided"] .wb-parts { grid-area: parts; }
.wb[data-workspace-ui="guided"] .wb-right { grid-area: right; }
.wb[data-workspace-ui="guided"] .wb-side { display: flex; }
.wb[data-workspace-ui="guided"] .wb-joint { padding: 16px; flex: none; }
.wb[data-workspace-ui="guided"] .wb-dock { height: 166px; grid-area: dock; padding: 12px 14px; }
.wb[data-workspace-ui="guided"] .wb-dock > .wb-h2 { display: none; }
.wb[data-workspace-ui="guided"] .wb-log { min-height: 28px; margin-bottom: 6px; }
.wb[data-workspace-ui="guided"] #wbJointCommandHint { display: none; }
.wb[data-workspace-ui="guided"] .wb-chips { display: none; }
.wb[data-workspace-ui="guided"][data-tab="dock"] .wb-dock { height: min(300px,38vh); }
.wb[data-workspace-ui="guided"][data-tab="dock"] :is(.wb-chips,#wbJointCommandHint) { display: flex; }
.wb[data-workspace-ui="guided"][data-tab="dock"] #wbJointCommandHint { display: block; }
.wb[data-workspace-ui="guided"]:is([data-tab="parts"],[data-tab="dock"]):not([data-preview]) .wb-main { grid-template-columns: var(--wb-lw) minmax(0,1fr) 0; }
.wb[data-workspace-ui="guided"]:is([data-tab="parts"],[data-tab="dock"]):not([data-preview]) .wb-right { display: none; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]):not([data-tab="history"]) .wb-main,
.wb[data-workspace-ui="guided"][data-focus-mode] .wb-main { grid-template-columns: 0 minmax(0,1fr) 0; grid-template-rows: auto minmax(0,1fr) 0; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]):not([data-tab="history"]) :is(.wb-parts,.wb-right,.wb-dock) { display: none; }
.wb[data-workspace-ui="guided"]:not([data-model-ready])[data-tab="history"] .wb-main { grid-template-columns: 0 minmax(0,1fr) var(--wb-rw); grid-template-rows: auto minmax(0,1fr) 0; }
.wb[data-workspace-ui="guided"] .wb-stage-strip { top: calc(var(--ft,92px) + 12px); }
.wb[data-workspace-ui="guided"] .wb-hud-deco { top: calc(var(--ft,92px) + 5px); }
.wb[data-workspace-ui="guided"] .wb-empty { top: calc(var(--ft,92px) + 12px); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl { top: calc(var(--ft,92px) + 52px); }
.wb[data-workspace-ui="guided"] .wb-review { max-height: min(45vh,380px); }
}
@media (min-width:1100px) and (max-height:760px) {
.wb[data-workspace-ui="guided"] .wb-dock { height: 146px; }
.wb[data-workspace-ui="guided"] .wb-workspace-hint { display: none; }
.wb[data-workspace-ui="guided"] .wb-start-steps { margin-top: 16px; }
.wb[data-workspace-ui="guided"] .wb-start-steps li { padding: 10px; }
.wb[data-workspace-ui="guided"] .wb-start h3 { margin: 8px 0; }
.wb[data-workspace-ui="guided"] .wb-start-lead { margin-bottom: 8px; }
}
@media (max-width:1099.98px) {
.wb[data-workspace-ui="guided"] .wb-main { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.wb[data-workspace-ui="guided"] .wb-tabs { order: -1; position: sticky; top: 0; }
.wb[data-workspace-ui="guided"] .wb-stage { position: relative; height: 48dvh; min-height: 310px; width: 100%; }
.wb[data-workspace-ui="guided"] .wb-viewport { position: absolute; inset: 0; height: auto; min-height: 0; }
.wb[data-workspace-ui="guided"] .wb-right { display: contents; }
.wb[data-workspace-ui="guided"] .wb-side { display: contents; }
.wb[data-workspace-ui="guided"] :is(.wb-parts,.wb-dock) { display: none; }
.wb[data-workspace-ui="guided"][data-tab="parts"] .wb-parts { display: block; }
.wb[data-workspace-ui="guided"][data-tab="dock"] .wb-dock { display: flex; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]):not([data-tab="history"]) :is(.wb-parts,.wb-side,.wb-dock) { display: none; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-stage { height: 600px; }
.wb[data-workspace-ui="guided"][data-focus-mode] .wb-stage { height: 65dvh; }
.wb[data-workspace-ui="guided"][data-focus-mode] :is(.wb-parts,.wb-side,.wb-dock) { display: none; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl { left: 8px; right: 8px; bottom: 8px; top: auto; max-width: none; }
.wb[data-workspace-ui="guided"] .wb-input-alert { position: absolute; bottom: 64px; left: 12px; right: 12px; }
.wb[data-workspace-ui="guided"][data-preview] .wb-review { display: flex; position: relative; inset: auto; max-height: 45dvh; }
.wb[data-workspace-ui="guided"][data-preview] .wb-main { padding-bottom: 12px; }
.wb[data-workspace-ui="guided"] .wb-start h3 { font-size: 30px; }
}
@media (max-width:720.98px) {
.wb[data-workspace-ui="guided"] .wb-main { padding: 8px; }
.wb[data-workspace-ui="guided"] .wb-tabs { padding: 6px; gap: 4px; }
.wb[data-workspace-ui="guided"] .wb-tab { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.wb[data-workspace-ui="guided"] .wb-workspace-actions { flex: 1 1 100%; justify-content: flex-end; }
.wb[data-workspace-ui="guided"] .wb-workspace-hint { padding: 0 4px; }
.wb[data-workspace-ui="guided"] .wb-top { padding: 6px 12px; }
.wb[data-workspace-ui="guided"] #wbHandMode { flex: 1 1 130px; max-width: none; min-width: 130px; width: 0; }
.wb[data-workspace-ui="guided"] #wbInputs { align-items: center; }
.wb[data-workspace-ui="guided"] #wbInputs button { padding: 0 10px; font-size: 12px; }
.wb[data-workspace-ui="guided"] .wb-engine { display: none; }
.wb[data-workspace-ui="guided"] .wb-start h3 { font-size: 27px; }
.wb[data-workspace-ui="guided"] .wb-start-lead { font-size: 14px; }
.wb[data-workspace-ui="guided"] .wb-empty { padding: 18px 12px; }
.wb[data-workspace-ui="guided"] .wb-start-steps li { padding: 12px 7px; }
.wb[data-workspace-ui="guided"] .wb-start-steps span { font-size: 11px; }
.wb[data-workspace-ui="guided"][data-preview] .wb-review { position: relative; inset: auto; max-height: 45dvh; z-index: 6; border-radius: 12px; }
.wb[data-workspace-ui="guided"][data-preview] .wb-main { padding-bottom: 12px; }
}
/* Confirmed-model boundary inspection. Geometry changes stay in explicit review. */
.wb-repair-panel { border:1px solid rgba(112,255,226,.25); border-radius:12px; padding:12px; margin-bottom:16px; background:rgba(18,48,53,.2); }
.wb-repair-group { display:flex; gap:8px; align-items:center; min-height:44px; font-size:12px; color:var(--t2); line-height:1.5; }
.wb-repair-group input { flex:none; width:18px; height:18px; accent-color:#70ffe2; }
.wb-repair-loops { padding-left:18px; max-height:130px; overflow:auto; }
.wb-repair-panel .wb-model-row { margin-top:8px; }
/* Structure navigation stays in the imported workspace's existing side panel. */
.wb[data-workspace="imported"] .wb-structure-tools { min-width:0; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.wb[data-workspace="imported"] .wb-structure-tools .wb-model-row { margin-top:8px; }
.wb[data-workspace="imported"] .wb-structure-tools [hidden] { display:none !important; }
.wb[data-workspace="imported"] .wb-structure-tools summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:13px; color:var(--cyan2); }
.wb[data-workspace="imported"] .wb-structure-tree { list-style:none; padding:0; margin:6px 0; max-height:280px; overflow:auto; overscroll-behavior:contain; }
.wb[data-workspace="imported"] .wb-structure-node { min-width:0; margin:6px 0; padding-left:calc(var(--structure-depth, 0) * 7px); border-left:1px solid var(--line); }
.wb[data-workspace="imported"] .wb-structure-node > button { min-height:44px; width:100%; min-width:0; max-width:100%; white-space:normal; text-align:left; overflow-wrap:anywhere; justify-content:flex-start; box-shadow:none; }
.wb[data-workspace="imported"] .wb-structure-node > button:first-child { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.wb[data-workspace="imported"] .wb-structure-node small { font-size:11px; color:var(--t2); font-weight:400; }
.wb[data-workspace="imported"] .wb-structure-node > button + button { margin-top:3px; font-size:12px; color:var(--t2); }
.wb[data-workspace="imported"] .wb-structure-node [aria-pressed="true"] { border-color:var(--cyan); background:rgba(57,224,255,.15); }
.wb[data-workspace="imported"] .wb-structure-scope { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; font-size:12px; overflow-wrap:anywhere; }
.wb[data-workspace="imported"] .wb-structure-path,.wb[data-workspace="imported"] .wb-structure-badge { grid-column:2 / -1; min-width:0; max-width:100%; font-size:11px; line-height:1.5; color:var(--t3); overflow-wrap:anywhere; }
.wb[data-workspace="imported"] .wb-structure-badge { color:var(--cyan2); }
.wb[data-workspace="imported"] .wb-structure-footer { min-width:0; margin-top:8px; }
.wb[data-workspace="imported"] .wb-structure-selected { min-width:0; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.wb[data-workspace="imported"] .wb-structure-selected:empty { display:none; }
.wb[data-workspace="imported"] .wb-structure-selected .wb-model-row { margin-top:8px; }
.wb[data-workspace="imported"] .wb-disassembly { min-width:0; margin:12px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.wb[data-workspace="imported"] .wb-disassembly > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:13px; color:var(--cyan2); }
.wb[data-workspace="imported"] .wb-disassembly [hidden] { display:none !important; }
.wb[data-workspace="imported"] .wb-disassembly-candidates { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); gap:6px; margin:8px 0; }
.wb[data-workspace="imported"] .wb-disassembly-candidate { min-width:0; min-height:44px; display:flex; flex-direction:column; align-items:flex-start; white-space:normal; overflow-wrap:anywhere; text-align:left; gap:4px; padding:10px; }
.wb[data-workspace="imported"] .wb-disassembly-candidate strong { font-size:12px; }
.wb[data-workspace="imported"] .wb-disassembly-candidate span { font-size:11px; color:var(--cyan2); }
.wb[data-workspace="imported"] .wb-disassembly-candidate[aria-pressed="true"] { border-color:var(--cyan); background:rgba(57,224,255,.15); }
.wb[data-workspace="imported"] #wbDisassemblyProgressValue { margin-left:6px; color:var(--cyan2); }
/* A bounded local guide inside the existing conversation dock. */
.wb[data-workspace="imported"] .wb-guide-entry { align-self:flex-start; flex:none; min-height:44px; margin-bottom:8px; }
.wb[data-workspace="imported"] .wb-guide[hidden] { display:none !important; }
.wb[data-workspace="imported"] .wb-guide { border-radius:12px; box-shadow:none; min-width:0; padding:14px; }
.wb[data-workspace="imported"] .wb-guide-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.wb[data-workspace="imported"] .wb-guide h3 { margin:0; font-size:16px; }
.wb[data-workspace="imported"] .wb-guide h4 { margin:12px 0 10px; font-size:15px; line-height:1.5; }
.wb[data-workspace="imported"] .wb-guide p { font-size:13px; line-height:1.6; font-weight:400; color:var(--t2); overflow-wrap:anywhere; }
.wb[data-workspace="imported"] .wb-guide .wb-guide-intro { margin:8px 0; }
.wb[data-workspace="imported"] .wb-guide-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:8px; }
.wb[data-workspace="imported"] .wb-guide :is(button,input,select) { min-height:44px; min-width:0; max-width:100%; }
.wb[data-workspace="imported"] .wb-guide button { white-space:normal; overflow-wrap:anywhere; }
.wb[data-workspace="imported"] .wb-guide-answer { display:grid; gap:8px; margin:10px 0; }
.wb[data-workspace="imported"] .wb-guide-answer label { font-size:13px; color:var(--t2); }
.wb[data-workspace="imported"] .wb-guide-answer .wb-input { width:100%; }
.wb[data-workspace="imported"] .wb-guide-plan { display:grid; grid-template-columns:76px minmax(0,1fr); gap:8px; font-size:13px; line-height:1.6; }
.wb[data-workspace="imported"] .wb-guide-plan dt { color:var(--cyan2); }
.wb[data-workspace="imported"] .wb-guide-plan dd { margin:0; min-width:0; overflow-wrap:anywhere; }
/* Explicit guide targets are separate from the current viewport selection. */
.wb[data-workspace="imported"] .wb-guide-context { border-left:3px solid var(--cyan); padding:8px 10px; margin:10px 0; background:var(--cyan-soft); font-size:13px; overflow-wrap:anywhere; }
.wb[data-workspace="imported"] .wb-guide-context p { margin:4px 0 0; }
.wb[data-workspace="imported"] .wb-guide-answers { border-top:1px solid var(--line); margin-top:12px; }
.wb[data-workspace="imported"] .wb-guide-answers summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:13px; }
.wb[data-workspace="imported"] .wb-guide-condition { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 0; border-top:1px solid var(--line); }
.wb[data-workspace="imported"] .wb-guide-condition>span { flex:1 1 140px; min-width:0; display:grid; gap:4px; font-size:13px; overflow-wrap:anywhere; }
.wb[data-workspace="imported"] .wb-guide-condition strong { color:var(--t2); font-weight:400; }
.wb[data-workspace="imported"] .wb-guide-condition .wb-btn { flex:0 1 auto; }
.wb[data-workspace="imported"] .wb-guide-answer [aria-invalid="true"] { border-color:var(--bad); }
.wb[data-workspace="imported"] .wb-guide-facts { padding-left:20px; font-size:12px; line-height:1.6; color:var(--t2); }
.wb[data-workspace="imported"] .wb-guide-footer { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.wb[data-workspace="imported"] .wb-guide .wb-guide-limit { border-top:1px solid var(--line); margin:12px 0 0; padding-top:10px; font-size:12px; }
.wb[data-workspace="imported"] .wb-guide-limit summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--t2); }
.wb[data-workspace="imported"] .wb-guide .wb-guide-warning { color:#ffd49b; }
.wb[data-workspace="imported"][data-guidance] #wbGuideStart { display:none; }
.wb[data-workspace="imported"][data-guidance] :is(#wbLog,#wbCmdForm,#wbCmdNote,#wbJointCommandHint,.wb-chips) { display:none; }
@media (min-width:1100px) { .wb[data-workspace-ui="guided"][data-guidance][data-tab="dock"] .wb-dock { height:min(300px,40dvh); overflow:auto; overscroll-behavior:contain; } }
/* Exact dimension comparison belongs to the existing explicit review. */
.wb-dimension-check{padding:12px 14px;margin:8px 0;border:1px solid #71cfdf80;border-radius:10px;background:#122d38;overflow-wrap:anywhere}
.wb-dimension-check p{margin:5px 0;line-height:1.5}
.wb-dimension-check[data-dimension-status="mismatch"],.wb-dimension-check[data-dimension-status="indeterminate"]{border-color:#e7b66e;color:#ffe0aa}
/* Conditional requirements stay hidden even when shared field/button rules set display. */
.wb-part-preparation [hidden]{display:none!important}
/* Beginner flow (Claude 2026-10-12). Numbered steps wrap the existing tool
buttons (same nodes and values); specialist tools fold under each tool;
recovery notices say why, what was kept and what to do next. [hidden] and
inert always win over the display rules below. */
.wb[data-workspace-ui="guided"] :is(.wb-flow,.wb-flow-aside,.wb-notice,.wb-advanced,.wb-start-sample) [hidden] { display: none !important; }
.wb[data-workspace-ui="guided"] .wb-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; min-width: 0; }
.wb[data-workspace-ui="guided"] .wb-flow-step { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; padding: 3px 4px 4px; border: 1px solid transparent; border-radius: 10px; }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-current] { border-color: var(--line); background: rgba(57,224,255,.05); }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-next]:not([data-current]) { border-color: rgba(255,181,71,.42); border-style: dashed; }
.wb-flow-head { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0 3px; min-height: 20px; font-size: 11.5px; line-height: 1.3; color: var(--t3); white-space: nowrap; }
.wb-flow-num { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line2); font: 600 10.5px/1 var(--mono); color: var(--cyan2); }
.wb-flow-title { font-weight: 750; color: var(--t2); }
.wb-flow-state { min-width: 0; max-width: 11em; overflow: hidden; text-overflow: ellipsis; }
.wb-flow-state::before { content: '·'; margin-right: 5px; color: var(--line3); }
.wb-flow-step[data-current] .wb-flow-title { color: var(--ink-hi); }
.wb-flow-step[data-status="done"] .wb-flow-num { background: rgba(75,227,161,.16); border-color: rgba(75,227,161,.6); color: #a9f7d4; }
.wb-flow-step[data-status="done"] .wb-flow-state { color: #a9f7d4; }
.wb-flow-step[data-status="done"] .wb-flow-state::after { content: ' ✓'; }
.wb-flow-step[data-status="attention"] .wb-flow-num { background: rgba(255,181,71,.16); border-color: rgba(255,181,71,.75); color: #ffd18a; }
.wb-flow-step[data-status="attention"] .wb-flow-state { color: #ffd18a; }
.wb-flow-step[data-status="locked"] .wb-flow-head { opacity: .72; }
.wb-flow-step[data-status="limited"] .wb-flow-num { border-style: dashed; color: var(--t2); }
.wb-flow-step[data-status="limited"] .wb-flow-state { color: var(--t2); }
/* Source-view models (Codex 89145cd): editing tools stay visible; the engine refuses them with a reason. */
.wb[data-workspace="imported"] .wb-source-note { margin: 0 0 10px; padding: 8px 10px; border: 1px dashed var(--line2); border-radius: 8px; color: var(--t2); background: rgba(57,224,255,.04); }
.wb[data-workspace="imported"] .wb-source-note[hidden] { display: none !important; }
.wb-strip-item[data-kind="appearance"] { font-weight: 600; color: var(--t2); }
.wb-strip-item[data-appearance="ok"] { color: #a9f7d4; border-color: rgba(75,227,161,.5); }
.wb-strip-item[data-appearance="bad"] { color: #ffd18a; border-color: rgba(255,181,71,.6); }
.wb-flow-tools { display: flex; gap: 4px; }
.wb[data-workspace-ui="guided"] .wb-flow-tools .wb-tab { padding: 8px 11px; }
.wb[data-workspace-ui="guided"] .wb-flow-open { color: var(--cyan2); border-color: var(--line2); }
.wb-flow-arrow { align-self: flex-end; padding: 0 1px 12px; color: var(--line3); font-size: 17px; line-height: 1; }
.wb-flow-aside { display: flex; align-items: flex-end; padding: 4px 2px 4px 8px; margin-left: 2px; border-left: 1px solid var(--line); }
.wb-workspace-step { display: none; }
.wb[data-workspace-ui="guided"] .wb-tool-lead { margin: 2px 0 10px; color: var(--t2); }
.wb[data-workspace-ui="guided"] .wb-review-undo { color: var(--t2); }
/* Specialist tools: collapsed until needed; nodes and values stay mounted. */
.wb[data-workspace="imported"] .wb-advanced { margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.wb[data-workspace="imported"] .wb-advanced > summary { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 750; color: var(--t2); }
.wb[data-workspace="imported"] .wb-advanced > summary::-webkit-details-marker { display: none; }
.wb[data-workspace="imported"] .wb-advanced > summary::after { content: '＋'; margin-left: auto; color: var(--cyan2); font-weight: 500; }
.wb[data-workspace="imported"] .wb-advanced[open] > summary::after { content: '－'; }
.wb-advanced-tag { font-size: 11px; font-weight: 500; color: var(--t3); }
.wb-advanced[open] .wb-advanced-tag { display: none; }
.wb-advanced-body { padding: 0 0 6px; }
.wb[data-workspace="imported"] .wb-repair-panel { margin: 0 0 8px; }
/* Plain-language notices. */
.wb-notice { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line2); border-left: 3px solid var(--cyan); border-radius: 10px; background: rgba(6,30,46,.94); text-align: left; overflow-wrap: anywhere; }
.wb-notice[data-tone="error"] { border-color: rgba(255,107,120,.5); border-left-color: var(--bad); background: rgba(42,14,24,.94); }
.wb-notice[data-tone="warn"] { border-color: rgba(255,181,71,.5); border-left-color: var(--aff); background: rgba(42,30,12,.94); }
.wb .wb-notice-title { margin: 0 0 6px; font-size: 15px; font-weight: 750; line-height: 1.45; color: var(--ink-hi); text-shadow: none; }
.wb-notice-title:focus { outline: none; }
.wb-notice-title:focus-visible { outline: 2px solid var(--cyan2); outline-offset: 3px; }
.wb .wb-notice :is(.wb-notice-reason,.wb-notice-kept) { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--t2); max-width: none; }
.wb .wb-notice .wb-notice-kept { color: #a9f7d4; }
.wb .wb-notice .wb-notice-label { margin: 8px 0 2px; font-size: 12px; font-weight: 750; color: var(--t2); }
.wb-notice-next { margin: 0 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.wb-notice-next li + li { margin-top: 2px; }
.wb-notice-detail summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 12px; color: var(--t3); }
.wb .wb-notice-detail p { margin: 0 0 6px; font-size: 12px; line-height: 1.6; color: var(--t3); }
.wb-notice-close { width: 100%; margin-top: 4px; }
.wb-dimension-detail summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 12.5px; color: var(--cyan2); }
/* Assistant: the fixed-command mode and the AI voice mode are named apart. */
.wb-assistant-mode { flex: none; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: var(--t2); background: rgba(57,224,255,.05); }
.wb-assistant-mode[data-mode="live"] { border-color: rgba(75,227,161,.5); color: #c6fbe3; background: rgba(75,227,161,.07); }
.wb-assistant-mode[data-mode="connecting"] { border-style: dashed; }
.wb-assistant-mode[data-mode="error"] { border-color: rgba(255,181,71,.5); color: #ffe0aa; }
/* Start screen: four real steps, a clearly labelled sample, honest limits. */
.wb[data-workspace-ui="guided"] .wb-empty { justify-content: flex-start; overflow: auto; overscroll-behavior: contain; }
.wb[data-workspace-ui="guided"] .wb-start-steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wb[data-workspace-ui="guided"] .wb-start .wb-notice { max-width: 560px; margin: 4px auto 14px; }
.wb[data-workspace-ui="guided"] .wb-start .wb-notice .wb-notice-title { font-size: 16px; }
.wb-start-sample { max-width: 520px; margin: 14px auto 4px; padding: 12px 14px; border: 1px dashed var(--line2); border-radius: 12px; text-align: left; }
.wb[data-workspace-ui="guided"] .wb-start-sample p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--t2); }
.wb-start-sample strong { color: var(--ink-hi); }
.wb-start[data-start="recover"] h3 { font-size: clamp(20px,1.8vw,26px); }
@media (min-width:1100px) and (max-width:1359.98px) {
.wb[data-workspace="imported"] .wb-engine { display: none; }
/* Keep the start screen clear of the floating 자비스 card on narrower desktops. */
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-empty { padding-right: 290px; }
}
@media (min-width:1100px) {
.wb[data-workspace-ui="guided"]:not([data-tab="dock"]) .wb-assistant-mode { display: none; }
/* The taller assistant dock leaves less stage height: keep every view control reachable. */
.wb[data-workspace-ui="guided"][data-tab="dock"] .wb-view-ctrl { grid-template-columns: 44px 44px; }
}
@media (min-width:1100px) and (max-height:760px) {
/* Short stages: three short columns keep every view control above the dock. */
.wb[data-workspace-ui="guided"][data-tab] .wb-view-ctrl { grid-template-columns: 44px 44px 44px; top: calc(var(--ft,92px) + 8px); }
.wb[data-workspace-ui="guided"] .wb-flow-step { padding: 2px 3px 3px; }
.wb[data-workspace-ui="guided"] .wb-flow-head { min-height: 18px; }
}
@media (max-width:1099.98px) {
/* The sticky tool bar stays above a docked proposal while scrolling. */
.wb[data-workspace-ui="guided"] .wb-tabs { z-index: 8; }
.wb[data-workspace-ui="guided"][data-preview] .wb-review { position: sticky; bottom: 8px; z-index: 7; max-height: min(45dvh,360px); box-shadow: 0 -10px 30px #000b; }
/* While a proposal is docked at the bottom, the view controls move to the top of the stage. */
.wb[data-workspace-ui="guided"][data-preview] .wb-view-ctrl { top: 44px; bottom: auto; }
}
@media (max-width:1099.98px) and (max-height:760px) {
/* Short tablets/landscape: compact step bar (as on phones) and a shorter docked review. */
.wb[data-workspace-ui="guided"] :is(.wb-flow,.wb-flow-step,.wb-flow-tools,.wb-flow-aside) { display: contents; }
.wb[data-workspace-ui="guided"] :is(.wb-flow-head,.wb-flow-arrow,.wb-flow-open) { display: none; }
.wb[data-workspace-ui="guided"] .wb-workspace-step { display: inline-block; margin-right: 6px; padding: 1px 7px; border: 1px solid var(--line2); border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--cyan2); white-space: nowrap; }
.wb[data-workspace-ui="guided"][data-preview] .wb-review { max-height: min(40dvh,300px); }
}
@media (max-width:720.98px) and (max-height:700px) {
.wb[data-workspace-ui="guided"][data-preview] .wb-review { max-height: min(36dvh,260px); }
}
@media (max-width:720.98px) {
/* Phones: the flat tool row stays; the step and guide read as one line. */
.wb[data-workspace-ui="guided"] :is(.wb-flow,.wb-flow-step,.wb-flow-tools,.wb-flow-aside) { display: contents; }
.wb[data-workspace-ui="guided"] :is(.wb-flow-head,.wb-flow-arrow,.wb-flow-open) { display: none; }
.wb[data-workspace-ui="guided"] .wb-flow-tools .wb-tab { padding: 6px 2px; }
.wb[data-workspace-ui="guided"] .wb-workspace-step { display: inline-block; margin-right: 6px; padding: 1px 7px; border: 1px solid var(--line2); border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--cyan2); white-space: nowrap; }
.wb[data-workspace-ui="guided"] .wb-start-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wb[data-workspace-ui="guided"] .wb-start-steps li:nth-child(odd) { border-left: 0; }
.wb[data-workspace-ui="guided"] .wb-start-steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width:359.98px) {
/* 320px: keep camera · AI voice · hand mode on one row (the longer AI label must not push the stage down). */
.wb[data-workspace-ui="guided"] #wbInputs button { padding: 0 8px; }
.wb[data-workspace-ui="guided"] #wbHandMode { flex-basis: 112px; min-width: 112px; }
}
/* Studio library entry card and AI voice availability (Claude 2026-10-12).
Display only: the card never starts a transfer by itself; the line never means a live voice. */
.wb[data-workspace-ui="guided"] :is(.wb-studio,.wb-voice-availability) [hidden], .wb-voice-availability [hidden] { display: none !important; }
.wb-studio { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line2); border-left: 3px solid var(--cyan); border-radius: 10px; background: rgba(6,30,46,.94); text-align: left; overflow-wrap: anywhere; }
.wb-studio[data-tone="error"] { border-color: rgba(255,107,120,.5); border-left-color: var(--bad); background: rgba(42,14,24,.94); }
.wb-studio[data-tone="warn"] { border-color: rgba(255,181,71,.5); border-left-color: var(--aff); background: rgba(42,30,12,.94); }
.wb .wb-studio-eyebrow { margin: 0 0 4px; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; color: var(--cyan2); }
.wb .wb-studio-title { margin: 0 0 6px; font-size: 15px; font-weight: 750; line-height: 1.45; color: var(--ink-hi); text-shadow: none; }
.wb-studio-title:focus { outline: none; }
.wb-studio-title:focus-visible { outline: 2px solid var(--cyan2); outline-offset: 3px; }
.wb .wb-studio p:not(.wb-studio-eyebrow):not(.wb-notice-label) { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--t2); max-width: none; }
.wb-studio-progress progress { display: block; width: 100%; height: 8px; margin: 2px 0 6px; accent-color: #67ffe1; }
.wb-studio-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wb-studio-actions :is(.wb-btn) { min-height: 44px; flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wb-studio-actions .wb-btn[data-studio-busy] { opacity: .78; filter: none; cursor: progress; }
.wb[data-workspace-ui="guided"] .wb-start .wb-studio { max-width: 560px; margin: 4px auto 14px; }
.wb[data-workspace-ui="guided"] .wb-start .wb-studio .wb-studio-title { font-size: 16px; }
/* A studio link is the reason for this visit: on narrow screens the decorative
hero gives way so the card (and its button) starts higher. */
@media (max-width:720.98px) {
.wb[data-workspace-ui="guided"] .wb-start[data-studio] .wb-start-eyebrow { display: none; }
.wb[data-workspace-ui="guided"] .wb-start[data-studio] h3 { font-size: 21px; margin: 0 0 10px; }
}
.wb-voice-availability { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.wb .wb-voice-availability .wb-note { margin: 0; flex: 1 1 220px; }
.wb-voice-availability .wb-btn { min-height: 44px; }
/* An explicit move here (e.g. 카메라로 할 일 → “AI 음성 연결 확인”) lands its control with room
below, so a later, longer availability sentence above it cannot push the focused control
off-screen (390px: 42px, 320px: 62px before). Only the landing point of that existing
move changes: no new automatic scroll, no focus change. (Claude 2026-10-16) */
.wb-voice-availability :is(button, a) { scroll-margin-bottom: 112px; }
@media (forced-colors:active) {
.wb-flow-step[data-current], .wb-notice, .wb-studio, .wb-assistant-mode { border: 1px solid CanvasText; }
}
/* Polish v2 (Claude 2026-10-12): one calm visual system for the guided
imported-model workbench. Presentation only and appended after every
earlier rule, so the same nodes, ids, values and listeners stay in place.
- Tokens: three text levels (all >= 7:1 on panels), one accent, hairlines,
input borders >= 3:1, 10px controls and 14px cards, 12px type floor.
- One filled action per place; specialist and secondary actions are quiet.
- Header: brand, honest scope label, a one-line live status, inputs, help.
- Wide screens: the command line is a single compact bar under the model;
the full conversation opens as a right-hand panel in the 대화 tool.
- Phones/tablets: tool row first, guide and "작품 크게 보기" share row two.
The sample (template) workbench keeps its v3 look. No keyframes here. */
.wb[data-workspace-ui="guided"] {
--wb-text-1: #EAF6FB; --wb-text-2: #B9D2DE; --wb-text-3: #93B2C2;
--wb-accent: #5CE1FF; --wb-accent-hi: #A5F1FF; --wb-accent-ink: #02131C;
--wb-hair: rgba(150, 214, 238, .13); --wb-hair-2: rgba(150, 214, 238, .2);
--wb-ctl: rgba(138, 204, 228, .34); --wb-ctl-strong: rgba(138, 204, 228, .5);
--wb-fill: rgba(255, 255, 255, .03); --wb-fill-hover: rgba(92, 225, 255, .1); --wb-fill-on: rgba(92, 225, 255, .14);
--wb-panel: linear-gradient(180deg, rgba(12, 29, 45, .95), rgba(6, 18, 30, .95));
--wb-r-ctl: 10px; --wb-r-card: 14px;
--wb-primary: linear-gradient(180deg, #78E9FF 0%, #36C8EC 100%);
--wb-primary-hover: linear-gradient(180deg, #92EEFF 0%, #4BD0F1 100%);
--ink: var(--wb-text-1); --ink-hi: #F5FBFE; --t2: var(--wb-text-2); --t3: var(--wb-text-3);
--line: var(--wb-hair-2); --line2: var(--wb-ctl); --line3: rgba(165, 241, 255, .6);
--r: 14px; --r-sm: 10px;
word-break: keep-all; overflow-wrap: break-word;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Type: headings, notes and the 12px floor for small labels. */
.wb[data-workspace-ui="guided"] .wb-h2 { gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 750; letter-spacing: -.015em; color: var(--ink-hi); }
.wb[data-workspace-ui="guided"] .wb-h2::before { width: 6px; height: 6px; border-radius: 1px; background: var(--wb-accent); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-code { display: none; }
.wb[data-workspace-ui="guided"] .wb-h3 { margin: 18px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-note { font-size: 13px; line-height: 1.6; color: var(--wb-text-3); }
.wb[data-workspace-ui="guided"] .wb-label { font-size: 13px; color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] :is(.wb-start-eyebrow,.wb-advanced-tag,.wb-workspace-step,.wb-structure-node small,.wb-structure-path,.wb-structure-badge,.wb-disassembly-candidate span,.wb-start-steps span,.wb-model-template) { font-size: 12px; }
/* Focus: a light ring with a dark gap reads on cyan, amber and dark surfaces.
On narrow layouts the tool bar stays stuck on top (JS sets --wb-bar): focused
and scrolled-to controls stop below it instead of hiding under it. */
.wb[data-workspace-ui="guided"] :is(a[href],button,input,select,textarea,summary,[tabindex],h2,h3,h4) { scroll-margin-top: calc(var(--wb-bar, 0px) + 12px); }
.wb[data-workspace-ui="guided"] :focus-visible:not(.wb-canvas-host) { outline: 2px solid var(--wb-accent-hi); outline-offset: 2px; box-shadow: 0 0 0 2px #020D16; }
/* Buttons: filled = the one main action of a place; ghost = everything else. */
.wb[data-workspace-ui="guided"] .wb-btn {
padding: 0 16px; border-radius: var(--wb-r-ctl); border: 1px solid #A5F1FF;
background: var(--wb-primary); color: var(--wb-accent-ink);
font-size: 14px; font-weight: 750; letter-spacing: -.01em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(20, 170, 215, .2);
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.wb[data-workspace-ui="guided"] .wb-btn:hover { filter: none; background: var(--wb-primary-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 22px rgba(20, 170, 215, .28); }
.wb[data-workspace-ui="guided"] .wb-btn:active { background: #2BB9DE; box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-btn-ghost,
.wb[data-workspace-ui="guided"] :is([id="wbExplodeBtn"],[id="wbGuideStart"]) { color: var(--wb-text-1); background: var(--wb-fill); border-color: var(--wb-ctl); box-shadow: none; font-weight: 650; }
.wb[data-workspace-ui="guided"] [id="wbHelp"] form[method="dialog"] .wb-btn { color: var(--wb-text-1); background: var(--wb-fill); border-color: var(--wb-ctl); box-shadow: none; font-weight: 650; }
.wb[data-workspace-ui="guided"] .wb-btn-ghost:hover,
.wb[data-workspace-ui="guided"] :is([id="wbExplodeBtn"],[id="wbGuideStart"]):hover { background: var(--wb-fill-hover); border-color: rgba(165, 241, 255, .5); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-btn-ghost:active,
.wb[data-workspace-ui="guided"] :is([id="wbExplodeBtn"],[id="wbGuideStart"]):active { background: var(--wb-fill-on); }
.wb[data-workspace-ui="guided"] [id="wbGuideStart"] { color: var(--wb-accent-hi); border-color: rgba(165, 241, 255, .42); }
.wb[data-workspace-ui="guided"] .wb-btn-ghost[aria-pressed="true"] { color: var(--wb-accent-hi); background: var(--wb-fill-on); border-color: rgba(165, 241, 255, .7); }
/* Places whose main action is a quiet-by-default button get the filled look. */
.wb[data-workspace-ui="guided"] :is(.wb-start-actions [data-model-act="open"],[id="wbImportUnits"] [data-model-act="import-confirm"],.wb-prep-go) {
color: var(--wb-accent-ink); background: var(--wb-primary); border-color: #A5F1FF; font-weight: 750;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(20, 170, 215, .2);
}
.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(--wb-primary-hover); border-color: #A5F1FF; }
.wb[data-workspace-ui="guided"] .wb-review-actions [data-model-act="cancel"] { color: var(--wb-text-1); }
.wb[data-workspace-ui="guided"] .wb-icon-btn { border-radius: var(--wb-r-ctl); border: 1px solid transparent; background: transparent; color: var(--wb-text-1); box-shadow: none; font-size: 17px; transition: background-color .15s, color .15s, border-color .15s; }
.wb[data-workspace-ui="guided"] .wb-icon-btn:hover { background: var(--wb-fill-hover); color: #FFFFFF; border-color: transparent; }
.wb[data-workspace-ui="guided"] .wb-icon-btn[aria-pressed="true"] { color: var(--wb-accent-hi); background: var(--wb-fill-on); border-color: rgba(165, 241, 255, .45); }
.wb[data-workspace-ui="guided"] .wb-icon-text { font-size: 13px; font-weight: 700; }
.wb[data-workspace-ui="guided"] .wb-motion[aria-pressed="false"] { border-color: transparent; color: var(--wb-text-3); }
.wb[data-workspace-ui="guided"] .wb-chip { border-radius: 999px; border-color: var(--wb-ctl); background: var(--wb-fill); font-size: 13px; }
.wb[data-workspace-ui="guided"] .wb-chip:hover { background: var(--wb-fill-hover); border-color: rgba(165, 241, 255, .5); }
/* Download links styled as buttons read as buttons (centred, no underline). */
.wb[data-workspace-ui="guided"] a.wb-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
/* Disabled always reads as disabled (declared after every hover/pressed rule above). */
.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: rgba(185, 210, 222, .46); background: rgba(255, 255, 255, .015); border-color: rgba(138, 204, 228, .14);
}
/* Fields: borders >= 3:1 so every input is findable. */
.wb[data-workspace-ui="guided"] .wb-input { border-radius: var(--wb-r-ctl); border-color: var(--wb-ctl-strong); background: rgba(2, 10, 18, .72); color: var(--ink-hi); }
.wb[data-workspace-ui="guided"] .wb-input:hover:not(:disabled) { border-color: rgba(165, 241, 255, .62); }
.wb[data-workspace-ui="guided"] .wb-input:focus-visible { border-color: var(--wb-accent); }
.wb[data-workspace-ui="guided"] .wb-input:disabled { border-color: rgba(138, 204, 228, .2); color: rgba(185, 210, 222, .55); }
.wb[data-workspace-ui="guided"] .wb-input::placeholder { color: #7F9DAD; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] select.wb-input { background-color: #061522; }
/* Panels and cards. */
.wb[data-workspace-ui="guided"] .wb-holo {
background: var(--wb-panel); border: 1px solid var(--wb-hair-2); border-radius: var(--wb-r-card);
box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.wb[data-workspace-ui="guided"] :is(.wb-card,.wb-panel) { padding: 16px; }
.wb[data-workspace-ui="guided"] .wb-review { border-color: rgba(255, 181, 71, .55); }
.wb[data-workspace-ui="guided"] .wb-review:is([data-state="ready"],[data-state="committing"]) {
border-color: rgba(255, 181, 71, .8);
box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 181, 71, .35), 0 0 28px rgba(255, 181, 71, .14);
}
.wb[data-workspace-ui="guided"] .wb-review:is([data-state="failed"],[data-state="uncertain"],[data-state="stale"]) {
border-color: rgba(255, 107, 120, .8); box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 107, 120, .35);
}
.wb[data-workspace-ui="guided"] .wb-review-actions { border-top-color: var(--wb-hair-2); background: rgba(8, 22, 35, .98); }
.wb[data-workspace-ui="guided"] .wb-review-sum { font-size: 16px; line-height: 1.5; }
.wb[data-workspace-ui="guided"] :is(.wb-advanced,.wb-model-joints) { border-top-color: var(--wb-hair-2); }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-advanced > summary { color: var(--wb-text-2); font-size: 13.5px; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-advanced > summary:hover { color: var(--ink-hi); }
.wb[data-workspace-ui="guided"] :is(.wb-verify-detail,.wb-notice-detail,.wb-model-account,#wbProjectShelf,#wbAccountShelf) > summary { color: var(--wb-text-2); }
/* Every fold shows that it opens (＋) and closes (－); the open state itself is native. */
.wb[data-workspace-ui="guided"] :is(.wb-verify-detail,.wb-notice-detail,#wbAccountShelf,#wbStructureTree,.wb-disassembly,.wb-motion-pairs details) > summary { list-style: none; }
.wb[data-workspace-ui="guided"] :is(.wb-verify-detail,.wb-notice-detail,#wbAccountShelf,#wbStructureTree,.wb-disassembly,.wb-motion-pairs details) > summary::-webkit-details-marker { display: none; }
.wb[data-workspace-ui="guided"] :is(.wb-verify-detail,.wb-notice-detail,#wbAccountShelf,#wbStructureTree,.wb-disassembly,.wb-motion-pairs details) > summary::after { content: '＋'; content: '＋' / ''; margin-left: auto; padding-left: 12px; font-weight: 500; color: var(--wb-accent-hi); }
.wb[data-workspace-ui="guided"] :is(.wb-verify-detail,.wb-notice-detail,#wbAccountShelf,#wbStructureTree,.wb-disassembly,.wb-motion-pairs details)[open] > summary::after { content: '－'; content: '－' / ''; }
.wb[data-workspace-ui="guided"] #wbEditCopyEvidence summary { justify-content: space-between; gap: 12px; }
.wb[data-workspace-ui="guided"] #wbEditCopyEvidence summary::after { margin-left: 0; padding-left: 0; flex: none; }
.wb[data-workspace-ui="guided"] :is(.wb-notice,.wb-studio) { border-radius: 12px; border-color: var(--wb-hair-2); }
.wb[data-workspace-ui="guided"] .wb-model-history { color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-hist li { border-radius: 10px; }
/* Header: quiet chrome; the engine line is read out but not shown twice. */
.wb[data-workspace-ui="guided"] .wb-top { min-height: 56px; padding: 8px 16px; gap: 6px 12px; background: rgba(3, 12, 21, .94); border-bottom: 1px solid var(--wb-hair); }
.wb[data-workspace-ui="guided"] .wb-top::after { display: none; }
.wb[data-workspace-ui="guided"] .wb-sys { display: none; }
.wb[data-workspace-ui="guided"] .wb-logo { font-size: 14px; font-weight: 750; color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-title { font-size: 16px; font-weight: 750; letter-spacing: -.02em; text-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-sample { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid rgba(255, 181, 71, .34); border-radius: 999px; background: rgba(255, 181, 71, .06); font-size: 12px; color: #F3D3A2; white-space: nowrap; }
.wb[data-workspace-ui="guided"]:not([data-boot="failed"]) .wb-engine { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wb[data-workspace-ui="guided"] .wb-help-btn { padding: 0 14px; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbInputs { gap: 6px; }
@media (min-width:721px) { .wb[data-workspace="imported"][data-workspace-ui="guided"] #wbInputs button { font-size: 13px; padding: 0 12px; } }
/* Live status: one line beside the brand; a new message is bright for a few
seconds (JS re-arms data-fresh), errors keep a red dot until the next one. */
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status {
display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 0; margin: 0;
font-size: 12.5px; line-height: 1.45; color: var(--wb-text-3);
transition: color .6s ease 5s;
}
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(150, 214, 238, .35); transition: background-color .6s ease 5s; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status[data-fresh] { color: var(--ink-hi); transition: none; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status[data-fresh]::before { background: var(--wb-accent); transition: none; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status[data-tone="bad"]::before { background: var(--bad); transition: none; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status:empty { display: none; }
.wb[data-workspace="imported"][data-workspace-ui="guided"]:not([data-model-ready]) .wb-model-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width:1100px) {
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-top { flex-wrap: nowrap; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status { order: 2; flex: 1 1 0; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status::before { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] :is(#wbInputs) { order: 3; margin-left: auto; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-help-btn { order: 4; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-sample { order: 1; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbHandMode { width: 176px; }
}
/* Tool bar: steps read as one strip; the current tool is a clear tab. */
.wb[data-workspace-ui="guided"] .wb-tabs {
gap: 6px 8px; padding: 8px 10px; border: 1px solid var(--wb-hair-2); border-radius: var(--wb-r-card);
background: linear-gradient(180deg, rgba(10, 26, 41, .97), rgba(5, 16, 27, .97)); box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
}
.wb[data-workspace-ui="guided"] .wb-tab { border-radius: var(--wb-r-ctl); padding: 0 14px; color: var(--wb-text-2); font-weight: 650; transition: background-color .15s, color .15s, border-color .15s; }
.wb[data-workspace-ui="guided"] .wb-tab:hover:not(:disabled) { background: var(--wb-fill-hover); color: var(--ink-hi); }
.wb[data-workspace-ui="guided"] .wb-tab[aria-pressed="true"] { color: var(--ink-hi); background: rgba(92, 225, 255, .12); border-color: rgba(165, 241, 255, .42); box-shadow: inset 0 -2px 0 var(--wb-accent); }
.wb[data-workspace-ui="guided"] .wb-tab:disabled { color: rgba(185, 210, 222, .42); background: transparent; border-color: transparent; box-shadow: none; cursor: not-allowed; }
/* Before a model opens, 살펴보기 is not "selected": nothing is shown yet. */
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-tab[data-tab-btn="parts"][aria-pressed="true"] { color: var(--wb-text-2); background: transparent; border-color: transparent; box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-flow-open { color: var(--wb-accent-hi); border-color: rgba(165, 241, 255, .38); background: var(--wb-fill); }
.wb[data-workspace-ui="guided"] .wb-flow-step { padding: 4px 6px 6px; border-radius: 12px; }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-current] { border-color: rgba(150, 214, 238, .16); background: rgba(92, 225, 255, .055); }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-next]:not([data-current]) { border-color: rgba(255, 181, 71, .5); }
.wb[data-workspace-ui="guided"] .wb-flow-head { min-height: 22px; gap: 6px; padding: 0 4px; font-size: 12px; color: var(--wb-text-3); }
.wb[data-workspace-ui="guided"] .wb-flow-num { width: 20px; height: 20px; font: 700 12px/1 var(--mono); border-color: rgba(150, 214, 238, .35); color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-flow-step[data-current] .wb-flow-num { border-color: var(--wb-accent); color: var(--wb-accent-hi); }
.wb[data-workspace-ui="guided"] .wb-flow-title { font-weight: 700; color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-flow-state { max-width: 12em; color: var(--wb-text-3); }
.wb[data-workspace-ui="guided"] .wb-flow-state::before { color: rgba(150, 214, 238, .45); }
.wb[data-workspace-ui="guided"] .wb-flow-arrow { padding-bottom: 14px; color: rgba(150, 214, 238, .4); }
.wb[data-workspace-ui="guided"] .wb-flow-aside { border-left-color: var(--wb-hair-2); }
.wb[data-workspace-ui="guided"] .wb-workspace-hint { padding: 2px 6px; font-size: 13px; line-height: 1.55; color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-workspace-step { border-color: rgba(165, 241, 255, .4); color: var(--wb-accent-hi); font-size: 12px; }
.wb[data-workspace-ui="guided"] #wbReviewShortcut { border-radius: var(--wb-r-ctl); }
.wb[data-workspace-ui="guided"] #wbFocusToggle[aria-pressed="true"] { color: var(--wb-accent-hi); border-color: rgba(165, 241, 255, .7); background: var(--wb-fill-on); }
@media (min-width:1360px) {
/* Wide enough: the guide sits between the steps and the actions (one row). */
.wb[data-workspace-ui="guided"] .wb-tabs { flex-wrap: nowrap; }
.wb[data-workspace-ui="guided"] .wb-workspace-hint { order: 1; flex: 1 1 220px; min-width: 200px; align-self: center; padding: 0 8px; }
.wb[data-workspace-ui="guided"] .wb-workspace-actions { order: 2; margin-left: 0; flex: none; }
}
@media (max-width:1099.98px) {
/* Row one: the steps or tools. Row two: the guide, then 작품 크게 보기. */
.wb[data-workspace-ui="guided"] .wb-tabs::after { content: ''; order: 1; flex: 0 0 100%; height: 0; }
.wb[data-workspace-ui="guided"] .wb-workspace-hint { order: 2; flex: 1 1 0; min-width: 0; align-self: center; }
.wb[data-workspace-ui="guided"] .wb-workspace-actions { order: 3; flex: none; margin-left: auto; }
}
@media (min-width:1000px) and (max-width:1099.98px) {
/* Wide tablets: 작품 크게 보기 fits beside the steps; the guide takes row two. */
.wb[data-workspace-ui="guided"] .wb-tabs::after { content: none; }
.wb[data-workspace-ui="guided"] .wb-workspace-actions { order: 1; margin-left: auto; }
.wb[data-workspace-ui="guided"] .wb-workspace-hint { order: 2; flex: 1 1 100%; }
}
@media (min-width:721px) and (max-width:859.98px) {
/* Narrow tablets: the four step groups cannot share one row, so the tools
read as one flat row (as on phones) and the step name joins the guide. */
.wb[data-workspace-ui="guided"] :is(.wb-flow,.wb-flow-step,.wb-flow-tools,.wb-flow-aside) { display: contents; }
.wb[data-workspace-ui="guided"] :is(.wb-flow-head,.wb-flow-arrow,.wb-flow-open) { display: none; }
.wb[data-workspace-ui="guided"] .wb-workspace-step { display: inline-block; margin-right: 6px; padding: 1px 7px; border: 1px solid rgba(165, 241, 255, .4); border-radius: 999px; font-weight: 700; white-space: nowrap; }
}
/* Stage: the model gets the light; overlays become small instruments. */
.wb[data-workspace-ui="guided"] .wb-canvas-host::after { background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0, 4, 10, .5) 100%); }
.wb[data-workspace-ui="guided"] .wb-hud-deco::after { display: none; }
.wb[data-workspace-ui="guided"] .wb-hud-c { width: 18px; height: 18px; border-color: rgba(150, 214, 238, .3); }
.wb[data-workspace-ui="guided"] .wb-strip-item { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl { padding: 4px; gap: 2px; border: 1px solid var(--wb-hair-2); border-radius: var(--wb-r-card); background: rgba(5, 16, 27, .82); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-btn { min-height: 44px; }
.wb[data-workspace-ui="guided"] .wb-input-alert-row { border-radius: 12px; }
/* The section tool scrolls with its column (no box-in-a-box scroll). */
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-joint { max-height: none; overflow: visible; }
/* Left panel: once a model is open, the file-type notes and sample link give
way to the parts; few-part models also skip the search and filter. */
.wb[data-workspace-ui="guided"] .wb-model-import { margin-bottom: 14px; padding-bottom: 14px; border-bottom-color: var(--wb-hair-2); }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import > :is(.wb-note:not([id]),.wb-model-template) { display: none; }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import > .wb-btn { min-height: 44px; }
.wb[data-workspace-ui="guided"][data-few-parts] :is(label[for="wbStructureSearch"],#wbStructureSearch,label[for="wbStructureFilter"],#wbStructureFilter) { display: none; }
.wb[data-workspace-ui="guided"][data-few-parts] #wbStructureCount { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wb[data-workspace-ui="guided"] .wb-part { padding: 6px; border-radius: 12px; border-color: var(--wb-hair-2); background: var(--wb-fill); }
.wb[data-workspace-ui="guided"] .wb-part:hover { border-color: rgba(165, 241, 255, .4); }
.wb[data-workspace-ui="guided"] .wb-part[data-selected] { border-color: rgba(165, 241, 255, .8); background: rgba(92, 225, 255, .08); box-shadow: inset 0 0 0 1px rgba(165, 241, 255, .5); }
.wb[data-workspace-ui="guided"] .wb-part[data-selected][data-affected] { box-shadow: inset 0 0 0 1px rgba(165, 241, 255, .6), inset 0 0 0 3px rgba(255, 181, 71, .5); }
.wb[data-workspace-ui="guided"] .wb-part-name { font-size: 14px; font-weight: 750; }
.wb[data-workspace-ui="guided"] .wb-part-dims { font-size: 12px; color: var(--wb-text-3); }
.wb[data-workspace-ui="guided"] .wb-part-swatch { box-shadow: none; }
/* Start screen: centred copy; the 4 steps already sit in the tool bar on
wide screens; the floating 자비스 card waits until a model is open. */
.wb[data-workspace-ui="guided"] .wb-start > p { margin-inline: auto; }
.wb[data-workspace-ui="guided"] .wb-start-sample p { max-width: none; margin: 0 0 4px; }
.wb[data-workspace-ui="guided"] .wb-start h3 { text-shadow: none; letter-spacing: -.04em; }
.wb[data-workspace-ui="guided"] .wb-start-eyebrow { letter-spacing: .16em; color: var(--wb-text-3); }
.wb[data-workspace-ui="guided"] .wb-start-lead { color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-start-actions .wb-btn { min-width: 160px; }
.wb[data-workspace-ui="guided"] .wb-start-sample { border: 1px solid var(--wb-hair-2); background: rgba(6, 18, 30, .88); }
.wb[data-workspace-ui="guided"] .wb-start-steps { border-color: var(--wb-hair-2); }
.wb[data-workspace-ui="guided"] .wb-start-steps li + li { border-left-color: var(--wb-hair-2); }
@media (min-width:721px) {
/* Tablets and wide screens show the same four steps in the tool row: the start
screen then fits the stage without an inner scroll. */
.wb[data-workspace-ui="guided"] .wb-start-steps { display: none; }
}
@media (min-width:1100px) {
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-empty { padding-right: 20px; }
}
/* Command line and conversation. */
.wb[data-workspace-ui="guided"] .wb-dock { gap: 8px; }
.wb[data-workspace-ui="guided"] .wb-cmd { gap: 6px; }
.wb[data-workspace-ui="guided"] .wb-prompt { color: var(--wb-accent); text-shadow: none; font-size: 15px; }
.wb[data-workspace-ui="guided"] .wb-cmd [type="submit"] { color: var(--wb-accent-hi); background: var(--wb-fill); border-color: rgba(165, 241, 255, .42); box-shadow: none; font-weight: 700; }
.wb[data-workspace-ui="guided"] .wb-cmd:has(.wb-input:not(:placeholder-shown)) [type="submit"] { color: var(--wb-accent-ink); background: var(--wb-primary); border-color: #A5F1FF; }
.wb[data-workspace-ui="guided"] .wb-log li { border-radius: 10px; font-size: 13.5px; background: rgba(255, 255, 255, .035); }
.wb[data-workspace-ui="guided"] .wb-log li[data-role="user"] { background: rgba(92, 225, 255, .12); border-color: rgba(92, 225, 255, .28); }
.wb[data-workspace-ui="guided"] .wb-log li[data-role="engine"] { border-color: var(--wb-hair); }
.wb[data-workspace-ui="guided"] .wb-question { border-radius: 12px; border-color: rgba(165, 241, 255, .55); background: rgba(92, 225, 255, .07); box-shadow: none; }
.wb[data-workspace-ui="guided"] .wb-assistant-mode { border-color: var(--wb-hair-2); }
@media (min-width:860px) {
/* Other tools: the dock is one compact command bar (no clipped input). A
question from the engine or a live caption still shows above it. */
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock {
flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; padding: 6px 8px; overflow: visible;
}
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock > :not(.wb-cmd):not(.wb-question):not(.wb-caption):not(#wbGuideStart) { display: none; }
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock > #wbGuideStart { display: inline-flex; align-items: center; flex: none; margin: 0; align-self: center; }
/* A camera question being typed stays on screen; one in flight keeps just its
title, buttons (cancel) and status line, so nothing shifts under the pointer. */
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock > #wbCameraDialog:is(:focus-within,:has(#wbCameraQuestionCancel:not([hidden]))) { display: block; order: -2; flex: 1 1 100%; margin: 0; max-height: 40vh; overflow: auto; overscroll-behavior: contain; }
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock > #wbCameraDialog:has(#wbCameraQuestionCancel:not([hidden])) > :is(.wb-note:not([id="wbCameraDialogStatus"]),.wb-label,textarea,.wb-repair-group) { display: none !important; } /* the panel sets the textarea's display inline */
/* The answer to a typed command, or a problem, shows in full above the input
(only the latest message; the whole conversation stays in the 대화 tool). */
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock > #wbLog.wb-log:is(:has(> li:last-child[data-tone="bad"]),:has(> li[data-role="user"] + li:last-child)) { display: flex; order: -1; flex: 1 1 100%; min-height: 0; max-height: none; margin: 0; overflow: visible; }
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock > .wb-log > li:not(:last-child) { display: none; }
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock > .wb-log > li:last-child { max-width: none; }
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-dock > :is(.wb-question,.wb-caption) { order: -1; flex: 1 1 100%; margin: 0; }
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]):not([data-guidance]) .wb-cmd { flex: 1 1 260px; min-width: 0; }
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-tab="dock"]) #wbMic:disabled { display: none; }
/* The conversation tool: a full-height panel at the side (input always visible). */
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-dock { grid-area: dock; height: auto; min-height: 0; padding: 16px; overflow: auto; overscroll-behavior: contain; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-dock > .wb-h2 { display: flex; flex: none; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-log { flex: 1 1 auto; min-height: 96px; max-height: none; margin: 0; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) :is(.wb-assistant-mode,.wb-voice-availability,#wbGuideStart,.wb-question,.wb-cmd,.wb-caption,#wbCmdNote,.wb-chips,#wbJointCommandHint) { flex: none; margin-top: 0; margin-bottom: 0; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-chips { flex-wrap: wrap; overflow: visible; padding: 0; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-cmd { flex-wrap: wrap; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-cmd .wb-prompt { display: none; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-cmd .wb-input { flex: 1 1 100%; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-cmd .wb-btn { flex: 1 1 0; }
}
@media (min-width:1100px) {
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-main {
grid-template-columns: var(--wb-lw) minmax(0, 1fr) var(--wb-rw);
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas: "tools tools tools" "parts free dock";
}
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"][data-preview]:not([data-focus-mode]) .wb-main {
grid-template-rows: auto auto minmax(0, 1fr);
grid-template-areas: "tools tools tools" "parts free right" "parts free dock";
}
}
@media (min-width:860px) {
/* The camera overlay guide sits under the view pad at the right edge and stops
above the floating 자비스 card (beside the pad on short stages); the model is
fitted to its left (resize()). */
.wb[data-workspace-ui="guided"] .wb-camera-guide {
top: var(--wb-guide-top, calc(var(--ft, 0px) + 12px));
right: var(--wb-guide-right, calc(var(--fr, var(--fr0, 0px)) + 12px));
max-width: calc(100% - var(--fl, var(--fl0, 0px)) - var(--fr, var(--fr0, 0px)) - 24px);
max-height: min(400px, calc(50% - 12px), var(--wb-guide-room, 400px));
}
/* Beside the pad (resize()), “카메라로 할 일” may use the free height down to the bottom bar. */
.wb[data-workspace-ui="guided"][data-guide-dock="side"] .wb-camera-guide { max-height: min(600px, var(--wb-guide-room, 400px)); }
}
/* The 12px type floor also covers the camera overlay guide's small notes (layout unchanged). */
.wb[data-workspace-ui="guided"] .wb-camera-guide :is(.wb-camera-guide-eyebrow,.wb-camera-guide-limit,.wb-camera-guide-scope,.wb-camera-guide-speech span,.wb-camera-guide-speech-status,.wb-camera-guide-live-title,.wb-camera-guide-live-status,.wb-camera-guide-live button) { font-size: 12px; }
@media (max-width:599.98px) {
/* Phones: before a model, the folded camera guide sits at the stage's top right
over the centred start text; the start content begins below it. */
.wb[data-workspace-ui="guided"]:not([data-model-ready]):has(.wb-camera-guide) .wb-start { padding-top: 56px; }
}
@media (min-width:1100px) and (max-height:760px) {
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) #wbJointCommandHint { display: none; }
}
/* Dialogs: opaque, roomy, the close action stays reachable. */
.wb[data-workspace-ui="guided"] .wb-dialog { padding: 24px; border-radius: 18px; border-color: rgba(165, 241, 255, .3); background: #08182A; color: var(--wb-text-1); max-height: min(86vh, 760px); overflow: auto; box-shadow: 0 24px 70px rgba(0, 0, 0, .65); }
.wb[data-workspace-ui="guided"] .wb-dialog::backdrop { background: rgba(1, 6, 12, .74); }
.wb[data-workspace-ui="guided"] .wb-dialog .wb-h2 { font-size: 18px; }
.wb[data-workspace-ui="guided"] .wb-dialog > p { line-height: 1.65; color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-dialog > p:not(.wb-note) { font-size: 14px; }
.wb[data-workspace-ui="guided"] [id="wbImportUnits"] label[for="wbImportUnit"] { display: grid; gap: 8px; margin: 14px 0 4px; font-size: 14px; font-weight: 650; color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-dialog .wb-model-row { margin-top: 14px; }
.wb[data-workspace-ui="guided"] .wb-help-list { padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--wb-text-2); }
.wb[data-workspace-ui="guided"] .wb-help-list li + li { margin-top: 8px; }
.wb[data-workspace-ui="guided"] #wbHelp form[method="dialog"] { position: sticky; bottom: -24px; margin: 16px -24px -24px; padding: 14px 24px 20px; background: linear-gradient(180deg, rgba(8, 24, 42, 0), #08182A 32%); }
.wb[data-workspace-ui="guided"] #wbHelp form[method="dialog"] .wb-btn { width: 100%; }
/* Phones and tablets. */
@media (min-width:721px) and (max-width:1099.98px) {
/* Tablets: brand, scope label, inputs and help on one row; the live status below. */
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-sample { order: 1; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbInputs { order: 3; margin-left: auto; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-help-btn { order: 4; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status { order: 5; flex: 1 1 100%; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbHandMode { width: 168px; max-width: 168px; }
}
@media (min-width:721px) and (max-width:859.98px) {
/* Stacked tablets: the view tools hug the lower right of the stage instead of spanning it. */
.wb[data-workspace-ui="guided"] .wb-view-ctrl { left: auto; right: 8px; max-width: calc(100% - 16px); justify-content: flex-end; }
}
@media (max-width:720.98px) {
.wb[data-workspace-ui="guided"] .wb-top { padding: 6px 12px 8px; gap: 6px 8px; }
.wb[data-workspace-ui="guided"] .wb-title { font-size: 16px; }
.wb[data-workspace-ui="guided"] .wb-sample { flex: 1 1 100%; white-space: normal; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status { flex: 1 1 100%; font-size: 12px; }
.wb[data-workspace-ui="guided"] .wb-tabs { padding: 6px; gap: 4px; }
.wb[data-workspace-ui="guided"] .wb-tab { font-size: 12px; letter-spacing: -.02em; line-height: 1.25; }
/* 작품 크게 보기 becomes an icon button; its text stays the accessible name. */
.wb[data-workspace-ui="guided"] #wbFocusToggle { width: 44px; min-width: 44px; padding: 0; font-size: 0; display: inline-grid; place-items: center; }
.wb[data-workspace-ui="guided"] #wbFocusToggle::before { content: '⤢'; content: '⤢' / ''; font-size: 19px; line-height: 1; }
.wb[data-workspace-ui="guided"] #wbFocusToggle[aria-pressed="true"]::before { content: '⤡'; content: '⤡' / ''; }
.wb[data-workspace-ui="guided"][data-preview] #wbFocusToggle { display: none; }
.wb[data-workspace-ui="guided"] .wb-workspace-hint { font-size: 12.5px; padding: 0 4px; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl { gap: 0; }
.wb[data-workspace-ui="guided"] :is(.wb-card,.wb-panel) { padding: 14px; }
/* Long choices in the condition and observation forms get the full width. */
.wb[data-workspace-ui="guided"] :is(#wbPartPreparationFields,#wbPartObservation .wb-model-fields) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width:360px) {
/* 320px: seven view tools in two even rows instead of one ragged wrap. */
.wb[data-workspace-ui="guided"] .wb-view-ctrl { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); }
}
@media (forced-colors: active) {
.wb[data-workspace-ui="guided"] :is(.wb-tab,.wb-icon-btn,.wb-btn)[aria-pressed="true"] { border: 2px solid Highlight; }
.wb[data-workspace-ui="guided"] :is(.wb-btn,.wb-icon-btn,.wb-tab,.wb-chip):disabled { color: GrayText; border-color: GrayText; }
.wb[data-workspace-ui="guided"] :focus-visible:not(.wb-canvas-host) { outline: 2px solid Highlight; }
.wb[data-workspace-ui="guided"] :is(.wb-view-ctrl,.wb-tabs,.wb-holo) { border: 1px solid CanvasText; }
}
/* ④ 다음 준비 행동 (Claude 2026-10-12): one card above the version, storage
and file cards; it names one next step and moves focus to the real control. */
.wb[data-workspace-ui="guided"] #wbPrepGuide { display: none; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="history"] #wbPrepGuide { display: block; }
.wb #wbPrepGuide[hidden] { display: none !important; }
/* ④ MODU3D 견적 접수 (Claude 2026-10-14): the request card after the condition card,
in the same history tool; hidden parts of the card stay hidden whatever their class. */
.wb[data-workspace-ui="guided"] #wbRequest { display: none; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="history"] #wbRequest { display: block; }
.wb #wbRequest[hidden], .wb #wbRequest [hidden] { display: none !important; }
/* Preserved GLB review remains reachable for pending records without a model. */
.wb[data-workspace-ui="guided"] #wbPreservedRequest { display: none; }
.wb[data-workspace-ui="guided"][data-tab="history"] #wbPreservedRequest { display: block; }
.wb #wbPreservedRequest[hidden], .wb #wbPreservedRequest [hidden] { display: none !important; }
.wb #wbPreservedRequest { min-width: 0; overflow-wrap: anywhere; }
.wb #wbPreservedRequest .wb-btn { white-space: normal; max-width: 100%; }
.wb #wbPreservedRequest .wb-model-fields > label { min-width: 0; }
.wb #wbPreservedRequest :is(input,select,textarea) { box-sizing: border-box; max-width: 100%; }
.wb .wb-prep-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--wb-accent-hi, #A5F1FF); }
.wb .wb-prep-next { padding: 12px 14px; border: 1px solid rgba(165, 241, 255, .32); border-radius: 12px; background: rgba(92, 225, 255, .06); }
.wb .wb-prep-next[data-next="none"] { border-style: dashed; background: transparent; }
.wb .wb-prep-kicker { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--t3); }
.wb .wb-prep-title { margin: 0 0 4px; font-size: 15px; font-weight: 750; line-height: 1.45; color: var(--ink-hi); }
.wb .wb-prep-detail { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--t2); }
.wb .wb-prep-next[data-next="none"] .wb-prep-detail { margin: 0; }
.wb .wb-prep-go { width: 100%; white-space: normal; }
.wb .wb-prep-rows { display: grid; margin: 12px 0 0; }
.wb .wb-prep-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 1px 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.wb .wb-prep-row::before { content: '○'; content: '○' / ''; grid-row: 1 / span 2; text-align: center; font-size: 12px; color: var(--t3); }
.wb .wb-prep-row > :is(dt,dd) { grid-column: 2; }
.wb .wb-prep-row[data-tone="ok"]::before { content: '✓'; content: '✓' / ''; color: #8FF0C4; }
.wb .wb-prep-row[data-tone="attention"]::before { content: '!'; content: '!' / ''; font-weight: 800; color: #FFD18A; }
.wb .wb-prep-row[data-tone="limited"]::before { content: '–'; content: '–' / ''; }
.wb .wb-prep-row[data-tone="info"]::before { content: 'i'; content: 'i' / ''; font: italic 700 12px Georgia, serif; }
.wb .wb-prep-row[data-tone="unknown"]::before { content: '?'; content: '?' / ''; font-weight: 800; }
.wb .wb-prep-row[data-tone="fact"]::before { content: '•'; content: '•' / ''; }
.wb .wb-prep-row dt { font-size: 12px; font-weight: 700; color: var(--t3); }
.wb .wb-prep-row dd { margin: 0; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.wb .wb-prep-row[data-tone="attention"] dd { color: #FFD18A; }
.wb .wb-prep-row:is([data-tone="limited"],[data-tone="info"],[data-tone="unknown"]) dd { color: var(--t2); }
.wb .wb-prep-scope { margin: 10px 0 0; font-size: 12px; }
.wb .wb-prep-return { width: 100%; margin: 8px 0 4px; white-space: normal; }
.wb #wbPartPreparationFields > .wb-prep-return { grid-column: 1 / -1; margin: 0; }
.wb .wb-model-row > .wb-prep-return { flex: 1 1 100%; margin: 0; }
/* F1-UI-A '이 작품으로 먼저 할 일' (Claude 2026-10-19): three purposes, facts, one next step. */
.wb .wb-first-purpose { container: wb-first-purpose / inline-size; min-width: 0; margin: 10px 0 2px; padding: 12px; border: 1px solid rgba(165, 241, 255, .28); border-radius: 12px; background: rgba(92, 225, 255, .05); }
.wb .wb-first-purpose[hidden], .wb .wb-first-purpose [hidden] { display: none !important; }
.wb .wb-fp-title { margin: 0 0 4px; }
.wb .wb-fp-title:focus-visible { outline: 2px solid var(--wb-accent-hi, #A5F1FF); outline-offset: 2px; border-radius: 4px; }
.wb .wb-fp-summary { margin: 0 0 10px; overflow-wrap: anywhere; }
.wb .wb-fp-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 10px; }
.wb .wb-fp-option { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 2px 10px; flex-wrap: wrap; min-width: 0; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.wb .wb-fp-option[aria-pressed="true"] { border-color: rgba(165, 241, 255, .7); background: rgba(92, 225, 255, .12); }
.wb .wb-fp-option:focus-visible { outline: 2px solid var(--wb-accent-hi, #A5F1FF); outline-offset: 2px; }
.wb .wb-fp-label { font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.wb .wb-fp-hint { font-size: 12px; line-height: 1.3; color: var(--t2); overflow-wrap: anywhere; }
.wb .wb-fp-status { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.wb .wb-fp-status[data-tone="attention"] { color: #FFD18A; }
.wb .wb-fp-status:is([data-tone="limited"], [data-tone="busy"]) { color: var(--t2); }
.wb .wb-fp-facts { display: grid; margin: 10px 0 0; }
.wb .wb-fp-fact { display: grid; grid-template-columns: minmax(56px, max-content) minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.wb .wb-fp-fact dt { font-size: 12px; font-weight: 700; color: var(--t3); }
.wb .wb-fp-fact dd { margin: 0; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.wb .wb-fp-fact[data-tone="limited"] dd { color: var(--t2); }
.wb .wb-fp-fact[data-tone="attention"] dd { color: #FFD18A; }
.wb .wb-fp-go { width: 100%; min-height: 44px; white-space: normal; }
.wb .wb-fp-next .wb-note { margin: 6px 0 0; }
/* Wide panels pair the four purposes; narrow side panels stack them and the facts. */
@container wb-first-purpose (min-width: 420px) {
.wb .wb-fp-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wb .wb-fp-option { flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: nowrap; gap: 3px; min-height: 56px; padding: 7px 8px; }
}
@media (forced-colors: active) {
.wb .wb-prep-next { border: 1px solid CanvasText; }
.wb .wb-prep-row::before { forced-color-adjust: auto; }
.wb :is(.wb-first-purpose, .wb-fp-option) { border: 1px solid CanvasText; }
.wb .wb-fp-option[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* Polish v3 (Claude 2026-10-13): the guided workbench as an app on medium
screens, one compact view pad with drawn icons, and a quieter stage.
Presentation only, appended after v2: the same nodes, ids, names, values and
listeners stay in place. No keyframes here.
- 860–1099px (tablet landscape, a side-panel browser): the model on the left,
the current tool in one sidebar, the command line under the model. The page
does not scroll; each panel scrolls on its own.
- View pad: 확대 · 위 · 축소 / 왼쪽 · 처음 · 오른쪽 / 비침 · 아래 · 연출.
- The camera overlay guide never covers the model: under (or beside) the pad
on wide and medium screens, at the lower left on tall medium stages, under
the view bar on phones. Positions only; resize() measures and sets them. */
/* 1. Medium screens: app layout. */
@media (min-width:860px) and (max-width:1099.98px) {
.wb[data-workspace-ui="guided"] { height: 100vh; height: 100dvh; min-height: 540px; display: flex; flex-direction: column; overflow: hidden; }
.wb[data-workspace-ui="guided"] > .wb-top { flex: none; }
.wb[data-workspace-ui="guided"] .wb-main {
--wb-sw: clamp(300px, 32vw, 340px);
flex: 1 1 auto; min-height: 0; display: grid;
grid-template-columns: minmax(0, 1fr) var(--wb-sw);
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas: "tools tools" "stage side" "dock side";
align-items: stretch; gap: 10px; padding: 10px;
}
.wb[data-workspace-ui="guided"] .wb-tabs { grid-area: tools; position: relative; top: auto; }
.wb[data-workspace-ui="guided"] .wb-stage,
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-stage,
.wb[data-workspace-ui="guided"][data-focus-mode] .wb-stage { grid-area: stage; align-self: stretch; height: auto; min-height: 0; }
.wb[data-workspace-ui="guided"] .wb-parts { grid-area: side; display: none; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.wb[data-workspace-ui="guided"] .wb-right { grid-area: side; display: none; flex-direction: column; gap: 10px; min-height: 0; }
.wb[data-workspace-ui="guided"] .wb-side { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0; }
.wb[data-workspace-ui="guided"] .wb-dock { grid-area: dock; }
/* The sidebar shows one thing: the parts, the current tool, or the proposal review. */
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="parts"]:not([data-preview]) .wb-parts { display: block; }
.wb[data-workspace-ui="guided"]:is([data-preview],[data-tab="section"],[data-tab="review"],[data-tab="history"]) .wb-right { display: flex; }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-dock { display: flex; }
.wb[data-workspace-ui="guided"][data-preview] .wb-review { position: relative; inset: auto; flex: none; max-height: min(52vh, 480px); z-index: auto; }
/* Nothing for the sidebar (start screen, 작품 크게 보기): the model takes the width. */
.wb[data-workspace-ui="guided"]:not([data-model-ready]):not([data-tab="history"]) .wb-main,
.wb[data-workspace-ui="guided"][data-focus-mode] .wb-main { grid-template-columns: minmax(0, 1fr) 0; column-gap: 0; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-main,
.wb[data-workspace-ui="guided"][data-focus-mode] .wb-main { grid-template-rows: auto minmax(0, 1fr) 0; }
/* 대화: the conversation takes the sidebar; with a proposal it sits under the review. */
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"]:not([data-focus-mode]) .wb-main { grid-template-areas: "tools tools" "stage dock" "stage dock"; }
.wb[data-workspace-ui="guided"][data-model-ready][data-tab="dock"][data-preview]:not([data-focus-mode]) .wb-main { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "tools tools" "stage side" "stage dock"; }
/* Stage instruments: the view pad at the top right, alerts above the command line. */
.wb[data-workspace-ui="guided"] .wb-view-ctrl { top: 12px; right: 12px; left: auto; bottom: auto; max-width: none; }
.wb[data-workspace-ui="guided"] .wb-input-alert { bottom: 16px; }
.wb[data-workspace-ui="guided"] .wb-start h3 { font-size: clamp(26px, 3vw, 32px); }
/* While a proposal waits, 작품 크게 보기 is unavailable: 수정안 검토 takes its place in row one. */
.wb[data-workspace-ui="guided"][data-preview] #wbFocusToggle:disabled { display: none; }
/* Tall stages (portrait windows): the camera guide docks at the lower left beside
the 자비스 card and the model keeps the full width above it (resize()). */
.wb[data-workspace-ui="guided"][data-guide-dock="bottom"] .wb-camera-guide {
top: auto; bottom: 12px; left: 12px; right: var(--wb-guide-right, 12px); width: auto; max-width: none; max-height: min(320px, 44%);
}
.wb[data-workspace-ui="guided"][data-guide-dock="bottom"] .wb-input-alert { bottom: calc(var(--wb-guide-h, 0px) + 16px); }
}
/* Stacked tablets (721–859px): long live instructions need their own row;
sharing the last few pixels with the scope label can make one tall column.
While a proposal waits, the view pad
moves to the top right: the camera guide then sits under it (measured by
resize()) and the model keeps to their left. */
@media (min-width:721px) and (max-width:859.98px) {
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-sample { order: 5; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] .wb-model-status { order: 6; flex: 1 1 100%; min-width: 0; }
.wb[data-workspace="imported"][data-workspace-ui="guided"] #wbHandMode { width: 152px; max-width: 152px; }
.wb[data-workspace-ui="guided"][data-model-ready][data-preview] .wb-camera-guide { top: var(--wb-guide-top, 10px); max-height: max(120px, calc(100% - var(--wb-guide-top, 10px) - 10px)); }
}
/* 2. The view pad: nine instruments in one 3×3 pad (tablets and wider). */
@media (min-width:721px) {
.wb[data-workspace-ui="guided"][data-model-ready] .wb-view-ctrl {
display: grid; grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px;
grid-template-areas: "zin up zout" "left reset right" "surface down motion";
gap: 2px; padding: 4px; width: max-content; justify-content: start;
border: 1px solid var(--wb-hair-2); border-radius: 16px;
background: linear-gradient(180deg, rgba(10, 26, 41, .9), rgba(4, 14, 24, .9));
box-shadow: 0 14px 34px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="zoom"][data-zoom="0.85"] { grid-area: zin; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="zoom"][data-zoom="1.18"] { grid-area: zout; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-pitch="1"] { grid-area: up; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-pitch="-1"] { grid-area: down; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-yaw="-1"] { grid-area: left; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-yaw="1"] { grid-area: right; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="reset-view"] { grid-area: reset; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="surface"] { grid-area: surface; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="motion"] { grid-area: motion; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-btn { width: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; }
/* The centre (처음) reads as the pad's home key. */
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="reset-view"] { background: rgba(92, 225, 255, .08); border-color: rgba(165, 241, 255, .22); }
}
@media (min-width:1100px) {
/* Wide screens: the pad sits in the top band of the free area, level with the chips. */
.wb[data-workspace-ui="guided"][data-model-ready] .wb-view-ctrl { top: calc(var(--ft, 92px) + 12px); }
}
/* Icons: drawn with masks in the button's own colour. The glyph text stays in
the markup (and returns in forced colours); every button keeps its name. */
.wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-btn { position: relative; font-size: 0; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-btn::before {
content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
background-color: currentColor;
-webkit-mask: var(--wb-ico) center / contain no-repeat; mask: var(--wb-ico) center / contain no-repeat;
}
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-yaw="-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='M3.5 12a8.5 8.5 0 1 0 2.6-6.1'/%3E%3Cpath d='M4 3.5v4.5h4.5'/%3E%3C/svg%3E"); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-yaw="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='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20 3.5v4.5h-4.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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14.5l6-6 6 6'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-zoom="0.85"] { --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%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M10.5 7.8v5.4M7.8 10.5h5.4'/%3E%3C/svg%3E"); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-zoom="1.18"] { --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%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M7.8 10.5h5.4'/%3E%3C/svg%3E"); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="reset-view"] { --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='M4 11.2L12 4.5l8 6.7'/%3E%3Cpath d='M6.5 9.4V19.5h11V9.4'/%3E%3Cpath d='M10 19.5v-5h4v5'/%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='2' 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='1.6 2.4'/%3E%3C/svg%3E"); }
.wb[data-workspace-ui="guided"] .wb-view-ctrl [data-act="motion"] { --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='M10 3.5l1.7 4.8 4.8 1.7-4.8 1.7L10 16.5l-1.7-4.8L3.5 10l4.8-1.7z'/%3E%3Cpath d='M18 14.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"); }
@media (forced-colors: active) {
.wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-btn { font-size: 17px; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-text { font-size: 13px; }
.wb[data-workspace-ui="guided"] .wb-view-ctrl .wb-icon-btn::before { display: none; }
}
/* 3. Left panel and sidebar: once a model is open, opening another file is a
quiet line, not the panel's biggest button. */
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import > [data-model-act="open"] {
width: auto; min-height: 44px; padding: 0 14px; font-size: 13px; font-weight: 700;
color: var(--wb-accent-hi); background: var(--wb-fill); border-color: rgba(165, 241, 255, .38); box-shadow: none;
}
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import > [data-model-act="open"]:hover { background: var(--wb-fill-hover); }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import > :not([data-model-act="open"]):not(#wbModelFile) { flex: 1 1 100%; }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-model-import > #wbStudioEntry:empty { display: none; }
/* 4. Phones: with a model open, the camera guide docks at the bottom of the stage,
under the view bar, instead of covering the model; the stage grows by the
guide's measured height (--wb-guide-h, set by resize()), so the model keeps its
room. While a proposal waits, the review card covers that lower part of the
stage, not the model. Without the measurement nothing moves. */
@media (max-width:720.98px) {
.wb[data-workspace-ui="guided"][data-model-ready] .wb-camera-guide {
top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-width: none;
/* “카메라로 할 일” reads with the page scroll rather than a small inner one. */
max-height: min(520px, 80dvh);
}
.wb[data-workspace-ui="guided"][data-model-ready] .wb-stage { height: calc(48dvh + var(--wb-guide-h, 0px)); min-height: calc(310px + var(--wb-guide-h, 0px)); }
.wb[data-workspace-ui="guided"][data-model-ready][data-focus-mode] .wb-stage { height: calc(65dvh + var(--wb-guide-h, 0px)); }
.wb[data-workspace-ui="guided"][data-model-ready]:not([data-preview]) .wb-view-ctrl { bottom: calc(var(--wb-guide-h, 0px) + 8px); }
.wb[data-workspace-ui="guided"][data-model-ready] .wb-input-alert { bottom: calc(var(--wb-guide-h, 0px) + 64px); }
}
@media (max-width:859.98px) {
/* The docked proposal card floats over the page: opaque, so nothing reads through it. */
.wb[data-workspace-ui="guided"][data-preview] .wb-review { background: linear-gradient(180deg, #0c1d2d, #06121e); }
}
@media (min-width:860px) {
/* The parts panel scrolls on its own: a line scrolled under its top edge fades out
instead of showing as a cut line (no layout change: the strip sits in the top
padding; sticky offsets count from the content edge, hence -16px). */
.wb[data-workspace-ui="guided"] .wb-parts::before {
content: ''; display: block; position: sticky; top: -16px; z-index: 2; height: 16px; margin: -16px -16px 0;
background: linear-gradient(180deg, rgba(12, 29, 45, .98) 35%, rgba(12, 29, 45, 0)); pointer-events: none;
}
}
/* The 12px type floor also covers the camera guide's hand-practice notes (Codex
e929c8c; layout unchanged). */
.wb[data-workspace-ui="guided"] .wb-camera-guide :is(.wb-camera-guide-practice-current,.wb-camera-guide-practice-scope,.wb-camera-guide-practice-local,.wb-camera-guide-practice-bar-title,.wb-camera-guide-practice-bar button,.wb-camera-guide-practice-limits > summary) { font-size: 12px; }
/* Keep the account deletion decision reachable while its detailed scope scrolls. */
.wb[data-workspace-ui="guided"] #wbAccountDeleteDialog { scroll-padding-block: 100px 150px; }
.wb[data-workspace-ui="guided"] #wbAccountDeleteDialog > .wb-model-row:last-child {
position: sticky; bottom: -24px; z-index: 3; margin: 14px -24px -24px;
padding: 12px 24px 20px; border-top: 1px solid var(--g-line, var(--line2));
background: var(--g-dialog, #08182A);
}
/* Opening a saved project is a short status, not the decorated start screen.
Keep its cancel action above the fold on phones, below the camera guide. */
@media (max-width:599.98px) {
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-start[data-project-open-progress] { margin-block: 0; padding-top: 56px; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-start[data-project-open-progress]::before { display: none; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-start[data-project-open-progress] h3 { font-size: 20px; line-height: 1.4; margin: 0 0 12px; }
}
/* A pending import keeps only its existing status/cancel card reachable while
the person stays in focus mode. No tool switch, scroll or focus movement. */
.wb[data-workspace-ui="guided"][data-import-review][data-focus-mode] #wbRight {
display: flex; position: fixed; inset: auto 12px 12px auto;
width: min(400px, calc(100vw - 24px)); max-height: min(45dvh, 360px); z-index: 12;
}
.wb[data-workspace-ui="guided"][data-import-review][data-focus-mode] #wbSide { display: none; }
.wb[data-workspace-ui="guided"][data-import-review][data-focus-mode] #wbReview { position: static; max-height: inherit; }
/* Figure setup and the confirmed history are separate, compact reading paths. */
.wb #wbFigureTools { min-width: 0; color: var(--g-t1, var(--ink)); }
.wb #wbFigureTools > .wb-advanced-body { padding-top: 14px; }
.wb #wbFigureTools #wbFigureFields { display: block; min-width: 0; padding: 0; margin: 0; border: 0; }
.wb #wbFigureTools .wb-figure-step { min-width: 0; margin: 16px 0; padding: 14px; border: 1px solid var(--g-line-2, var(--line)); border-radius: var(--g-r-card, 12px); background: var(--g-sunken, #0E1013); }
.wb #wbFigureTools .wb-figure-step h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 650; }
.wb #wbFigureTools .wb-figure-step h4 > span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--g-fill-2, rgba(255,255,255,.08)); color: var(--g-t2, var(--t2)); font-size: 12px; }
.wb #wbFigureTools .wb-figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; min-width: 0; }
.wb #wbFigureTools .wb-figure-field { display: grid; gap: 6px; min-width: 0; }
.wb #wbFigureTools .wb-figure-field > label { color: var(--g-t2, var(--t2)); font-size: 12px; line-height: 1.6; }
.wb #wbFigureTools :is(.wb-input, .wb-btn, summary) { min-height: 44px; max-width: 100%; }
.wb #wbFigureTools .wb-input { width: 100%; min-width: 0; }
.wb #wbFigureTools .wb-btn { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.wb #wbFigureTools .wb-figure-confirm { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-block: 12px; color: var(--g-t1, var(--ink)); font-size: 13px; line-height: 1.7; }
.wb #wbFigureTools .wb-figure-confirm input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--g-accent-mid, var(--cyan)); }
.wb #wbFigureTools #wbFigureAdvanced { margin-top: 14px; }
.wb #wbFigureTools #wbFigureAdvanced > .wb-figure-grid { padding-top: 12px; }
.wb #wbFigureTools #wbFigurePrepare { width: 100%; }
.wb #wbFigureTools #wbFigureStatus { padding-block: 4px; overflow-wrap: anywhere; }
.wb #wbFigureTools .wb-figure-actions { display: flex; flex-direction: column; gap: 8px; }
.wb #wbFigureTools .wb-figure-outcome { margin: 12px 0; padding: 14px; border: 1px solid var(--g-line-3, var(--line2)); border-radius: var(--g-r-card, 12px); background: var(--g-raised, #1A1D21); }
.wb #wbFigureTools .wb-figure-state { margin: 0 0 6px; color: var(--g-t1, var(--ink)); font-size: 15px; font-weight: 650; }
.wb #wbFigureTools .wb-figure-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr)); gap: 10px; margin-block: 14px; }
.wb #wbFigureTools .wb-figure-metrics > div { min-width: 0; padding: 12px; border-radius: 8px; background: var(--g-sunken, #0E1013); }
.wb #wbFigureTools .wb-figure-metrics span { display: block; margin-bottom: 6px; color: var(--g-t2, var(--t2)); font-size: 12px; line-height: 1.6; }
.wb #wbFigureTools .wb-figure-metrics strong { display: block; color: var(--g-t1, var(--ink)); font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wb #wbFigureTools .wb-figure-metrics small { color: var(--g-t2, var(--t2)); font-size: 12px; font-weight: 400; }
.wb #wbFigureTools .wb-figure-physical { margin-bottom: 0; padding-top: 12px; border-top: 1px solid var(--g-line-2, var(--line)); }
.wb #wbFigureTools .wb-figure-scope { margin-top: 14px; }
.wb .wb-figure-review-metrics { padding: 12px; border: 1px solid var(--g-line-3, var(--line2)); border-radius: 8px; background: var(--g-sunken, #0E1013); color: var(--g-t1, var(--ink)); font-variant-numeric: tabular-nums; line-height: 1.9; overflow-wrap: anywhere; }
.wb #wbFigureShortcut { width: 100%; min-width: 0; min-height: 44px; margin: 12px 0; padding: 10px 14px; border-color: var(--g-accent-line, var(--line2)); background: var(--g-accent-soft, var(--cyan-soft)); color: var(--g-accent-text, var(--cyan2)); text-align: left; white-space: normal; line-height: 1.6; }
.wb #wbFigureShortcut:hover:not(:disabled) { background: var(--g-fill-3, var(--cyan-soft)); }
/* Keep the next navigation within reach while specialist tools are expanded. */
.wb[data-workspace="imported"] .wb-part-shortcuts { position: sticky; top: calc(var(--wb-bar, 0px) - 16px); z-index: 3; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 16px 0 8px; margin: -12px 0 12px; background: var(--g-panel, #141619); border-bottom: 1px solid var(--line); }
.wb[data-workspace="imported"] .wb-part-shortcuts[hidden] { display: none; }
.wb[data-workspace="imported"] .wb-part-shortcuts .wb-btn { min-height: 44px; min-width: 0; padding: 8px; white-space: normal; }
.wb[data-workspace="imported"] :is(#wbStructureSearch,#wbStructureTitle,#wbStructureJourney,#wbPartsTitle,#wbFirstPurposeTitle,[data-model-part]) { scroll-margin-block: calc(var(--wb-bar, 0px) + 112px) 16px; }
.wb[data-workspace="imported"] .wb-tool-selection { margin: 14px 0; padding: 14px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(83,132,255,.07); }
.wb[data-workspace="imported"] .wb-tool-selection-label { margin: 0 0 6px; font-size: 12px; color: var(--t2); }
.wb[data-workspace="imported"] .wb-tool-selection-name { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 650; overflow-wrap: anywhere; }
.wb[data-workspace="imported"] .wb-tool-selection-note { margin: 8px 0 12px; }
.wb[data-workspace="imported"] .wb-tool-selection .wb-btn { min-height: 44px; width: 100%; white-space: normal; }
@media (forced-colors: active) { .wb[data-workspace="imported"] :is(.wb-part-shortcuts,.wb-tool-selection) { background: Canvas; border-color: CanvasText; } }
/* Structure understanding keeps evidence and the next safe action together. */
.wb[data-workspace="imported"] .wb-structure-overview { padding:12px; margin:8px 0; border:1px solid var(--line); border-radius:var(--radius,8px); background:var(--bg2,rgba(120,130,150,.05)); }
.wb[data-workspace="imported"] .wb-structure-journey { padding:12px 0; margin:8px 0; border-block:1px solid var(--line); overflow-wrap:anywhere; }
.wb[data-workspace="imported"] :is(.wb-structure-overview,.wb-structure-journey) p { margin:4px 0; }
.wb[data-workspace="imported"] #wbStructureFindingActions { display:grid; grid-template-columns:1fr; }
.wb[data-workspace="imported"] #wbStructureJourney .wb-model-row { display:grid; grid-template-columns:1fr; }
.wb[data-workspace="imported"] :is(#wbStructureFindingActions,#wbStructureJourney) button { min-height:44px; white-space:normal; text-align:left; }
/* Show the current input state and manual confirmation boundary in plain text. */
.wb .wb-interaction-help { margin:12px 0; padding:12px; border:1px solid var(--line2); border-radius:8px; background:var(--g-sunken,#111317); overflow-wrap:anywhere; }
.wb .wb-interaction-help[hidden], .wb .wb-interaction-review[hidden] { display:none; }
.wb .wb-interaction-state { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:13px; line-height:1.65; }
.wb .wb-interaction-state span { color:var(--t2); }
.wb .wb-interaction-context { margin:10px 0; padding:10px 12px; border-left:3px solid var(--g-accent-text,#b6ccff); font-size:13px; line-height:1.7; }
.wb .wb-interaction-context > strong { color:var(--g-accent-text,#b6ccff); }
.wb .wb-interaction-context p { margin:5px 0; color:var(--t2); }
.wb .wb-interaction-context .wb-btn { min-height:44px; white-space:normal; }
.wb .wb-interaction-context [hidden] { display:none; }
.wb .wb-interaction-help[data-state="connected"] .wb-interaction-state strong,
.wb .wb-interaction-help[data-state="listening"] .wb-interaction-state strong { color:var(--g-accent-text,#b6ccff); }
.wb .wb-interaction-details > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600; color:var(--ink); }
.wb .wb-interaction-details > summary::before { content:'▸'; margin-right:8px; }
.wb .wb-interaction-details[open] > summary::before { content:'▾'; }
.wb .wb-interaction-details > summary:focus-visible { outline:2px solid var(--g-accent-text,#b6ccff); outline-offset:3px; }
.wb .wb-interaction-columns { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; font-size:13px; line-height:1.8; }
.wb .wb-interaction-columns h3 { margin:8px 0; font-size:14px; }
.wb .wb-interaction-columns ol { padding-left:22px; margin:8px 0; }
.wb .wb-interaction-columns li { margin:8px 0; }
.wb .wb-interaction-columns strong { color:var(--g-accent-text,#b6ccff); }
.wb .wb-interaction-examples { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.wb .wb-interaction-examples .wb-btn { min-height:44px; white-space:normal; }
.wb :is(.wb-interaction-example-note,.wb-interaction-limits) { font-size:12px; line-height:1.8; }
.wb .wb-interaction-review { margin:12px 0; padding:12px; border-left:4px solid #e9aa62; background:rgba(233,170,98,.09); font-size:13px; line-height:1.7; }
.wb .wb-interaction-review > strong { color:#f4c993; }
.wb .wb-interaction-review .wb-btn { min-height:44px; }
@media(max-width:720px) { .wb .wb-interaction-columns { grid-template-columns:1fr; gap:8px; } .wb .wb-interaction-examples .wb-btn { flex:1 1 130px; } }
@media(forced-colors:active) { .wb :is(.wb-interaction-help,.wb-interaction-review) { background:Canvas; border-color:CanvasText; } .wb :is(.wb-interaction-state strong,.wb-interaction-review > strong,.wb-interaction-columns strong) { color:CanvasText; } }
/* Calculated support footprint, separate from the model silhouette. */
.wb-structure-support-map { display:block; width:100%; max-width:320px; height:auto; max-height:180px; color:var(--wb-text-2, #d6d9df); border:1px solid currentColor; border-radius:4px; }
/* Verified boundary locations stay reachable beside the model, below its badges. */
.wb .wb-object-boundary-navigation { position:absolute; z-index:6; top:48px; left:12px; width:min(320px,calc(100% - 24px)); box-sizing:border-box; padding:8px; border:1px solid var(--g-line-3,var(--line2,#50555e)); border-radius:12px; background:var(--g-panel,#141619); color:var(--ink,#edf0f4); box-shadow:0 8px 24px rgba(0,0,0,.25); touch-action:manipulation; }
.wb .wb-object-boundary-navigation[hidden] { display:none; }
.wb .wb-object-boundary-navigation-status { margin:0; font-size:13px; font-weight:650; line-height:1.4; font-variant-numeric:tabular-nums; }
.wb .wb-object-boundary-navigation-scope { margin:3px 0 7px; font-size:12px; line-height:1.4; color:var(--t2,#c3c8d0); }
.wb .wb-object-boundary-navigation-actions { display:grid; grid-template-columns:minmax(44px,1fr) minmax(44px,1fr) minmax(88px,1.4fr); gap:6px; }
.wb .wb-object-boundary-navigation .wb-btn { min-width:44px; min-height:44px; margin:0; padding:6px 8px; font-size:13px; line-height:1.3; white-space:normal; }
.wb .wb-object-boundary-navigation .wb-btn[aria-disabled="true"] { opacity:.48; cursor:default; }
@media(min-width:860px) and (max-width:1099.98px) { .wb .wb-object-boundary-navigation { width:min(260px,calc(100% - 312px)); } }
@media(min-width:1100px) { .wb[data-workspace-ui="guided"] .wb-object-boundary-navigation { top:calc(var(--ft,92px) + 48px); left:calc(var(--fl,var(--fl0,0px)) + 12px); max-width:calc(100% - var(--fl,var(--fl0,0px)) - var(--fr,var(--fr0,0px)) - 36px); } }
@media(max-width:720px) { .wb .wb-object-boundary-navigation { top:44px; left:8px; width:min(320px,calc(100% - 16px)); } }
@media(forced-colors:active) { .wb .wb-object-boundary-navigation { background:Canvas; border-color:CanvasText; color:CanvasText; } .wb .wb-object-boundary-navigation .wb-btn[aria-disabled="true"] { color:GrayText; opacity:1; } }