:root{--ink:#111;--mute:#8a909c;--bg:#f7f7f8;--line:#e3e5ea}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;letter-spacing:-.2px;overflow:hidden}
button,textarea{font:inherit;color:inherit}

/* 머리글 (마케팅 스튜디오 Header.tsx 와 같은 값) */
:root{--brand:#4b1240;--brand-bg:#f6ecf2;--mh:140px}
.mh{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--mh);background:#f7f5f0;font-family:Figtree,'Pretendard Variable',Pretendard,sans-serif;letter-spacing:0;color:var(--brand)}
.mh a{color:inherit;text-decoration:none}
.mh-band{height:10px;background:#43302f}
.mh-util{background:#fff}
.mh-in{max-width:1440px;margin:0 auto;padding:0 32px}
.mh-util .mh-in{height:46px;display:flex;align-items:center;font-size:14px}
.mh-date{color:#55565c}
.mh-r{margin-left:auto;display:flex;align-items:center;gap:32px}
.mh-r a{display:flex;align-items:center;gap:7px;cursor:pointer}
.mh-r a:hover{text-decoration:underline}
.mh-row{padding-top:16px;padding-bottom:8px;display:flex;align-items:center;gap:8px}
.mh-nav{flex:1;min-width:0;height:60px;display:flex;align-items:center;gap:4px;border:1px solid var(--brand);border-radius:999px;background:#fff;padding:0 16px 0 12px;overflow:hidden}
.mh-em{margin-right:16px;flex-shrink:0;display:flex}
.mh-nav a.it{height:44px;padding:0 16px;display:flex;align-items:center;gap:8px;border-radius:999px;font-size:16px;white-space:nowrap}
.mh-nav a.it:hover{background:#f7f1f5}
.mh-nav a.it.on{background:var(--brand-bg);font-weight:600}
.mh-biz{flex-shrink:0;height:60px;display:flex;align-items:center;gap:12px;border:1px solid var(--brand);border-radius:999px;background:#fff;padding:0 20px 0 10px;font-weight:600;font-size:16px}
.mh-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:block}

/* 무대 */
.stage{position:fixed;left:0;right:0;bottom:0;top:var(--mh);overflow:hidden;background:#fff}
#canvas{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
#canvas[hidden]{display:none}
.overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.cursor{position:absolute;left:0;top:0;opacity:0;transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .4s;will-change:transform}
.cursor.on{opacity:1}
.cursor svg{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.cursor .tag{position:absolute;left:18px;top:18px;white-space:nowrap;padding:5px 11px;border-radius:999px;color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hl{position:absolute;border:2px solid;border-radius:8px;opacity:0;transition:all .6s cubic-bezier(.22,1,.36,1)}
.hl.on{opacity:1}
.hl::after{content:'';position:absolute;inset:0;border-radius:6px;background:currentColor;opacity:.07;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.15}}

/* AI 기획 화면 */
.think{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 120px;text-align:center;background:rgba(255,255,255,.96);animation:fade .4s}
.think[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.orb{position:relative;width:64px;height:64px;margin-bottom:22px}
.orb span{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#3d7cff,#8b5cf6,#ec4899,#f59e0b,#3d7cff);filter:blur(10px);opacity:.75;animation:spin 3s linear infinite}
.orb span:nth-child(2){inset:12px;filter:blur(4px);opacity:.9;animation-duration:2s;animation-direction:reverse}
.orb span:nth-child(3){inset:17px;background:#fff;filter:none;opacity:1;animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.think h2{margin:0 0 14px;font-size:24px;font-weight:800;letter-spacing:-1.2px}
.agents{list-style:none;margin:0 0 26px;padding:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.agents li{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;color:#555}
.agents li i{width:8px;height:8px;border-radius:50%;background:#c9ced8}
.agents li.busy i{background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent);animation:pulse 1s infinite}
.agents li.ok{color:var(--ink)}.agents li.ok i{background:#10b981}
.stream{list-style:none;margin:0;padding:0;width:min(640px,100%);display:flex;flex-direction:column;gap:6px;-webkit-mask-image:linear-gradient(transparent,#000 40%)}
.stream li{font-size:15px;line-height:1.5;color:#6b7280;animation:up .5s cubic-bezier(.16,1,.3,1)}
.stream li:last-child{color:var(--ink);font-weight:600}
@keyframes up{from{opacity:0;transform:translateY(10px)}}

/* 입력창 + 마이크 — 캔버스 아래쪽에 작게 */
.composer{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;width:min(500px,calc(100% - 32px));transition:width .5s}
.crow{display:flex;align-items:flex-end;gap:10px;width:100%}
.cbox{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;gap:8px;min-height:48px;padding:6px 6px 6px 18px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 26px rgba(17,24,39,.14);transition:border-radius .3s}
.cbox.multi{border-radius:18px}
#cText{flex:1;min-width:0;max-height:30vh;border:0;outline:none;resize:none;background:none;font-size:15px;font-weight:500;line-height:1.6;padding:5px 0;word-break:keep-all;overflow-wrap:anywhere;overflow-y:auto}
#cText::placeholder{color:#9aa1ad}
#cSend{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer}
#cSend svg{width:18px;height:18px}
#cSend:disabled{background:#e6e8ec;color:#a9afb9;cursor:default}
.mic{position:relative;flex:none;width:48px;height:48px;border:0;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 26px rgba(17,24,39,.25);--lv:0}
.mic svg{position:relative;z-index:2;width:22px;height:22px}
.mic .ring{position:absolute;inset:0;border-radius:50%;background:var(--ink);opacity:0}
.clisten,.cstatus{display:none;flex:1;align-items:center;gap:9px;min-height:36px;font-size:14px;font-weight:600;color:#555}
.bars{display:flex;align-items:center;gap:3px;height:20px}
.bars i{width:3px;height:5px;border-radius:2px;background:var(--ink);transition:height .08s}
.spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid #d4d8df;border-top-color:var(--ink);animation:spin .8s linear infinite}
#cTime{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--mute);font-weight:600}
/* 듣는 중: --lv 만큼 웅웅 */
.composer.listening .mic{transform:scale(calc(1 + var(--lv) * .2));transition:transform .08s}
.composer.listening .mic .ring{opacity:.15;transform:scale(calc(1.3 + var(--lv) * 1));transition:transform .1s}
.composer.listening .mic .r2{opacity:.07;transform:scale(calc(1.6 + var(--lv) * 1.6))}
.composer.listening #cText,.composer.listening #cSend{display:none}
.composer.listening .clisten{display:flex}
/* 보낸 뒤: 한 줄 상태 */
.composer.sent{width:min(440px,calc(100% - 32px))}
.composer.sent #cText,.composer.sent #cSend,.composer.sent .mic{display:none}
.composer.sent .cstatus{display:flex}
.composer.sent .cbox{min-height:46px;padding:5px 18px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}
.composer.done .spin{animation:none;border:0;width:18px;height:18px;background:#10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.composer.done .cstatus{color:var(--ink)}

@media(max-width:640px){
  .think h2{font-size:20px}
  .composer{bottom:16px}
  #cText{font-size:16px}
  :root{--mh:118px}
  .mh-in{padding:0 16px}
  .mh-date,.mh-r a:not(#mhLang){display:none}
  .mh-row{padding-top:8px;padding-bottom:6px}
  .mh-nav{height:52px;padding:0 6px;gap:0;overflow-x:auto;scrollbar-width:none}
  .mh-nav a.it{padding:0 10px;font-size:14px}
  .mh-nav a.it:not(.on) span{display:none}
  .mh-em{margin-right:4px}
  .mh-biz{height:52px;padding:0 8px;gap:0}
  .mh-biz span,.mh-biz svg.chev{display:none}
  .stream li{font-size:13px}
}
/* 선택 상자: 모서리 핸들 + 치수 */
.hl .h{position:absolute;width:9px;height:9px;background:#fff;border:2px solid currentColor;border-radius:2px}
.hl .tl{left:-5px;top:-5px}.hl .tr{right:-5px;top:-5px}.hl .bl{left:-5px;bottom:-5px}.hl .br{right:-5px;bottom:-5px}
.hl .dim{position:absolute;left:-2px;top:-24px;padding:2px 7px;border-radius:4px;color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}