/* ==========================================================================
   Centras NS — 휴대폰 시안 속 AI 에이전트 화면 (s7 · s10 · s11 · s15)
   모든 선택자는 .ag 로 시작한다. 쓰는 곳: <div class="scr"><div class="isl"></div><div class="ag">…</div></div>
   기본 상태 = 완성 화면(인쇄·동작 줄이기와 같다). 동작은 JS 가 .scr 에 .ag-run 을 붙였을 때만.
   인쇄 안전: 흐린 그림자·혼합 모드·backdrop-filter·CSS 무늬 없음. 아이콘은 인라인 SVG.
   ========================================================================== */

/* ---------- 바탕 ---------- */
.ag{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;color:#1d1d1f;font-size:12.5px;line-height:1.45;letter-spacing:-.01em;text-align:left;font-variant-numeric:tabular-nums;word-break:keep-all}
.ag svg{display:block;flex:none}
.ag b{font-weight:700}

/* 상태 표시줄 (다이내믹 아일랜드 양옆) */
.ag .ag-sb{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:2px 24px 0 34px;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:#1d1d1f}
.ag .ag-sbi{display:flex;align-items:center;gap:5px}
.ag .ag-sbi svg{fill:currentColor}
.ag .ag-sbi .ag-wf{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ag .ag-sbi .ag-bt rect.o{fill:none;stroke:currentColor;stroke-opacity:.4}

/* ---------- 에이전트 머리 ---------- */
.ag .ag-hd{flex:none;display:flex;align-items:center;gap:9px;padding:0 14px 9px;border-bottom:1px solid #ededf0}
.ag .ag-mk{position:relative;width:32px;height:32px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#34d1a8 0%,#2f8cff 100%);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:-.03em}
.ag .ag-id{min-width:0;display:flex;flex-direction:column;gap:1px}
.ag .ag-nm{font-size:13.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.ag .ag-st{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#86868b;font-weight:500;line-height:1.3}
.ag .ag-live{position:relative;width:6px;height:6px;border-radius:50%;background:#34d1a8;flex:none}
.ag .ag-live::after{content:"";position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:#34d1a8;opacity:0}
.ag .ag-ctx{margin-left:auto;flex:none;font-size:10.5px;font-weight:600;color:#424245;background:#f2f2f5;border-radius:999px;padding:4px 9px;line-height:1.3;white-space:nowrap}

/* ---------- 대화 ---------- */
.ag .ag-th{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:7px;padding:5px 14px 2px}
.ag .ag-ai{align-self:center;display:flex;align-items:center;gap:4px;font-size:10.5px;color:#86868b;line-height:1.3}
.ag .ag-ai svg{width:12px;height:12px;fill:none;stroke:#0a8f74;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-u{align-self:flex-end;max-width:80%;background:#0a84ff;color:#fff;padding:5px 12px 5px;border-radius:17px 17px 6px 17px;line-height:1.4}
.ag .ag-a{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:2px}
.ag .ag-tx{font-size:12.5px;line-height:1.45;color:#1d1d1f}

/* 작업 흔적 — 접힌 한 줄, 보조 정보(출처보다 약하게) */
.ag .ag-tr{display:inline-flex;align-items:center;gap:4px;height:15px;font-size:10.5px;font-weight:500;color:#a1a1a6;line-height:1;white-space:nowrap}
.ag .ag-tri{position:relative;width:11px;height:11px;flex:none}
.ag .ag-ck{position:absolute;left:0;top:0;width:11px;height:11px}
.ag .ag-ck circle{fill:#c7c7cc}
.ag .ag-ck path{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-sp{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;border:1.5px solid #e0e0e5;border-top-color:#0a8f74;opacity:0}
.ag .ag-sep{color:#c7c7cc}
.ag .ag-tm{color:#c0c0c5;margin-left:2px}
.ag .ag-tr.ag-wn .ag-ck circle{fill:#ff9f0a}
.ag .ag-tr.ag-wn{color:#b0703a}

/* 출처 — 열어 볼 수 있는 승인 문서. 작업 흔적보다 눈에 띄게 */
.ag .ag-src{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 4px;border:1px solid #e3e3e8;border-radius:8px;background:#fff;font-size:10.5px;line-height:1;white-space:nowrap;max-width:100%}
.ag .ag-src .ag-dc{width:16px;height:16px;border-radius:5px;background:#e6f6f1;display:flex;align-items:center;justify-content:center;flex:none}
.ag .ag-src .ag-dc svg{width:11px;height:11px;fill:none;stroke:#0a8f74;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-src b{font-size:11px;font-weight:700;color:#1d1d1f;letter-spacing:-.01em}
.ag .ag-src .ag-ok{color:#0a8f74;font-weight:600}
.ag .ag-src .ag-ext{width:10px;height:10px;fill:none;stroke:#86868b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:1px}

/* 구조화된 답 카드 */
.ag .ag-cd{align-self:stretch;border:1px solid #e5e5ea;border-radius:16px;padding:9px 12px 10px;background:#fff}
.ag .ag-lb{font-size:10.5px;font-weight:700;color:#0a8f74;letter-spacing:.02em;line-height:1.3}
.ag .ag-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ag .ag-big{font-size:19px;font-weight:800;letter-spacing:-.035em;line-height:1.12;margin-top:2px}
.ag .ag-btn{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px 0 8px;border-radius:999px;background:#eef5ff;color:#0a6fe0;font-size:11px;font-weight:600;white-space:nowrap;flex:none}
.ag .ag-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-pz{display:flex;align-items:flex-start;gap:5px;margin-top:6px;background:#effaf6;color:#0a6e5a;border-radius:9px;padding:6px 8px 7px;font-size:10.5px;line-height:1.42}
.ag .ag-pz svg{width:11px;height:11px;margin-top:2px;fill:#0a8f74;flex:none}
.ag .ag-pz u{text-decoration:none;font-weight:700;color:#0a8f74;white-space:nowrap}
.ag .ag-acts{display:flex;gap:6px;margin-top:9px}
.ag .ag-btn2{background:#f2f2f5;color:#1d1d1f}
.ag .ag-btn2 svg{stroke:#0a8f74}
.ag .ag-kv{display:grid;grid-template-columns:30px 1fr;row-gap:3px;column-gap:8px;margin-top:5px;font-size:11.5px;line-height:1.35}
.ag .ag-kv dt{color:#86868b;font-size:10.5px;padding-top:1px}
.ag .ag-kv dd{color:#1d1d1f;font-weight:500}
.ag .ag-kv dd b{font-weight:700}

/* 언어 감지 */
.ag .ag-lang{display:inline-flex;align-items:center;vertical-align:1px;height:17px;padding:0 6px;margin-right:2px;border-radius:5px;background:#eaf3ff;color:#0a6fe0;font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1}

/* 사람 연결 — 오류가 아니라 일급 기능. 연락처 카드 */
.ag .ag-ho{align-self:stretch;display:flex;align-items:center;gap:9px;border-radius:16px;background:#fff;border:1px solid #e3e3e8;padding:8px 10px}
.ag .ag-hoa{position:relative;width:32px;height:32px;border-radius:50%;background:#1d1d1f;color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.ag .ag-hoa::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#30c48d;border:2px solid #fff}
.ag .ag-hob{flex:1;min-width:0}
.ag .ag-hot{font-size:12px;font-weight:700;line-height:1.3;color:#1d1d1f;white-space:nowrap}
.ag .ag-hos{font-size:10.5px;color:#0a8f74;font-weight:600;line-height:1.35;white-space:nowrap}
.ag .ag-sos{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:#ff6b5e;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;flex:none}
.ag .ag-sos svg{width:12px;height:12px;fill:#fff}
/* ---------- 지금 많이 묻는 질문 (s11) ---------- */
.ag .ag-rk{flex:none;margin:9px 12px 0;border-radius:16px;background:#f5f5f7;padding:10px 10px 8px}
.ag .ag-rkh{display:flex;align-items:center;justify-content:space-between;padding:0 2px 7px}
.ag .ag-rkh b{font-size:12px;font-weight:700;letter-spacing:-.02em}
.ag .ag-rkh span{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#0a8f74;font-weight:600}
.ag .ag-fi{position:relative;display:flex;align-items:center;gap:8px;height:29px;padding:0 10px;border-radius:10px;background:#fff;margin-bottom:4px;font-size:12px;font-weight:500;overflow:hidden}
.ag .ag-fi:last-child{margin-bottom:0}
.ag .ag-fi i{font-style:normal;font-weight:800;font-size:12px;color:#0a84ff;width:10px;text-align:center;position:relative}
.ag .ag-fi .ag-q{position:relative;flex:1;min-width:0;white-space:nowrap}
.ag .ag-fi em{position:relative;font-style:normal;font-size:10.5px;color:#86868b;font-weight:600}
.ag .ag-bar{flex:none;width:30px;height:4px;border-radius:2px;background:#e8e8ed;overflow:hidden}
.ag .ag-bar u{display:block;height:100%;border-radius:2px;background:#8fc2ff;transform-origin:0 50%;text-decoration:none}
.ag .ag-sel .ag-bar u{background:#0a84ff}
.ag .ag-fi em{min-width:30px;text-align:right}
.ag .ag-fi.ag-sel::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:10px;border:1.5px solid #0a84ff;z-index:1}
.ag .ag-pick{display:inline-flex;align-items:center;gap:3px;align-self:flex-end;font-size:10.5px;color:#86868b;margin-bottom:-4px}

/* ---------- 입력창 ---------- */
.ag .ag-cp{flex:none;position:relative;padding:4px 12px 21px}
.ag .ag-chips{display:flex;gap:6px;margin-bottom:7px;overflow:hidden}
.ag .ag-chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:999px;border:1px solid #e3e3e8;font-size:11px;font-weight:500;color:#424245;white-space:nowrap;flex:none}
.ag .ag-chip svg{width:12px;height:12px;fill:none;stroke:#0a8f74;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-in{display:flex;align-items:center;gap:6px;height:38px;border-radius:999px;background:#f2f2f5;padding:0 4px 0 14px;font-size:12.5px;color:#a1a1a6}
.ag .ag-in span{flex:1}
.ag .ag-in .ag-mic{width:16px;height:16px;fill:none;stroke:#86868b;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-send{width:30px;height:30px;border-radius:50%;background:#1d1d1f;display:flex;align-items:center;justify-content:center;flex:none}
.ag .ag-send svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-home{position:absolute;left:50%;bottom:7px;width:104px;height:4px;margin-left:-52px;border-radius:2px;background:#1d1d1f}

/* ---------- s7 문자 메시지 ---------- */
.ag .ag-mh{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 14px 9px;border-bottom:1px solid #ededf0;position:relative}
.ag .ag-mh .ag-back{position:absolute;left:12px;top:9px;width:11px;height:19px;fill:none;stroke:#0a84ff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#a7a7ad,#86868b);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:-.02em}
.ag .ag-mhn{font-size:11px;color:#1d1d1f;font-weight:500;display:flex;align-items:center;gap:2px;line-height:1.3}
.ag .ag-mhn svg{width:6px;height:9px;fill:none;stroke:#a1a1a6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-tl{align-self:center;font-size:10.5px;color:#86868b;line-height:1.3;margin-top:2px}
.ag .ag-tl b{font-weight:600}
.ag .ag-sm{align-self:flex-start;max-width:86%;background:#e9e9eb;color:#1d1d1f;padding:8px 12px 9px;border-radius:18px 18px 18px 6px;line-height:1.45}
.ag .ag-lp{align-self:flex-start;width:214px;border-radius:18px;overflow:hidden;background:#e9e9eb}
.ag .ag-lpi{position:relative;height:104px;background:#1d1d1f;color:#fff;padding:14px 14px 0;display:flex;flex-direction:column;gap:9px}
.ag .ag-lpi .ag-mk{width:28px;height:28px;border-radius:9px;font-size:10.5px}
.ag .ag-lpi p{font-size:15px;font-weight:800;letter-spacing:-.035em;line-height:1.22}
.ag .ag-lpi p small{display:block;font-size:10.5px;font-weight:500;color:#a1a1a6;letter-spacing:-.01em;margin-top:3px}
.ag .ag-lpb{padding:8px 12px 9px}
.ag .ag-lpb b{display:block;font-size:12px;line-height:1.35}
.ag .ag-lpb span{display:block;font-size:10.5px;color:#86868b;line-height:1.35;margin-top:1px}
.ag .ag-mc{flex:none;position:relative;display:flex;align-items:center;gap:8px;padding:8px 12px 24px}
.ag .ag-plus{width:30px;height:30px;border-radius:50%;background:#f2f2f5;display:flex;align-items:center;justify-content:center;flex:none}
.ag .ag-plus svg{width:14px;height:14px;fill:none;stroke:#86868b;stroke-width:2;stroke-linecap:round}
.ag .ag-mc .ag-in{flex:1;height:34px;background:#fff;border:1px solid #d9d9de}

/* ---------- s15 스토리형 설문 (어두운 판, .scr.sv 위) ---------- */
.ag.ag-sv{background:transparent;color:#fff}
.ag.ag-sv .ag-sb{color:#fff}
.ag.ag-sv .ag-home{background:#fff;opacity:.85}
.ag .ag-pg{flex:none;display:flex;align-items:center;gap:4px;padding:6px 18px 0}
.ag .ag-pg span{flex:1;height:3px;border-radius:2px;background:#3a4a52}
.ag .ag-pg span.on{background:#34d1a8}
.ag .ag-pg em{font-style:normal;font-size:10.5px;color:#9fb3b0;font-weight:600;margin-left:6px;flex:none}
.ag .ag-ch{flex:none;padding:20px 20px 0}
.ag .ag-ch small{display:block;font-size:10.5px;color:#34d1a8;font-weight:700;letter-spacing:.08em}
.ag .ag-ch p{font-size:17px;font-weight:700;line-height:1.42;margin-top:8px;letter-spacing:-.025em;color:#fff}
.ag .ag-op{flex:none;padding:16px 16px 0;display:flex;flex-direction:column;gap:7px}
.ag .ag-o span{text-wrap:balance}
.ag .ag-o{position:relative;display:flex;align-items:center;gap:10px;background:#1e3439;border-radius:14px;padding:10px 12px;font-size:12.5px;color:#e5e5ea;line-height:1.38}
.ag .ag-o i{width:16px;height:16px;border-radius:50%;border:1.5px solid #5d7377;flex:none;position:relative}
.ag .ag-o.ag-on2{background:#fff;color:#000;font-weight:700}
.ag .ag-o.ag-on2 i{border:none;background:#0a8f74}
.ag .ag-o.ag-on2 i svg{position:absolute;left:3px;top:3px;width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ag .ag-res{flex:none;margin:auto 16px 0;border-radius:16px;background:#173d3a;padding:11px 13px 12px;display:flex;gap:10px;align-items:center}
.ag .ag-res .ag-mk{width:30px;height:30px;border-radius:9px;font-size:10.5px}
.ag .ag-res div{font-size:11px;color:#9be7d3;line-height:1.42}
.ag .ag-res b{display:block;color:#fff;font-size:13px;font-weight:700}
.ag.ag-sv .ag-cp{padding:0 0 22px}

/* ==========================================================================
   동작 — 화면에서만, 동작 줄이기 아닐 때만. JS(agent-ui.js)가 .scr 에 .ag-run 을 붙인 동안만 숨김 상태가 생긴다.
   transform·opacity 만 쓴다(레이아웃은 완성 화면과 같다).
   ========================================================================== */
@media screen and (prefers-reduced-motion:no-preference){
  @keyframes ag-ping{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.8)}}
  @keyframes ag-spin{to{transform:rotate(360deg)}}
  @keyframes ag-breath{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.92)}}
  .anim .ag .ag-live::after{animation:ag-ping 2.4s cubic-bezier(.2,.7,.2,1) infinite}

  .ag-run [data-ag]{opacity:0;transform:translateY(6px);transition:opacity .38s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  .ag-run [data-ag="u"]{transform:translateY(10px) scale(.94);transform-origin:100% 100%}
  .ag-run [data-ag="sm"],.ag-run [data-ag="lp"]{transform:translateY(10px) scale(.94);transform-origin:0 100%}
  .ag-run [data-ag].ag-on{opacity:1;transform:none}

  .ag-run.ag-busy .ag-hd .ag-mk{animation:ag-breath 1.1s ease-in-out infinite}
  .ag-run .ag-tr .ag-ts,.ag-run .ag-tr .ag-sep,.ag-run .ag-tr .ag-tm{opacity:0;transition:opacity .28s ease}
  .ag-run .ag-tr .ag-on{opacity:1}
  .ag-run .ag-tr .ag-ck{opacity:0;transform:scale(.4);transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.5,.5,1)}
  .ag-run .ag-tr.ag-on .ag-sp{opacity:1;animation:ag-spin .75s linear infinite}
  .ag-run .ag-tr.ag-done .ag-sp{opacity:0;animation:none;transition:opacity .15s}
  .ag-run .ag-tr.ag-done .ag-ck{opacity:1;transform:none}

  .ag-run .ag-w{opacity:0;transition:opacity .32s ease}
  .ag-run .ag-w.ag-on{opacity:1}

  .ag-run .ag-bar u{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .ag-run .ag-rk.ag-on .ag-bar u{transform:none}
  .ag-run .ag-fi.ag-sel::before{opacity:0;transition:opacity .2s ease}
  .ag-run .ag-fi.ag-sel.ag-tap::before{opacity:1}
  .ag-run .ag-fi{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .ag-run .ag-fi.ag-press{transform:scale(.97)}

  .ag-run .ag-o.ag-on2{transition:none}
  .ag-run .ag-o.ag-on2::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:14px;background:#1e3439;opacity:1;transition:opacity .35s ease}
  .ag-run .ag-o.ag-on2.ag-tap::after{opacity:0}
}
/* 인쇄: 어떤 상태에서도 완성 화면 */
@media print{
  .ag *,.ag *::before,.ag *::after{animation:none!important;transition:none!important}
  .ag-run [data-ag],.ag-run .ag-w,.ag-run .ag-ts,.ag-run .ag-sep,.ag-run .ag-tm,.ag-run .ag-ck,.ag-run .ag-hd .ag-mk{opacity:1!important;transform:none!important}
  .ag-run .ag-sp,.ag .ag-live::after,.ag-run .ag-o.ag-on2::after{opacity:0!important}
  .ag-run .ag-bar u{transform:none!important}
  .ag-run .ag-fi.ag-sel::before{opacity:1!important}
  .ag-run .ag-fi{transform:none!important}
}