/* 홈 index.html의 Monitoring AI data handoff 원본 컴포넌트. 변경 시 홈 정본과 대조한다. */
/* ===== v15: Monitoring AI data handoff ===== */
    .monitor-ai{padding-block:var(--section-y);background:#fffdf8;border-top:1px solid #ebe8e0;border-bottom:1px solid #ebe8e0}
    .monitor-ai-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.55fr);gap:clamp(34px,6vw,86px);align-items:end}
    .monitor-ai-head h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-h2);font-weight:800;margin:16px 0 0}
    .monitor-ai-head h2 em{font-style:normal;background:linear-gradient(transparent 66%,rgba(255,195,0,.5) 0)}
    .monitor-ai-head .copy{margin:0;color:var(--muted-light)}
    .monitor-ai-access{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:16px 18px;border:1px solid rgba(181,139,0,.26);border-left:3px solid var(--gold);border-radius:var(--r-sm);background:#fffaf0}
    .monitor-ai-access strong{display:block;color:var(--ink);font-size:13px;line-height:1.5}
    .monitor-ai-access p{margin:4px 0 0;color:#666a72;font-size:12px;line-height:1.65}
    .monitor-ai-access-link{flex:0 0 auto;color:var(--ink);font-size:12px;font-weight:750;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
    .monitor-ai-access-link:hover{color:#745700}
    .ux-ai-demo{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);margin-top:46px;border:1px solid #34363b;border-radius:var(--r-md);overflow:hidden;background:#151619;color:#f5f5f5;box-shadow:0 24px 60px rgba(40,32,10,.12)}
    .ux-ai-pane{min-width:0;padding:27px}
    .ux-ai-pane:first-child{border-right:1px solid rgba(255,255,255,.1)}
    .ux-ai-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;color:#f4f4f5;font-size:12px;font-weight:700}
    .ux-ai-toolbar small{color:#777c85;font-size:10px;font-weight:600}
    .ux-ai-file-title{display:flex;align-items:center;gap:9px}
    .ux-ai-file-title::before{content:"{}";display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(255,195,0,.1);color:#ffc300;font:700 10px/1 ui-monospace,monospace}
    .ux-ai-sources{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
    .ux-ai-sources span{padding:6px 8px;border:1px solid rgba(255,255,255,.09);border-radius:7px;color:#989da6;font-size:10px}
    .ux-ai-code{margin:0;padding:19px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0c0e11;color:#a8adb5;font:500 12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
    .ux-ai-code b{color:#ffc300;font-weight:650}
    .ux-ai-caption{margin:15px 0 0;color:#777c85;font-size:11px;line-height:1.55}
    .ux-ai-conversation{display:flex;flex-direction:column;gap:12px}
    .ux-ai-question{align-self:flex-end;max-width:88%;padding:11px 13px;border:1px solid rgba(255,195,0,.38);border-radius:11px 11px 4px 11px;background:#1d1f23;color:#f0f1f2;font-size:12px;line-height:1.55}
    .ux-ai-answer{max-width:95%;padding:16px;border:1px solid rgba(255,255,255,.11);border-radius:4px 12px 12px 12px;background:#202226;color:#c9ccd2}
    .ux-ai-answer-label{display:block;margin-bottom:7px;color:#ffcf32;font-size:10px;font-weight:750}
    .ux-ai-answer p{margin:0;font-size:12px;line-height:1.6}
    .ux-ai-answer ul{display:grid;gap:7px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.08);list-style:none}
    .ux-ai-answer li{display:grid;grid-template-columns:72px 1fr;gap:8px;color:#979ca5;font-size:11px;line-height:1.5}
    .ux-ai-answer b{color:#d8dae0;font-weight:650}
    .ux-ai-followups{padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
    .ux-ai-followups strong{display:block;margin-bottom:9px;color:#777c85;font-size:10px}
    .ux-ai-followup-list{display:flex;flex-wrap:wrap;gap:6px}
    .ux-ai-followup-list span{padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:7px;color:#858a93;font-size:10px;line-height:1.45}
    .ux-ai-conversation[data-ai-chat]{min-height:286px}
    .ux-ai-typing{display:none;align-self:flex-start;gap:5px;padding:12px 14px;border:1px solid rgba(255,255,255,.11);border-radius:4px 12px 12px 12px;background:#202226}
    .ux-ai-typing i{width:5px;height:5px;border-radius:50%;background:#9da2aa;animation:uxAiTyping 900ms ease-in-out infinite}
    .ux-ai-typing i:nth-child(2){animation-delay:150ms}.ux-ai-typing i:nth-child(3){animation-delay:300ms}
    .ux-ai-conversation.is-sequenced [data-ai-step]{display:none}
    .ux-ai-conversation.is-sequenced [data-ai-step].is-visible{display:block;animation:uxAiMessageIn 380ms var(--ease) both}
    .ux-ai-conversation.is-sequenced .ux-ai-typing.is-visible{display:flex}
    .ux-ai-conversation.is-sequenced .ux-ai-question.is-visible.is-typing::after{content:"";display:inline-block;width:1px;height:1em;margin-left:3px;vertical-align:-.12em;background:#ffc300;animation:uxAiCaret 720ms steps(1) infinite}
    .ux-ai-conversation.is-sequenced .ux-ai-answer.is-visible li{animation:uxAiPointIn 420ms var(--ease) both}
    .ux-ai-conversation.is-sequenced .ux-ai-answer.is-visible li:nth-child(2){animation-delay:110ms}.ux-ai-conversation.is-sequenced .ux-ai-answer.is-visible li:nth-child(3){animation-delay:220ms}
    @keyframes uxAiTyping{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
    @keyframes uxAiMessageIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
    @keyframes uxAiPointIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
    @keyframes uxAiCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
    .monitor-ai-note{margin:22px 0 0;padding-left:15px;border-left:2px solid var(--gold);color:#666a72;font-size:12px;line-height:1.7}
    @media(max-width:800px){.monitor-ai-head{grid-template-columns:1fr}.monitor-ai-access{align-items:flex-start;flex-direction:column}.ux-ai-demo{grid-template-columns:1fr}.ux-ai-pane:first-child{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}}
    @media(max-width:540px){.monitor-ai-head{gap:18px}.monitor-ai-head h2{font-size:32px}.monitor-ai-access{margin-top:22px;padding:14px 15px}.ux-ai-demo{margin-top:31px}.ux-ai-pane{padding:19px 16px}.ux-ai-answer li{grid-template-columns:1fr;gap:2px}.ux-ai-question,.ux-ai-answer{max-width:100%}.ux-ai-followup-list{display:grid}.ux-ai-conversation[data-ai-chat]{min-height:420px}}
    @media(prefers-reduced-motion:reduce){.ux-ai-typing{display:none!important}.ux-ai-conversation[data-ai-chat]{min-height:0}.ux-ai-conversation.is-sequenced [data-ai-step]:not(.ux-ai-typing){display:block!important;animation:none!important}.ux-ai-conversation.is-sequenced .ux-ai-answer li{animation:none!important}}