.oc-dialog{margin:auto;width:min(1120px,96vw);max-height:92vh;padding:0;background:#171c25;color:#e5edf9;border:1px solid #42516a;border-radius:18px;box-sizing:border-box;font:14px/1.6 system-ui,sans-serif}.oc-dialog::backdrop{background:#000a}.oc-dialog [hidden]{display:none!important}.oc-dialog header{position:sticky;top:0;z-index:2;background:#171c25;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;border-bottom:1px solid #354158}.oc-dialog h2{font-size:21px;margin:0}.oc-dialog p{margin:8px 0;color:#b8c7dc}.oc-dialog header button{flex-shrink:0}.oc-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;padding:22px}.oc-controls{min-width:0}.oc-dialog fieldset{border:1px solid #354158;border-radius:12px;padding:14px;margin:14px 0}.oc-dialog legend{font-weight:700}.oc-dialog label{display:block;margin:10px 0}.oc-dialog input:not([type=checkbox]),.oc-dialog select{box-sizing:border-box;width:100%;margin-top:6px}.oc-dialog input[type=number],.oc-dialog select{border:1px solid #53627a;background:#11151d;color:#f1f6ff;border-radius:8px;padding:9px;font:inherit}.oc-dialog input[type=range]{accent-color:#64b5ff}.oc-dialog input[type=checkbox]{width:18px;height:18px;vertical-align:middle;margin-right:8px}.oc-dialog button{background:#25344b;color:#eff6ff;border:1px solid #527095;border-radius:9px;padding:10px 13px;cursor:pointer;font:inherit}.oc-dialog button:disabled{opacity:.45;cursor:default}.oc-dialog button:focus-visible,.oc-dialog input:focus-visible,.oc-dialog select:focus-visible{outline:3px solid #8ed6ff;outline-offset:2px}.oc-dialog .oc-primary{background:#2567c9;width:100%;font-weight:700}.oc-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.oc-preview{min-width:0}.oc-view{height:390px;background:radial-gradient(ellipse,#293347,#10151e);border-radius:12px;overflow:hidden;touch-action:none}.oc-view canvas{display:block;max-width:100%}.oc-parts{display:grid;gap:8px;margin:14px 0}.oc-parts button{text-align:left}.oc-parts button[aria-pressed=true]{border-color:#8fcfff;background:#24496d}.oc-actions{display:flex;gap:8px;flex-wrap:wrap}.oc-dialog .oc-note{font-size:12px;color:#adbfd7}.oc-dialog [data-oc=status]{padding:10px 0;color:#c7e2ff;overflow-wrap:anywhere}@media(max-width:750px){.oc-layout{grid-template-columns:1fr;padding:14px}.oc-preview{grid-row:1}.oc-view{height:300px}.oc-dialog header{padding:14px}.oc-dialog{width:96vw}}

@media(min-width:751px){.oc-dialog{overflow:hidden}.oc-layout{height:min(680px,calc(92vh - 110px));box-sizing:border-box}.oc-controls,.oc-preview{min-height:0;overflow:auto;scrollbar-gutter:stable}.oc-view{height:min(390px,43vh)}}

@media(min-width:751px){.oc-preview{display:flex;flex-direction:column;overflow:hidden}.oc-view{flex-shrink:0;height:min(340px,39vh)}.oc-preview>[data-oc=result]{flex:1;min-height:0;overflow:auto}.oc-preview>.oc-note{flex-shrink:0}}

.oc-dialog .oc-bed-view{display:flex;flex-direction:column;padding:10px;box-sizing:border-box}.oc-bed-view label{margin:0 0 6px}.oc-bed-view [data-oc=plateSvg]{flex:1;min-height:0}.oc-bed-view svg{display:block;width:100%;height:100%}.oc-preview>.oc-actions{flex-shrink:0;margin-bottom:8px}.oc-controls,[data-oc=result]{overflow-x:hidden}.oc-dialog input[type=range]{margin-left:0;margin-right:0}
.oc-view{position:relative}.msv-labels{position:absolute;inset:0;pointer-events:none}.oc-dialog .msv-number{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;padding:0;border-radius:50%;background:#1c5fa9;color:white;font:bold 12px/22px system-ui;border:1px solid #b8ddff;pointer-events:auto}.oc-assembly-detail svg{display:block;width:100%;height:120px;background:#10221f;border-radius:8px}.oc-assembly-links{display:grid;gap:6px}.oc-assembly-links button{text-align:left}.oc-assembly-detail{padding:10px 0}.oc-assembly-parts{font-size:12px;line-height:1.7;overflow-wrap:anywhere}

.oc-assembly-links{max-height:260px;overflow-y:auto;padding:3px}.oc-assembly-links button[aria-pressed=true]{border-color:#8fcfff;background:#24496d}

.oc-dialog .oc-coupon-view{height:220px;position:relative}.oc-dialog [data-fit=apply]{margin-top:12px}.oc-dialog [data-fit=result] details{margin:12px 0}.oc-dialog [data-fit=status]{overflow-wrap:anywhere;color:#c7e2ff}

.oc-dialog [data-fit=inputs] input{border:1px solid #53627a;background:#11151d;color:#f1f6ff;border-radius:8px;padding:9px;font:inherit}

.oc-dialog [data-trial=section]{margin-top:18px;border-top:1px solid #354158;padding-top:14px}.oc-dialog [data-trial=section] summary{cursor:pointer;font-weight:700}.oc-dialog [data-trial=section] input:not([type=checkbox]){border:1px solid #53627a;background:#11151d;color:#f1f6ff;border-radius:8px;padding:9px;font:inherit}.oc-dialog [data-trial=section] p{overflow-wrap:anywhere}.oc-trial-detail{white-space:pre-line}.oc-dialog [data-trial=apply]{margin-top:8px}.oc-dialog [data-trial=status]{color:#c7e2ff}

.oc-fit-candidates{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.oc-dialog .oc-fit-evidence{white-space:pre-line;border-left:2px solid #527095;padding-left:8px}.oc-dialog [data-advice=summary]{color:#c7e2ff}.oc-dialog [data-advice=groups]{max-height:250px;overflow-y:auto}

.oc-dialog [data-fit=presets]{margin:14px 0}.oc-dialog [data-fit=presets] summary{cursor:pointer;font-weight:700}.oc-dialog [data-fit=presets] input{border:1px solid #53627a;background:#11151d;color:#f1f6ff;border-radius:8px;padding:9px;font:inherit}.oc-dialog [data-fit=presets] p{overflow-wrap:anywhere}.oc-dialog [data-preset=status]{color:#c7e2ff}
.oc-dialog [data-preset-sync=conflicts] p{white-space:pre-line;border-left:2px solid #dfb35a;padding-left:8px}.oc-dialog [data-preset-sync=status]{color:#c7e2ff}

.oc-process-scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.oc-process-compare{margin:8px 0;overflow-wrap:anywhere}.oc-process-compare dt{font-weight:600;margin-top:10px}.oc-process-compare dd{margin:2px 0 0;white-space:pre-line;color:#b8c7dc}.oc-process-compare dd[data-match=false]{border-left:2px solid #dfb35a;padding-left:8px}.oc-dialog [data-process=status]{color:#c7e2ff;overflow-wrap:anywhere}.oc-dialog [data-process=fields]{min-width:0}
/* UX-1005 MFG-11 큰 화면에서도 스크롤 하나: 설정은 대화상자 스크롤, 3D 미리보기 열은 따라온다(미리보기 크기는 그대로라 캔버스 크기 변화 없음) */
@media(min-width:751px){.oc-dialog{overflow:auto;overscroll-behavior:contain}.oc-layout{height:auto;align-items:start}.oc-controls{overflow:visible}.oc-preview{position:sticky;top:80px;align-self:start;max-height:calc(92vh - 110px)}}
.oc-dialog{overscroll-behavior:contain}
/* UX-1005 QA-2 Q2-04 따라오는 미리보기 열이 sticky 머리말(제목+부제, 약 109px) 밑으로 들어가 '3D 보기 / 출력판 보기'를 누를 수 없던 것 — 머리말 아래(118px)에 멈춘다 */
@media(min-width:751px){.oc-preview{top:var(--ocHeadH,118px);max-height:calc(92vh - 136px)}}
.oc-dialog legend{font-size:15px}
@media(max-width:860px){.oc-dialog button{min-height:44px}}
/* 2026-10-19 모델 분할: '이미 떨어진 조각 나누기'와 '자를 위치 정하기'를 첫 화면에서 구분 */
.oc-methods{border:1px solid #4a6a96;border-radius:12px;padding:14px;margin:14px 0;background:#1b2433}.oc-methods h3{margin:0 0 8px;font-size:15px}
.oc-method-list{display:grid;gap:8px}.oc-dialog .oc-method{display:grid;gap:4px;width:100%;text-align:left;padding:12px 14px;background:#22324a}.oc-dialog .oc-method b{font-size:15px;color:#f3f8ff}.oc-dialog .oc-method span{font-size:12.5px;line-height:1.5;color:#c3d1e4}
/* 결과 목록·내려받기가 미리보기 열에서 0px로 접히지 않게(제작 묶음은 왼쪽 단계 7로 옮김) */
@media(min-width:751px){.oc-preview>[data-oc=result]{min-height:min(200px,28vh)}}
.oc-dialog [data-oc=piecesStatus]{color:#c7e2ff;overflow-wrap:anywhere}.oc-dialog [data-oc=summary]:focus-visible{outline:3px solid #8ed6ff;outline-offset:2px}
/* 두 방법 카드(크기 안내 포함)를 대화상자 첫머리에: 넓은 화면은 왼쪽 열 맨 위, 좁은 화면은 3D 미리보기보다 위 */
.oc-intro{min-width:0}.oc-intro>.oc-methods{margin-bottom:0}.oc-dialog h2,.oc-methods{word-break:keep-all;overflow-wrap:anywhere}
@media(min-width:751px){.oc-layout>.oc-intro{grid-column:1;grid-row:1}.oc-layout>.oc-controls{grid-column:1;grid-row:2}.oc-layout>.oc-preview{grid-column:2;grid-row:1 / span 2}}
@media(max-width:750px){.oc-layout>.oc-intro{grid-row:1}.oc-layout>.oc-preview{grid-row:2}.oc-layout>.oc-controls{grid-row:3}}
/* 좁은 화면의 고정 머리말이 내용을 덜 가리게: 제목을 줄이고, 두 방법 카드가 같은 내용을 말하므로 부제는 숨김 */
@media(max-width:750px){.oc-dialog h2{font-size:18px;line-height:1.35}.oc-dialog header>div>p{display:none}}
/* 낮은 창(높이 약 830px 이하)에서도 미리보기 열 끝(내려받기·안내)까지 닿게: 3D 보기가 먼저 줄고(출력판 보기는 판독되도록 줄이지 않음), 그래도 넘치면 열이 스크롤 */
@media(min-width:751px){.oc-preview{overflow-y:auto}.oc-preview>.oc-view:not(.oc-bed-view){flex-shrink:1;min-height:min(160px,24vh)}.oc-preview>[data-oc=result]{min-height:min(200px,26vh)}}
/* automatic split (modu-auto-split/v1): first method + its settings under the method list */
.oc-dialog .oc-method-auto{background:#1f3b5e;border-color:#6f9be0}
.oc-auto-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 12px;margin:10px 0 4px}.oc-auto-options label{display:grid;gap:4px;font-size:13px;color:#d6e2f2}.oc-auto-options select,.oc-auto-options input[type=number]{min-height:40px}.oc-auto-options .oc-check{grid-column:1/-1;display:flex;gap:8px;align-items:center}

.oc-auto-cuts{margin:12px 0;padding:12px;border:1px solid #42516a;border-radius:12px;background:#1b2330}.oc-auto-cuts h4{margin:0 0 4px;font-size:15px}.oc-auto-cuts>p{margin:0 0 8px;font-size:13px;color:#c9d6e8}.oc-auto-cut-list{display:grid;gap:8px}.oc-auto-cut{display:grid;gap:4px;padding:8px 0;border-top:1px solid #2f3b4f}.oc-auto-cut:first-child{border-top:0}.oc-auto-cut p{margin:0}

/* 2026-10-22 touch targets and keyboard focus (390/320px audit). Narrow screens and touch screens: every control in the
   dialog is at least 44x44 (inputs, selects, file pickers, sliders, disclosure rows, checkboxes). Checkboxes keep a 24px
   drawn box at the start of a 44px hit box (the label text overlaps its last 8px; a tap there toggles it too) and show
   their focus ring on the whole label. Exception: the 3D number badges stay 24px circles; the view keeps visible badges
   at least 25px apart, and the same part is chosen with its 44px+ button in the parts list (a bigger badge hit area
   would cover a neighbouring badge). */
@media(max-width:860px),(pointer:coarse){.oc-dialog button{min-height:44px}
.oc-dialog input:not([type=checkbox]):not([type=range]),.oc-dialog select{min-height:44px}
.oc-dialog input[type=range]{height:44px;margin-top:0}
.oc-dialog summary{min-height:44px;padding:11px 0;box-sizing:border-box}
.oc-dialog input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:0 0 44px;width:44px;height:44px;margin:0 -8px 0 0;padding:0;border:0;border-radius:8px;vertical-align:middle;cursor:pointer;background:no-repeat 0 center/24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='5' fill='%2311151d' stroke='%239fb3cf' stroke-width='2'/%3E%3C/svg%3E")}
.oc-dialog input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%2364b5ff'/%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230b1a2b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.oc-dialog input[type=checkbox]:disabled{opacity:.45;cursor:default}
.oc-dialog label:has(>input[type=checkbox]){border-radius:8px}
.oc-dialog label:has(>input[type=checkbox]:focus-visible){outline:3px solid #8ed6ff;outline-offset:2px}
.oc-dialog label>input[type=checkbox]:focus-visible{outline:none}
.oc-auto-options .oc-check{gap:0}
.oc-dialog .msv-number{width:24px;height:24px;min-height:24px}
}
@supports not selector(:has(*)){@media(max-width:860px),(pointer:coarse){.oc-dialog label>input[type=checkbox]:focus-visible{outline:3px solid #8ed6ff;outline-offset:-2px}
}
}
@media(forced-colors:active) and (max-width:860px),(forced-colors:active) and (pointer:coarse){.oc-dialog input[type=checkbox]{-webkit-appearance:auto;appearance:auto;flex:0 0 auto;width:24px;height:24px;margin:10px 8px 10px 0;background:none}
}

/* keyboard: focus ring on every focus stop (disclosure rows, 3D number badges, the scrollable dialog itself), and focus
   scrolled into view stops below the sticky header (--ocHeadPx is the measured header height) */
.oc-dialog summary:focus-visible,.oc-dialog .msv-number:focus-visible{outline:3px solid #8ed6ff;outline-offset:2px}
.oc-dialog:focus-visible{outline:3px solid #8ed6ff;outline-offset:-3px}
.oc-dialog{scroll-padding-top:calc(var(--ocHeadPx,118px) + 8px);scroll-padding-bottom:8px}
/* 맞춤 연결(정렬 핀 · 끼움 돌기) 설정: 자동 나누기 설정 한 줄 전체 */
.oc-auto-options .oc-joint{grid-column:1/-1;display:grid;gap:8px}.oc-auto-options .oc-joint[hidden],.oc-auto-options .oc-joint-tenon[hidden]{display:none}
.oc-auto-options .oc-joint-tenon{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}.oc-auto-options .oc-joint-tenon .oc-note{grid-column:1/-1;margin:0;font-size:12px}
/* 부품 보이기·숨기기 */
.oc-visibility{margin:6px 0}.oc-visibility[hidden]{display:none}.oc-visibility-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 10px;max-height:220px;overflow:auto;padding:4px 0}.oc-visibility-list .oc-check{display:flex;gap:8px;align-items:center;font-size:13px;min-height:44px}
/* 참고 이미지 색 (자동 나누기 색 경계) */
.oc-dialog .oc-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;min-height:24px}
.oc-dialog .oc-swatch{display:inline-block;width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.35)}
/* AI 제안 (말로 정리하기) */
.oc-dialog .oc-plan-field{display:grid;gap:4px;font-size:13px}
.oc-dialog .oc-plan-field textarea{width:100%;box-sizing:border-box;min-height:56px;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.25);color:inherit;font:inherit;resize:vertical}
.oc-dialog .oc-plan-proposal[hidden]{display:none}
.oc-dialog .oc-plan-reply{margin:6px 0;font-size:13px}
.oc-dialog .oc-plan-list{margin:4px 0 6px;padding-left:20px;font-size:13px;line-height:1.6}
/* 슬라이서로 바로 열기 */
.oc-dialog .oc-link-button{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;background:#2f6fb5;color:#fff;border:1px solid #64b5ff;border-radius:9px;padding:10px 13px;text-decoration:none;font-weight:600}
.oc-dialog .oc-link-button:focus-visible,.oc-dialog .oc-plan-field textarea:focus-visible{outline:3px solid #8ed6ff;outline-offset:2px}
.oc-dialog .oc-slicer-open{align-items:end;flex-wrap:wrap}.oc-dialog .oc-slicer-open .oc-plan-field{flex:1 1 260px}
/* 10차: thin-wall screening block under the size line */
.oc-thin{border:1px solid #4a6a96;border-radius:12px;padding:12px 14px;margin:12px 0 0;background:#1b2433}.oc-thin h3{margin:0 0 6px;font-size:15px}.oc-thin-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 12px}.oc-thin-row label{display:grid;gap:4px;font-size:13px;color:#d6e2f2}.oc-thin-row select,.oc-thin-row input[type=number]{min-height:40px}.oc-thin [data-oc=thinStatus]{margin:8px 0 4px;font-size:13px}.oc-thin [data-oc=thinRegions]{flex-wrap:wrap}.oc-thin [data-oc=thinRegions]:empty{display:none}.oc-thin>.oc-note{margin:6px 0 0;font-size:12px}.oc-thin-parts{margin:4px 0 8px}
/* 11차: hollow block shares the thin-wall block styling */
.oc-hollow>.oc-note:first-of-type{margin:0 0 8px}.oc-hollow [data-oc=hollowStatus]{margin:8px 0 0;font-size:13px}
/* 12차: print size, base, filament slots */
.oc-thin [data-oc=thinHints]{flex-wrap:wrap;margin-top:6px}.oc-thin [data-oc=thinHints]:empty{display:none}
.oc-size [data-oc=sizeStatus],.oc-base [data-oc=baseStatus]{margin:8px 0 0;font-size:13px}.oc-base>.oc-note:first-of-type{margin:0 0 8px}
.oc-filament{border:1px solid #4a6a96;border-radius:12px;padding:10px 12px;margin:6px 0 10px;background:#1b2433}.oc-filament h4{margin:0 0 6px;font-size:14px}.oc-filament [data-oc=filamentStatus]{margin:8px 0 4px;font-size:13px}.oc-filament>.oc-note{margin:6px 0 0;font-size:12px}
.oc-filament-table{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}.oc-filament-table li{display:flex;align-items:center;gap:8px;min-height:28px}.oc-swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid #ffffff55;flex:none}
.oc-repair [data-oc=repairStatus]{margin:0 0 8px;font-size:13px}.oc-repair{border-color:#b8863a;background:#2a2316}
/* 13차-②: tilted cut planes */
.oc-tilt{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 12px;margin:8px 0 0;padding:10px 12px;border:1px dashed #4a6a96;border-radius:10px}.oc-tilt label{display:grid;gap:4px;font-size:13px}.oc-tilt input{min-height:44px}.oc-tilt .oc-note{grid-column:1/-1;margin:0}
/* 14차-①: face reduction block shares the thin-wall block styling */
.oc-reduce>.oc-note:first-of-type{margin:0 0 8px}.oc-reduce [data-oc=reduceStatus]{margin:8px 0 0;font-size:13px}