* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f1f3f6;
  --card: #ffffff;
  --ink: #1f2530;
  --muted: #8a93a0;
  --line: #e6e9ef;
  --green: #2f9e6b; --green-d: #268457; --green-soft: #e7f5ee;
  --blue: #3b7de0; --blue-soft:#e8f0fc;
  --sky:#cdeefb; --sky2:#e6f6fd; --marble:#eef0f4; --marble2:#e2e6ee;
  --r: 16px;
}
html, body { height: 100%; }
body {
  font-family: "Pretendard", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
}
.app { display: flex; flex-direction: column; height: 100dvh; }

/* ===== GNB ===== */
.gnb {
  height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: var(--card); border-bottom: 1px solid var(--line); z-index: 40;
}
.gnb-l, .gnb-r { display: flex; align-items: center; gap: 12px; }
/* 중앙 카테고리 바로가기 */
.gnb-nav { display:flex; align-items:center; gap:6px; }
.nav-link { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; padding:9px 16px; border-radius:10px; font-size:14px; font-weight:600; color:#4b5563; cursor:pointer; text-decoration:none; }
.nav-link:hover { background:var(--green-soft); color:var(--green-d); }
.logo-wrap { display: flex; align-items: center; gap: 10px; }
.logo-mark { font-size: 20px; width: 40px; height: 40px; display: grid; place-items: center; background: linear-gradient(135deg,#3b82f6,#6366f1); border-radius: 11px; box-shadow: 0 5px 14px rgba(59,130,246,.4); }
.logo-tit { font-size: 19px; font-weight: 800; letter-spacing: -.5px; }
.logo-sub { font-size: 11px; color: var(--muted); }
.gnb-ghost { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 8px 13px; font-size: 13px; font-weight: 600; color: #4b5563; cursor: pointer; }
.gnb-ghost:hover { background:#f6f8fa; }
.hamb { display: none; border: none; background: none; font-size: 20px; cursor: pointer; }
.gnb-l { flex: 0 0 auto; } .gnb-r { flex: 0 0 auto; }
/* 좌측에 붙는 카테고리 바로가기 */
.gnb-nav { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line); }
.menu-toggle { border:1px solid var(--line); background:var(--card); width:38px; height:38px; border-radius:10px; font-size:16px; cursor:pointer; color:#4b5563; }
.menu-toggle:hover { background:#f6f8fa; }

/* ===== 3컬럼 ===== */
.cols {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 1fr 2.5fr 1.5fr;
  gap: 14px; padding: 14px;
  transition: grid-template-columns .25s ease;
}
/* 좌측 패널 접힘(데스크톱): 64px 아이콘 레일 */
.cols.left-collapsed { grid-template-columns: 64px 2.5fr 1.5fr; }
.cols.left-collapsed .col-left { padding:12px 8px; align-items:center; }
.cols.left-collapsed .pn-item { justify-content:center; padding:11px 0; }
.cols.left-collapsed .pn-item span { font-size:18px; }
.cols.left-collapsed .pn-item .lbl,
.cols.left-collapsed .side-label,
.cols.left-collapsed .ag-info { display:none; }
.cols.left-collapsed .ag { justify-content:center; padding:8px 0; }
.cols.left-collapsed .ag .ag-ava { width:40px; height:40px; }
.col-left, .col-right { min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.col-center { min-width: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.05); }

/* ◀ LEFT */
.col-left { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.proj-nav { display: flex; flex-direction: column; gap: 5px; }
.pn-item { display:flex; align-items:center; gap:10px; border:none; background:none; width:100%; text-align:left; padding:11px 13px; border-radius:11px; font-size:14.5px; font-weight:600; color:#374151; cursor:pointer; }
.pn-item:hover { background:#f4f6f9; }
.pn-item.active { background: var(--green-soft); color: var(--green-d); }
.side-label { font-size:12px; font-weight:700; color:var(--muted); margin:16px 6px 8px; display:flex; align-items:center; gap:7px; }
.side-label .cnt { background:#eef1f4; color:#6b7280; border-radius:999px; font-size:11px; padding:1px 8px; }
.agent-list { display:flex; flex-direction:column; gap:5px; }
.ag { display:flex; gap:10px; align-items:flex-start; padding:10px 10px; border-radius:12px; cursor:pointer; border:1px solid transparent; }
.ag:hover { background:#f6f8fa; border-color:var(--line); }
.ag.busy { background:#f3faf6; }
.ag.debating { background: var(--blue-soft); }
.ag .ag-ava { width:42px; height:42px; border-radius:11px; flex-shrink:0; overflow:hidden; background:#eef1f4; display:grid; place-items:center; }
.ag .ag-ava img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.ag .ag-info { min-width:0; flex:1; }
.ag .ag-name { font-size:13.5px; font-weight:700; }
.ag .ag-desc { font-size:11px; color:var(--muted); margin-top:1px; line-height:1.35; }
.ag .ag-status { font-size:11px; font-weight:600; margin-top:5px; display:inline-flex; align-items:center; gap:5px; color:#9aa3af; }
.ag .ag-status i { width:7px; height:7px; border-radius:50%; background:#c4cbd4; }
.ag.busy .ag-status { color:var(--green); } .ag.busy .ag-status i { background:var(--green); box-shadow:0 0 0 0 rgba(47,158,107,.6); animation:pulse 1.6s infinite; }
.ag.debating .ag-status { color:var(--blue); } .ag.debating .ag-status i { background:var(--blue); box-shadow:0 0 0 0 rgba(59,125,224,.6); animation:pulse 1.6s infinite; }
@keyframes pulse { 70%{box-shadow:0 0 0 7px rgba(47,158,107,0);} 100%{box-shadow:0 0 0 0 rgba(47,158,107,0);} }

/* ■ CENTER */
.sess-head { padding:18px 22px 14px; border-bottom:1px solid var(--line); }
.sh-tit { font-size:18px; font-weight:800; letter-spacing:-.3px; }
.sh-sub { font-size:12.5px; color:var(--muted); margin-top:2px; }
.chat { flex:1; min-height:0; overflow-y:auto; padding:20px 22px; display:flex; flex-direction:column; gap:16px; background:linear-gradient(180deg,#fbfcfe,#f7f9fc); }
.chat::-webkit-scrollbar { width:8px; } .chat::-webkit-scrollbar-thumb { background:#d6dbe3; border-radius:8px; }
.msg { display:flex; gap:10px; align-items:flex-end; animation:rise .26s ease; }
.msg.user { justify-content:flex-end; }
@keyframes rise { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }
.msg .avatar { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:15px; background:var(--green); color:#fff; font-weight:800; overflow:hidden; }
.msg .avatar img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.msg.user .avatar { display:none; }
.b-wrap { display:flex; flex-direction:column; max-width:74%; }
.msg.user .b-wrap { align-items:flex-end; }
.msg .b { padding:13px 16px; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; line-height:1.65; font-size:14.5px; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.sim-img { margin-top:8px; border-radius:12px; overflow:hidden; border:1px solid var(--line); max-width:320px; }
.sim-img img { width:100%; height:auto; display:block; }
.choice-etc { margin-top:8px; width:100%; box-sizing:border-box; border:1.5px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px; font-family:inherit; outline:none; }
.choice-etc:focus { border-color:var(--green); }
.msg.user .b { background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; border-bottom-right-radius:5px; }
.msg.assistant .b { background:#fff; border:1px solid #eceff3; border-bottom-left-radius:5px; }
.msg-time { font-size:10.5px; color:#aab2bd; margin:3px 6px 0; }
/* 협업 로그(에이전트 발언) — 채팅 안에 네이티브 삽입 */
.msg.collab .b { background:var(--blue-soft); border:1px solid #c7dcf7; color:#2c4a72; font-size:13px; max-width:80%; }
.msg.collab .avatar { background:var(--blue); border-radius:9px; }
.files { margin-top:11px; display:flex; flex-direction:column; gap:7px; }
.file-link { display:flex; align-items:center; gap:8px; background:var(--green-soft); border:1px solid #a7e0c4; color:var(--green-d); padding:9px 13px; border-radius:11px; text-decoration:none; font-size:13px; font-weight:600; }
.file-link:hover { background:#d6f0e2; }
.status { align-self:flex-start; color:#5b6472; font-size:13px; padding:8px 13px; background:#fff; border:1px solid #eceff3; border-radius:12px; display:flex; align-items:center; gap:8px; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.status::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green); animation:blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:.3;} 50%{opacity:1;} }
/* 작업 중 타이핑 인디케이터(채팅 거품형) */
.status.typing { align-items:center; gap:9px; padding:10px 14px; border-radius:16px; border-bottom-left-radius:5px; }
.status.typing::before { display:none; }
.status .t-avatar { font-size:15px; }
.status .t-txt { color:#4b5563; font-weight:600; }
.status .t-dots { display:inline-flex; gap:3px; margin-left:2px; }
.status .t-dots i { width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; animation:tdot 1.2s infinite ease-in-out; }
.status .t-dots i:nth-child(2){ animation-delay:.2s; } .status .t-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes tdot { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
/* 선택지 버튼(클릭/터치) */
.choices { align-self:flex-start; max-width:80%; margin-left:44px; display:flex; flex-direction:column; gap:12px; animation:rise .26s ease; }
.choice-step { display:flex; flex-direction:column; gap:7px; }
.choice-q { font-size:12px; font-weight:700; color:var(--muted); }
.choice-row { display:flex; flex-wrap:wrap; gap:8px; }
.choice-btn { padding:10px 16px; border:1.5px solid #c7dcf7; border-radius:22px; background:var(--blue-soft); color:#2c4a72; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .15s; }
.choice-btn:hover { background:linear-gradient(135deg,#2563eb,#4f46e5); border-color:transparent; color:#fff; transform:translateY(-1px); }
.choice-btn:disabled { cursor:default; opacity:.45; transform:none; }
.choice-btn.picked { background:linear-gradient(135deg,#2563eb,#4f46e5); border-color:transparent; color:#fff; opacity:1; }
.choice-next { align-self:flex-start; margin-top:8px; padding:9px 20px; border:none; border-radius:22px; background:#2f9e6b; color:#fff; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; }
.choice-next:hover:not(:disabled) { background:#268457; }
.choice-next:disabled { opacity:.4; cursor:default; }
.composer { flex-shrink:0; padding:14px 18px 16px; border-top:1px solid var(--line); background:#fff; }
/* 첨부 칩: 여러 장이어도 입력창을 밀지 않게 가로 줄바꿈 + 높이 제한 스크롤 */
#attach { display:flex; flex-wrap:wrap; gap:6px; max-height:96px; overflow-y:auto; margin-bottom:8px; }
#attach:empty { margin-bottom:0; }
.attach-chip { display:inline-flex; align-items:center; gap:6px; background:var(--green-soft); border:1px solid #a7e0c4; color:var(--green-d); padding:5px 9px; border-radius:9px; font-size:12px; max-width:170px; }
.attach-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attach-chip button { border:none; background:none; cursor:pointer; color:var(--green-d); flex-shrink:0; padding:0; }
.attach-summary { display:inline-flex; align-items:center; gap:10px; background:var(--green-soft); border:1px solid #a7e0c4; color:var(--green-d); padding:7px 12px; border-radius:9px; font-size:13px; font-weight:600; }
.attach-summary b { font-size:14px; }
.attach-summary button { border:none; background:rgba(38,132,87,.12); cursor:pointer; color:var(--green-d); font-size:12px; font-weight:700; padding:3px 9px; border-radius:7px; }
.attach-summary button:hover { background:rgba(38,132,87,.22); }
.attach-chip button { border:none; background:none; cursor:pointer; color:var(--green-d); }
.row { display:flex; align-items:flex-end; gap:8px; background:#f4f6f9; border:1.5px solid var(--line); border-radius:15px; padding:6px 6px 6px 10px; transition:border-color .15s, box-shadow .15s; }
.row:focus-within { border-color:var(--green); box-shadow:0 0 0 4px rgba(47,158,107,.12); background:#fff; }
textarea { flex:1; resize:none; border:none; background:transparent; padding:9px 4px; font-size:14.5px; font-family:inherit; max-height:120px; line-height:1.5; outline:none; }
.icon-btn { border:none; background:#e9edf2; border-radius:11px; width:38px; height:38px; font-size:15px; cursor:pointer; flex-shrink:0; }
.icon-btn:hover { background:#dfe5ec; }
.send-btn { background:var(--green); color:#fff; border:none; border-radius:11px; width:40px; height:40px; font-size:15px; cursor:pointer; flex-shrink:0; display:grid; place-items:center; transition:background .15s, transform .12s; }
.send-btn:hover:not(:disabled) { background:var(--green-d); transform:translateY(-1px); }
.send-btn:disabled { opacity:.45; cursor:default; }

/* ▶ RIGHT */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 1px 3px rgba(16,24,40,.05); }
.card-h2 { padding:13px 15px; font-size:14px; font-weight:700; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.live { font-size:11px; font-weight:600; color:var(--green); display:inline-flex; align-items:center; gap:5px; margin-left:6px; }
.live i { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
.mini-office { flex:0 0 auto; }
.mini-office .oc-stage { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:0 0 var(--r) var(--r); }
.output { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.preview { padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; overflow-y:auto; }
.pv-empty { grid-column:1/-1; color:var(--muted); font-size:13px; text-align:center; padding:24px 0; }
.pv-item { border:1px solid var(--line); border-radius:11px; overflow:hidden; background:#fff; }
.pv-thumb { height:84px; background:#f1f4f7; display:grid; place-items:center; font-size:26px; }
.pv-thumb img { width:100%; height:100%; object-fit:cover; }
.pv-name { font-size:11px; padding:7px 9px 3px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-acts { display:flex; gap:5px; padding:0 9px 9px; }
.pv-acts a { flex:1; text-align:center; font-size:11px; font-weight:700; padding:6px 0; border-radius:8px; text-decoration:none; }
.pv-acts .dl { background:var(--green); color:#fff; } .pv-acts .dl:hover{ background:var(--green-d); }
.pv-acts .vw { background:#eef1f4; color:#4b5563; } .pv-acts .vw:hover{ background:#e3e7ec; }
.feed-mini { padding:0 14px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; max-height:160px; }
.feed-row { display:flex; gap:9px; align-items:flex-start; }
.feed-row .fr-ava { width:26px; height:26px; border-radius:7px; flex-shrink:0; overflow:hidden; background:#eef1f4; }
.feed-row .fr-ava img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.feed-row .fr-body { flex:1; min-width:0; }
.feed-row .fr-who { font-size:11.5px; font-weight:700; }
.feed-row .fr-msg { font-size:11.5px; color:#5b6472; line-height:1.4; }
.all-results { margin:12px 14px 14px; border:1px solid var(--line); background:#fff; border-radius:11px; padding:11px; font-size:13px; font-weight:700; color:var(--green-d); cursor:pointer; }
.all-results:hover { background:var(--green-soft); }

/* ===== Footer ===== */
.footer { flex-shrink:0; display:flex; align-items:center; gap:12px; padding:12px 18px; background:var(--card); border-top:1px solid var(--line); overflow-x:auto; }
.sg-label { font-size:13px; font-weight:700; color:#4b5563; white-space:nowrap; }
.sg-chips { display:flex; gap:8px; }
.sg-chips button { border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 15px; font-size:13px; font-weight:600; color:#4b5563; cursor:pointer; white-space:nowrap; transition:all .14s; }
.sg-chips button:hover { background:var(--green-soft); border-color:#a7e0c4; color:var(--green-d); }

/* ===== 사무실(SVG 배경 + SVG 캐릭터) ===== */
.office { position:relative; width:100%; height:100%; overflow:hidden; }
.office-illust { display:none; }
.scene { position:absolute; inset:0; }
.scene-svg { width:100%; height:100%; display:block; }
.mroom { transition:stroke .3s, fill .3s; }
.mroom.active { stroke:var(--green); fill:rgba(47,158,107,.10); }
/* 책상(캐릭터 앞에 겹쳐 하반신 가림) */
.desk2 { position:absolute; z-index:5; width:17%; transform:translateX(-46%); pointer-events:none; transition:opacity .35s; filter:drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
.desk2 .dsvg { width:100%; height:auto; display:block; }

/* 캐릭터 */
.char { position:absolute; z-index:4; width:12.5%; transform:translateX(-50%); transition:left 1.4s ease-in-out, bottom 1.4s ease-in-out; cursor:pointer; }
.char .nametag { position:absolute; top:-20px; left:50%; transform:translateX(-50%); white-space:nowrap; text-align:center; font-size:8px; font-weight:700; color:#fff; background:rgba(20,28,40,.82); border-radius:5px; padding:1px 5px; opacity:0; transition:opacity .2s; pointer-events:none; line-height:1.15; z-index:8; }
.char .nametag .rank { font-size:7px; opacity:.85; }
.char:hover .nametag, .char.busy .nametag { opacity:1; }
.char-body { position:relative; width:100%; }
.char.flip .char-body { transform:scaleX(-1); transform-origin:center; }
.csvg { width:100%; height:auto; display:block; overflow:visible; }
.csvg .shadow { fill:rgba(0,0,0,.14); }
.csvg .chair { opacity:0; transition:opacity .3s; }
.csvg .chair rect { fill:#5b6470; }
.csvg .seg, .csvg .torso, .csvg .face, .csvg .foot, .csvg .hand { stroke:#33312e; stroke-width:2; stroke-linejoin:round; }
.csvg .pants { fill:#5a6270; } .csvg .foot { fill:#3a3f48; } .csvg .hand { fill:#f6ceaa; }
.csvg .ear { stroke:#33312e; stroke-width:1.6; }
.csvg .collar { fill:rgba(255,255,255,.7); stroke:none; }
.csvg .btn { fill:rgba(255,255,255,.7); } .csvg .shade { stroke:none; }
.csvg .hair, .csvg .hairback, .csvg .ahoge { stroke:#33312e; stroke-width:2; stroke-linejoin:round; }
.csvg .eye { fill:#33312e; } .csvg .hi { fill:#fff; } .csvg .hi2 { fill:#fff; opacity:.8; }
.csvg .brow { stroke:#5a4030; stroke-width:1.6; fill:none; stroke-linecap:round; opacity:.5; }
.csvg .mouth { stroke:#c8745a; stroke-width:1.8; fill:none; stroke-linecap:round; }
.csvg .cheek { fill:#ff9e8c; opacity:.7; }
/* 소품 */
.csvg .glasses circle { fill:rgba(180,215,245,.35); stroke:#33312e; stroke-width:1.8; }
.csvg .glasses line { stroke:#33312e; stroke-width:1.8; stroke-linecap:round; }
.csvg .beard { fill:#3a2c20; opacity:.85; stroke:none; }
.csvg .earring { fill:#ffd24a; stroke:#caa01e; stroke-width:.6; }
.csvg .headset { pointer-events:none; }
/* 관절 회전 기준점(fill-box) */
.csvg .thigh, .csvg .calf, .csvg .upper, .csvg .fore { transform-box:fill-box; transform-origin:50% 0; transition:transform .5s ease; }
.csvg .head { transform-box:fill-box; transform-origin:50% 100%; }
.csvg .ahoge { transform-box:fill-box; transform-origin:0% 100%; animation:ahogeSway 2.6s ease-in-out infinite; }
@keyframes ahogeSway { 0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(8deg);} }
/* idle: 살짝 숨쉬기 + 주기적 눈 깜빡임 (모든 캐릭터) */
.char .char-body { animation:breathe 3.4s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-1.5px);} }
.char.flip .char-body { animation:breatheF 3.4s ease-in-out infinite; }
@keyframes breatheF { 0%,100%{transform:scaleX(-1) translateY(0);} 50%{transform:scaleX(-1) translateY(-1.5px);} }
.csvg .eyes { transform-box:fill-box; transform-origin:50% 50%; animation:blink 4.2s infinite; }
@keyframes blink { 0%,94%,100%{transform:scaleY(1);} 97%{transform:scaleY(.1);} }
/* --- 기본(서 있음): 회전 없음 --- */
/* --- 걷기: 좌우 다리/팔 교차 스윙 + 몸 통통 + 머리 까딱 --- */
.char.walking .char-body { animation:bodybob .46s ease-in-out infinite; }
@keyframes bodybob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
.char.flip.walking .char-body { animation:bodybobF .46s ease-in-out infinite; }
@keyframes bodybobF { 0%,100%{transform:scaleX(-1) translateY(0);} 50%{transform:scaleX(-1) translateY(-3px);} }
.char.walking .head { animation:headbob .46s ease-in-out infinite; }
@keyframes headbob { 0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} }
.char.walking .legF .thigh { animation:legSw .46s ease-in-out infinite; }
.char.walking .legB .thigh { animation:legSw .46s ease-in-out infinite; animation-delay:-.23s; }
.char.walking .armR .upper { animation:legSw .46s ease-in-out infinite; animation-delay:-.23s; }
.char.walking .armL .upper { animation:legSw .46s ease-in-out infinite; }
@keyframes legSw { 0%{transform:rotate(20deg);} 50%{transform:rotate(-20deg);} 100%{transform:rotate(20deg);} }
/* --- 앉기(작업·회의): 다리 앞으로(허벅지 들고 발 내림), 의자 표시 --- */
.char.sitting .csvg .chair { opacity:1; }
.char.sitting .leg .thigh { transform:translateY(3px) rotate(4deg); }
.char.sitting .leg .calf  { transform:rotate(0deg); }
.char.sitting .armL .upper { transform:rotate(24deg); }
.char.sitting .armR .upper { transform:rotate(-24deg); }
/* --- 앉아서 작업 중: 양팔 타이핑 까딱 --- */
.char.sitting.busy .armL .upper { animation:typeL .38s ease-in-out infinite; }
.char.sitting.busy .armR .upper { animation:typeR .38s ease-in-out infinite; animation-delay:-.19s; }
@keyframes typeL { 0%,100%{transform:rotate(24deg);} 50%{transform:rotate(34deg);} }
@keyframes typeR { 0%,100%{transform:rotate(-24deg);} 50%{transform:rotate(-34deg);} }
.bubble-speech { position:absolute; bottom:102%; left:50%; transform:translateX(-50%); background:#fff; color:#1f2937; border:1.5px solid #1f2937; border-radius:7px; padding:3px 7px; font-size:9px; font-weight:600; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .3s; z-index:7; pointer-events:none; }
.bubble-speech.show { opacity:1; }

/* ===== 상담 신청 모달 ===== */
.modal-scrim { display:none; position:fixed; inset:0; background:rgba(20,18,16,.55); z-index:60; align-items:center; justify-content:center; padding:20px; }
.modal-scrim.on { display:flex; }
.lead-card { background:#fff; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.3); animation:rise .26s ease; }
.lead-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 6px; font-size:18px; font-weight:800; }
.lead-x { border:none; background:none; font-size:18px; cursor:pointer; color:#999; }
.lead-desc { padding:0 20px; color:#777; font-size:13px; line-height:1.5; margin-bottom:8px; }
.lead-body { padding:8px 20px 4px; display:flex; flex-direction:column; gap:13px; }
.lead-body label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:#444; }
.lead-body .req { color:#c0563f; }
.lead-body input, .lead-body textarea { border:1.5px solid #e4dcd0; border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; font-weight:400; outline:none; }
.lead-body input:focus, .lead-body textarea:focus { border-color:#9C7A4E; box-shadow:0 0 0 3px rgba(156,122,78,.12); }
.lead-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lead-chips button { border:1.5px solid #e4dcd0; background:#faf8f4; border-radius:20px; padding:7px 13px; font-size:12.5px; font-weight:600; color:#6b5d4a; cursor:pointer; font-family:inherit; }
.lead-chips button:hover { border-color:#9C7A4E; }
.lead-chips button.on { background:#9C7A4E; color:#fff; border-color:#9C7A4E; }
.lead-submit { margin:16px 20px 20px; width:calc(100% - 40px); background:#9C7A4E; color:#fff; border:none; border-radius:12px; padding:14px; font-size:15px; font-weight:800; cursor:pointer; }
.lead-submit:hover:not(:disabled) { background:#856843; }
.lead-submit:disabled { opacity:.5; cursor:default; }
.lead-ok { display:none; margin:0 20px 18px; background:#e7f5ee; color:#1f7a4d; border-radius:10px; padding:12px; font-size:13.5px; font-weight:700; text-align:center; }
.lead-ok.on { display:block; }

/* ===== 반응형 ===== */
.scrim { display:none; position:fixed; inset:60px 0 0 0; background:rgba(0,0,0,.4); z-index:25; }
.scrim.on { display:block; }
@media (max-width: 1100px){
  .cols { grid-template-columns: 1fr; }
  /* 좌/우 패널은 오버레이 서랍으로 */
  .col-left, .col-right {
    position: fixed; top:60px; bottom:0; width:300px; z-index:30; background:var(--bg);
    padding:14px; transition:transform .25s; box-shadow:0 10px 40px rgba(0,0,0,.2);
  }
  .col-left { left:0; transform:translateX(-105%); border-radius:0; }
  .col-right { right:0; transform:translateX(105%); border-radius:0; }
  .col-left.open, .col-right.open { transform:none; }
  .hamb { display:block; }
  .col-center { min-height: calc(100dvh - 60px - 120px); }
}
@media (max-width: 760px){
  .gnb-nav { display:none; }   /* 좁으면 중앙 카테고리 숨김 */
}
@media (max-width: 520px){
  .logo-sub { display:none; }
  .col-left, .col-right { width: 86vw; }
}


/* ===== 홈페이지 위젯 임베드 모드(?embed=1): 채팅만 ===== */
html.embed .gnb,
html.embed .col-left, html.embed #colLeft,
html.embed .col-right, html.embed #colRight,
html.embed .ah-pipe, html.embed .ah-overlay-r { display:none !important; }
html.embed .cols { grid-template-columns:1fr !important; }
html.embed .app { height:100vh; height:100dvh; }
html.embed .col-center { border:none; border-radius:0; }
html.embed .sess-head { padding-top:12px; }
html.embed .footer { padding:8px 12px; }
html.embed .sg-label { display:none; }


/* ===== 긴 작업 진행 애니메이션 카드 ===== */
.prog-card{ align-self:flex-start; max-width:80%; background:#fff; border:1px solid #eceff3; border-radius:16px;
  padding:14px 16px; box-shadow:0 2px 10px rgba(15,23,42,.06); animation:rise .3s ease; margin:2px 0; }
.prog-top{ display:flex; align-items:center; gap:9px; }
.prog-ic{ font-size:18px; animation:prog-bob 1.6s ease-in-out infinite; }
@keyframes prog-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.prog-msg{ flex:1; font-size:14px; font-weight:600; color:#2a2724; letter-spacing:-.01em; }
.prog-msg.flip{ animation:prog-flip .4s ease; }
@keyframes prog-flip{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.prog-time{ font-size:12px; color:#9aa3af; font-variant-numeric:tabular-nums; font-weight:600; }
.prog-bar{ height:6px; background:#f0ece5; border-radius:99px; overflow:hidden; margin-top:11px; }
.prog-bar i{ display:block; height:100%; width:8%; border-radius:99px;
  background:linear-gradient(90deg,#9C7A4E,#c9a878); transition:width .9s cubic-bezier(.3,.7,.3,1);
  position:relative; }
.prog-bar i::after{ content:""; position:absolute; inset:0; border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:prog-shine 1.4s linear infinite; }
@keyframes prog-shine{ from{ transform:translateX(-100%); } to{ transform:translateX(200%); } }
.prog-hint{ font-size:11.5px; color:#9aa3af; margin-top:9px; }

.sim-img img{ cursor:zoom-in; }
.sim-fail{ padding:18px; text-align:center; color:#9aa3af; font-size:13px; background:#f6f6f4; }
.img-dl{ margin-top:6px; }