/* works.css — 가공 탭. 마크업은 시안 §8 (Unified-Spec 「미니 창 · 워커스 가공」) 구조다 — works.js 참조.
   좁은 폭(≤600px)의 px·색은 **시안 §8 목업의 값 그대로**, 이 파일 끝의 @media 블록에 있다.
   넓은 폭은 같은 마크업을 원본 프레임 1a(5열 타일·머리줄 격자)로 편다.

   색은 전부 tokens.css 토큰 + color-mix. 시안 hex → 토큰 대응:
     #e2b866 골드 → --gold · #1a1608 → --ongold · #f4e7c8 → --gold2 · #4ade80 → --ok · #0a2a12 → --onok
     #3fb56b(초록 채움) → --ok · #7ee6a0(초록 글자) → color-mix(--ok 72%, --fg)
     rgba(63,181,107,.N) → color-mix(--ok N%, transparent) · #f0a35a 주황 → --warn · rgba(240,163,90,.N) → --warnbg/--warnline/color-mix
     #e9ecf1 → --fg · #dce3ea → --fg · #c2cad4 → --fg2 · #8b97a6 → --sub · #6f7a8a → --sub2 · #5c6878 → --dim
     #3a4756(빈 칸) → --line3 · #1e2a38(점선·카드 테두리) → --line2 · #23303f(버튼 테두리) → --line2
     #0d1420(카드 바탕) → --bg · #0b1018(화면 바탕) → --inset · #16202c(구분선) → --line
   tokens.css 는 건드리지 않는다(4블록을 전부 맞춰야 하는 파일이다) — 지역 변수는 .wkban 안에만 둔다.

   스크롤은 시설 목록(#works) 안쪽에만 생긴다. 페이지에는 생기지 않는다
   (#works 의 flex:1/overflow:auto 와 형제의 flex:none 은 layout.css(셸 담당)가 준다 —
    그래서 배너·필터 줄은 목록이 스크롤해도 **위에 고정**이다. 좁은 폭에서는 sticky 까지 얹는다). */
#worksCard{container:works / inline-size}
/* 탭 전체가 곧 화면이다 — 카드 껍데기(테두리·배경)를 쓰지 않는다.
   index.html 의 .card 클래스는 내 파일이 아니라 여기서 벗긴다. overflow:hidden 은 남긴다(#works 가 스크롤한다). */
#worksCard{background:transparent;border:0;border-radius:0}

/* ── 수령 배너 (넓은 폭: 2px 초록 테두리 + 세로 그라데이션, grid auto 1fr auto) ── */
.wkban{--wb-line:color-mix(in srgb, var(--ok) 45%, transparent);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:13px 18px;margin:0 0 12px;border:2px solid var(--wb-line);border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ok) 13%, var(--inset)), color-mix(in srgb, var(--ok) 6%, var(--inset)))}
.wkban .wb-n{display:flex;flex-direction:column;align-items:center;gap:1px;padding-right:18px;border-right:1px solid var(--wb-line)}
.wkban .wb-n b{font-family:var(--mono);font-size:28px;font-weight:600;color:var(--ok);line-height:1}
.wkban .wb-n i{font-style:normal;font-size:var(--fs-xs);letter-spacing:.1em;color:color-mix(in srgb, var(--ok) 62%, var(--sub));white-space:nowrap}
.wkban .wb-m{display:flex;flex-direction:column;gap:4px;min-width:0}
/* 예상 획득은 한 줄에 흐르고 자리가 모자라면 그냥 잘린다 (줄을 늘려 배너를 키우지 않는다) */
.wkban .l1{font-size:var(--fs-body);color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wkban .l1 .g{font-family:var(--mono);color:var(--ok)}
.wkban .l2{font-size:var(--fs-xs);color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wkban .l2 b{font-family:var(--mono);font-weight:400;color:color-mix(in srgb, var(--ok) 55%, var(--fg2))}
.wkban .wb-go{padding:9px 20px;font-size:var(--fs-body);font-weight:700;border:0;border-radius:8px;
  background:var(--ok);color:var(--onok);white-space:nowrap;cursor:pointer}
.wkban .wb-go:hover{background:color-mix(in srgb, var(--ok) 85%, var(--fg))}
/* 0건이면 흐리게 (시안 §8) — 배너를 빼지 않는다 */
.wkban.dim{opacity:.45}
.wkban.dim .wb-go{cursor:default}
.wkban.dim .wb-go:hover{background:var(--ok)}

/* ── 필터 줄: 「시설 N」 · 갱신 시각 · (grow) · 전체/진행/완료 · 「＋ 담기」 ── */
.wkh{display:flex;align-items:center;gap:8px;padding:0 0 10px;min-width:0;overflow:hidden;font-size:var(--fs-sm)}
.wkh .grow{flex:1;min-width:0}
.wkfac{font-weight:600;color:var(--fg2);white-space:nowrap;flex:none}
.wkh .wkat{font-size:var(--fs-xs);color:var(--faint);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.wband{display:inline-flex;align-items:center;flex:none}
.wband .seg{font-size:var(--fs-xs)}
.wband .seg button{font-size:var(--fs-xs)}
/* 「＋ 담기」 — 골드 외곽 */
.wkadd{flex:none;padding:4px 9px;font-size:var(--fs-xs);font-weight:600;border-radius:6px;border-color:var(--gold);color:var(--gold)}
.wkadd:hover{background:var(--goldbg);border-color:var(--gold)}
.wkempty{font-size:var(--fs-sm);color:var(--sub2);white-space:nowrap}
.wkempty2{padding:14px 2px}

/* 빈 상태: 필터 줄 한 줄만 (높이 축소 #worksCard[data-empty]{flex:none} 는 layout.css 가 한다) */
#worksCard[data-empty] #works{display:none}
#worksCard[data-empty] .wkh{padding-bottom:0}

/* ── 시설 목록 (세로, 이 안에서만 스크롤) ── */
#works{padding:0 4px 0 0;display:flex;flex-direction:column;gap:10px}

/* 시설 카드 — 테두리: 전부 완료면 초록 · 진행이 있으면 기본선 (시안 §8 둘째 목업) */
.fcard{flex:none;min-width:0;background:var(--card);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.fcard.done{border-color:color-mix(in srgb, var(--ok) 35%, transparent)}
/* 머리 **한 줄**: 이름 · 상태 배지 · grow · 수령 n · 담기 */
.fch{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--inset);min-width:0}
.fch .fn{font-weight:600;font-size:var(--fs-card);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fch .badge{flex:none;padding:2px 9px;font-size:var(--fs-xs)}
.fch .grow{flex:1;min-width:0}
/* 「수령 N」(초록 채움) — 한 시설의 완료분은 CLI 가 한 번에 전부 수령하므로 시설당 큐 항목 1개 */
.fch .wkgo{flex:none;padding:5px 13px;font-size:var(--fs-sm);font-weight:700;border:1px solid var(--ok);border-radius:7px;
  background:var(--ok);color:var(--onok);white-space:nowrap;cursor:pointer}
.fch .wkgo:hover{background:color-mix(in srgb, var(--ok) 85%, var(--fg))}
/* 완료가 없는 시설의 「수령」 — 흐린 외곽 (시안 「약품 가공 시설」). 자리를 비우지 않는다 */
.fch .wkgo.off,.fch .wkgo.off:hover{background:transparent;border-color:var(--line2);color:var(--line3);font-weight:400;cursor:default}
.fch .wkadd2{flex:none;padding:5px 12px;font-size:var(--fs-sm);color:var(--fg2);border:1px solid var(--line2);border-radius:7px;white-space:nowrap}

/* 칸: 넓은 폭은 한 줄에 5개. 카드 폭에 맞춰 4 → 3 으로 줄고, 좁은 폭에서는 시안의 3열이다. */
.wkg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px 14px;align-content:start}
/* 칸 = [이름 · 끝나는 시각] / [상태 점 · 글자] — 2열 격자, 둘째 줄이 전폭 */
.wk{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6px;row-gap:6px;min-width:0;min-height:58px;padding:9px 11px;
  background:var(--bg);border:1px solid var(--line2);border-radius:9px}
.wk.run{border-color:color-mix(in srgb, var(--warn) 40%, transparent);background:color-mix(in srgb, var(--warn) 6%, var(--bg))}
.wk.done{border-color:color-mix(in srgb, var(--ok) 35%, transparent);background:color-mix(in srgb, var(--ok) 7%, var(--bg))}
/* 빈 칸 — 점선, 흐린 글자 (시안: 1px dashed · 「— / 빈 칸」) */
.wk.empty{border:1px dashed var(--line2);background:transparent}
.wk .nm{font-weight:600;font-size:var(--fs-body);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk.run .nm,.wk.done .nm{color:var(--strong)}
.wk.wait .nm{font-weight:400;color:var(--fg2)}
.wk.empty .nm{color:var(--line3)}
.wk .at{font-family:var(--mono);font-size:var(--fs-eyebrow);color:var(--sub2);white-space:nowrap;flex:none}
.wk .st{grid-column:1 / -1;display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;color:var(--sub);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk .st .sd{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.wk .st.mono{font-family:var(--mono);font-weight:400}
.wk.run .st{color:var(--warn)}
.wk.done .st{color:var(--ok)}
.wk.empty .st{color:var(--line3)}

/* ── 좁은 카드 (넓은 폭 안에서의 단계) ── */
@container works (max-width:1080px){.wkg{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container works (max-width:880px){.wkg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container works (max-width:560px){
  .wkban{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .wkban .wb-go{grid-column:1 / -1}
}

/* ══ 좁은 폭 — 시안 §8 「미니 창 · 워커스 가공」 (380×620 목업) 의 값 그대로 ══
   페이지 탭 줄(#mtabs)·실행 줄 숨김은 셸(mobile.css). 여기는 가공 화면 안쪽만. */
@media (width < 600px) {
  /* 화면 바탕 #0b1018 → --inset. 바깥 여백은 시안의 각 줄이 자기 margin·padding 으로 갖는다 */
  #tabWorks { padding: 0; background: var(--inset); }

  /* 수령 배너 — flex · gap 10 · margin 8px 10px 0 · padding 10px 11px · radius 11 ·
     배경 rgba(63,181,107,.1) · 테두리 1px rgba(63,181,107,.45). **스크롤해도 고정(sticky)**. */
  .wkban {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px; flex: none;
    margin: 8px 10px 0; padding: 10px 11px; border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
    background: color-mix(in srgb, var(--ok) 10%, var(--inset));
  }
  /* 큰 수: Mono 22px 700 #7ee6a0 · 라벨 9px #6f8a7c · 오른쪽 1px rgba(63,181,107,.3) 구분선 · padding-right 10 */
  .wkban .wb-n { flex: none; gap: 0; line-height: 1.05; padding-right: 10px; border-right: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
  .wkban .wb-n b { font-size: 22px; font-weight: 700; color: color-mix(in srgb, var(--ok) 72%, var(--fg)); }
  .wkban .wb-n i { font-size: 9px; letter-spacing: 0; color: var(--sub2); }
  /* 가운데 두 줄: 10px · line-height 1.4 · gap 3 — 윗줄 #dce3ea(예상 획득) · 아랫줄 #6f8a7c(호출/날개) */
  .wkban .wb-m { flex: 1; gap: 3px; font-size: 10px; line-height: 1.4; }
  .wkban .l1 { font-size: 10px; color: var(--fg); }
  .wkban .l1 .g { font-family: inherit; color: var(--fg); }
  .wkban .l2 { font-size: 10px; color: var(--sub2); }
  .wkban .l2 b { font-family: inherit; color: var(--sub2); }
  /* 「전체 수령 n」: 높이 32 · padding 0 11 · radius 8 · 배경·테두리 #3fb56b · 글자 #0a2a12 11px 700 */
  .wkban .wb-go { flex: none; height: 32px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--ok); font-size: var(--fs-xs); }

  /* 필터 줄: gap 6 · padding 9px 10px 7px */
  .wkh { flex: none; gap: 6px; padding: 9px 10px 7px; }
  .wkfac { font-size: var(--fs-xs); font-weight: 700; color: var(--fg); }       /* 「시설 5」 11px 700 #dce3ea */
  .wkh .wkat { font-size: 9px; color: var(--dim); }                              /* 「갱신 0초 전」 9px #5c6878 */
  /* 전체/진행/완료: 테두리 1px #23303f · radius 7 · 칸 높이 24 · padding 0 8 · 10px · 활성 골드 채움 #1a1608 700 · 비활성 #8b97a6 */
  .wband .seg { border: 1px solid var(--line2); border-radius: 7px; background: transparent; font-size: var(--fs-eyebrow); line-height: 1; }
  .wband .seg button { height: 24px; min-height: 0; padding: 0 8px; font-size: var(--fs-eyebrow); color: var(--sub); }
  .wband .seg button.on { background: var(--gold); color: var(--ongold); font-weight: 700; }
  /* 「＋ 담기」: 높이 24 · padding 0 8 · radius 7 · 테두리 rgba(226,184,102,.5) · 글자 #e2b866 10px 600 */
  .wkadd { height: 24px; min-height: 0; padding: 0 8px; border-radius: 7px; border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold); font-size: var(--fs-eyebrow); font-weight: 600; }

  /* 시설 목록: gap 7 · padding 0 10px 10px */
  #works { gap: 7px; padding: 0 10px 10px; }
  /* 카드: radius 11 · 배경 #0d1420 · 테두리 1px #1e2a38 (전부 완료면 rgba(63,181,107,.35)) */
  .fcard { border-radius: 11px; background: var(--bg); border-color: var(--line2); }
  .fcard.done { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
  /* 머리 한 줄: gap 7 · 높이 38 · padding 0 10 · 구분선·바탕 없음 (시안) */
  .fch { gap: 7px; height: 38px; padding: 0 10px; border-bottom: 0; background: transparent; }
  .fch .fn { font-size: 13px; font-weight: 700; color: var(--gold2); }          /* 이름 13px 700 #f4e7c8 */
  /* 상태 배지: 높이 18 · padding 0 7 · radius 5 · 9px 700 — 완료 rgba(63,181,107,.16)/#7ee6a0 · 진행 rgba(240,163,90,.16)/#f0a35a */
  .fch .badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; font-size: 9px; font-weight: 700; }
  .fch .badge.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: color-mix(in srgb, var(--ok) 72%, var(--fg)); }
  .fch .badge.warn { background: var(--warnbg); color: var(--warn); }
  /* 「수령 n」·「담기」: 높이 26 · padding 0 10 · radius 7 · 11px — 수령은 #3fb56b 채움/#0a2a12 700, 담기는 1px #23303f 외곽/#c2cad4 */
  .fch .wkgo, .fch .wkadd2 { height: 26px; min-height: 0; padding: 0 10px; border-radius: 7px; font-size: var(--fs-xs); }
  .fch .wkgo.off { color: var(--line3); }
  /* 칸: **3열 그리드** repeat(3,minmax(0,1fr)) · gap 5 · padding 2px 8px 9px */
  .wkg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 2px 8px 9px; }
  /* 칸 하나: 세로(이름 / 상태) · gap 3 · padding 6px 7px · radius 7 · 끝나는 시각은 좁은 폭에 없다(시안) */
  .wk { display: flex; flex-direction: column; gap: 3px; min-height: 0; padding: 6px 7px; border-radius: 7px; }
  .wk .at { display: none; }
  .wk .nm { font-size: var(--fs-xs); font-weight: 600; color: var(--fg); }       /* 이름 11px 600 #e9ecf1 */
  .wk .st { gap: 4px; font-size: 9px; font-weight: 400; }                        /* 상태 9px · 점 5px */
  .wk .st .sd { width: 5px; height: 5px; }
  /* 완료: rgba(63,181,107,.07) 바탕 · rgba(63,181,107,.35) 테두리 · 글자 #7ee6a0 · 점 #4ade80 */
  .wk.done { background: color-mix(in srgb, var(--ok) 7%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
  .wk.done .st { color: color-mix(in srgb, var(--ok) 72%, var(--fg)); }
  .wk.done .st .sd { background: var(--ok); }
  /* 진행: rgba(240,163,90,.06) 바탕 · rgba(240,163,90,.35) 테두리 · 남은 시간 Mono #f0a35a */
  .wk.run { background: color-mix(in srgb, var(--warn) 6%, transparent); border-color: var(--warnline); }
  .wk.run .st { color: var(--warn); }
  /* 대기(NotStarted)는 시안에 없는 상태 — 기본 칸 그대로 */
  .wk.wait { background: transparent; }
  /* 빈 칸: 투명 · 1px dashed #1e2a38 · 글자·점 #3a4756 */
  .wk.empty { border: 1px dashed var(--line2); background: transparent; }
  .wk.empty .nm, .wk.empty .st { color: var(--line3); }
}