/* v-166 — 「W 워크스페이스」 화면 틀을 모든 화면에(디자인 W · 1100px 이상일 때만).
   네 단: 레일(v-158) · 목록 단(#wq) · 작업 공간(#view — 원래 화면 그대로) · 맥락 단(#wx).
   2300px 이상 380 · 440 / 1700px 이상 320 · 400 / 1360px 이상 목록 300 · 맥락은 위에 펼침 / 그 아래는 둘 다 위에 펼침.
   디자인이 W 가 아니거나 1100px 아래(휴대폰)는 #wws 가 display:contents — 전과 똑같은 화면. */
#wws{display:contents}
#wq,#wx,#wtg{display:none}
@media (min-width:1100px){
:root[data-skin="W"] #wws.w-on{display:grid;flex:1 1 auto;grid-template-columns:var(--wqc,0px) minmax(0,1fr) var(--wxc,0px);align-items:start;min-height:calc(100vh - var(--wtop,64px))}
:root[data-skin="W"] #wws.w-on.q-dock{--wqc:var(--wq-w,320px)}
:root[data-skin="W"] #wws.w-on.x-dock{--wxc:var(--wz-w,400px)}
:root[data-skin="W"] #wws.w-on>#view{grid-column:2;grid-row:1;min-width:0;background:var(--surface);min-height:calc(100vh - var(--wtop,64px));box-sizing:border-box;overflow-x:clip}
:root[data-skin="W"] #wws.w-on>#wq{grid-column:1;grid-row:1}
:root[data-skin="W"] #wws.w-on>#wx{grid-column:3;grid-row:1}
:root[data-skin="W"] #wws.w-on.q-dock>#wq,:root[data-skin="W"] #wws.w-on.x-dock>#wx{display:flex;position:sticky;top:var(--wtop,64px);height:calc(100vh - var(--wtop,64px))}
:root[data-skin="W"] #wws.w-on.q-over>#wq,:root[data-skin="W"] #wws.w-on.x-over>#wx{display:flex;position:fixed;top:var(--wtop,64px);bottom:0;z-index:118;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 24px 60px rgba(11,18,32,.18)}
:root[data-skin="W"] #wws.w-on.q-over>#wq{left:84px;width:var(--wq-w,340px);transform:translateX(-10px)}
:root[data-skin="W"] #wws.w-on.x-over>#wx{right:0;width:var(--wz-w,400px);transform:translateX(10px)}
:root[data-skin="W"] #wws.w-on.q-over.q-show>#wq,:root[data-skin="W"] #wws.w-on.x-over.x-show>#wx{opacity:1;pointer-events:auto;transform:none}
:root[data-skin="W"] #wtg.w-on{display:inline-flex}
/* 맥락 단이 붙어 있으면 오른쪽 아래 떠 있는 단추(도우미 · 개선 요청 · 카카오톡 채널)는 맥락 단 아래로 옮겨 감 */
:root[data-skin="W"] body.wz-dock .fbbtn,:root[data-skin="W"] body.wz-dock .asbtn,:root[data-skin="W"] body.wz-dock .kkfab{display:none!important}
:root[data-skin="W"] #wws.w-on #view .stkhd{background:var(--surface)}
/* 수임처 위키 — 오른쪽 정보 칸(.sidecol)을 맥락 단으로 옮겼을 때 화면은 한 칸 */
:root[data-skin="W"] #wws.w-on .cust.w-adopted{grid-template-columns:minmax(0,1fr)}
}
#wq,#wx{flex-direction:column;background:var(--surface-2);min-width:0;overflow:hidden;box-sizing:border-box;color:var(--ink);font-size:13.5px}
#wq{border-right:1px solid var(--line)}
#wx{border-left:1px solid var(--line)}
/* ── 목록 단 ── */
#wq .wq-h{padding:18px 20px 10px;display:flex;align-items:flex-start;gap:8px}
#wq .wq-h .k{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wq .wq-h h2{font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.25;margin:2px 0 0;display:flex;align-items:baseline;gap:8px;color:var(--ink)}
#wq .wq-h h2 small{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0}
#wq .wq-h>div{flex:1;min-width:0}
.wq-x,.wz-x{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:none;color:var(--faint);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.wq-x:hover,.wz-x:hover{background:var(--line-soft);color:var(--ink)}
.wq-x:focus-visible,.wz-x:focus-visible,#wq a:focus-visible,#wx a:focus-visible,#wx button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#wq .wq-seg{display:flex;background:var(--line-soft);border-radius:9px;padding:3px;gap:2px;margin:0 20px 10px}
#wq .wq-seg button{flex:1;border:0;background:none;padding:5px 6px;border-radius:7px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
#wq .wq-seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(11,18,32,.08)}
#wq .wq-seg button b{font-weight:800;margin-left:3px}
#wq .wq-s{display:flex;align-items:center;gap:8px;margin:0 20px 8px;height:36px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--faint)}
#wq .wq-s:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#wq .wq-s input{flex:1;min-width:0;border:0!important;outline:0;background:none!important;font:inherit;font-size:13px;color:var(--ink);padding:0;box-shadow:none!important}
#wq .wq-l{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:2px 0 12px}
#wq .wq-g{padding:12px 20px 4px;font-size:11.5px;font-weight:700;color:var(--faint);letter-spacing:.02em;display:flex;align-items:center;gap:6px}
#wq .wq-g .r{margin-left:auto;font-weight:600}
#wq .wq-i{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:0 10px;align-items:center;padding:8px 12px;margin:0 8px;border-radius:10px;border:1px solid transparent;color:var(--ink);text-decoration:none;cursor:pointer}
#wq .wq-i:hover{background:var(--surface);text-decoration:none}
#wq .wq-i.on{background:var(--surface);border-color:var(--line);box-shadow:0 1px 2px rgba(11,18,32,.05)}
#wq .wq-i.on .b>b{color:var(--accent-ink,var(--accent))}
#wq .wq-i .av{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;border-radius:10px}
#wq .wq-i .ic0{width:32px;height:32px;border-radius:9px;background:var(--line-soft);color:var(--slate);display:flex;align-items:center;justify-content:center}
#wq .wq-i.on .ic0{background:var(--accent);color:#fff}
#wq .wq-i .b{min-width:0}
#wq .wq-i .b>b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.015em}
#wq .wq-i .b>small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
#wq .wq-i .r{display:flex;gap:4px;align-items:center;justify-content:flex-end}
#wq .wq-i.sm{grid-template-columns:minmax(0,1fr) auto;padding:6px 12px}
#wq .wq-i.sm .b>b{font-size:13px;font-weight:600}
#wq .wq-i.l2{padding-left:24px}
.wq-n{font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--line-soft);color:var(--muted);white-space:nowrap;font-family:var(--sans)}
.wq-n.x{background:var(--sev3-bg,#FDECEC);color:var(--sev3,#E03A3A)}
.wq-n.w{background:var(--sev2-bg,#FFF1E2);color:var(--sev2,#C25A06)}
.wq-n.b{background:var(--accent-soft);color:var(--accent-ink,var(--accent))}
.wq-d{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--faint)}
.wq-d.x{background:#E03A3A}.wq-d.w{background:#E26E0A}.wq-d.ok{background:#16A34A}
#wq .wq-e{padding:16px 20px;font-size:12.5px;color:var(--muted)}
#wq .wq-more{display:block;margin:6px 20px 0;font-size:12.5px;font-weight:700;color:var(--accent-ink,var(--accent));background:none;border:0;cursor:pointer;padding:4px 0}
#wq .wq-f,#wx .wz-ft{margin-top:auto;padding:10px 20px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);display:flex;gap:12px;flex-wrap:wrap}
#wq kbd,#wx kbd{font:inherit;font-size:10.5px;color:var(--muted);font-weight:600;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--surface);line-height:15px;display:inline-block}
/* ── 맥락 단 ── */
#wx .wz-h{display:flex;align-items:flex-start;gap:10px;padding:18px 18px 12px 20px}
#wx .wz-h>div{flex:1;min-width:0}
#wx .wz-h .k{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
#wx .wz-h h2{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:2px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--ink);line-height:1.3}
#wx .wz-h .m{font-size:12.5px;color:var(--muted);margin-top:3px}
#wx .wz-b{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 0 8px}
#wx .wz-c{margin:0 16px 12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(11,18,32,.04)}
#wx .wz-c>.hd{display:flex;align-items:center;gap:8px;padding:12px 16px 8px}
#wx .wz-c>.hd h4{font-size:13.5px;font-weight:800;margin:0;color:var(--ink)}
#wx .wz-c>.hd .n{font-size:11px;font-weight:700;color:var(--muted);background:var(--line-soft);border-radius:6px;padding:1px 6px}
#wx .wz-c>.hd a,#wx .wz-c>.hd button.lk{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent-ink,var(--accent));background:none;border:0;cursor:pointer;padding:0;font-family:inherit}
#wx .wz-c>.bd{padding:0 16px 14px;font-size:13px;color:var(--slate);line-height:1.55}
#wx .wz-c>.bd p{margin:0}
#wx .wz-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:12.5px}
#wx .wz-kv dt{color:var(--muted);font-weight:600;margin:0}
#wx .wz-kv dd{margin:0;text-align:right;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
#wx .wz-r{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink);text-decoration:none;cursor:pointer}
#wx .wz-r:first-child{border-top:0;padding-top:2px}
#wx a.wz-r:hover .t{color:var(--accent-ink,var(--accent))}
#wx .wz-r .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
#wx .wz-r small{color:var(--faint);font-size:11.5px;white-space:nowrap}
#wx .wz-r .dd{min-width:38px;font-size:12px;font-weight:800;color:var(--accent-ink,var(--accent));font-family:var(--sans)}
#wx .wz-r .dd.x{color:#E03A3A}#wx .wz-r .dd.w{color:#C25A06}
#wx .wz-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#wx .wz-cell{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;border-radius:9px;background:var(--surface-2);font-size:12px;color:var(--slate);text-decoration:none;border:1px solid transparent}
#wx .wz-cell i{font-style:normal;color:var(--muted);font-weight:600;white-space:nowrap}
#wx .wz-cell b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wx .wz-cell.s-x{background:var(--sev3-bg,#FDECEC)}#wx .wz-cell.s-x b{color:var(--sev3,#E03A3A)}
#wx .wz-cell.s-w{background:var(--sev2-bg,#FFF1E2)}#wx .wz-cell.s-w b{color:var(--sev2,#C25A06)}
#wx .wz-cell.s-ok b{color:#16A34A}
#wx .wz-cell.s-p b,#wx .wz-cell.s-o b{color:var(--accent-ink,var(--accent))}
#wx a.wz-cell:hover{border-color:var(--line-2)}
#wx .wz-go{display:flex;flex-wrap:wrap;gap:6px}
#wx .wz-go a{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:700;color:var(--slate);text-decoration:none}
#wx .wz-go a:hover{border-color:var(--accent);color:var(--accent-ink,var(--accent))}
#wx .wz-go a svg{width:14px;height:14px}
#wx .wz-e{font-size:12.5px;color:var(--muted)}
#wx .wz-ft{gap:10px;align-items:center}
#wx .wz-ft button{border:0;background:none;padding:0;font:inherit;font-size:11.5px;color:var(--muted);cursor:pointer;font-weight:600}
#wx .wz-ft button:hover{color:var(--accent-ink,var(--accent))}
#wx .wz-f{padding:12px 16px 14px;border-top:1px solid var(--line);display:flex;gap:8px;background:var(--surface-2)}
#wx .wz-f .btn{flex:1;justify-content:center;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
#wx .wz-f .btn.ai{background:var(--surface);border:1px solid #D9D0FF;color:#6C4AF8}
#wx .wz-f .btn.ai:hover{background:#F0ECFF}
#wx .wz-f .btn.ic{flex:none;width:40px;padding:0}
/* 수임처 위키 정보 칸을 맥락 단으로 옮겨 왔을 때 */
#wx .wz-adopt:empty{display:none}
#wx .wz-adopt{margin:0 16px 12px}
#wx .wz-adopt .sidecol{position:static;max-height:none;overflow:visible;margin:0;padding:0}
#wx .wz-adopt .infobox{border-radius:14px}
/* ── 위 띠의 단 단추 ── */
#wtg{gap:6px;align-items:center;flex:none}
#wtg .tbtn{width:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#wtg .tbtn[hidden]{display:none}
#wtg .tbtn.on{background:var(--accent-soft);border-color:var(--accent-line,var(--accent-mid));color:var(--accent-ink,var(--accent))}
/* 어두운 화면 */
@media (prefers-color-scheme:dark){ :root[data-skin="W"]:not([data-theme="light"]) #wx .wz-f .btn.ai{background:transparent;border-color:rgba(167,139,250,.45);color:#C4B5FD} }
:root[data-skin="W"][data-theme="dark"] #wx .wz-f .btn.ai{background:transparent;border-color:rgba(167,139,250,.45);color:#C4B5FD}
@media print{ #wq,#wx,#wtg{display:none!important} #wws{display:contents!important} }