/* 1101 「작업함」(#/work · workbox.js) — 목업 Workbox2 · ExpertWork2 · 간편 = 글자 17px 이상 · 누르는 곳 56px · 375px 가로 넘침 없음 · 전문가 = 작게 · 표 */
.wb { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wb .wbhead { margin: 0; font-size: 18px; color: var(--ink-2); }
.wb .wbflow { margin: 0; padding: 0; list-style: none; display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; }
.wb .wbflow > li { display: flex; align-items: stretch; flex: 1 1 180px; min-width: 0; }
.wb .wbcell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px 16px; border-radius: 14px; min-height: 120px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); font: inherit; cursor: pointer; }
.wb .wbcell .nm { font-size: 17px; font-weight: 700; }
.wb .wbcell .n { font-family: var(--font-heading, inherit); font-size: 34px; font-weight: 800; line-height: 1; }
.wb .wbcell .sb { font-size: 17px; color: var(--muted); overflow-wrap: anywhere; }
.wb .wbcell.warn { background: var(--accent-light); border: 2px solid var(--accent); }
.wb .wbcell.warn .sb { color: var(--accent-press); font-weight: 700; }
.wb .wbcell[aria-pressed="true"] { background: var(--ink); color: var(--surface); border: 2px solid var(--ink); }
.wb .wbcell[aria-pressed="true"] .sb { color: var(--disabled); }
.wb .wbcell:focus-visible, .wb .pillb:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.wb .wbflow .ar { display: flex; align-items: center; padding: 0 8px; font-size: 24px; font-weight: 800; color: var(--teal); }
.wb .wbbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 17px; }
.wb .pillb { min-height: 56px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 17px; font-weight: 700; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); cursor: pointer; }
.wb .pillb[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.wb .wbnext { margin-left: auto; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wb .wbsep { width: 1px; height: 22px; background: var(--line-2); }
/* 지금 이것부터(간편) */
.wb .wbhero { background: var(--surface); border: 2px solid var(--accent); border-radius: 18px; padding: 20px 22px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; min-width: 0; }
.wb .wbhth { width: 90px; height: 120px; border-radius: 12px; background: #292524; flex: 0 0 auto; object-fit: cover; display: block; }
.wb .wbhth.sq { height: 90px; } .wb .wbhth.blog { background: var(--track); }
.wb .wbhero .t { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wb .wbhero .k { font-size: 17px; font-weight: 700; color: var(--accent-press); }
.wb .wbhero .t b { font-size: 24px; line-height: 1.35; overflow-wrap: anywhere; }
.wb .wbhero .w { font-size: 17px; color: var(--ink-2); overflow-wrap: anywhere; }
.wb .wbhero .a { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: min(280px, 100%); flex: 0 1 auto; }
.wb .wbhero .a .btn.big { min-height: 60px; font-size: 19px; white-space: normal; }
.wb .wbhero .a2 { display: flex; gap: 8px; } .wb .wbhero .a2 .btn { flex: 1; min-height: 56px; }
/* 줄 */
.wb .wbrows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wb .wbrow { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; min-width: 0; }
.wb .wbrow.open { border-color: var(--teal); }
.wb .wbr1 { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; min-width: 0; }
.wb .wbth { width: 56px; height: 76px; border-radius: 10px; flex: 0 0 auto; background: #292524; object-fit: cover; display: block; }
.wb .wbth.sq { height: 56px; } .wb .wbth.blog { background: var(--track); }
/* 1102 썸네일 — 그림이 없으면 종류 표시(블로그 · 쇼츠 · 카드 · 롱폼 · 글) · 크기 고정 */
.wb .wbth.ph, .wb .wbhth.ph, .wb .wbth2.ph { background: var(--bg); border: 1px solid var(--line); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; overflow: hidden; min-height: 0; font-size: 13px; }   /* min-height 0 = 공통 .ph(200px) 덮음 */
.wb .ph svg { width: 24px; height: 24px; fill: none; stroke: currentColor; } .wb .ph i { font-style: normal; font-size: 13px; line-height: 1; white-space: nowrap; }
.wb .wbhth.ph svg { width: 32px; height: 32px; }
/* 1102 [삭제] — 다음 행동 단추보다 약하게(테두리 없는 빨간 글자) · 막힌 것은 흐리게(누르면 까닭 알림) */
.wb .btn.wbdel { background: transparent; border: 1px solid transparent; color: var(--accent-press); font-weight: 600; box-shadow: none; }
.wb .btn.wbdel:hover { border-color: var(--accent-line, var(--line-2)); background: var(--accent-light); }
.wb .btn.wbdel[aria-disabled="true"] { color: var(--disabled-ink, var(--muted)); cursor: not-allowed; background: transparent; border-color: transparent; }
.wb .btn.wbdel[disabled] { color: var(--disabled-ink, var(--muted)); background: transparent; }
.wb .wbr1 > .wbdel { min-height: 56px; min-width: 64px; font-size: 17px; margin-left: auto; flex: 0 0 auto; }
.toast .wbundogo { margin-left: auto; min-width: 0; padding: 0 12px; font-size: 17px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.toast .wbundogo + button { margin-left: 0; }
.wb .wbtc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wb .wbth2 { width: 40px; height: 40px; border-radius: 6px; flex: 0 0 auto; background: #292524; object-fit: cover; display: block; }
.wb .wbth2.ph svg { width: 18px; height: 18px; } .wb .wbth2.ph i { display: none; }
.wb .wbt { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wb .wbt > b { font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.wb .wbchips { display: flex; gap: 6px; flex-wrap: wrap; }
.wb .wbchips span { font-size: 17px; background: var(--bg); border-radius: 8px; padding: 3px 10px; color: var(--ink-2); }
.wb .wbtrack { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.wb .wbtrack i { width: 22px; height: 8px; border-radius: 4px; background: var(--line); }
.wb .wbtrack i.ok { background: var(--teal); } .wb .wbtrack i.now { background: var(--accent); } .wb .wbtrack i.off { background: var(--line-2); }
.wb .wbst { font-size: 17px; min-width: 170px; color: var(--ink-2); overflow-wrap: anywhere; flex: 0 1 220px; }
.wb .wbst.warn, .wb td.warn { color: var(--accent-press); font-weight: 700; }
.wb .wbbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wb .wbbtns .btn { min-height: 56px; min-width: 170px; font-size: 17px; font-weight: 700; white-space: normal; }
.wb .wbbtns .btn.line { background: var(--surface); color: var(--teal-link); border: 1px solid var(--teal); }
.wb .wbbtns .btn.sub { min-width: 0; font-weight: 600; }
.wb .wbbtns .btn[disabled] { background: var(--track); color: var(--disabled-ink); border: none; cursor: default; }
/* 펼침(② 확인) */
.wb .wbx { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wb .wbxi { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; min-width: 0; }
.wb .wbpv { width: 120px; height: 200px; border-radius: 12px; background: #292524; object-fit: contain; flex: 0 0 auto; display: block; }
.wb .wbpv.txt { width: min(320px, 100%); height: auto; max-height: 220px; overflow: auto; background: var(--bg); color: var(--ink-2); padding: 10px 12px; font-size: 17px; line-height: 1.6; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere; }
.wb .wbpv.ph { display: flex; align-items: center; justify-content: center; color: var(--disabled); font-size: 17px; }
.wb .wbinfo { margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.8; color: var(--ink-2); flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.wb .wbxs { display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.wb .wbxs .btn { min-height: 56px; }
.wb .wbxa { display: flex; gap: 8px; flex-wrap: wrap; }
.wb .wbxa .btn { min-height: 56px; min-width: 200px; font-size: 18px; white-space: normal; }
.wb .wbxa .btn.primary { font-weight: 700; }
.wb .wbold { align-self: flex-start; }
.wb .wbempty { margin: 0; padding: 18px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: 14px; font-size: 17px; color: var(--muted); }
.wb .wbnote { margin: 0; font-size: 17px; color: var(--muted); }
.wbhr { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.wbmoved { margin: 0 0 12px; align-items: center; flex-wrap: wrap; }
.wbmoved .lnk { min-height: 44px; margin-left: 6px; }
/* 전문가 — 작게 · 표 */
html[data-mode="expert"] .wb { gap: 12px; }
html[data-mode="expert"] .wb .wbhead { font-size: 14px; }
html[data-mode="expert"] .wb .wbflow > li { flex: 1 1 150px; }
html[data-mode="expert"] .wb .wbcell { padding: 9px 12px; border-radius: 10px; min-height: 0; gap: 4px; }
html[data-mode="expert"] .wb .wbcell .nm { font-size: 13px; } html[data-mode="expert"] .wb .wbcell .n { font-size: 24px; } html[data-mode="expert"] .wb .wbcell .sb { font-size: 12px; }
html[data-mode="expert"] .wb .wbflow .ar { font-size: 18px; padding: 0 6px; }
html[data-mode="expert"] .wb .wbbar { gap: 6px; font-size: 13px; }
html[data-mode="expert"] .wb .pillb { min-height: 34px; padding: 0 12px; font-size: 13px; }
html[data-mode="expert"] .wb .wbbar .btn.sm { min-height: 34px; font-size: 13px; padding: 0 12px; }
html[data-mode="expert"] .wb .wbbar .lnk { min-height: 34px; font-size: 13px; }
.wb .wbtw { overflow-x: auto; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.wb .wbt2 { border-collapse: collapse; width: 100%; }
.wb .wbt2 th { font-size: 13px; color: var(--muted); text-align: left; font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.wb .wbt2 td { font-size: 14px; padding: 7px 8px; border-bottom: 1px solid var(--track); vertical-align: middle; }
.wb .wbt2 td.m { font-size: 13px; color: var(--ink-2); }
.wb .wbt2 td.b { white-space: nowrap; }
.wb .wbt2 tr.sel td { background: var(--teal-light); }
.wb .wbt2 input[type="checkbox"] { width: 16px; height: 16px; }
.wb .wbt2 .wbtrack i { height: 7px; }
.wb .wbt2 .btn.sm { min-height: 32px; padding: 0 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.wb .wbt2 .btn.line { background: var(--surface); color: var(--teal-link); border: 1px solid var(--teal); }
.wb .wbt2 .btn.sub { font-weight: 600; margin-left: 4px; }
.wb .wbt2 .btn.wbdel { margin-left: 4px; font-weight: 600; }
.wb .wbtl { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.wb .wbxtr td { background: var(--bg); }
html[data-mode="expert"] .wb .wbx { margin-top: 0; padding-top: 4px; border-top: 0; }
html[data-mode="expert"] .wb .wbpv { width: 96px; height: 160px; }
html[data-mode="expert"] .wb .wbinfo, html[data-mode="expert"] .wb .wbpv.txt { font-size: 13px; line-height: 1.6; }
html[data-mode="expert"] .wb .wbxs .btn, html[data-mode="expert"] .wb .wbxa .btn { min-height: 34px; min-width: 0; font-size: 13px; }
html[data-mode="expert"] .wb .wbnote, html[data-mode="expert"] .wb .wbempty { font-size: 13px; }
/* 폰 */
@media (max-width: 640px) {
  .wb .wbflow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wb .wbflow .ar { display: none; }
  .wb .wbcell { min-height: 0; padding: 12px; }
  .wb .wbcell .n { font-size: 28px; }
  .wb .wbbar .pillb { flex: 1 1 auto; }
  .wb .wbnext { margin-left: 0; }
  .wb .wbhero { padding: 16px; gap: 14px; }
  .wb .wbhero .a { min-width: 0; width: 100%; }
  .wb .wbrow { padding: 12px; }
  .wb .wbst { min-width: 0; flex: 1 1 100%; }
  .wb .wbbtns { flex: 1 1 100%; } .wb .wbbtns .btn { flex: 1 1 100%; min-width: 0; }
  .wb .wbxa .btn { flex: 1 1 100%; min-width: 0; }
  .wb .wbpv { width: 100%; max-width: 240px; }
}