/* 층 2 화면 — 업무 흐름 단계 줄·계획·임의 질의·알림 (layer2.js). 화면 틀(shell.css)의 색·모양을 그대로 쓴다. */
.l2-bar,.l2-run{background:var(--panel)}
.l2-bar .ttl .btn,.l2-run .ttl .btn{padding:2px 10px;font-size:10pt}
.l2-bar .step b,.l2-run .step b{font-weight:700}
.l2-run{margin-bottom:12px}
.l2-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.l2-acts input{border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--panel);color:var(--text)}
.l2-band{display:inline-block;background:#fff0d6;color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:2px 10px;font-size:10pt;font-weight:600;margin:4px 0}
.l2-adhoc pre,.l2-adhoc + pre{white-space:pre-wrap}
.l2-filled{background:var(--accent-soft)!important;outline:1px dashed var(--accent)}
button.l2-hot{box-shadow:0 0 0 2px var(--accent)}
.l2-unread{font-weight:600}
.l2-home .item{cursor:pointer}
.l2-home .item .go{margin-left:auto}
.l2-meta{color:var(--side-dim);font-size:9.5pt;margin-left:4px}
.sec .l2-badge{margin-left:6px;background:var(--bad);color:#fff;border-radius:10px;padding:0 6px;cursor:pointer;text-transform:none}
.l2-plan ol li,.bubble ol li{margin:2px 0}
.card textarea[data-l2-asql],.card input[data-l2-aq],.card input[data-l2-q]{border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--panel);color:var(--text);font:inherit}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .l2-band{background:#3a2c12} }
:root[data-theme="dark"] .l2-band{background:#3a2c12}
.step.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.l2-guide{margin-top:6px;padding:6px 10px;border-radius:6px;background:var(--accent-soft);color:var(--text);font-size:10.5pt}
.l2-guide.warn{background:#fff0d6;color:var(--warn)}
.l2-guide.bad{background:#fde3e3;color:var(--bad)}
.l2-guide .btn{margin-left:8px;padding:1px 10px;font-size:10pt}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .l2-guide.warn{background:#3a2c12} :root:not([data-theme="light"]) .l2-guide.bad{background:#3a1a1a} }
:root[data-theme="dark"] .l2-guide.warn{background:#3a2c12}
:root[data-theme="dark"] .l2-guide.bad{background:#3a1a1a}
button.more.l2-hot{box-shadow:0 0 0 2px var(--accent)}
/* 질의 탭 (qtab.js) — 프롬프트 칸의 조회 결과를 자기 탭에 · 대화 판 높이 조절 */
.qtab .qtab-q{margin-bottom:10px}
.qtab .qtab-q h3{margin:0 0 4px}
.qtab [data-qtab-question]{font-size:11.5pt;margin-bottom:4px}
.qtab .qtab-a{color:var(--dim);font-size:10.5pt;margin-top:4px}
.qtab .qtab-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.qtab .qtab-acts input{border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--panel);color:var(--text)}
.qtab pre{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px;font-size:10pt}
.chat-grip{height:8px;margin:-6px -16px 2px;cursor:ns-resize;display:none;position:relative}
.chat-grip::after{content:"";position:absolute;left:50%;top:2px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
.promptbar:has(.chat.open) .chat-grip{display:block}
.bubble a[data-qtab-go]{color:var(--accent);cursor:pointer;text-decoration:underline}
/* 흐름 줄 — 한 줄이 기본, [▼ 전체] 로 펼칠 때만 단계 목록 (7단계 3회차). 업무 화면을 아래로 밀어내지 않게 높이 상한 */
.l2-bar{padding:6px 10px;margin-bottom:12px}
.flowhd .ttl.l2-line{display:flex;flex-wrap:nowrap;gap:6px 10px;align-items:center;margin:0;min-width:0}
.l2-line .l2-lbl{color:var(--dim);flex:none}
.l2-line .l2-name{font-size:11pt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32%;flex:0 1 auto}
.l2-line .l2-pos{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.l2-line .l2-at.cur{color:var(--accent);font-weight:600}
.l2-line .l2-btns{display:flex;gap:4px;flex:none;margin-left:auto}
.l2-line .tag{flex:none}
.l2-bar > .steps{display:none}
.l2-bar.open > .steps{display:flex;max-height:30vh;overflow:auto;margin-top:6px;padding:2px}
.l2-run > .steps{display:flex}
.l2-bar .l2-guide,.l2-run .l2-guide{margin-top:4px;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.l2-guide.full{white-space:normal}
.l2-guide .l2-gb{float:right;margin-left:8px}
.l2-guide .l2-gb .btn{margin-left:4px}
@media (max-width:1100px){
  .l2-line .l2-lbl{display:none}
  .l2-line .l2-name{max-width:20%}
  .l2-line .l2-pos{min-width:120px}
  .l2-line .l2-btns .btn{padding:2px 6px}
  .l2-bar.open > .steps{max-height:26vh}
}
/* 메뉴 화면 위 '업무 흐름' 한 줄 — 이 화면이 어느 흐름의 몇 단계인가 (D-07). 흐름 줄과 같은 자리, 더 옅게 */
.l2-member{background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);padding:4px 10px;margin-bottom:10px;font-size:10.5pt}
.l2-member .l2-mrow{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.l2-member .l2-mothers .l2-mrow{margin-top:4px;padding-top:4px;border-top:1px dotted var(--line)}
.l2-member .l2-mtxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.l2-member .l2-lbl{color:var(--dim)}
.l2-member .l2-btns{display:flex;gap:4px;margin-left:auto;flex:none}
.l2-member .btn{padding:1px 10px;font-size:10pt}
.l2-member .l2-msteps{flex-basis:100%;display:flex;flex-wrap:wrap;max-height:30vh;overflow:auto;margin-top:4px}
.l2-member .l2-msteps[hidden],.l2-member .l2-mothers[hidden]{display:none}
@media (max-width:1100px){ .l2-member .l2-lbl{display:none} }