/* =====================================================================
   다온가 유통 · 테마 B QUEUE — 모든 화면은 '처리할 일' 순서로 시작한다
   줄 하나 = 처리 단위 (왼쪽 색 띠 = 단계, 문장 = 상황, 버튼 = 할 일, 점선 아래 = 근거 숫자)
   표·차트는 대기열 아래, 숫자는 오른쪽 검은 기둥. Claude Design 「다온가 테마 B QUEUE」 기준.
   ===================================================================== */
.t-q {
  --bg: #f4f4f2; --side: #ffffff; --ink: #111111; --mu: #6f6f69; --fa: #9a9a94; --ln: #e2e2de; --ln2: #ececea; --sf: #ffffff; --seg: #e8e8e4; --bd: #d6d6d0;
  --ok: #1f8a55; --warn: #a87400; --risk: #e5322d; --stop: #777777;
  --ok-bg: #1f8a55; --warn-bg: #ffd34d; --risk-bg: #e5322d; --stop-bg: #777777;
  --amb: #e0961c; --chill: #2f7fd8; --frozen: #4b45c6;
  --f: "SUIT", "Pretendard", sans-serif; --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --paper: var(--bg); --card: var(--sf); --line: var(--ln); --line-2: var(--ln2); --mute: var(--mu); --faint: var(--fa); --hi: var(--ac-soft);
  --serif: var(--f); --display: var(--f); --font: var(--f); --radius: 12px; --radius-sm: 8px; --deep: var(--ink); --on-deep: #fff; --on-ac: #fff;
  --chart-grid: var(--ln2); --chart-text: var(--mu);
}
html.t-q, body.t-q { background: var(--bg); }
body.t-q { color: var(--ink); font-family: var(--f); font-size: 13px; word-break: keep-all; margin: 0; }
.t-q a { color: var(--ac); text-decoration: none; } .t-q a:hover { color: var(--ink); }
.t-q .mono, .t-q .num { font-family: var(--mono); } .t-q .muted { color: var(--mu); }
.t-q .up { color: var(--ok); } .t-q .down { color: var(--risk); }
.lv-ok { color: var(--ok); } .lv-warn { color: var(--warn); } .lv-risk { color: var(--risk); } .lv-stop { color: var(--stop); }

/* ------------------------------------------------------------ 틀: 왼쪽 메뉴 · 상단 바 · 오른쪽 검은 기둥 */
.qb-shell { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 100vh; }
.qb-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box; background: var(--sf); border-right: 1px solid var(--ln);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 14px; }
.qb-logo { display: flex; flex-direction: column; gap: 2px; padding: 0 6px 10px; border-bottom: 1px solid var(--ln); color: var(--ink) !important; }
.qb-logo b { font-weight: 900; font-size: 17px; } .qb-logo b span { color: var(--ac); } .qb-logo small { font-family: var(--mono); font-size: 10px; color: var(--mu); }
.qb-g { display: flex; flex-direction: column; gap: 2px; } .qb-g > span { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--fa); padding: 0 6px 3px; }
.t-q .qb-g a { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; border-radius: 8px; color: var(--ink); font-weight: 600; }
.t-q .qb-g a:hover { background: var(--ln2); }
.t-q .qb-g a.on { background: var(--ink); color: var(--sf); font-weight: 800; }
.qb-g a i { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9px; background: var(--ln2); color: var(--ink); }
.qb-g a.on i { background: var(--ac); color: #fff; }
.qb-more { margin-top: auto; padding: 10px 6px 0; border-top: 1px solid var(--ln); font-size: 11px; color: var(--mu); line-height: 1.6; }
.qb-more summary { cursor: pointer; list-style: none; font-weight: 700; } .qb-more summary::-webkit-details-marker { display: none; }
.qb-more .all { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; margin-top: 6px; } .qb-more .all b { grid-column: 1 / -1; font-size: 10px; color: var(--fa); margin-top: 6px; }
.t-q .qb-more a { color: var(--mu); } .t-q .qb-more a:hover, .t-q .qb-more a.on { color: var(--ac); }
.qb-body { min-width: 0; display: flex; flex-direction: column; }
.qb-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 24px; border-bottom: 1px solid var(--ln); background: var(--bg);
  font-size: 12px; white-space: nowrap; position: sticky; top: 0; z-index: 20; }
.qb-top .l, .qb-top .r { display: flex; align-items: center; gap: 12px; } .qb-top .r { gap: 10px; }
.t-q .qb-top .back { color: var(--mu); } .qb-top .ed { font-family: var(--mono); font-size: 11px; color: var(--mu); }
.qb-seg { display: flex; padding: 2px; border-radius: 8px; background: var(--seg); }
.t-q .qb-seg a, .t-q .qb-seg span { padding: 4px 12px; border-radius: 6px; color: var(--ink); font-weight: 800; }
.t-q .qb-seg a.on { background: var(--sf); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.qb-ctr { display: flex; gap: 3px; } .t-q .qb-ctr a { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; color: var(--ink); font-weight: 700; }
.qb-ctr a i { width: 7px; height: 7px; border-radius: 50%; } .t-q .qb-ctr a.on { background: var(--sf); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.qb-skin { display: flex; padding: 2px; border-radius: 8px; background: var(--seg); font-size: 11px; }
.t-q .qb-skin a, .qb-skin span { padding: 3px 9px; border-radius: 6px; color: var(--mu); font-weight: 800; } .t-q .qb-skin a.on { background: var(--ink); color: var(--sf); }
.qb-skin span { color: #b9b9b3; }
.qb-chips { display: flex; gap: 5px; } .qb-chips .db-chip { width: 14px; height: 14px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.qb-chips .db-chip.on { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.qb-q input { width: 140px; padding: 4px 10px; border: 1px solid var(--bd); border-radius: 999px; background: var(--sf); font: inherit; font-size: 12px; }
.qb-q input:focus { outline: none; border-color: var(--ac); }
.t-q .a-user button { background: none; border: 0; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; }
.t-q .a-pop { border-radius: 10px; border: 1px solid var(--ln); background: var(--sf); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.qb-burger { display: none; background: none; border: 1px solid var(--bd); border-radius: 6px; cursor: pointer; }
.qb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; flex: 1; }
.qb-wrap.full { grid-template-columns: minmax(0, 1fr); }
.qb-main, .t-q .a-main { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: none; margin: 0; box-sizing: border-box; }
.qb-pillar { background: #111; color: #f4f4f2; padding: 22px 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.qb-pillar a { color: #f4f4f2; } .qb-pillar a:hover { color: #fff; }

/* ------------------------------------------------------------ 제목줄 */
.qb-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.qb-h .t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qb-kick { font-family: var(--mono); font-size: 12px; color: var(--mu); } .qb-kick a { color: var(--mu); } .qb-kick a:hover { color: var(--ac); }
.qb-hl { font-size: 32px; font-weight: 900; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; margin: 0; }
.qb-hl em { font-style: normal; color: var(--ac); }
.qb-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--seg); align-self: flex-start; max-width: 100%; }
.t-q .qb-tabs a, .qb-tabs span { padding: 5px 11px; border-radius: 8px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.t-q .qb-tabs a.on { background: var(--sf); font-weight: 700; } .qb-tabs small { font-family: var(--mono); font-size: 10px; color: var(--mu); margin-left: 2px; }

/* ------------------------------------------------------------ 대기열 카드 */
.qb-card { display: grid; grid-template-columns: 6px 1fr; background: var(--sf); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 var(--ln); }
.qb-card > i { background: var(--c); } .qb-card.ok { --c: var(--ok); } .qb-card.warn { --c: var(--warn); } .qb-card.risk { --c: var(--risk); } .qb-card.stop { --c: var(--stop); }
.qb-card .in { display: flex; flex-direction: column; gap: 10px; padding: 13px 16px; min-width: 0; }
.qb-card .r1 { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.qb-card .lv { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--c); line-height: 1.4; } .qb-card .lv small { display: block; color: var(--fa); font-weight: 400; font-size: 11px; }
.qb-card .tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qb-card .tt span { font-size: 12px; font-weight: 700; color: var(--mu); } .qb-card .tt b { font-size: 16px; font-weight: 800; line-height: 1.35; }
.qb-card .tt b a { color: var(--ink); } .qb-card .tt b a:hover { color: var(--ac); }
.qb-card .r2 { display: grid; grid-template-columns: 52px 1fr; gap: 12px; }
.qb-card .facts { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 9px; border-top: 1px dashed var(--ln); }
.qb-card .facts div { display: flex; flex-direction: column; gap: 2px; } .qb-card .facts span { font-size: 11px; color: #888; }
.qb-card .facts b { font-family: var(--mono); font-size: 14px; font-weight: 700; } .qb-card .facts b.risk { color: var(--risk); } .qb-card .facts b.warn { color: var(--warn); } .qb-card .facts b.ok { color: var(--ok); }
.qb-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.qb-more-line { display: flex; justify-content: space-between; padding: 4px; color: var(--mu); font-size: 12px; } .qb-more-line b { color: var(--ink); }
.qb-empty { background: var(--sf); border-radius: 12px; padding: 22px; text-align: center; box-shadow: 0 1px 0 var(--ln); }
.qb-empty b { display: block; font-size: 15px; font-weight: 800; } .qb-empty span { font-size: 12px; color: var(--mu); }

/* 버튼 (공용 a-btn 도 같은 모양) */
.qb-btn, .t-q .a-btn, .t-q .btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--bd); background: var(--sf); color: var(--ink);
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.4; }
.t-q a.qb-btn { color: var(--ink); }
.qb-btn:hover, .t-q .a-btn:hover, .t-q .btn:hover { border-color: var(--ink); color: var(--ink); }
.qb-btn.p, .t-q a.qb-btn.p, .t-q .a-btn-ac, .t-q .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--sf); font-weight: 800; }
.qb-btn.p:hover, .t-q .a-btn-ac:hover, .t-q .btn-primary:hover { background: var(--ac); border-color: var(--ac); color: #fff; }
.qb-btn.a, .t-q a.qb-btn.a { background: var(--ac); border-color: var(--ac); color: #fff; font-weight: 800; }
.qb-btn.d, .t-q .a-btn-danger, .t-q .btn-danger { border-color: var(--risk); color: var(--risk); background: var(--sf); }
.qb-btn.sm, .t-q .a-btn-sm, .t-q .btn-sm { padding: 4px 10px; font-size: 12px; }
.qb-ln { font-weight: 800; color: var(--ink) !important; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 800; }
.qb-ln:hover { color: var(--ac) !important; }

/* 패널 · 표 · 배지 */
.qb-panel, .t-q .card { background: var(--sf); border-radius: 12px; box-shadow: 0 1px 0 var(--ln); display: flex; flex-direction: column; min-width: 0; border: 0; overflow: hidden; }
.qb-ph, .t-q .card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ln); background: var(--sf); }
.qb-ph b, .t-q .card-title { font-weight: 800; font-size: 14px; font-family: var(--f) !important; } .qb-ph span { font-size: 11px; color: var(--mu); } .qb-ph span a { color: var(--ac); }
.qb-pb { padding: 12px 16px; } .t-q .card-body { padding: 14px 16px; }
.qb-cols { display: grid; gap: 12px; align-items: start; } .qb-cols > * { min-width: 0; } .qb-c2 { grid-template-columns: 1fr 1fr; } .qb-c3 { grid-template-columns: 1fr 1fr 1fr; }
.qb-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.qb-tbl th { font-size: 11px; font-weight: 500; color: var(--mu); text-align: left; padding: 8px 8px; background: color-mix(in srgb, var(--sf) 94%, var(--ink)); border-bottom: 1px solid var(--ln); white-space: nowrap; }
.qb-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--ln2); vertical-align: middle; }
.qb-tbl th:first-child, .qb-tbl td:first-child { padding-left: 16px; } .qb-tbl th:last-child, .qb-tbl td:last-child { padding-right: 16px; }
.qb-tbl .n { text-align: right; font-family: var(--mono); white-space: nowrap; } .qb-tbl .no { font-family: var(--mono); font-size: 11px; }
.qb-tbl .s { display: block; font-size: 11px; color: var(--mu); } .qb-tbl b a, .qb-tbl a.ink { color: var(--ink); }
.qb-tbl tr.sel td { background: var(--ac-soft); } .qb-tbl tfoot td { font-weight: 800; border-top: 1px solid var(--ln); border-bottom: 0; }
.qb-row { display: grid; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--ln2); align-items: center; color: var(--ink); }
.t-q a.qb-row { color: var(--ink); } .t-q a.qb-row:hover { background: color-mix(in srgb, var(--sf) 94%, var(--ink)); }
.qb-b { display: inline-block; justify-self: start; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.45; }
.qb-b.ok { background: var(--ok-bg); color: #fff; } .qb-b.warn { background: var(--warn-bg); color: var(--ink); } .qb-b.risk { background: var(--risk-bg); color: #fff; } .qb-b.stop { background: var(--stop-bg); color: #fff; }
.qb-b.ink { background: var(--ink); color: var(--sf); } .qb-b.line { border: 1px solid var(--bd); padding: 1px 8px; color: var(--ink); background: var(--sf); } .qb-b.ac { background: var(--ac); color: #fff; }
.qb-t { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .qb-t i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.qb-bar { height: 8px; border-radius: 4px; background: var(--ln2); position: relative; overflow: hidden; } .qb-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--ink); }
.qb-bar.ac i { background: var(--ac); } .qb-bar.ok i { background: var(--ok); } .qb-bar.warn i { background: var(--warn); } .qb-bar.risk i { background: var(--risk); }
.qb-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qb-strip > * { background: var(--sf); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 0 var(--ln); display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.qb-strip span { font-size: 12px; color: var(--mu); } .qb-strip b { font-family: var(--mono); font-size: 22px; font-weight: 700; } .qb-strip small { font-size: 11px; }

/* 검은 기둥 */
.qb-pt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--fa); }
.qb-pq { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid #2a2a28; color: #f4f4f2; }
.qb-pq > span { color: #b9b9b3; font-size: 12px; } .qb-pq div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qb-pq b { font-family: var(--mono); font-size: 24px; font-weight: 700; } .qb-pq small { font-family: var(--mono); font-size: 11px; color: #c9c9c4; text-align: right; }
.qb-pq small.risk { color: #ff7b72; } .qb-pq small.ok { color: #7be0a8; } .qb-pq small.warn { color: #ffd34d; }
.qb-ps { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #2a2a28; } .qb-ps > b { font-weight: 800; }
.qb-ps .rw { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; } .qb-ps .rw span:last-child { font-family: var(--mono); }
.qb-ps .rw small { color: #9a9a94; }
.qb-pbar { height: 4px; border-radius: 2px; background: #2a2a28; } .qb-pbar i { display: block; height: 4px; border-radius: 2px; }
.qb-big { font-family: var(--mono); font-size: 46px; font-weight: 700; line-height: 1; } .qb-big small { font-size: 18px; }
.qb-spark { display: flex; align-items: flex-end; gap: 3px; height: 60px; } .qb-spark i { flex: 1; border-radius: 3px 3px 0 0; background: #55554f; min-height: 2px; } .qb-spark i.live { background: var(--ac); }
.qb-pillar .qb-btn.a { width: 100%; justify-content: center; }

/* 도크 타임라인 · 랙 · 노선 · 동선 · 손익 · 칸반 · 전표 */
.qb-tl { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }
.qb-tl .hrs { display: grid; grid-template-columns: 40px 1fr; font-family: var(--mono); font-size: 10px; color: var(--mu); } .qb-tl .hrs div { display: grid; grid-template-columns: repeat(14, 1fr); }
.qb-tl .ln { display: grid; grid-template-columns: 40px 1fr; align-items: center; } .qb-tl .ln b { font-family: var(--mono); }
.qb-tl .tr { position: relative; height: 24px; border-radius: 6px; background: var(--ln2); }
.qb-tl .ev { position: absolute; top: 3px; height: 18px; border-radius: 4px; color: #fff !important; font-size: 10.5px; padding: 0 5px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; box-sizing: border-box; }
.qb-tl .ev.done { opacity: .5; } .qb-tl .ev.late { background: var(--risk) !important; }
.qb-tl .now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ac); }
.qb-zone { display: grid; grid-template-columns: 90px 1fr 50px; gap: 10px; align-items: center; padding: 4px 0; }
.qb-zone .zn b { font-size: 18px; font-weight: 900; } .qb-zone .zn small { font-size: 11px; color: var(--mu); margin-left: 4px; } .qb-zone .avg { font-family: var(--mono); font-weight: 700; text-align: right; }
.qb-cells { display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); gap: 4px; }
.t-q a.qb-cell { position: relative; height: 44px; padding: 3px 5px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; border-radius: 6px;
  font-family: var(--mono); font-size: 10px; color: #5d574b; background: #ece3cf; }
.qb-cell b { align-self: flex-end; font-size: 13px; }
.t-q a.qb-cell.l1 { background: #d9b77a; color: #2b1d05; } .t-q a.qb-cell.l2 { background: #b07a1e; color: #fff; } .t-q a.qb-cell.l3 { background: #5e3d06; color: #fff; }
.t-q a.qb-cell.tp-chill { background: #dfe6ee; color: #3a4a5c; } .t-q a.qb-cell.tp-chill.l1 { background: #9cc1e8; color: #0d2b4a; } .t-q a.qb-cell.tp-chill.l2 { background: #2f7fd8; color: #fff; } .t-q a.qb-cell.tp-chill.l3 { background: #13406f; color: #fff; }
.t-q a.qb-cell.tp-frozen { background: #e2e1f2; color: #3a3a5c; } .t-q a.qb-cell.tp-frozen.l1 { background: #a9a9e4; color: #1b1b4a; } .t-q a.qb-cell.tp-frozen.l2 { background: #4b45c6; color: #fff; } .t-q a.qb-cell.tp-frozen.l3 { background: #23235e; color: #fff; }
.qb-cell.sel { box-shadow: inset 0 0 0 2.5px var(--ac); } .qb-cell.fifo { outline: 2px dashed var(--risk); outline-offset: -2px; }
.qb-rt { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ln2); }
.qb-rt .car b { display: block; font-weight: 800; } .qb-rt .car small { font-size: 12px; color: var(--mu); }
.qb-line { position: relative; height: 54px; margin: 0 40px 0 10px; }
.qb-line .tk { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--ln); }
.qb-line .fl { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--lc); }
.qb-line .st { position: absolute; top: 2px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; width: 90px; }
.qb-line .st i { width: 16px; height: 16px; border-radius: 50%; background: var(--lc); border: 3px solid var(--lc); box-sizing: border-box; }
.qb-line .st.wait i, .qb-line .st.arrived i { background: var(--sf); } .qb-line .st span { font-size: 10.5px; color: var(--body2, #444); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.qb-line .st.arrived span { font-weight: 800; color: var(--ink); } .qb-line .st.missed i { background: var(--risk); border-color: var(--risk); }
.qb-visit { position: relative; padding: 18px 80px 26px; }
.qb-visit .tk { position: absolute; left: 80px; right: 80px; top: 50px; height: 5px; border-radius: 3px; background: var(--ln); }
.qb-visit .fl { position: absolute; left: 80px; top: 50px; height: 5px; border-radius: 3px; background: var(--ac); }
.qb-visit .stops { position: relative; display: flex; justify-content: space-between; }
.qb-visit .sv { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 0; } .qb-visit .sv > * { white-space: nowrap; }
.qb-visit .sv .tm { font-family: var(--mono); font-weight: 700; color: var(--ac); } .qb-visit .sv i { width: 24px; height: 24px; border-radius: 50%; background: var(--ac); border: 3px solid var(--ac); box-sizing: border-box; }
.qb-visit .sv.checkin i { width: 34px; height: 34px; margin-top: -5px; background: var(--sf); } .qb-visit .sv.planned i { background: var(--sf); border-color: var(--bd); } .qb-visit .sv.planned .tm { color: var(--mu); }
.qb-visit .sv b { font-size: 14px; font-weight: 800; } .qb-visit .sv small { font-size: 11px; color: var(--mu); } .qb-visit .sv em { font-style: normal; font-size: 11px; color: var(--warn); }
.qb-steps { display: grid; grid-template-columns: 150px repeat(5, 1fr) 80px; gap: 6px 10px; align-items: end; padding: 12px 16px; border-bottom: 1px solid var(--ln2); }
.qb-steps .nm b { display: block; font-weight: 800; } .qb-steps .nm small { font-size: 12px; color: var(--mu); }
.qb-steps .c { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--mu); }
.qb-steps .c .b { position: relative; height: 22px; border-radius: 6px; background: var(--ln2); overflow: hidden; } .qb-steps .c .b i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.qb-steps .c em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.qb-steps .rt { font-family: var(--mono); font-size: 22px; font-weight: 700; text-align: right; align-self: center; }
.qb-kan { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.qb-kan > div { background: var(--seg); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 240px; }
.qb-kan .h { display: flex; justify-content: space-between; font-weight: 800; padding: 2px 2px 4px; } .qb-kan .h span { font-family: var(--mono); font-size: 11px; color: var(--mu); }
.qb-kc { background: var(--sf); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 0 var(--ln); }
.t-q .qb-kc .t { font-weight: 800; color: var(--ink); line-height: 1.35; } .qb-kc small { font-family: var(--mono); font-size: 10.5px; color: var(--mu); } .qb-kc b { font-family: var(--mono); font-size: 13px; }
.qb-slips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qb-slip { background: var(--sf); border-radius: 12px; padding: 14px; box-shadow: 0 1px 0 var(--ln); display: flex; flex-direction: column; }
.qb-slip .h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; } .qb-slip .h b { font-weight: 800; font-size: 14px; } .qb-slip .h small { font-family: var(--mono); font-size: 10px; color: var(--mu); }
.qb-slip .skv { display: grid; grid-template-columns: 70px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--ln2); font-size: 13px; } .qb-slip .skv span:first-child { color: var(--mu); } .qb-slip .skv span:last-child { text-align: right; }
.qb-stamp { align-self: flex-start; margin-top: 12px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--bd); color: var(--fa); font-size: 11px; font-weight: 800; }
.qb-stamp.on { border-color: var(--ac); color: var(--ac); }
.qb-aline { list-style: none; margin: 0; padding: 0; }
.qb-aline li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ln2); }
.qb-aline li > i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; box-sizing: border-box; }
.qb-aline li.done > i, .qb-aline li.approved > i { background: var(--ink); color: var(--sf); } .qb-aline li.cur > i { background: var(--ac); border-color: var(--ac); color: #fff; } .qb-aline li.rejected > i { background: var(--risk); border-color: var(--risk); color: #fff; }
.qb-aline small { color: var(--mu); font-size: 12px; } .qb-aline .s { font-family: var(--mono); font-size: 11px; color: var(--ok); margin-top: 2px; } .qb-aline li.cur .s { color: var(--ac); } .qb-aline li.waiting .s { color: var(--mu); }
.qb-aline .c { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg); font-size: 13px; }
.qb-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .qb-f > label, .qb-f > span { font-size: 12px; font-weight: 700; color: var(--mu); }
.qb-f .req { color: var(--risk); font-style: normal; } .qb-f .h { font-size: 11px; color: var(--mu); font-weight: 400; } .qb-f .e { font-size: 11px; color: var(--risk); font-weight: 400; }
.qb-in, .t-q .qb-f input, .t-q .qb-f select, .t-q .qb-f textarea, .t-q .a-in, .t-q .a-sel, .t-q .field input, .t-q .field select, .t-q .field textarea {
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--bd); background: var(--sf); color: var(--ink); font: inherit; font-size: 13px; box-sizing: border-box; width: 100%; }
.t-q .a-in.q { width: 240px; } .t-q .a-sel { width: auto; }
.t-q .qb-f input:focus, .t-q .qb-f select:focus, .t-q .qb-f textarea:focus, .t-q .a-in:focus, .t-q .a-sel:focus, .t-q .field input:focus, .t-q .field select:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }
.qb-f.err input, .qb-f.err select { border: 1.5px solid var(--risk); }
.qb-chip, .t-q .a-chip { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--sf); box-shadow: 0 1px 0 var(--ln); font-size: 12px; color: var(--ink); border: 0; }

/* ------------------------------------------------------------ 공용 틀(T-A 마크업) */
.t-q .a-ph, .t-q .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.t-q .a-h1, .t-q .page-title { font-family: var(--f); font-size: 28px !important; font-weight: 900; letter-spacing: -.03em; line-height: 1.2; margin: 4px 0 0; }
.t-q .a-kicker, .t-q .a-crumb, .t-q .crumbs { font-family: var(--mono); font-size: 12px; color: var(--mu); } .t-q .a-crumb a, .t-q .crumbs a { color: var(--mu); } .t-q .a-crumb span, .t-q .crumbs span { margin: 0 4px; }
.t-q .a-sub, .t-q .page-sub { font-size: 13px; color: var(--mu); margin-top: 6px; }
.t-q .a-acts, .t-q .page-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.t-q .a-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 10px; border: 0; margin: 0; }
.t-q .a-kpi, .t-q .a-kpi:first-child { background: var(--sf); border: 0; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 0 var(--ln); display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.t-q .a-kpi .l { font-size: 12px; color: var(--mu); } .t-q .a-kpi .v { font-family: var(--mono) !important; font-size: 22px !important; font-weight: 700; } .t-q .a-kpi .n { font-size: 11px; color: var(--mu); }
.t-q .a-grid { gap: 12px; margin: 0; } .t-q .a-grid > section { background: var(--sf); border-radius: 12px; box-shadow: 0 1px 0 var(--ln); padding: 0 16px 12px; border: 0; }
.t-q .a-sec-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--ln); }
.t-q .a-sec-h h2 { font-family: var(--f) !important; font-weight: 800; font-size: 14px !important; margin: 0; }
.t-q .a-tbl-wrap, .t-q .tbl-wrap { background: var(--sf); border-radius: 12px; box-shadow: 0 1px 0 var(--ln); overflow-x: auto; border: 0; }
.t-q .a-tbl, .t-q .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.t-q .a-tbl th, .t-q .tbl th { font-size: 11px; font-weight: 500; color: var(--mu); text-align: left; padding: 9px 8px; background: color-mix(in srgb, var(--sf) 94%, var(--ink)); border-bottom: 1px solid var(--ln); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.t-q .a-tbl th:first-child, .t-q .a-tbl td:first-child, .t-q .tbl th:first-child, .t-q .tbl td:first-child { padding-left: 16px; }
.t-q .a-tbl td, .t-q .tbl td { padding: 9px 8px; border-bottom: 1px solid var(--ln2); height: auto; }
.t-q .a-tbl .num, .t-q .tbl .num { font-family: var(--mono); text-align: right; } .t-q .a-tbl .sub { display: block; font-size: 11px; color: var(--mu); }
.t-q .a-tbl a.a-no, .t-q .tbl a.link { font-family: var(--mono); font-size: 12px; color: var(--ac); } .t-q .a-tr:hover td { background: color-mix(in srgb, var(--sf) 94%, var(--ink)); }
.t-q .a-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--seg); border: 0; margin: 0; align-self: flex-start; }
.t-q .a-tabs a { padding: 5px 11px; border-radius: 8px; color: var(--ink); border: 0; } .t-q .a-tabs a.on { background: var(--sf); font-weight: 700; color: var(--ink); }
.t-q .a-tabs a span { font-family: var(--mono); font-size: 10px; color: var(--mu); margin-left: 3px; }
.t-q .a-filter { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0; margin: 0; } .t-q .a-filter-l { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.t-q .a-period { display: flex; padding: 2px; border-radius: 8px; background: var(--seg); } .t-q .a-period a { padding: 5px 10px; border-radius: 6px; color: var(--ink); font-size: 12px; } .t-q .a-period a.on { background: var(--sf); font-weight: 700; }
.t-q .a-reset { font-size: 12px; color: var(--mu); }
.t-q .a-bulk { display: flex; justify-content: space-between; align-items: center; background: var(--sf); color: var(--mu); padding: 10px 16px; border-radius: 12px; margin: 0; box-shadow: 0 1px 0 var(--ln); }
.t-q .a-bulk.on { background: var(--ink); color: var(--sf); } .t-q .a-bulk-acts { display: flex; gap: 14px; }
.t-q .a-bulk-acts button { background: none; border: 0; color: inherit; font: inherit; font-weight: 800; cursor: pointer; padding: 0; } .t-q .a-bulk.on .a-bulk-acts button.danger { color: #ff7b72; }
.t-q .a-tfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--mu); }
.t-q .a-pages { display: flex; gap: 4px; align-items: center; font-family: var(--mono); } .t-q .a-pages a, .t-q .a-pages span { padding: 2px 6px; color: var(--ink); border: 0; } .t-q .a-pages .cur { color: var(--ac); font-weight: 700; background: none; }
.t-q .a-pages select { border: 1px solid var(--bd); border-radius: 6px; background: var(--sf); font: inherit; font-size: 11px; }
.t-q .a-lv { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.t-q .a-lv.ok { background: var(--ok-bg); color: #fff; } .t-q .a-lv.warn { background: var(--warn-bg); color: var(--ink); } .t-q .a-lv.risk { background: var(--risk-bg); color: #fff; } .t-q .a-lv.stop { background: var(--stop-bg); color: #fff; }
.t-q .badge { border-radius: 999px; font-size: 11px; font-weight: 800; padding: 2px 9px; border: 1px solid var(--bd); background: var(--sf); color: var(--ink); }
.t-q .badge.tone-green { background: var(--ink); color: var(--sf); border-color: var(--ink); } .t-q .badge.tone-red { border-color: var(--risk); color: var(--risk); }
.t-q .a-empty { text-align: center; padding: 30px 0; } .t-q .a-empty b { font-weight: 800; font-size: 15px; display: block; } .t-q .a-empty .ic { display: none; }
.t-q .a-list { list-style: none; margin: 0; padding: 0; } .t-q .a-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ln2); }
.t-q .a-steps { display: grid; gap: 6px; margin: 0; } .t-q .a-steps div { padding: 8px 10px; border-radius: 8px; background: var(--sf); box-shadow: 0 1px 0 var(--ln); font-weight: 700; font-size: 12px; }
.t-q .a-steps div small { display: block; font-family: var(--mono); font-size: 10px; color: var(--mu); font-weight: 400; } .t-q .a-steps div.done { background: var(--ink); color: var(--sf); } .t-q .a-steps div.done small { color: #b9b9b3; }
.t-q .a-steps div.cur { background: var(--ac); color: #fff; } .t-q .a-steps div.cur small { color: #e6e1ff; }
.t-q .act-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--sf); border-radius: 12px; box-shadow: 0 1px 0 var(--ln); margin: 0; border: 0; }
.t-q .act-bar form { margin: 0; } .t-q .act-cap { font-size: 11px; font-weight: 800; color: var(--mu); margin-right: 6px; }
.t-q .kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; padding: 4px 16px 10px; }
.t-q .kv-item { padding: 9px 0; border-bottom: 1px solid var(--ln2); } .t-q .kv-item.full { grid-column: 1 / -1; } .t-q .kv-label { font-size: 11px; color: var(--mu); } .t-q .kv-value { margin-top: 3px; font-size: 14px; font-weight: 700; }
.t-q .stack { display: flex; flex-direction: column; gap: 12px; }
.t-q .stage-path { display: flex; gap: 6px; } .t-q .stage-step { flex: 1; padding: 6px 10px; border-radius: 8px; background: var(--sf); font-size: 12px; box-shadow: 0 1px 0 var(--ln); }
.t-q .stage-step.done { background: var(--ink); color: var(--sf); } .t-q .stage-step.current { background: var(--ac); color: #fff; font-weight: 800; }
.t-q .empty { color: var(--mu); padding: 14px 0; text-align: center; }
.t-q .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; } .t-q .field { display: flex; flex-direction: column; gap: 5px; } .t-q .field.full { grid-column: 1 / -1; }
.t-q .field-label { font-size: 12px; font-weight: 700; color: var(--mu); } .t-q .field .req { color: var(--risk); margin-left: 2px; } .t-q .field-err { font-size: 11px; color: var(--risk); }
.t-q .help { font-size: 11px; color: var(--mu); } .t-q .form-foot, .t-q .form-actions { display: flex; justify-content: flex-end; gap: 6px; }
.t-q .alert-error { border: 1px solid var(--risk); color: var(--risk); padding: 8px 12px; border-radius: 8px; background: var(--sf); }
/* 팝업 · 토스트 (T4 · T5) */
.t-q .a-modal { border: 0; border-radius: 14px; background: var(--sf); padding: 0; width: 420px; max-width: calc(100vw - 32px); box-shadow: 0 0 0 100vmax rgba(60, 60, 56, .55); color: var(--ink); }
.t-q .a-modal::backdrop { background: transparent; }
.t-q .a-modal-h { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 4px; border: 0; } .t-q .a-modal-h b { font-weight: 800; font-size: 18px; }
.t-q .a-modal.danger .a-modal-h b { color: var(--risk); } .t-q .a-modal-h button { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--mu); }
.t-q .a-modal-b { padding: 4px 18px 10px; display: flex; flex-direction: column; gap: 8px; } .t-q #a-modal-desc { font-size: 13px; line-height: 1.6; color: var(--mu); }
.t-q #a-modal-desc .box { background: var(--bg); border: 0; border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; color: var(--ink); }
.t-q .a-chiprow { display: flex; gap: 6px; flex-wrap: wrap; } .t-q .a-chiprow button { border: 1px solid var(--bd); background: var(--sf); font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; border-radius: 999px; }
.t-q .a-chiprow button:hover { border-color: var(--ac); color: var(--ac); } .t-q .a-lbl { font-size: 12px; font-weight: 700; color: var(--mu); }
.t-q .a-modal textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--ac); border-radius: 8px; background: var(--sf); padding: 9px 12px; font: inherit; resize: vertical; }
.t-q .a-modal.danger textarea { border-color: var(--risk); } .t-q .a-err { font-size: 11px; color: var(--risk); }
.t-q .a-modal-f { display: flex; justify-content: flex-start; gap: 6px; padding: 8px 18px 18px; border: 0; background: transparent; }
.t-q .a-toasts { position: fixed; right: 20px; top: 56px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: 340px; }
.t-q .a-toast { position: static; display: flex; justify-content: space-between; gap: 10px; background: #111; color: #fff; border: 0; border-left: 4px solid var(--ok); border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.t-q .a-toast.warning { border-left-color: var(--warn-bg); } .t-q .a-toast.error { border-left-color: var(--risk); }
.t-q .a-toast b { display: block; font-weight: 800; margin-bottom: 2px; } .t-q .a-toast span { font-size: 12px; color: #c9c9c4; } .t-q .a-toast button { background: none; border: 0; color: #fff; cursor: pointer; font-size: 16px; }
.t-q .a-chk { accent-color: var(--ink); width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .qb-shell { grid-template-columns: 1fr; } .qb-nav { position: fixed; left: -200px; z-index: 50; width: 180px; transition: left .2s; } .qb-nav.open { left: 0; box-shadow: 0 0 30px rgba(0, 0, 0, .2); }
  .qb-burger { display: block; } .qb-ctr, .qb-skin, .qb-q, .qb-top .ed { display: none; }
  .qb-wrap { grid-template-columns: 1fr; } .qb-cols, .qb-c2, .qb-c3 { grid-template-columns: 1fr !important; } .qb-strip { grid-template-columns: 1fr 1fr; }
  .qb-card .r1 { grid-template-columns: 44px 1fr; } .qb-card .r1 .qb-btns { grid-column: 1 / -1; } .qb-kan, .qb-slips { grid-template-columns: 1fr; } .qb-hl { font-size: 26px; }
}
.qb-content { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; box-sizing: border-box; }
.qb-content > .qb-wrap { margin: -22px -24px -28px; }
.qb-strip.sm { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .qb-strip.sm b { font-family: inherit; font-size: 14px; font-weight: 800; }