/* 작업지시서 작성 (static/workorder.js) — 관리자 화면과 고객용 스와치북이 같이 쓴다 */
.swm-card { max-width:1240px; margin:0 auto; }
.swm-open { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; border:none; background:none; padding:0; text-align:left; cursor:pointer; }
.swm-open b { display:block; font-size:17px; color:#333; }
.swm-open small { display:block; font-size:12px; color:#8a8a8a; margin-top:2px; }
.swm-open i { flex:none; font-style:normal; font-size:12px; font-weight:800; color:#fff; background:#5c5c5c; border-radius:999px; padding:6px 14px; }
.swm-open:hover i { background:#333; }
.swm-card.open .swm-open i { background:#fff; color:#5c5c5c; box-shadow:inset 0 0 0 1.5px #ccc; }
.swm-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:32px; align-items:start; }
.swm-lines { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3; }
.swm-drop { border:2px dashed #ddd; border-radius:12px; min-height:380px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#9a9a9a; text-align:center; padding:20px; cursor:pointer; }
.swm-drop:hover, .swm-drop.over { border-color:#ff8fb1; background:#fff7fa; }
/* 그림이 하나도 없을 때 — 먼저 올리라고 빨간 점선으로 알린다 */
.swm-drop.need { border-color:#ff2d6f; background:#fffafc; }
.swm-drop.need:hover, .swm-drop.need.over { background:#fff1f6; }
.swm-imgwrap { position:relative; display:inline-block; max-width:100%; }
.swm-dot { position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px #555,0 2px 5px rgba(0,0,0,.35); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; cursor:grab; z-index:4; touch-action:none; user-select:none; }
.swm-dot.on { box-shadow:0 0 0 2.5px #ff2d6f,0 2px 6px rgba(0,0,0,.4); }
.swm-empty { border:1px dashed #e2e2e2; border-radius:10px; padding:22px 14px; text-align:center; font-size:13px; color:#9a9a9a; line-height:1.6; margin-bottom:10px; }
.swm-part { border:1px solid #e6e6e6; border-radius:10px; padding:9px 11px; margin-bottom:9px; background:#fff; }
.swm-part.on { border-color:#ff2d6f; box-shadow:0 0 0 1px #ff2d6f; }
.swm-ph { display:flex; align-items:center; gap:9px; cursor:pointer; }
.swm-num { width:22px; height:22px; border-radius:50%; background:#555; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.swm-part.on .swm-num { background:#ff2d6f; }
.swm-pchip { width:40px; height:30px; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); flex:none; }
.swm-pname { display:flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:#333; white-space:nowrap; overflow:hidden; }
.swm-pname-in { flex:1; min-width:0; width:100%; border:1px solid transparent; border-radius:5px; background:transparent; padding:1px 5px; margin-left:-5px; font:inherit; color:#333; }
.swm-pname-in::placeholder { color:#333; }
.swm-pname-in:hover { border-color:#e2e2e2; background:#fff; }
.swm-pname-in:focus { outline:none; border-color:#999; background:#fff; }
.swm-pname-in:focus::placeholder { color:#b5b5b5; }
.swm-pick-lbl { font-size:12px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.swm-mini { display:inline-block; width:16px; height:12px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); flex:none; }
.swm-x { border:none; background:none; color:#aaa; font-size:19px; line-height:1; cursor:pointer; padding:0 2px; }
.swm-x:hover { color:#a03a2c; }
.swm-pbody { margin-top:10px; padding-top:10px; border-top:1px solid #f0f0f0; }
.swm-part .swm-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.swm-part .swm-group:first-child { border-top:none; padding-top:0; }
.swm-cell.sel .swm-pair { box-shadow:0 0 0 3px #ff2d6f; }
.swm-cell.sel .swm-no { color:#ff2d6f; }
.swm-mine { display:flex; align-items:center; gap:9px; font-size:12px; color:#444; background:#fff4f8; border:1px solid #ffd0de; border-radius:8px; padding:7px 9px; margin-bottom:10px; }
.swm-sum { border-top:1px solid #efefef; margin-top:16px; padding-top:14px; }
.swm-sum-row { display:flex; align-items:center; gap:10px; font-size:13px; padding:5px 4px; border-radius:6px; cursor:pointer; }
.swm-sum-row:hover { background:#f7f7f7; }
@media (max-width:900px){ .swm-stage { grid-template-columns:minmax(0,1fr); gap:16px; } .swm-lines { display:none; } }
.swm-fab-h { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:#8a8a8a; margin-bottom:6px; }
.swm-fab-h b { color:#333; }
.swm-fab-h button { border:none; background:none; padding:0; font-size:12px; color:#8a8a8a; cursor:pointer; }
.swm-fab-h button:hover { color:#ff2d6f; }
.swm-fab-row { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:5px 0; border-top:1px solid #f2f2f2; }
.swm-fab-row .tag-filter { padding:3px 10px; font-size:11px; }
.swm-fab-grp { padding:6px 0; border-top:1px solid #f2f2f2; }
.swm-fab-grp:first-child { border-top:none; padding-top:0; }
.swm-fab-grp .swm-fab-row { border-top:none; padding:4px 0 0; }
.swm-fab-grp.off { opacity:.5; }
.swm-fab-grp.off:hover { opacity:.8; }
.swm-gbtn { min-width:52px; padding:3px 8px; border-radius:6px; font-size:12px; font-weight:800; border:2px solid #e2e2e2; background:#fff; color:#9a9a9a; cursor:pointer; }
.swm-gbtn.on { border-color:#5c5c5c; background:#5c5c5c; color:#fff; }
.swm-gbtn span { font-weight:600; opacity:.75; margin-left:2px; }
.swm-gtabs { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:4px; }
.swm-best { font-size:14px; color:#333; margin-bottom:10px; }
.swm-badge { display:inline-block; color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; margin-left:6px; vertical-align:1px; }
.swm-group { border-top:1px solid #efefef; padding:10px 0; }
.swm-gh { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.swm-fab { border:none; background:none; padding:0; font-weight:800; font-size:14px; color:#333; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#ccc; }
.swm-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.swm-cell { cursor:pointer; min-width:0; }
.swm-pair { position:relative; display:flex; height:46px; border-radius:5px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.swm-pair span { flex:1; }
/* 그림에서 뽑은 색 — 고른 칸 왼쪽 위 구석의 작은 네모 */
.swm-pair .swm-src { position:absolute; left:3px; top:3px; width:13px; height:13px; flex:none; border-radius:3px; box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.45); }
.swm-cell:hover .swm-pair { box-shadow:0 0 0 2px #5c5c5c; }
.swm-no { font-size:12px; font-weight:700; color:#444; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.swm-no span { font-weight:500; color:#8a8a8a; }
.swm-kr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; }
.swm-kcell { cursor:pointer; min-width:0; }
.swm-kimg { aspect-ratio:1; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.swm-kcell:hover .swm-kimg { box-shadow:0 0 0 2px #5c5c5c; }
.swm-kcell.sel .swm-kimg { box-shadow:0 0 0 3px #ff2d6f; }
.swm-kcell.sel .swm-no { color:#ff2d6f; }
.swm-mode { display:flex; gap:6px; margin-top:10px; }
.swm-mode button { flex:1; padding:7px 8px; border-radius:8px; border:2px solid #e2e2e2; background:#fff; color:#8a8a8a; font-size:13px; font-weight:800; cursor:pointer; }
.swm-mode button:hover:not(.on) { border-color:#bdbdbd; color:#444; }
.swm-mode button.on { border-color:#ff2d6f; background:#ff2d6f; color:#fff; }
.swm-direct { background:#fff4f8; border:1px dashed #ffb3c9; border-radius:10px; padding:14px 12px; text-align:center; font-size:13px; font-weight:700; color:#444; }
.swm-dpick { border:1px solid #efefef; border-radius:10px; padding:10px; background:#fcfcfc; }
.swm-dtabs { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.swm-dg { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.swm-dg span { font-size:11px; font-weight:800; color:#9a9a9a; min-width:42px; }
.swm-dg button { border:1px solid #e2e2e2; background:#fff; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700; color:#555; cursor:pointer; }
.swm-dg button:hover { border-color:#999; }
.swm-dg button.has { border-color:#ff8fb1; color:#ff2d6f; }
.swm-dg button.on { background:#5c5c5c; border-color:#5c5c5c; color:#fff; }
.swm-dh { display:flex; align-items:baseline; gap:7px; font-size:13px; color:#333; margin-bottom:8px; }
.swm-dh span { font-size:11px; color:#9a9a9a; }
.swm-dbig { margin-left:auto; border:none; background:none; font-size:11px; font-weight:700; color:#8a8a8a; cursor:pointer; white-space:nowrap; padding:0; }
.swm-dbig:hover { color:#ff2d6f; }
.swm-dgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:8px 6px; max-height:300px; overflow:auto; padding:3px; }
.swm-dgrid .swm-kimg { aspect-ratio:4/3; border-radius:5px; }
.swm-dgrid .swm-no { font-size:10px; margin-top:2px; }
.swm-direct small { display:block; font-weight:500; color:#8a8a8a; font-size:12px; margin:4px 0 10px; }
@media (max-width:640px){ .swm-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.swm-steps { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:16px; padding:8px; background:#fafafa; border:1px solid #efefef; border-radius:12px; }
.swm-step { display:flex; align-items:center; gap:6px; padding:6px 12px 6px 6px; border-radius:999px; border:none; background:transparent; font-size:13px; font-weight:800; color:#9a9a9a; cursor:pointer; }
.swm-step span { width:22px; height:22px; border-radius:50%; background:#e4e4e4; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
.swm-step:hover { color:#444; }
.swm-step.done { color:#555; }
.swm-step.done span { background:#2f7d4f; }
.swm-step.on { background:#fff; color:#333; box-shadow:0 0 0 2px #5c5c5c; }
.swm-step.on span { background:#5c5c5c; }
.swm-step-sep { color:#cfcfcf; font-style:normal; font-weight:700; }
.swm-nav { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #f0f0f0; }
.swm-sh { font-size:14px; font-weight:800; color:#333; margin-bottom:10px; }
.swm-sh span { font-size:12px; font-weight:500; color:#a2a2a2; margin-left:4px; }
.swm-sgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:10px 8px; }
.swm-sgrid .swm-kimg { aspect-ratio:4/3; border-radius:5px; }
.swm-label button { padding:16px 8px; font-size:15px; }
.swm-dot.thr, .swm-num.thr { border-radius:6px; }
.swm-dot.dim { opacity:.45; }
.swm-sum-k { width:52px; flex:none; font-size:12px; font-weight:800; color:#9a9a9a; }
.swm-warn { background:#fff8e6; border:1px solid #f0d58a; color:#7a5a12; border-radius:8px; padding:8px 10px; font-size:12px; font-weight:700; line-height:1.5; margin:0 0 10px; }
/* 그림 올리기 방식 · 면 탭 */
.swm-vmode { display:flex; gap:6px; margin-bottom:8px; }
.swm-vmode button { flex:1; padding:7px 8px; border-radius:8px; border:2px solid #e2e2e2; background:#fff; color:#8a8a8a; font-size:13px; font-weight:800; cursor:pointer; line-height:1.3; }
.swm-vmode button small { display:block; font-size:11px; font-weight:500; opacity:.85; }
.swm-vmode button:hover:not(.on) { border-color:#bdbdbd; color:#444; }
.swm-vmode button.on { border-color:#5c5c5c; background:#5c5c5c; color:#fff; }
.swm-vtag { display:inline-block; margin-left:5px; padding:0 6px; border-radius:6px; background:#f1f1f1; color:#8a8a8a; font-size:10px; font-weight:700; vertical-align:1px; }
/* 확대 — 그림을 감싼 칸 안에서만 커진다. 점·표시는 --iz 로 되돌려 같은 크기로 보인다 */
.swm-zoom { position:relative; transform-origin:0 0; }
.swm-zoom .swm-dot { transform:scale(var(--iz,1)); }
.swm-zreset { position:absolute; right:8px; bottom:8px; z-index:6; padding:4px 10px; border:none; border-radius:6px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:700; cursor:pointer; }
/* 키링끈·라벨 자리 표시 */
.swm-mark { position:absolute; transform:translate(-50%,-50%) scale(var(--iz,1)); cursor:grab; z-index:5; touch-action:none; user-select:none; }
.swm-mark.dim { opacity:.6; }
.swm-mark-label { display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; background:#fff; color:#ff2d6f; font-size:11px; font-weight:800; white-space:nowrap;
  border:1.5px solid #ff2d6f; outline:1px dashed #ff2d6f; outline-offset:-5px; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.swm-mark-label.inline { box-shadow:none; flex:none; }
.swm-mark-box { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:10px 12px; border:1px solid #ff2d6f; box-shadow:0 0 0 1px #ff2d6f; border-radius:10px; background:#fff; font-size:13px; color:#444; }
.swm-mark-box small { display:block; color:#8a8a8a; font-size:12px; font-weight:500; margin-top:2px; }
/* 면 칸 — 한 장은 하나, 4면 따로는 2×2 로 한 화면에 */
.swm-cells.multi { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.swm-vcell { min-width:0; }
.swm-cells.multi .swm-vcell { border:1px solid #efefef; border-radius:10px; padding:8px; background:#fcfcfc; }
.swm-vcell-h { display:flex; align-items:center; gap:6px; font-size:13px; margin:0 2px 6px; min-height:24px; }
.swm-vcell-h b { color:#444; }
.swm-vcell-h > span:not(.swm-vcell-btns) { font-size:11px; color:#a2a2a2; font-weight:700; }
.swm-vcell-btns { margin-left:auto; display:flex; gap:4px; }
.swm-vcell-btns button { padding:2px 8px; border:none; border-radius:6px; background:#f1f1f1; color:#666; font-size:11px; font-weight:700; cursor:pointer; }
.swm-vcell-btns button:hover { background:#e6e6e6; color:#333; }
.swm-vcell .swm-imgwrap { display:block; width:fit-content; max-width:100%; margin:0 auto; overflow:hidden; border-radius:8px; }
.swm-drop.small { min-height:220px; padding:12px; }
.swm-imgwrap.zoomed canvas { cursor:grab !important; }
.swm-imgwrap.zoomed.panning canvas { cursor:grabbing !important; }
/* 키링끈 — 거꾸로 된 U. 아래 두 끝(아래 가운데)이 찍은 자리에 닿는다 */
.swm-mark.strap { transform:translate(-50%,-100%) scale(var(--iz,1)); transform-origin:50% 100%; line-height:0; }
.swm-mark-strap { display:block; overflow:visible; }
.swm-mark-strap.inline { flex:none; }
.swm-none { display:block; width:100%; margin:0 0 12px; padding:9px; border-radius:8px; border:2px dashed #d4d4d4; background:#fff; color:#7a7a7a; font-size:13px; font-weight:800; cursor:pointer; }
.swm-none:hover:not(.on) { border-color:#a2a2a2; color:#444; }
.swm-none.on { border-style:solid; border-color:#ff2d6f; background:#fff4f8; color:#ff2d6f; }

/* 부위 이름 묻기 — 그림을 누른 자리 옆에 뜬다 */
.swm-dot.pending { background:#fff; color:#ff2d6f; font-size:16px; box-shadow:0 0 0 2px #ff2d6f,0 2px 6px rgba(0,0,0,.35); cursor:default; }
.swm-ask { position:fixed; z-index:60; width:280px; padding:14px; background:#fff; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.06); font-size:13px; }
.swm-ask-h { font-size:12px; font-weight:800; color:#444; margin-bottom:6px; padding-right:20px; }
.swm-ask-h span { font-weight:500; color:#9a9a9a; }
.swm-ask-row { display:flex; gap:6px; }
.swm-ask-row input { flex:1; min-width:0; border:1.5px solid #ddd; border-radius:8px; padding:6px 9px; font-size:13px; }
.swm-ask-row input:focus { outline:none; border-color:#5c5c5c; }
.swm-ask-row .btn-pri { padding:6px 12px; font-size:12px; flex:none; }
.swm-ask-err { display:none; margin-top:5px; font-size:12px; color:#ff2d6f; font-weight:700; }
.swm-ask-err.show { display:block; }
.swm-ask-list { display:flex; flex-direction:column; gap:4px; max-height:180px; overflow:auto; }
.swm-ask-list button { display:flex; align-items:center; gap:7px; padding:5px 8px; border:1px solid #e8e8e8; border-radius:8px; background:#fff; font-size:13px; font-weight:700; color:#333; cursor:pointer; text-align:left; }
.swm-ask-list button:hover { border-color:#5c5c5c; }
.swm-ask-list .swm-num { width:20px; height:20px; font-size:11px; flex:none; }
.swm-ask-chip { width:14px; height:14px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); flex:none; }
.swm-ask-x { position:absolute; top:8px; right:10px; border:none; background:none; font-size:18px; line-height:1; color:#999; cursor:pointer; }
.swm-pts { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; color:#666; }
.swm-pts button { margin-left:auto; border:1px solid #e2e2e2; background:#fff; border-radius:6px; padding:2px 8px; font-size:11px; color:#666; cursor:pointer; }
.swm-pts button:hover { border-color:#999; color:#333; }

/* 부위 색 네모 — 마우스를 올리면 테두리가 켜지고 안내가 뜬다 */
.swm-cpick { position:relative; flex:none; display:block; width:40px; height:34px; border-radius:6px; cursor:pointer; box-shadow:0 0 0 2px transparent; transition:box-shadow .12s; }
.swm-cpick input { display:block; width:100%; height:100%; padding:0; border:none; background:none; cursor:pointer; }
.swm-cpick:hover { box-shadow:0 0 0 2px #5c5c5c; }
.swm-cpick-tip { position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); white-space:nowrap; padding:4px 8px; border-radius:6px; background:#333; color:#fff; font-size:11px; font-weight:700; pointer-events:none; opacity:0; transition:opacity .12s; z-index:5; }
.swm-cpick-tip::after { content:''; position:absolute; left:50%; top:100%; margin-left:-4px; border:4px solid transparent; border-top-color:#333; }
.swm-cpick:hover .swm-cpick-tip { opacity:1; }
.swm-input { display:flex; align-items:center; gap:8px; }
/* 원단을 안 켜고 추천받기를 누르면 '원단을 선택해 주세요'가 두근거린다 */
#swm-fab-ask { display:inline-block; transform-origin:left center; }
#swm-fab-ask.beat { animation:swm-beat .9s ease-in-out 2; }
#swm-fab-ask.beat b { color:#ff2d6f; }
@keyframes swm-beat { 0%,40%,100% { transform:scale(1); } 15% { transform:scale(1.14); } 28% { transform:scale(1.04); } 34% { transform:scale(1.12); } }
.swm-guide { margin-top:10px; padding:9px 12px; border-radius:10px; background:#ffe8ef; border:1px solid #ffc2d3; color:#444; font-size:14px; text-align:center; }
.swm-guide b { color:#222; }
/* 라벨 — 돌리기·크기 손잡이 */
.swm-lbl-rot { position:relative; display:inline-block; transform-origin:50% 50%; line-height:0; }
.swm-lbl-rot .swm-mark-label { line-height:1.4; padding:.27em .9em; }
.swm-lh { display:none; position:absolute; width:10px; height:10px; background:#fff; border:1.5px solid #ff2d6f; box-shadow:0 1px 3px rgba(0,0,0,.35); touch-action:none; }
.swm-mark.label.on .swm-lh { display:block; }
.swm-lh.rot { left:50%; top:-20px; margin-left:-5px; border-radius:50%; cursor:grab; }
.swm-lh.rot::after { content:''; position:absolute; left:50%; top:9px; width:1.5px; height:9px; margin-left:-.75px; background:#ff2d6f; }
.swm-lh.size { right:-6px; bottom:-6px; border-radius:2px; cursor:nwse-resize; }
.swm-lbl-ctl { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:-4px 0 12px; font-size:13px; color:#444; }
.swm-lbl-ctl label { display:flex; align-items:center; gap:6px; }
.swm-lbl-ctl input[type=range] { width:120px; accent-color:#ff2d6f; }
.swm-lbl-ctl b { min-width:38px; font-weight:700; color:#333; }
.swm-guide-t { display:inline-block; }
.swm-guide-t.beat { animation:swm-beat 1.4s ease-in-out infinite; }
.swm-guide-t.beat b { color:#ff2d6f; }
.swm-note { display:block; width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d9d9d9; border-radius:10px; font:inherit; font-size:14px; line-height:1.5; color:#333; background:#fff; resize:vertical; }
.swm-note:focus { outline:none; border-color:#5c5c5c; box-shadow:0 0 0 1px #5c5c5c; }
.swm-guide.done { background:#f4f4f4; border-color:#e6e6e6; }
.swm-req { display:inline-block; margin-right:5px; padding:1px 6px; border-radius:5px; background:#ffe8ef; color:#d81b60; font-size:11px; font-weight:800; vertical-align:1px; }
.swm-reqbox { background:#fff4f8; border:1px dashed #ffb3c9; border-radius:10px; padding:12px; }
.swm-reqbox-h { font-size:13px; font-weight:800; color:#444; margin-bottom:8px; }
.swm-reqbox-h span { font-weight:500; color:#8a8a8a; font-size:12px; margin-left:4px; }
.swm-reqbox-c { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; color:#777; }
.swm-mode button { white-space:nowrap; }
.swm-board-wrap { display:flex; justify-content:center; padding:6px 0; }
.swm-board { position:relative; border:1px dashed #cfcfcf; border-radius:8px; background:#fafafa repeating-conic-gradient(#f1f1f1 0 25%, #fafafa 0 50%) 0 0/20px 20px; touch-action:none; }
.swm-layer { position:absolute; cursor:move; outline:1px solid rgba(0,0,0,.18); touch-action:none; user-select:none; }
.swm-layer:hover, .swm-layer.drag { outline:2px solid #ff2d6f; }
.swm-layer canvas { display:block; width:100%; height:100%; pointer-events:none; }
.swm-layer-x { position:absolute; top:0; right:0; width:22px; height:22px; padding:0; border:none; border-radius:0 0 0 8px; background:#ff2d6f; color:#fff; font-size:14px; font-weight:800; line-height:22px; cursor:pointer; opacity:.85; }
.swm-layer-x:hover { opacity:1; }
.swm-layer-h { position:absolute; right:-7px; bottom:-7px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #ff2d6f; cursor:nwse-resize; box-sizing:border-box; }
.swm-dim-svg { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:3; }
.swm-dim-end { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; border:2px solid #1e88e5; box-sizing:border-box; cursor:grab; z-index:4; touch-action:none; transform:scale(var(--iz,1)); }
.swm-dim-end.pending { background:#1e88e5; cursor:default; }
.swm-dim-lbl { position:absolute; transform:translate(-50%,-50%) scale(var(--iz,1)); padding:2px 8px; border-radius:11px; background:#fff; border:1.5px solid #1e88e5; color:#1565c0; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; z-index:5; user-select:none; }
.swm-dim-lbl.empty { color:#9a9a9a; }
.swm-dim-lbl:hover { background:#e3f2fd; }
.swm-dim-del { margin-top:10px; padding:0; border:none; background:none; color:#d81b60; font-size:12px; font-weight:700; cursor:pointer; }
/* 작업지시서 초기화 — 한 번 누르면 붉게 바뀌고 한 번 더 눌러야 지운다 */
.swm-reset { padding:8px 12px; font-size:12px; font-weight:600; color:#c2476a; background:#fdeef2; border:1px solid #f6cdd8; border-radius:8px; cursor:pointer; }
.swm-reset:hover { background:#fbe0e8; border-color:#f0b5c5; }
.swm-reset.arm { color:#fff; background:#e05252; border-color:#e05252; }

/* 제작방식 — 레퍼런스 사진을 그림 자리에 잇는다 */
.swm-dot.met { border-radius:7px; }
.swm-num.met { background:#14a38b; border-radius:6px; }
.swm-part.on .swm-num.met { background:#ff2d6f; }
.swm-mphoto { width:52px; height:40px; flex:none; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.swm-mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px 8px; }
.swm-mgrid .swm-kimg { aspect-ratio:4/3; }
.swm-ask.wide { width:360px; }
.swm-own-btn { display:block; margin-top:10px; padding:8px 10px; border:1.5px dashed #14a38b; border-radius:8px; color:#14a38b; font-size:12px; font-weight:800; cursor:pointer; text-align:center; }
.swm-own-btn:hover { background:#eefaf7; }
.swm-own-btn span { display:block; font-size:11px; font-weight:500; color:#8a8a8a; margin-top:2px; }
.swm-own-cell .swm-kimg { display:flex; align-items:center; justify-content:center; font-size:24px; color:#14a38b; background:#f3fbf9; box-shadow:inset 0 0 0 1.5px #9edccf; }
.swm-own-x { border:none; background:none; color:#999; cursor:pointer; font-size:13px; padding:0 2px; }
.swm-own-x:hover { color:#ff2d6f; }
.swm-ask-refs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:260px; overflow:auto; padding:2px; }
.swm-ask-refs button { display:flex; flex-direction:column; gap:4px; padding:0; border:none; background:none; cursor:pointer; min-width:0; text-align:center; }
.swm-ask-refs button span { aspect-ratio:4/3; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.swm-ask-refs button:hover span { box-shadow:0 0 0 2px #14a38b; }
.swm-ask-refs button b { font-size:11px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 스와치북 화면 나누기 — 관리자 화면과 고객용 스와치북이 같은 규칙을 쓴다 (둘의 모양은 항상 같게).
   넓은 화면: 작업지시서가 접혀 있으면 왼쪽 위 작은 카드, 열면 왼쪽 작업지시서 · 오른쪽 스와치북(따로 스크롤). */
.sw-split { display:block; }
@media (min-width:1280px){
  .sw-split { display:grid; grid-template-columns:300px minmax(0,1fr); gap:22px; align-items:start; }
  .sw-split-wo { position:sticky; top:16px; }
  .sw-split .swm-card { max-width:none; margin:0; }
  .sw-split:not(.on) .swm-open { flex-direction:column; align-items:stretch; gap:12px; }
  .sw-split:not(.on) .swm-open i { text-align:center; padding:8px 14px; }
  .sw-split-book > .sw-shelf { margin-top:0; }
  .sw-split.on { grid-template-columns:minmax(0,1fr) clamp(440px,34vw,680px); }
  .sw-split.on .sw-split-wo { position:static; }
  .sw-split.on .sw-split-book { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; overscroll-behavior:contain;
                                background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.1); padding:16px; }
  .sw-split.on #sw-grid { grid-template-columns:minmax(0,1fr); }
  .sw-split.on .sw-tags { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .sw-split.on .sw-media { grid-template-columns:minmax(0,1fr); }
  .sw-split.on .sw-book { padding:18px 16px 20px; }
  .sw-split.on .sw-colors { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
  /* 원단을 누르면 색상표는 이름표 아래가 아니라 옆에 펼친다 */
  .sw-split-book:has(> #sw-detail-view:not(.hidden)) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:18px; align-items:start; }
  .sw-split-book:has(> #sw-detail-view:not(.hidden)) #sw-grid { grid-template-columns:minmax(0,1fr); }
  .sw-split-book > #sw-detail-view .sw-book { margin-top:0; }
  .sw-split:not(.on) .sw-split-book > #sw-detail-view { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; border-radius:14px; }
  /* 작업지시서를 연 좁은 오른쪽에서는 이름표를 좁은 세로 목록으로 */
  .sw-split.on .sw-split-book:has(> #sw-detail-view:not(.hidden)) { grid-template-columns:150px minmax(0,1fr); gap:12px; }
  .sw-split.on .sw-split-book:has(> #sw-detail-view:not(.hidden)) .sw-grp { padding:7px; }
  .sw-split.on .sw-split-book:has(> #sw-detail-view:not(.hidden)) .sw-tags { grid-template-columns:minmax(0,1fr); }
  .sw-split.on .sw-split-book:has(> #sw-detail-view:not(.hidden)) .sw-grp-h .text-xs { display:none; }
  .sw-split.on .sw-split-book:has(> #sw-detail-view:not(.hidden)) .sw-book { padding:14px 12px 16px; }
  .sw-split.on .sw-split-book:has(> #sw-detail-view:not(.hidden)) .sw-book :is(.btn-pri,.btn-sec) { white-space:nowrap; font-size:11px; padding:6px 9px; }
}