/* =========================================================
   BEXCO Interpretation — Kiosk ⇄ Desk linked system
   Palette: single blue family. Two speakers separated only
   by saturation/brightness — visitor = bright sky, staff =
   calm royal. No warm accents.
   ========================================================= */
/* Pretendard (static weights) served locally (no CDN) — offline-safe, reliable load. */
@font-face{font-family:"Pretendard";font-weight:400;font-style:normal;font-display:swap;src:url("/translate/vendor/fonts/Pretendard-Regular.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-style:normal;font-display:swap;src:url("/translate/vendor/fonts/Pretendard-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-style:normal;font-display:swap;src:url("/translate/vendor/fonts/Pretendard-Bold.woff2") format("woff2")}
:root{
  --abyss:#06101f;
  --deep:#0b1d33;
  --deep-2:#0f2643;
  --deep-3:#143155;
  --line:rgba(120,165,220,.16);
  --line-strong:rgba(120,165,220,.32);

  --visitor:#3ec8f5;        /* bright sky-blue — visitor */
  --visitor-ink:#04222e;
  --staff:#3b6fe0;          /* calm royal-blue — staff */
  --staff-ink:#fff;

  --text:#eaf2fb;
  --text-dim:#9db4d2;
  --text-faint:#8ba1c0;  /* a11y: was #5d7497 (~3.7:1, below WCAG AA); now ~6.5:1 on dark bg */
  --white:#fff;
  --danger:#5a86f0;          /* even "end" stays in blue family */

  --r-lg:30px;--r-md:22px;--r-sm:15px;
  --display:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%}
body{
  font-family:var(--body);
  background:
    radial-gradient(1100px 800px at 12% -10%, rgba(62,200,245,.10), transparent 60%),
    radial-gradient(1000px 760px at 92% 110%, rgba(59,111,224,.14), transparent 60%),
    var(--abyss);
  color:var(--text);-webkit-font-smoothing:antialiased;
  padding:30px;
}
button{font-family:inherit;border:0;cursor:pointer;background:none;color:inherit}
::selection{background:var(--visitor);color:var(--visitor-ink)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-faint)}
.k-en{font-family:var(--display);color:var(--text-dim);font-weight:500}

/* ---- top hero banner (proposal header, styled per reference image) ---- */
.hero{
  max-width:1500px;margin:0 auto 24px;
  background:
    radial-gradient(900px 500px at 14% 0%, rgba(47,128,237,.30), transparent 42%),
    radial-gradient(800px 520px at 92% 120%, rgba(62,200,245,.14), transparent 46%),
    linear-gradient(135deg,#07162d 0%,#10264a 52%,#173866 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:54px 56px;position:relative;overflow:hidden;
}
.hero .eyebrow-pill{
  display:inline-flex;align-items:center;gap:12px;
  padding:9px 20px;border-radius:999px;background:rgba(47,128,237,.18);
  color:#9ecbff;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;
}
.hero .eyebrow-pill .dot{width:9px;height:9px;border-radius:50%;background:#3ec8f5;animation:hpulse 1.6s infinite}
@keyframes hpulse{0%{box-shadow:0 0 0 0 rgba(62,200,245,.55)}70%{box-shadow:0 0 0 10px rgba(62,200,245,0)}100%{box-shadow:0 0 0 0 rgba(62,200,245,0)}}
.hero h1{
  margin-top:22px;font-family:var(--display);font-weight:700;
  font-size:64px;line-height:1.02;letter-spacing:-.03em;color:#fff;
}
.hero h1 .accent{color:#8ec3ff}
.hero .sub-en{margin-top:22px;max-width:1000px;color:rgba(255,255,255,.92);font-size:21px;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.hero .sub-en2{margin-top:12px;max-width:1000px;color:rgba(255,255,255,.6);font-size:16px;font-weight:500;line-height:1.55}

/* ---- demo intro band ---- */
.demobar{max-width:1500px;margin:0 auto 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.demobar .brand{display:flex;align-items:center;gap:16px}
.demobar .mark{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--visitor),var(--staff));display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:26px;color:var(--visitor-ink);box-shadow:0 12px 36px rgba(59,111,224,.4)}
.demobar .who b{font-family:var(--display);font-weight:700;font-size:20px}
.demobar .who span{display:block;font-size:13px;color:var(--text-faint);margin-top:2px}
.demobar .hint{font-size:13px;color:var(--text-dim);background:var(--deep);border:1px solid var(--line);padding:10px 18px;border-radius:999px;line-height:1.5}
.demobar .hint b{color:var(--visitor)}

/* ---- split stage : kiosk | desk ---- */
.split{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;
}
.device{
  background:linear-gradient(180deg,var(--deep),var(--abyss) 165%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;position:relative;min-height:760px;display:flex;flex-direction:column;
}
.device-label{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.device-label .dl{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.04em}
.device-label .dl .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.device-label.kiosk .dl .ic{background:rgba(62,200,245,.16);color:var(--visitor)}
.device-label.desk .dl .ic{background:rgba(59,111,224,.18);color:#9dc0ff}
.device-label .meta{font-size:12px;color:var(--text-faint)}
.device-body{flex:1;position:relative;overflow:hidden}

/* a "view" is one state inside a device */
.view{display:none;flex-direction:column;height:100%;padding:30px}
.view.on{display:flex;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.center{align-items:center;justify-content:center;text-align:center}

/* =========================================================
   KIOSK views
   ========================================================= */
/* ---- welcome band INSIDE the kiosk K1 (no contrasting background, blends in) ---- */
.k-band{
  margin:0 0 24px;
  padding:0;
}
.k-band .pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;border-radius:999px;background:rgba(47,128,237,.20);
  color:#9ecbff;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;
}
.k-band .pill .dot{width:8px;height:8px;border-radius:50%;background:#3ec8f5;animation:hpulse 1.6s infinite}
@keyframes hpulse{0%{box-shadow:0 0 0 0 rgba(62,200,245,.55)}70%{box-shadow:0 0 0 9px rgba(62,200,245,0)}100%{box-shadow:0 0 0 0 rgba(62,200,245,0)}}
.k-band h1{
  margin-top:14px;font-family:var(--display);font-weight:700;
  font-size:34px;line-height:1.04;letter-spacing:-.025em;color:#fff;
}
.k-band h1 .accent{color:#8ec3ff}
.k-band .lead{margin-top:13px;color:rgba(255,255,255,.9);font-size:15px;font-weight:700;line-height:1.45;letter-spacing:-.005em}
.k-band .lead2{margin-top:8px;color:rgba(255,255,255,.58);font-size:12.5px;font-weight:500;line-height:1.45}

/* hero / language pick */
.k-hero h1{font-family:var(--display);font-weight:700;font-size:38px;line-height:1.05;letter-spacing:-.01em;margin-top:6px}
.k-hero h1 .accent{background:linear-gradient(100deg,var(--visitor),var(--staff));-webkit-background-clip:text;background-clip:text;color:transparent}
.k-greet{margin-top:14px;height:30px;position:relative;overflow:hidden}
.k-greet span{position:absolute;inset:0;font-size:18px;color:var(--text-dim);opacity:0;transform:translateY(10px);transition:.5s}
.k-greet span.on{opacity:1;transform:none}

.k-step{margin-top:26px}
.k-step .n{font-family:var(--display);font-weight:700;font-size:14px;color:var(--visitor);width:32px;height:32px;border:1.5px solid var(--line-strong);border-radius:9px;display:grid;place-items:center;flex:none}
.k-step h2{font-size:18px;font-weight:700}
.k-step p{font-size:13px;color:var(--text-faint);margin-top:1px}

.k-langs{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* 8/6: 한 줄에 두 장으로 카드가 커졌다. 국기 위·이름 아래로 쌓으면 넓은 카드의 좌우가 비어
   어색하므로, 국기를 왼쪽에 세우고 오른쪽에 이름·안내를 왼쪽 맞춤으로 흘린다(읽는 방향과 같다).
   카드마다 그 언어로 된 안내 한 줄이 들어간다 — 누르면 무슨 일이 일어나는지 자기 말로 읽힌다. */
.k-lang{background:var(--deep-2);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:16px 18px;text-align:start;transition:transform .16s,border-color .16s,background .16s;
  position:relative;display:flex;align-items:center;gap:16px;min-width:0}
.k-lang:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.k-lang .flag{font-size:24px;flex:none;display:flex;align-items:center}
/* flex:1 을 주지 않는다 — 글 블록이 남는 폭을 다 먹으면 RTL 에서 국기가 카드 반대편 끝으로
   밀려 한 덩어리로 안 읽힌다(실측). 늘리지 않으면 국기 옆에 붙은 채 방향만 뒤집힌다. */
.k-lang .k-lang-txt{display:flex;flex-direction:column;min-width:0}
.k-lang .native{display:block;font-size:19px;font-weight:700;line-height:1.25}
.k-lang .name{display:block;font-family:var(--display);font-size:11px;color:var(--text-faint);margin-top:2px}
.k-lang .hint{display:block;font-size:12.5px;color:var(--text-dim);margin-top:7px;line-height:1.4;
  overflow-wrap:anywhere}
/* 아랍어 등 오른쪽부터 읽는 언어에 **별도 규칙이 없다** — `text-align:start` 와 flex 가
   `dir="rtl"` 을 알아서 따라간다. 물리속성(left/right)으로 쓰면 그 자동 반전이 깨지고,
   되돌리려 예외를 붙이면 예외가 또 예외를 부른다(이 카드에서 실제로 두 번 그랬다).
   shared.css 의 물리속성 금지 게이트가 그 길을 막아 준다. */
.k-lang[data-on="1"]{background:linear-gradient(180deg,rgba(62,200,245,.2),rgba(62,200,245,.04));border-color:var(--visitor);transform:translateY(-2px)}
.k-lang[data-on="1"]::after{content:"✓";position:absolute;top:8px;right:9px;font-size:12px;color:var(--visitor);font-weight:700}
.k-lang[dir="rtl"] .native{direction:rtl}

.k-call{
  margin-top:auto;width:100%;
  background:linear-gradient(100deg,var(--visitor),#23a6da);color:var(--visitor-ink);
  font-family:var(--display);font-weight:700;font-size:19px;
  padding:22px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;gap:12px;
  transition:filter .16s,transform .16s,box-shadow .16s;box-shadow:0 16px 44px rgba(62,200,245,.28)}
.k-call:hover{filter:brightness(1.05);transform:translateY(-2px)}
.k-call:disabled{background:var(--deep-2);color:var(--text-faint);box-shadow:none;cursor:not-allowed}
.k-call .sub{font-weight:500;font-size:13px;opacity:.72}

/* foot hint replacing the removed call button (pushes to bottom) */
.k-hint-foot{margin-top:auto;text-align:center;font-size:13px;color:var(--text-faint);padding-top:20px}

/* connecting state — 크기를 **한 값**으로 조절한다 (8/7)
   두 번 연속 "더 크게" 요청이 왔다(150 → 195 → 390). 원·아이콘·글자를 매번 따로 고치면
   비율이 어긋나므로, `--conn` 하나에서 전부 파생시킨다. 다음에 또 바꾸려면 이 숫자만 만진다.

   `min(390px, 62vw)` 인 이유: 키오스크는 크게 보여야 하지만 방문객 폰은 폭이 390px 라
   원 하나가 화면을 꽉 채운다. 좁으면 화면에 맞춰 줄고, 넓으면 390px 에서 멈춘다.

   아이콘은 SVG 의 width/height **속성**으로 그려지고 기본값이 18px 이라 `font-size` 로는
   커지지 않는다(전에 96px 원 안에 18px 그림이 떠 있던 이유) — 여기서 크기를 못박는다. */
.pulse-ring{--conn:min(390px, 62vw);
  width:var(--conn);height:var(--conn);border-radius:50%;position:relative;display:grid;
  place-items:center;margin-bottom:calc(var(--conn) * .175)}
.pulse-ring .core{width:calc(var(--conn) * .64);height:calc(var(--conn) * .64);border-radius:50%;
  background:linear-gradient(135deg,var(--visitor),var(--staff));display:grid;place-items:center;z-index:2}
.pulse-ring .core .ai-ico{width:calc(var(--conn) * .3);height:calc(var(--conn) * .3);stroke-width:1.4}
/* 테두리도 함께 굵어져야 원이 커진 만큼 또렷하다(2px 로 두면 큰 원에서 실선처럼 얇아 보인다). */
.pulse-ring .ripple{position:absolute;inset:0;border-radius:50%;
  border:max(2px, calc(var(--conn) * .01)) solid var(--visitor);animation:ripple 1.8s ease-out infinite}
.pulse-ring .ripple:nth-child(2){animation-delay:.6s}
.pulse-ring .ripple:nth-child(3){animation-delay:1.2s}
@keyframes ripple{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* 원만 키우면 글자가 상대적으로 작아져 화면이 비어 보인다 — 같은 비율로 함께 키운다.
   글자는 vw 로 흐르되 상·하한을 둔다: 좁은 폰에서 제목이 두 줄로 접히지 않게, 큰 화면에서
   과하게 커지지 않게. */
.connect-t{font-family:var(--display);font-size:clamp(26px, 6.4vw, 46px);font-weight:600;line-height:1.15}
.connect-s{font-size:clamp(15px, 3.4vw, 25px);color:var(--text-dim);margin-top:14px;line-height:1.6}
.connect-q{margin-top:30px;font-size:clamp(13px, 2.6vw, 20px);color:var(--text-faint);
  background:var(--deep-2);border:1px solid var(--line);padding:14px 28px;border-radius:999px}
.cancel{margin-top:22px;font-size:clamp(14px, 2.8vw, 21px);color:var(--text-faint);
  text-decoration:underline;text-underline-offset:4px;
  padding:14px 22px;min-height:44px;min-width:44px}  /* 8/1 UI 감사: 텍스트 링크 터치 타깃 44px 확보 */

/* queue (all busy) */
.queue-ring{position:relative;width:160px;height:160px;margin-bottom:26px}
.queue-svg{width:160px;height:160px;transform:rotate(-90deg)}
.queue-svg circle{fill:none;stroke-width:8;stroke-linecap:round}
.queue-svg .qbg{stroke:var(--deep-3)}
.queue-svg .qfg{stroke:var(--visitor);stroke-dasharray:327;stroke-dashoffset:120;transition:stroke-dashoffset .6s ease;filter:drop-shadow(0 0 6px rgba(62,200,245,.5))}
.queue-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.queue-num b{font-family:var(--display);font-size:46px;font-weight:700;line-height:1;color:var(--visitor)}
.queue-num span{font-size:12px;color:var(--text-faint);margin-top:5px;line-height:1.3;text-align:center}
.queue-info{margin-top:24px;width:100%;max-width:340px;background:var(--deep-2);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 18px}
.queue-info .qi{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.queue-info .qi:last-child{border-bottom:0}
.queue-info .qi .l{color:var(--text-faint)}
.queue-info .qi b{font-weight:700;font-family:var(--display)}

/* =========================================================
   shared : ribbon, thread, waveform, controls
   ========================================================= */
.ribbon{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;flex:none}
.ribbon .side{flex:1;padding:13px 18px;display:flex;align-items:center;gap:11px}
.ribbon .lab{font-family:var(--display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.ribbon .lng{font-size:15px;font-weight:700;margin-top:1px}
.ribbon .dotc{width:11px;height:11px;border-radius:50%;flex:none}
.ribbon .v{background:linear-gradient(90deg,rgba(62,200,245,.14),transparent)}
.ribbon .v .dotc{background:var(--visitor)}
.ribbon .s{background:linear-gradient(270deg,rgba(59,111,224,.16),transparent);justify-content:flex-end;text-align:end}
.ribbon .s .dotc{background:var(--staff)}
.ribbon .mid{width:50px;display:grid;place-items:center;background:var(--deep-2);font-size:18px;color:var(--text-dim);flex:none}

/* 8/3: 말풍선·리본은 **논리속성**만 쓴다(text-align:start/end · border-start-*-radius).
   아랍어에서 documentElement.dir="rtl" 이 되는데 left/right 는 따라 뒤집히지 않아,
   방문객·상담원 말풍선의 꼬리와 정렬이 서로 반대로 붙었다. */
.thread{flex:1;overflow-y:auto;padding:18px 4px;display:flex;flex-direction:column;gap:16px;margin-top:14px;min-height:0}
.thread::-webkit-scrollbar{width:5px}.thread::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.daydiv{align-self:center;font-family:var(--display);font-size:11px;letter-spacing:.1em;color:var(--text-faint);padding:5px 14px;border:1px solid var(--line);border-radius:999px}
.turn{max-width:88%;display:flex;flex-direction:column;gap:6px}
.turn .who{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text-dim)}
.turn .who .tag{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.turn .who .swatch{width:8px;height:8px;border-radius:50%}
.msg{border-radius:16px;padding:14px 16px;border:1px solid var(--line)}
.msg .orig{font-size:16px;line-height:1.45;font-weight:500}
.msg .tr{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:14px;line-height:1.5;color:var(--text-dim)}
.msg .mini{display:block;font-family:var(--display);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px}
.tstamp{font-size:11px;color:var(--text-faint);font-family:var(--display)}
.turn.v{align-self:flex-start}.turn.v .who .swatch{background:var(--visitor)}
.turn.v .msg{background:linear-gradient(180deg,rgba(62,200,245,.13),rgba(62,200,245,.03));border-color:rgba(62,200,245,.32);border-start-start-radius:5px}
.turn.s{align-self:flex-end;align-items:flex-end}.turn.s .who{flex-direction:row-reverse}.turn.s .who .swatch{background:var(--staff)}
.turn.s .msg{background:linear-gradient(180deg,rgba(59,111,224,.15),rgba(59,111,224,.04));border-color:rgba(59,111,224,.36);border-start-end-radius:5px;text-align:end}
.turn.s .msg .tr{text-align:end}
/* a prior info-bot exchange loaded into history — read-only context, muted + dashed so it reads
   as background vs the live interpretation turns. */
.turn.bot{align-self:flex-start;opacity:.92}
.turn.bot .who .swatch{background:#8b93a7}
.turn.bot .msg{background:linear-gradient(180deg,rgba(139,147,167,.10),rgba(139,147,167,.03));border-color:var(--line);border-style:dashed;border-start-start-radius:5px}
.turn.bot .botq{font-size:13px;color:var(--text-dim);margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line)}

/* kiosk is the VISITOR's own view → mirror: visitor on the right, staff on the left */
#kThread .turn.v{align-self:flex-end;align-items:flex-end}
#kThread .turn.v .who{flex-direction:row-reverse}
#kThread .turn.v .msg{border-start-start-radius:16px;border-start-end-radius:5px;text-align:end}
#kThread .turn.v .msg .tr{text-align:end}
#kThread .turn.s{align-self:flex-start;align-items:flex-start}
#kThread .turn.s .who{flex-direction:row}
#kThread .turn.s .msg{border-start-end-radius:16px;border-start-start-radius:5px;text-align:start}
#kThread .turn.s .msg .tr{text-align:start}

.spine{margin-top:12px;background:var(--deep);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;flex:none}
.spine-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.spine-head b{font-size:13px;font-weight:700}.spine-head span{font-family:var(--display);font-size:11px;color:var(--text-faint)}
.wave{height:60px;display:flex;align-items:center;justify-content:center;gap:2.5px}
.wave i{width:4px;border-radius:2px;background:var(--text-faint);transition:height .12s,background .3s}
.wave.speak-v i{background:var(--visitor)}
.wave.speak-s i{background:var(--staff)}
/* mic paused (text-input mode) */
.spine.paused{opacity:.5}
.spine.paused .wave i{background:var(--text-faint)!important;height:6px!important;transition:none}
.spine-head .pausetag{color:var(--visitor);display:none}
.spine.paused .spine-head .pausetag{display:inline}
.spine.paused .spine-head .livetag{display:none}
/* direct text input panel */
.typebox{margin-top:12px;background:var(--deep);border:1px solid var(--staff);border-radius:var(--r-md);padding:14px 16px;flex:none;display:none}
.typebox.on{display:block;animation:fade .3s ease}
.typebox .th{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.typebox .th b{font-size:13px;font-weight:700}
.typebox .th .micoff{font-family:var(--display);font-size:11px;color:var(--visitor)}
.typebox .field{display:flex;gap:9px}
.typebox input{flex:1;background:var(--deep-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;color:var(--text);font-family:var(--body);font-size:15px;outline:none}
.typebox input:focus{border-color:var(--staff)}
.typebox input::placeholder{color:var(--text-faint)}
.typebox .send{background:linear-gradient(100deg,var(--staff),#2f5cc4);color:#fff;font-family:var(--display);font-weight:700;font-size:14px;padding:0 20px;border-radius:var(--r-sm);transition:filter .16s}
.typebox .send:hover{filter:brightness(1.08)}
.typebox .closeb{font-size:12px;color:var(--text-faint);text-decoration:underline;text-underline-offset:3px;margin-top:9px;display:inline-block}

/* 8/3 적대감사 A-1: RTL(ar/he/fa/ur)에서 grid 가 inline 방향을 따라 좌우 반전돼 '닫기'가
   맨 왼쪽으로 가고 그 자리에 '자막'이 왔다 — 방문객은 닫기가 안 먹힌다고 느낀다.
   종료 같은 물리 위치 기억이 중요한 컨트롤 행은 방향을 고정한다(라벨은 그대로 현지어). */
.controls{margin-top:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;flex:none;direction:ltr}
.controls .ctrl{direction:initial}
.ctrl{background:var(--deep-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .16s,border-color .16s}
.ctrl:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.ctrl .ic{font-size:19px}.ctrl b{font-size:13px;font-weight:700}.ctrl span{font-family:var(--display);font-size:10px;color:var(--text-faint)}
.ctrl.end{background:rgba(90,134,240,.12);border-color:rgba(90,134,240,.34)}.ctrl.on{background:rgba(62,200,245,.12);border-color:var(--visitor)}

/* =========================================================
   DESK views
   ========================================================= */
.desk-idle{align-items:center;justify-content:center;text-align:center}
.desk-idle .z{font-size:50px;opacity:.5;margin-bottom:18px}
.desk-idle .t{font-family:var(--display);font-size:20px;font-weight:600;color:var(--text-dim)}
.desk-idle .s{font-size:14px;color:var(--text-faint);margin-top:8px}
.desk-stat{margin-top:26px;display:flex;gap:12px}
.desk-stat .box{background:var(--deep-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 20px;text-align:center}
.desk-stat .box b{display:block;font-family:var(--display);font-size:24px;font-weight:700;color:var(--visitor)}
.desk-stat .box span{font-size:11px;color:var(--text-faint);margin-top:3px;display:block}

/* incoming call card */
.callcard{background:linear-gradient(180deg,var(--deep-3),var(--deep-2));border:1.5px solid var(--staff);border-radius:var(--r-md);padding:24px;animation:ring 1.4s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(59,111,224,.4)}50%{box-shadow:0 0 0 12px rgba(59,111,224,0)}}
.callcard .top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.callcard .av{width:54px;height:54px;border-radius:14px;background:rgba(62,200,245,.16);display:grid;place-items:center;font-size:26px;flex:none}
.callcard .top b{font-family:var(--display);font-size:18px;font-weight:600}
.callcard .top span{display:block;font-size:13px;color:var(--text-dim);margin-top:2px}
.callcard .row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.callcard .row .l{color:var(--text-faint)}.callcard .row .r{font-weight:700}
.callcard .lng-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(62,200,245,.14);color:var(--visitor);padding:5px 12px;border-radius:999px;font-weight:700;font-size:14px}
.callcard .acts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}
.accept{background:linear-gradient(100deg,var(--staff),#2f5cc4);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;padding:16px;border-radius:var(--r-sm);transition:filter .16s,transform .16s}
.accept:hover{filter:brightness(1.08);transform:translateY(-1px)}
.decline{background:var(--deep);border:1px solid var(--line);color:var(--text-dim);font-weight:600;font-size:14px;padding:16px;border-radius:var(--r-sm)}
.queue-note{margin-top:14px;text-align:center;font-size:12px;color:var(--text-faint)}

/* desk quick replies */
.qr-bar{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;flex:none}
.qr-chip{background:var(--deep-2);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:12.5px;color:var(--text-dim);transition:border-color .16s,color .16s}
.qr-chip:hover{border-color:var(--staff);color:var(--text)}

/* console (operations) mini board appended under split */
.board{max-width:1500px;margin:24px auto 0;background:linear-gradient(180deg,var(--deep),var(--abyss) 165%);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px}
.board-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.board-head b{font-size:16px;font-weight:700}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kio{background:var(--deep-2);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
.kio .kh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kio .kh b{font-family:var(--display);font-size:15px}
.kio .badge{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.05em;padding:5px 11px;border-radius:999px}
.badge.idle{background:rgba(120,165,220,.12);color:var(--text-faint)}
.badge.wait{background:rgba(62,200,245,.16);color:var(--visitor)}
.badge.live{background:rgba(59,111,224,.18);color:#9dc0ff}
.kio .krow{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:6px 0;color:var(--text-dim)}
.kio .krow .v{color:var(--text);font-weight:600}

.ptt{width:100%;margin-top:12px;padding:18px;border:0;border-radius:var(--r-md);font-family:var(--display);font-weight:700;font-size:18px;background:linear-gradient(100deg,var(--visitor),#23a6da);color:var(--visitor-ink);box-shadow:0 12px 32px rgba(62,200,245,.28);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;transition:filter .12s,transform .1s}
.ptt:active{transform:scale(.98)}
.ptt.rec{background:linear-gradient(100deg,#e5484d,#b3282d);color:#fff;box-shadow:0 0 0 4px rgba(229,72,77,.28)}
@media (max-width:1080px){.split{grid-template-columns:1fr}.board-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 8/13(민원 2): 마이크를 여는 중. 눌린 것은 보이되 '듣는 중'과는 다르게 보여야 한다 —
   같아 보이면 방문객은 아직 담기지 않는 구간에 말한다. 이 규칙이 없으면 그 상태가 화면에서
   사라지고(CSS 는 오류를 안 낸다) 처방이 무의미해진다. */
.ptt.opening,.mic.opening{opacity:.72;cursor:progress}
.ptt.opening i,.mic.opening i{animation:pttOpening 1s ease-in-out infinite}
@keyframes pttOpening{0%,100%{opacity:.45}50%{opacity:1}}