/* Synavers 나의 AI 사무실 — 공동 운영실(operations-field)과 같은 색·글꼴 체계 */
:root{color-scheme:light;--ink:#182d2b;--muted:#5c706c;--accent:#147769;--accent-dark:#0d5a4f;--soft:#eaf5f0;--paper:#fff;--line:#dce7e0;--canvas:#f3f6f2;--gold:#8a6220;--gold-soft:#fff6dd;--danger:#9b3b37;--danger-soft:#fbecea;--ok:#1f7a4d;--shadow:0 8px 26px #193c2d0f;--r:14px;font-family:"Pretendard","Noto Sans KR",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;background:var(--canvas);color:var(--ink);font-size:16px;line-height:1.55}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:var(--paper);border:1px solid #cbdad2;padding:9px 15px;border-radius:10px;min-height:44px;font-weight:600;touch-action:manipulation}
button:hover{border-color:var(--accent);background:var(--soft)}
button:disabled{opacity:.5;cursor:default}
button.primary{color:#fff;background:var(--accent);border-color:var(--accent)}button.primary:hover{background:var(--accent-dark)}
button.ghost{background:transparent}button.small{min-height:36px;padding:6px 12px;font-size:14px}button.danger{color:var(--danger)}
input,select,textarea{width:100%;min-height:44px;padding:9px 12px;border:1px solid #cbdad2;border-radius:10px;background:var(--paper)}
textarea{min-height:88px;resize:vertical}
:focus-visible{outline:3px solid #78b7aa;outline-offset:2px}
[hidden],.hidden{display:none!important}
a{color:var(--accent)}
h1,h2,h3{margin:0;line-height:1.3}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 4px}
.muted{color:var(--muted)}.faint{color:var(--muted);font-size:14px}
.msg{min-height:20px;font-size:14px;margin-top:8px;color:var(--muted)}.msg.bad{color:var(--danger)}.msg.ok{color:var(--ok)}

/* 상단 */
.top{position:sticky;top:0;z-index:20;height:68px;display:flex;align-items:center;gap:16px;padding:0 24px;background:var(--paper);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:20px;font-weight:750;white-space:nowrap}
.brand small{font-size:14px;color:var(--muted);font-weight:500}
.mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;font-size:17px}
.gauge{margin-left:auto;display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:center;min-width:220px}
.g-plan{font-size:12px;color:var(--muted)}.g-used{font-size:13px;font-weight:700;text-align:right}
.g-bar{grid-column:1/-1;height:6px;border-radius:4px;background:#e2ebe6;overflow:hidden}.g-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}.g-bar i.warn{background:var(--gold)}.g-bar i.bad{background:var(--danger)}
.top-right{display:flex;align-items:center;gap:8px;margin-left:auto}.top button{white-space:nowrap}.gauge+.top-right{margin-left:0}
.who{font-size:13px;color:var(--muted);text-align:right;line-height:1.3;white-space:nowrap}.who b{display:block;color:var(--ink);font-size:14px}

/* 로그인 */
.login{max-width:520px;margin:48px auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px;box-shadow:var(--shadow)}
.login h1{font-size:24px;margin:4px 0 10px}.intro{margin:0 0 18px;color:var(--muted)}
.stack{display:grid;gap:12px}.stack label{display:grid;gap:6px;font-size:14px;font-weight:600}
.help{font-size:14px;color:var(--muted);margin:16px 0 0}

/* 본체 */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:20px;max-width:1360px;margin:20px auto;padding:0 20px}
.sidebar{position:sticky;top:88px;align-self:start;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 14px;display:grid;gap:14px}
.account{display:grid;gap:2px;padding:0 6px 10px;border-bottom:1px solid var(--line)}.account strong{font-size:19px}.account span{font-size:13px;color:var(--muted)}
#nav{display:grid;gap:4px}#nav button{position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:transparent;padding:11px 12px;border-radius:10px;font-weight:600;text-align:left}
#nav button span{font-size:12px;color:var(--muted);font-weight:500}#nav button[aria-current=page]{background:var(--soft);color:var(--accent-dark)}
#nav .count{position:absolute;right:44px;top:50%;transform:translateY(-50%);min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--danger);color:#fff;font-size:12px;display:grid;place-items:center}
.side-note{font-size:13px;color:var(--muted);margin:0;padding:0 6px;line-height:1.5}
.content{min-width:0;display:grid;gap:16px;align-content:start}
.view-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:4px 2px 0}.view-head h1{font-size:26px}.view-head p.muted{margin:4px 0 0;font-size:15px}
.scope-tag{flex:none;font-size:12px;color:var(--accent);background:var(--soft);border:1px solid #cfe6dc;border-radius:999px;padding:5px 11px;white-space:nowrap}
.notice{padding:12px 16px;border-radius:12px;background:var(--gold-soft);border:1px solid #efdca9;color:var(--gold);font-size:15px}.notice.bad{background:var(--danger-soft);border-color:#eac5c1;color:var(--danger)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow)}
.card h2{font-size:19px;margin-bottom:6px}.card>p{margin:0 0 12px;color:var(--muted);font-size:15px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:15px}.kv b{color:var(--muted);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-weight:600}
details>summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:36px;display:flex;align-items:center}
.pw{font-family:ui-monospace,Consolas,monospace;background:var(--gold-soft);padding:2px 8px;border-radius:6px;font-size:16px}

/* 사무실 */
.rooms{display:flex;gap:8px;flex-wrap:wrap}
.rooms button{flex:1 1 150px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:12px}.rooms button[aria-pressed=true]{border-color:var(--accent);background:var(--soft);color:var(--accent-dark)}
.rooms button span:first-child{white-space:nowrap}.rooms button span:last-child{font-size:13px;color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:16px;align-items:start}
.stage{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:1;background-image:url('/office-rooms.png');background-size:300% 100%;background-repeat:no-repeat;border-radius:18px}
.stage.office{background-position:0 0}.stage.factory{background-position:50% 0}.stage.fitting{background-position:100% 0}
.stage-empty{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);background:#fffc;border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:14px;color:var(--muted);white-space:nowrap}
.agent{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;padding:0;min-height:0;width:150px;max-width:46%}
.agent:hover{background:transparent}.agent:hover .avatar{transform:translateY(-3px)}
.avatar{width:clamp(56px,13vw,86px);aspect-ratio:2/3;background-image:url('/office-characters.png');background-size:300% 200%;background-repeat:no-repeat;filter:drop-shadow(0 6px 6px #0003);transition:transform .2s}
.avatar.a1{background-position:0 0}.avatar.a2{background-position:50% 0}.avatar.a3{background-position:100% 0}.avatar.a4{background-position:0 100%}.avatar.a5{background-position:50% 100%}.avatar.a6{background-position:100% 100%}
.agent.offline .avatar{filter:grayscale(1) opacity(.55)}
.bubble{position:relative;max-width:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-size:13px;line-height:1.35;box-shadow:var(--shadow);text-align:center;overflow-wrap:anywhere}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.bubble.alert{background:var(--danger-soft);border-color:#eac5c1;color:var(--danger);font-weight:700}.bubble.alert::after{background:var(--danger-soft);border-color:#eac5c1}
.bubble.wait{background:var(--gold-soft);border-color:#efdca9;color:var(--gold)}.bubble.wait::after{background:var(--gold-soft);border-color:#efdca9}
.agent .name{font-size:13px;font-weight:700;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:2px 8px;white-space:nowrap}
.agent .state{font-size:11px;color:var(--muted);background:#fffd;border-radius:8px;padding:0 6px}
.stage-caption{font-size:13px;color:var(--muted);text-align:center;margin:8px 0 0}
.todo{display:grid;gap:8px}
.todo button{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:12px;font-weight:500}
.todo .dot{width:10px;height:10px;border-radius:50%;background:var(--danger)}.todo .dot.info{background:var(--gold)}
.todo small{color:var(--muted);font-size:12px}
.timeline{list-style:none;margin:0;padding:0;font-size:14px}.timeline li{padding:7px 0;border-bottom:1px dashed var(--line)}.timeline li:last-child{border:0}.timeline time{color:var(--muted);margin-right:8px;font-size:13px}

/* 주문 목록 */
.tabs{display:flex;gap:8px;flex-wrap:wrap}.tab{border-radius:999px;min-height:40px;padding:6px 16px}.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}.tab b{margin-left:6px;font-weight:700}
.tab.decide{border-color:var(--gold);color:var(--gold)}.tab.decide.on{background:var(--gold);color:#fff}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--danger);color:#fff;font-size:12px;font-weight:700;vertical-align:middle}
.orders{display:grid;gap:10px}
.order{display:grid;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;font-weight:500;line-height:1.4}.order.sel{border-color:var(--accent);box-shadow:0 0 0 2px #14776922}
.order .no{font-weight:700;font-size:15px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}.order .no small{font-weight:500;color:var(--muted);font-size:12px}
.order .item{font-size:15px}.order .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted)}
.state{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--accent-dark)}
.state.s결제완료{background:#e7f0ff;color:#1f4fa3}.state.s제작중{background:var(--gold-soft);color:var(--gold)}.state.s제작완료{background:#e8f6ee;color:var(--ok)}.state.s배송중{background:#efe9fb;color:#5c3fa0}.state.s배송완료,.state.s취소,.state.s환불{background:#eceff0;color:#5a666a}
.ai-stage{color:var(--accent-dark);font-weight:600}
.empty{padding:24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px;background:#fff8}

/* 판단 카드 */
.decision{background:var(--paper);border:1px solid #efdca9;border-left:4px solid var(--gold);border-radius:14px;padding:14px 16px;margin:10px 0;display:grid;gap:8px}
.d-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.d-head b{font-size:15px}
.kind{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--soft);color:var(--accent-dark)}.kind.k요청{background:#e7f0ff;color:#1f4fa3}.kind.k질문{background:var(--gold-soft);color:var(--gold)}.kind.k답변{background:#e8f6ee;color:var(--ok)}
.d-body{font-size:15px;display:grid;gap:4px}.d-body ul{margin:4px 0;padding-left:20px}.d-body pre{white-space:pre-wrap;font:inherit;font-size:14px;background:var(--canvas);padding:10px;border-radius:8px;margin:6px 0 0}
.d-note{min-height:56px}.acts{display:flex;gap:8px;flex-wrap:wrap}

/* 패널(슬라이드) */
.panel-back{position:fixed;inset:0;background:#182d2b55;z-index:30}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(600px,100%);background:var(--paper);box-shadow:-12px 0 40px #193c2d22;z-index:31;transform:translateX(102%);transition:transform .22s ease;display:grid;grid-template-rows:auto 1fr}
.panel.open{transform:none}
.panel-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}.panel-head h2{flex:1;font-size:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-body{overflow:auto;padding:18px 20px 32px;display:grid;gap:12px;align-content:start}
.panel-body h3{font-size:16px;margin-top:8px}
.ai-line{background:var(--soft);border-radius:10px;padding:10px 12px;font-size:15px}
.thread{display:grid;gap:8px;max-height:46vh;overflow:auto;padding:4px}
.m{max-width:92%;background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:15px;justify-self:start}.m.mine{justify-self:end;background:var(--soft);border-color:#cfe6dc}.m.sys{justify-self:center;max-width:100%;background:#fff;border-style:dashed;font-size:13px;color:var(--muted)}
.m .h{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin-bottom:3px}.m .h b{color:var(--ink);font-size:13px}.m .b{white-space:pre-wrap;overflow-wrap:anywhere}
.compose{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}.compose label{font-weight:700;font-size:15px}
.ai-reply{background:var(--soft);border-radius:10px;padding:10px 12px;font-size:15px;white-space:pre-wrap}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row>input,.row>select{flex:1 1 220px;width:auto}
.spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;font-size:14px}.spec div{background:var(--canvas);border-radius:8px;padding:6px 10px}.spec b{display:block;color:var(--muted);font-size:12px;font-weight:600}
.agent-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}.agent-card .avatar{width:64px}
.usage-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:14px}
.steps{counter-reset:s;display:grid;gap:10px;padding:0;margin:0;list-style:none}.steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;font-size:15px}.steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:14px}
.check{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}.check:last-child{border:0}.check i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:14px;font-weight:700;background:#e8f6ee;color:var(--ok)}.check i.no{background:var(--danger-soft);color:var(--danger)}.check i.wait{background:var(--gold-soft);color:var(--gold)}
.check small{display:block;color:var(--muted);font-size:13px}

@media (max-width:980px){
  .shell{grid-template-columns:1fr;gap:12px;margin-top:12px;padding:0 12px}
  .sidebar{position:static;padding:10px}.account{display:none}
  #nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}#nav button{flex:none;width:auto;padding:8px 12px;font-size:14px;white-space:nowrap}#nav button span{display:none}#nav .count{position:static;transform:none;margin-left:6px}
  .side-note{display:none}
  .stage-wrap{grid-template-columns:1fr}
  .top{padding:0 12px;gap:8px}.brand small{display:none}.brand{font-size:18px}.gauge{min-width:140px}.who{display:none}.top button{padding:6px 10px;min-height:38px;font-size:14px}
  .view-head h1{font-size:22px}
}
@media (max-width:560px){
  .top{height:60px}#btnRefresh{display:none!important}.gauge{min-width:120px}.g-plan{display:none}
  .card{padding:16px 14px;border-radius:14px}
  .panel-body{padding:14px 14px 28px}.thread{max-height:40vh}
}
@media (prefers-reduced-motion:reduce){.panel,.avatar,.g-bar i{transition:none}}