* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: "Malgun Gothic", "맑은 고딕", sans-serif; }
body { display: flex; flex-direction: column; background: #2b2b2b; color: #ddd; }

#topbar {
  display: flex; align-items: center; gap: 6px;
  background: #1f1f1f; padding: 6px 10px; border-bottom: 1px solid #000;
  flex-wrap: wrap;
}
#topbar .title { font-weight: bold; font-size: 14px; color: #ffb84d; margin-right: 12px; }
#topbar button, #topbar label {
  background: #3a3a3a; color: #eee; border: 1px solid #555;
  padding: 4px 10px; cursor: pointer; font-size: 12px; border-radius: 3px;
}
#topbar button:hover, #topbar label:hover { background: #4a4a4a; }
#topbar .sep { width: 1px; height: 22px; background: #555; margin: 0 6px; }
#topbar button.active { background: #b85a00; color: #fff; border-color: #ff9933; }
#topbar #btnGarment { background: #3a2a5a; border-color: #7a5ab0; color: #e8dcff; font-weight: bold; }
#topbar #btnGarment:hover { background: #4a3672; }
#topbar input[type=file] { display: none; }

#main { flex: 1; display: flex; min-height: 0; }

#toolbar {
  width: 120px; background: #1f1f1f; border-right: 1px solid #000;
  display: flex; flex-direction: column; padding: 6px 4px; gap: 3px;
  overflow-y: auto;
}

/* 폴더(접기/펼치기) 메뉴 */
#toolbar details {
  border: 1px solid #333; border-radius: 3px; margin-bottom: 2px;
  background: #252525;
}
#toolbar details[open] { background: #1a1a1a; }
#toolbar summary {
  cursor: pointer; user-select: none;
  font-size: 12px; font-weight: bold; color: #ffb84d;
  padding: 6px 8px;
  list-style: none;
  display: flex; align-items: center;
}
#toolbar summary::-webkit-details-marker { display: none; }
#toolbar summary::before {
  content: '▶'; font-size: 9px; color: #888; margin-right: 6px;
  transition: transform 0.15s;
}
#toolbar details[open] > summary::before {
  transform: rotate(90deg);
}
#toolbar summary:hover { background: #2e2e2e; }
#toolbar details > button {
  display: block; width: calc(100% - 8px); margin: 2px 4px;
}
#toolbar details > button:last-child { margin-bottom: 4px; }

#toolbar button {
  background: #2e2e2e; color: #eee; border: 1px solid #444;
  padding: 6px 4px; cursor: pointer; font-size: 12px;
  text-align: left; border-radius: 3px;
}
#toolbar button:hover { background: #3a3a3a; }
#toolbar button.active {
  background: #b85a00; color: #fff; border-color: #ff9933;
}

#canvasWrap { flex: 1; position: relative; background: #f5f5f0; overflow: hidden; }
#cad { position: absolute; top: 0; left: 0; cursor: crosshair; }

#statusbar {
  display: flex; gap: 14px; background: #1f1f1f;
  padding: 4px 10px; border-top: 1px solid #000;
  font-size: 12px; color: #ccc;
}
#statusbar .label { color: #888; }
#statusbar .val { color: #ffb84d; min-width: 80px; display: inline-block; }

#prompt {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.92); color: #ffb84d; padding: 6px 14px;
  border: 1px solid #ffb84d; border-radius: 4px; font-size: 13px;
  pointer-events: none; display: none;
}

#lenDialog, #cornerDialog, #rotateDialog, #divideDialog, #rectSizeDialog, #quadDialog, #bagDialog, #tmplDialog, #moveDialog, #layerExportDialog, #gradeDialog, #layerPanel, #labelDialog, #outlineDialog, #nestingDialog, #helpDialog {
  position: absolute; background: #1f1f1f; border: 1px solid #ffb84d;
  padding: 10px; border-radius: 4px; display: none; z-index: 100;
  color: #ddd; font-size: 12px;
}
/* 사용 설명서 */
#helpDialog {
  top: 44px; left: 50%; transform: translateX(-50%);
  width: 700px; max-width: calc(100vw - 40px);
  max-height: calc(100% - 70px); overflow-y: auto;
}
#helpDialog .title { font-weight: bold; color: #ffb84d; font-size: 14px; margin-bottom: 8px; }
#helpDialog .htip {
  font-size: 11px; color: #b8b86a; background: #262626;
  border: 1px solid #3a3a3a; padding: 6px 8px; border-radius: 3px;
}
#helpDialog h4 {
  margin: 12px 0 4px; color: #8ecbff; font-size: 12.5px;
  border-bottom: 1px solid #3a3a3a; padding-bottom: 3px;
}
#helpDialog table { width: 100%; border-collapse: collapse; }
#helpDialog td {
  padding: 2px 5px; vertical-align: top; font-size: 11.5px;
  color: #bbb; border-bottom: 1px dotted #2c2c2c;
}
#helpDialog td.hn { color: #f0e6d2; white-space: nowrap; font-weight: bold; width: 128px; }
#helpDialog .new {
  background: #c0392b; color: #fff; font-size: 9.5px; font-weight: normal;
  padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: 1px;
}
#helpDialog .howto {
  margin-top: 10px; border: 1px solid #ffb84d; background: #2a2115;
  padding: 8px 10px; border-radius: 4px; font-size: 11.5px; color: #ccc;
}
#helpDialog .howto b { color: #ffb84d; }
#helpDialog .howto .loc { color: #9acd60; font-size: 11px; margin: 3px 0 6px; }
#helpDialog .howto ol, #helpDialog .howto ul { margin: 4px 0; padding-left: 18px; }
#helpDialog .howto li { margin: 2px 0; }
#layerPanel { top: 60px; right: 20px; min-width: 230px; }
#layerPanel .title { font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px; }
#layerPanel input[type=checkbox] { cursor: pointer; }
#outlineDialog { top: 60px; right: 20px; width: 300px; }
#outlineDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px; }
#outlineDialog .ol-info { color: #ddd; margin-bottom: 8px; line-height: 1.4; word-break: break-all; }
#outlineDialog .ol-row { display: block; margin: 5px 0; color: #ccc; }
#outlineDialog select { background: #333; color: #eee; border: 1px solid #555; padding: 2px; border-radius: 2px; margin-left: 4px; }
#outlineDialog .ol-status { margin-top: 8px; padding: 5px 7px; background: #262626; border: 1px solid #3a3a3a; border-radius: 3px; color: #9acd60; font-size: 11px; white-space: pre-line; min-height: 14px; }
#outlineDialog .ol-status.is-warn { color: #ffb84d; }
#outlineDialog .ol-hint { font-size: 10px; color: #888; margin-top: 6px; line-height: 1.5; }
#outlineDialog .btns button:disabled { opacity: 0.4; cursor: default; }
#labelDialog { top: 60px; right: 20px; min-width: 210px; width: 290px; }
#labelDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px; }
#labelDialog textarea {
  box-sizing: border-box; width: 100%; min-height: 44px; resize: vertical;
  background: #333; color: #fff; border: 1px solid #555; padding: 5px 8px;
  font: 13px "Malgun Gothic", sans-serif; border-radius: 2px;
}
#labelDialog .txt-grid { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; align-items: center; }
#labelDialog .txt-grid label { color: #ccc; font-size: 12px; white-space: nowrap; }
#labelDialog .txt-grid input[type=number] { width: 54px; background: #333; color: #fff; border: 1px solid #555; padding: 2px 4px; border-radius: 2px; }
#labelDialog .txt-grid select { background: #333; color: #eee; border: 1px solid #555; padding: 2px; border-radius: 2px; }
#labelDialog .txt-grid.is-off { opacity: 0.35; pointer-events: none; }
#labelDialog .txt-align { display: inline-flex; }
#labelDialog .txt-align button {
  background: #333; color: #ccc; border: 1px solid #555; padding: 2px 7px; font-size: 11px; cursor: pointer; margin: 0;
}
#labelDialog .txt-align button + button { border-left: none; }
#labelDialog .txt-align button.on { background: #b85a00; color: #fff; }
#labelDialog .txt-fixed { display: block; margin-top: 8px; color: #aaa; font-size: 11px; }
#labelDialog .txt-hint { font-size: 10px; color: #888; margin-top: 6px; line-height: 1.5; }
#nestingDialog { top: 60px; right: 20px; min-width: 260px; }
#nestingDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px; }
#nestingDialog table { width: 100%; border-collapse: collapse; }
#nestingDialog td { padding: 3px 4px; }
#nestingDialog td:first-child { color: #aaa; white-space: nowrap; }
#nestingDialog input[type=number] {
  background: #333; color: #fff; border: 1px solid #555;
  padding: 4px 8px; width: 90px; font-size: 13px;
}
#layerExportDialog { top: 60px; right: 20px; min-width: 240px; }
#layerExportDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px; }
#gradeDialog { top: 60px; right: 20px; min-width: 250px; }
#gradeDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 6px; font-size: 13px; }
#gradeDialog table { width: 100%; border-collapse: collapse; }
#gradeDialog td { padding: 3px 4px; }
#gradeDialog td:first-child { color: #aaa; }
#gradeDialog input { background: #333; color: #fff; border: 1px solid #555; padding: 4px 8px; width: 80px; font-size: 13px; }
#moveDialog { top: 60px; right: 20px; min-width: 220px; }
#moveDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px; }
#moveDialog table { width: 100%; border-collapse: collapse; }
#moveDialog td { padding: 3px 4px; }
#moveDialog td:first-child { color: #aaa; }
#moveDialog input { background: #333; color: #fff; border: 1px solid #555; padding: 4px 8px; width: 100px; font-size: 13px; }
#cornerDialog { top: 60px; right: 20px; min-width: 220px; }
#rotateDialog { top: 60px; right: 20px; min-width: 240px; }
#divideDialog { top: 60px; right: 20px; min-width: 260px; }
#rectSizeDialog { top: 60px; right: 20px; min-width: 240px; }
#quadDialog { top: 60px; right: 20px; min-width: 250px; }
#rotateDialog .title, #divideDialog .title, #rectSizeDialog .title, #quadDialog .title {
  font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px;
}
#rotateDialog input, #divideDialog input {
  background: #333; color: #fff; border: 1px solid #555;
  padding: 4px 8px; width: 100%; font-size: 13px;
}
#rectSizeDialog table, #quadDialog table { width: 100%; border-collapse: collapse; }
#rectSizeDialog td, #quadDialog td { padding: 3px 4px; }
#rectSizeDialog td:first-child, #quadDialog td:first-child { color: #aaa; }
#rectSizeDialog input, #quadDialog input {
  background: #333; color: #fff; border: 1px solid #555;
  padding: 4px 8px; width: 100px; font-size: 13px;
}
#tmplDialog { top: 60px; right: 20px; min-width: 270px; }
#tmplDialog .title { font-weight:bold; color:#ffb84d; margin-bottom:8px; font-size:13px; }
#tmplDialog table { width:100%; border-collapse:collapse; }
#tmplDialog td { padding:4px 4px; vertical-align:middle; }
#tmplDialog td:first-child { color:#aaa; white-space:nowrap; }
#bagDialog { top: 60px; right: 20px; min-width: 240px; }
#bagDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 4px; font-size: 13px; }
#bagDialog table { width: 100%; border-collapse: collapse; }
#bagDialog td { padding: 3px 4px; }
#bagDialog td:first-child { color: #aaa; }
#bagDialog input {
  background: #333; color: #fff; border: 1px solid #555;
  padding: 4px 8px; width: 100px; font-size: 13px;
}
.tool-sep { border-top: 1px solid #333; margin: 3px 0; }
#cornerDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px; }
#cornerDialog table { width: 100%; border-collapse: collapse; }
#cornerDialog td { padding: 3px 4px; }
#cornerDialog td:first-child { color: #aaa; }

#lenDialog input, #cornerDialog input {
  background: #333; color: #fff; border: 1px solid #555;
  padding: 4px 8px; width: 100px; font-size: 13px;
}
#lenDialog label { font-size: 12px; color: #ccc; display: block; margin-bottom: 4px; }
.btns { margin-top: 8px; display: flex; gap: 4px; justify-content: flex-end; }
.btns button {
  background: #b85a00; color: #fff; border: none;
  padding: 4px 10px; cursor: pointer; font-size: 12px; border-radius: 2px;
}
.btns button:hover { background: #d66a00; }

/* 트레이싱 컨트롤 폼 스타일 */
#traceControls input[type=range] {
  -webkit-appearance: none;
  background: #444;
  height: 4px;
  border-radius: 2px;
  outline: none;
  margin: 6px 0;
}
#traceControls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #ffb84d;
  border-radius: 50%;
  cursor: pointer;
}
#traceControls select {
  font-family: inherit;
}
#traceControls button.active {
  background: #0080ff;
  color: #fff;
  border-color: #3399ff;
}


/* ───────────── 의류 (js/garment) ───────────── */
/* hidden 속성이 아래 display 규칙(flex/grid)에 지지 않게 */
#garmentDialog [hidden], #gMarkerDialog [hidden], .g-mini [hidden] { display: none !important; }
/* 작은 대화상자 — 다트 · 단추 · 조각 속성 · 실측 인쇄 */
.g-mini {
  position: absolute; top: 60px; right: 20px; min-width: 250px; max-width: 360px;
  background: #1f1f1f; border: 1px solid #ffb84d; padding: 10px; border-radius: 4px;
  display: none; z-index: 100; color: #ddd; font-size: 12px;
}
.g-mini .title, #gMarkerDialog .title, #gCutDialog .title { font-weight: bold; color: #ffb84d; margin-bottom: 8px; font-size: 13px; }
.g-mini table { width: 100%; border-collapse: collapse; }
.g-mini td { padding: 3px 4px; }
.g-mini td:first-child { color: #aaa; white-space: nowrap; }
.g-mini input[type=number], .g-mini input[type=text], .g-mini select,
#gMarkerDialog input[type=number], #gMarkerDialog select {
  background: #333; color: #fff; border: 1px solid #555; padding: 4px 6px; font-size: 12px; border-radius: 2px;
}
.g-mini input[type=number] { width: 80px; }
.g-mini input[type=text] { width: 150px; }
.g-chk { display: block; margin: 4px 2px; color: #ccc; cursor: pointer; }
.g-hint { font-size: 10.5px; color: #999; margin-top: 5px; line-height: 1.5; }
.g-summary { font-size: 11.5px; color: #ffb84d; margin-top: 6px; line-height: 1.5; }
.g-summary .is-warn { color: #ff8080; }
input.is-invalid { border-color: #e04040 !important; }

/* 요척 계산 · 작업지시서 */
#gMarkerDialog, #gCutDialog {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 90px); overflow-y: auto;
  background: #1f1f1f; border: 1px solid #ffb84d; border-radius: 4px; padding: 12px;
  display: none; flex-direction: column; z-index: 210; color: #ddd; font-size: 12px;
}
.g-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.g-row label { color: #ccc; display: inline-flex; align-items: center; gap: 5px; }
.g-row input[type=number] { width: 64px; }
.g-marker-view { margin-top: 6px; border: 1px solid #333; background: #fff; border-radius: 3px; }
.g-marker-view svg { display: block; width: 100%; height: auto; max-height: 52vh; }
#gCutDialog [hidden] { display: none !important; }
.g-cut-view { margin-top: 6px; border: 1px solid #333; background: #fff; border-radius: 3px; overflow: auto; max-height: 62vh; }
.cl-table { border-collapse: collapse; width: 100%; font-size: 12px; color: #111; font-variant-numeric: tabular-nums; }
.cl-table th { background: #ecebe4; font-weight: bold; text-align: left; position: sticky; top: 0; }
.cl-table th, .cl-table td { border: 1px solid #ccc; padding: 3px 6px; vertical-align: middle; }
.cl-table td.num { text-align: right; white-space: nowrap; }
.cl-table svg { display: block; }

/* 의류 패턴 작도 대화상자 */
#garmentDialog {
  position: fixed; top: 44px; left: 50%; transform: translateX(-50%);
  width: min(1240px, calc(100vw - 16px)); height: calc(100vh - 72px);
  background: #1c1c1c; border: 1px solid #ffb84d; border-radius: 5px;
  display: none; flex-direction: column; z-index: 200; color: #ddd; font-size: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}
#garmentDialog .gm-head {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-bottom: 1px solid #333; background: #181818; border-radius: 5px 5px 0 0; flex-wrap: wrap;
}
#garmentDialog .gm-head .title { font-weight: bold; color: #ffb84d; font-size: 14px; }
.gm-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.gm-tabs button {
  background: #2c2c2c; color: #ddd; border: 1px solid #444; padding: 5px 12px;
  border-radius: 3px; cursor: pointer; font-size: 12px;
}
.gm-tabs button:hover { background: #383838; }
.gm-tabs button.active { background: #b85a00; border-color: #ff9933; color: #fff; }
.gm-sub { color: #888; font-size: 11px; flex: 1; min-width: 160px; }
.gm-x { background: none; border: none; color: #aaa; font-size: 16px; cursor: pointer; padding: 2px 6px; }
.gm-x:hover { color: #fff; }
.gm-body { flex: 1; display: flex; min-height: 0; }
.gm-side { width: 318px; flex-shrink: 0; overflow-y: auto; padding: 8px 10px 14px; border-right: 1px solid #333; }
.gm-side section { border-bottom: 1px solid #2c2c2c; padding: 6px 0 9px; }
.gm-side h4 { color: #8ecbff; font-size: 12px; margin: 4px 0 6px; display: flex; align-items: center; gap: 8px; }
.gm-side h4 label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.gm-side select { width: 100%; background: #333; color: #fff; border: 1px solid #555; padding: 5px; font-size: 12px; border-radius: 3px; }
.gm-hint { font-size: 11px; color: #999; line-height: 1.55; margin-top: 5px; }
.gm-warn { font-size: 11.5px; color: #ffb0a0; background: #3a1d18; border: 1px solid #6a2e24; padding: 5px 7px; border-radius: 3px; margin-top: 6px; line-height: 1.5; }
.gm-radio { display: flex; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.gm-radio.gm-col { flex-direction: column; gap: 4px; }
.gm-radio label, .gm-checks label { color: #ccc; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.gm-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-bottom: 6px; }
.gm-checks .gm-wide { grid-column: 1 / -1; }
#gmPostureRow { grid-template-columns: 1fr; }
.gm-checks .gm-gap input { width: 52px; background: #333; color: #fff; border: 1px solid #555; padding: 2px 4px; font-size: 12px; }
.gm-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; margin: 6px 0; }
.gm-field { display: grid; grid-template-columns: 1fr 60px 16px; align-items: center; gap: 3px; color: #bbb; font-size: 11.5px; }
.gm-field input { width: 60px; background: #333; color: #fff; border: 1px solid #555; padding: 3px 4px; font-size: 12px; border-radius: 2px; font-variant-numeric: tabular-nums; }
.gm-field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-field em { font-style: normal; color: #777; font-size: 10.5px; }
.gm-field.is-locked input { color: #9a9a9a; border-style: dashed; }
.gm-profile { display: flex; gap: 4px; margin: 6px 0 2px; }
.gm-profile select { flex: 1; min-width: 0; }
.gm-profile button { background: #333; color: #ddd; border: 1px solid #555; padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 11.5px; }
.gm-profile button:hover { background: #3d3d3d; }
.gm-ease { display: grid; grid-template-columns: 44px 1fr 92px; align-items: center; gap: 6px; color: #bbb; margin: 6px 0; }
.gm-ease b { color: #ffb84d; font-weight: normal; font-size: 11.5px; }
.gm-sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.gm-sa-item { display: grid; grid-template-columns: 1fr 54px; align-items: center; gap: 4px; color: #ccc; font-size: 11.5px; }
.gm-sa-item input { width: 54px; background: #333; color: #fff; border: 1px solid #555; padding: 3px 4px; font-size: 12px; border-radius: 2px; }
.gm-sa-item.is-unused { opacity: 0.4; }
.gm-link { background: none; border: none; color: #8ecbff; cursor: pointer; font-size: 11px; text-decoration: underline; padding: 0; }
.gm-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 8px 10px; gap: 8px; }
.gm-preview-wrap { position: relative; flex: 1 1 52%; min-height: 220px; background: #0f172a; border: 1px solid #2a3550; border-radius: 4px; overflow: hidden; }
#gmPreview { width: 100%; height: 100%; display: block; }
#gmPreview line, #gmPreview path, #gmPreview circle { vector-effect: non-scaling-stroke; }
#gmPreview .gm-pattern line[stroke="#94a3b8"] { stroke-width: 1.2; }
#gmPreview .gm-grade g { stroke-width: 1.2; }
#gmPreview .gm-annot .gm-fold { stroke: #f59e0b; stroke-width: 1.2; }
#gmPreview .gm-labels .gm-fold { fill: #f59e0b; }
#gmPreview .active-step-line { stroke: #f43f5e !important; stroke-width: 3px !important; stroke-dasharray: 8, 4; animation: gmStepDash 1s linear infinite; }
@keyframes gmStepDash { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { #gmPreview .active-step-line { animation: none; } }
.gm-scale { position: absolute; left: 8px; bottom: 6px; color: #64748b; font-size: 10.5px; pointer-events: none; }
.gm-steps { font-size: 12px; color: #ccc; }
.gm-steps > label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
#gmStepBox { margin-top: 5px; background: #222; border: 1px solid #333; border-radius: 4px; padding: 6px 8px; }
.gm-step-bar { height: 3px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 5px; }
.gm-step-bar i { display: block; height: 100%; background: #f43f5e; }
.gm-step-row { display: flex; align-items: center; gap: 8px; }
.gm-step-row b { color: #f43f5e; font-size: 11px; }
.gm-step-row strong { color: #eee; flex: 1; }
.gm-step-nav button { background: #333; color: #ddd; border: 1px solid #555; padding: 3px 9px; margin-left: 4px; border-radius: 3px; cursor: pointer; font-size: 11.5px; }
.gm-step-nav button:disabled { opacity: 0.4; cursor: default; }
#gmStepDesc { color: #aaa; line-height: 1.55; margin-top: 4px; font-size: 11.5px; }
.gm-tables { flex: 0 1 38%; min-height: 120px; display: flex; flex-direction: column; min-width: 0; }
.gm-ttabs { display: flex; gap: 3px; align-items: center; border-bottom: 1px solid #333; }
.gm-ttabs button[data-tab] { background: #262626; color: #bbb; border: 1px solid #383838; border-bottom: none; padding: 4px 10px; cursor: pointer; font-size: 11.5px; border-radius: 3px 3px 0 0; }
.gm-ttabs button[data-tab].active { background: #333; color: #ffb84d; }
.gm-ttabs .gm-link { margin-left: auto; }
#gmTableCalc, #gmTableSeam, #gmTableGrade { overflow: auto; flex: 1; }
.gm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.gm-table th { position: sticky; top: 0; background: #262626; color: #999; font-weight: normal; text-align: left; padding: 4px 6px; border-bottom: 1px solid #383838; }
.gm-table td { padding: 3px 6px; border-bottom: 1px dotted #2e2e2e; color: #ccc; vertical-align: middle; }
.gm-table td strong { color: #eee; font-weight: normal; }
.gm-table td small { display: block; color: #777; font-size: 10px; }
.gm-table .num { text-align: right; white-space: nowrap; }
.gm-table input[type=text] { width: 100%; min-width: 160px; background: #2a2a2a; color: #9ecbff; border: 1px solid #444; padding: 3px 5px; font-family: Consolas, monospace; font-size: 11.5px; border-radius: 2px; }
.gm-verdict { padding: 1px 6px; border-radius: 3px; font-size: 11px; white-space: nowrap; }
.gm-verdict.is-ok { background: #173a24; color: #8fe0a8; }
.gm-verdict.is-warn { background: #3d3214; color: #ffd27a; }
.gm-verdict.is-bad { background: #3f1a1a; color: #ff9a9a; }
.gm-verdict.is-info { background: #1d2a3d; color: #9ecbff; }
.gm-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #333; background: #181818; border-radius: 0 0 5px 5px; }
.gm-foot span { flex: 1; color: #999; font-size: 11.5px; }
.gm-foot button, .gm-lib button { background: #333; color: #ddd; border: 1px solid #555; padding: 6px 14px; border-radius: 3px; cursor: pointer; font-size: 12px; }
.gm-foot button:hover, .gm-lib button:hover { background: #3d3d3d; }
.gm-foot .gm-primary, .gm-lib .gm-primary { background: #b85a00; border-color: #ff9933; color: #fff; }
.gm-foot .gm-primary:hover, .gm-lib .gm-primary:hover { background: #d66a00; }
.gm-foot button:disabled, .gm-lib button:disabled { opacity: 0.45; cursor: default; }
.gm-lib h4 { color: #8ecbff; }
.gm-lib-login { display: flex; gap: 6px; margin-top: 6px; }
.gm-lib-login input[type=password] { flex: 1; background: #333; color: #fff; border: 1px solid #555; padding: 5px 6px; font-size: 12px; border-radius: 3px; }
.gm-lib-upload { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gm-lib-upload input[type=file] { color: #bbb; font-size: 11.5px; }
.gm-lib-status { font-size: 11.5px; margin-top: 8px; line-height: 1.5; color: #aaa; }
.gm-lib-status[data-kind=error] { color: #ff9a9a; }
.gm-lib-status[data-kind=busy] { color: #ffd27a; }
.gm-lib-status[data-kind=ok] { color: #8fe0a8; }
.gm-lib-info { margin-top: 10px; border-top: 1px solid #2c2c2c; padding-top: 6px; }
.gm-lib-terms { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.gm-lib-terms td { padding: 2px 4px; border-bottom: 1px dotted #2e2e2e; color: #bbb; }
@media (max-width: 760px) {
  .gm-body { flex-direction: column; overflow-y: auto; }
  .gm-side { width: auto; border-right: none; overflow: visible; }
  .gm-main { min-height: 520px; }
}

/* 실측 분할 인쇄 — 인쇄할 때만 #printTiles 페이지를 찍는다 (js/garment/print-tiles.js) */
@media print {
  html, body.pf-printing { width: auto; height: auto; overflow: visible; display: block; background: #fff; margin: 0 !important; }
  body.pf-printing > *:not(#printTiles) { display: none !important; }
  body.pf-printing #printTiles { display: block; color: #000; font-family: "Malgun Gothic", sans-serif; }
  .pt-defs { position: absolute; }
  .pt-page { box-sizing: border-box; overflow: hidden; break-after: page; page-break-after: always; background: #fff; }
  .pt-page:last-child { break-after: auto; page-break-after: auto; }
  .pt-sheet { display: block; overflow: hidden; }
  .pt-sheet * { vector-effect: non-scaling-stroke; fill: none; }
  .pt-sheet text { font-size: var(--pt-fs) !important; font-family: "Malgun Gothic", sans-serif; fill: #111 !important; stroke: none !important; vector-effect: none; }
  .pt-sheet text.pt-wtext { font-size: var(--wt-fs) !important; }   /* 글자 = 도면 실제 크기 */
  .pt-cut polygon, .pt-cut polyline, .pt-cut circle { stroke: #000; stroke-width: 1.6px; }
  .pt-sew polygon, .pt-sew polyline, .pt-sew circle { stroke: #333; stroke-width: 0.8px; stroke-dasharray: 5 3; }
  .pt-mark polygon, .pt-mark polyline, .pt-mark circle { stroke: #000; stroke-width: 1px; }
  .pt-base polygon, .pt-base polyline { stroke: #9aa7b6; stroke-width: 0.6px; }
  .pt-grade polygon, .pt-grade polyline { stroke: #777; stroke-width: 0.7px; }
  .pt-labels polyline { stroke: #2563eb; stroke-width: 0.6px; }
  .pt-frame { fill: none !important; stroke: #000; stroke-width: 0.8px; }
  .pt-diamond { fill: #d9dee5 !important; stroke: #000; stroke-width: 0.8px; }
  .pt-tag { fill: #fff !important; fill-opacity: 0.9; stroke: none; }
  .pt-sheet .pt-name { font-size: calc(var(--pt-fs) * 2) !important; font-weight: 700; }
  .pt-sheet .pt-count, .pt-sheet .pt-edge-label { font-size: calc(var(--pt-fs) * 0.85) !important; }
  .pt-bar { stroke: #000; stroke-width: 1px; }
  .pt-cover h1 { font-size: 16pt; margin-bottom: 4mm; }
  .pt-cover p { font-size: 10pt; margin-bottom: 1.5mm; line-height: 1.5; }
  .pt-cover .pt-strong { font-weight: 700; margin: 3mm 0 5mm; }
  .pt-cover ol { font-size: 10pt; line-height: 1.55; padding-left: 5mm; margin-top: 5mm; }
  .pt-cover li { margin-bottom: 1.5mm; }
  .pt-cover-row { display: flex; align-items: flex-start; gap: 8mm; }
  .pt-map { display: block; border: 0.3mm solid #000; }
  .pt-map * { vector-effect: non-scaling-stroke; }
  .pt-map-piece { fill: #e5e7eb; stroke: #333; stroke-width: 0.6px; }
  .pt-map-tile { fill: none; stroke: #000; stroke-width: 0.8px; }
  .pt-map-tile.is-empty { fill: #f3f4f6; stroke-dasharray: 3 2; }
  .pt-map-name { fill: #111; font-weight: 700; text-anchor: middle; dominant-baseline: middle; font-family: sans-serif; }
  .pt-calib svg { display: block; }
  .pt-calib-box { fill: none; stroke: #000; stroke-width: 0.5; }
  .pt-calib-tick { stroke: #000; stroke-width: 0.4; }
  .pt-calib text { fill: #000; font-family: sans-serif; }
  .cl-print h1 { font-size: 16pt; margin-bottom: 2mm; }
  .cl-print p { font-size: 9.5pt; margin-bottom: 3mm; }
  .cl-print .cl-table { font-size: 8.5pt; }
  .cl-print .cl-table th { position: static; }
  .cl-print .cl-note { margin-top: 3mm; color: #444; }
}