/* Callix KO 메인 #demo — 업종별 AI 상담원 체험 (F03-KO-DEMO-DESIGN-AND-COPY-FINAL)
   index-ko.html에서만 읽는다(JA 영향 없음). 토큰 · 버튼 체계는 callix.css 그대로.
   기능 소개(화면 안내 = 연한 블루 · 왼쪽 설명 / 오른쪽 휴대폰)와 다르게, '직접 걸어 보는 체험 무대'로 만든다.
   PC(>1100): 흰 페이지 위 딥네이비 무대 [업종 메시지 | 가운데 휴대폰 | 흰 전화 카드]
   태블릿(901~1100): [업종 메시지(위 전체)] / [휴대폰 | 전화 카드]
   모바일: 업종 메시지 → 전화 카드 → 휴대폰 → 이전/다음 (전화 카드가 휴대폰보다 먼저) */

/* Hero · FAQ · 하단의 #demo 링크로 오면 섹션 위 여백을 건너뛰어 제목과 무대가 함께 보이게 한다 */
#demo{scroll-margin-top:calc(8px - var(--sec-pad))}
/* F06.3 — JA 제목은 「、」 · 구절 경계(​)에서만 줄바꿈(「AIオペレーター」가 쪼개지지 않게 · 준비 중 / 개통 두 문구 모두) */
html[lang="ja"] #kd-h{word-break:keep-all}

.kd__show{margin-top:clamp(24px,2.6vw,36px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tabs nav" "stage stage";gap:18px 20px;align-items:center}
.kd__tabs{grid-area:tabs;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.kd__tabs::-webkit-scrollbar{display:none}
.kd__tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px 0 14px;border-radius:var(--r-pill);
  border:1px solid var(--cx-line);background:#fff;color:var(--cx-ink-2);font-size:15px;font-weight:700;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.kd__tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--cx-ink-3);transition:color .2s ease}
.kd__tab:hover{border-color:var(--cx-ink-3);color:var(--cx-ink)}
.kd__tab[aria-selected="true"]{background:#0E1A3A;border-color:#0E1A3A;color:#fff;box-shadow:var(--sh-1)}
.kd__tab[aria-selected="true"] svg{color:#8FC4FF}
.kd__tab:focus-visible,.kd__arrow:focus-visible{outline:3px solid var(--cx-blue-deep);outline-offset:2px}

.kd__nav{grid-area:nav;display:flex;align-items:center;gap:10px}
.kd__arrow{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--cx-line);background:#fff;color:var(--cx-ink);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.kd__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kd__arrow:hover{border-color:var(--cx-ink);box-shadow:var(--sh-1)}
.kd__arrow:active{transform:scale(.96)}
.kd__count{min-width:52px;text-align:center;font-size:14px;font-weight:700;color:var(--cx-ink-3);font-variant-numeric:tabular-nums}
.kd__count b{color:var(--cx-ink);font-weight:800}
.kd__count span{margin:0 3px}
.kd__show--one .kd__nav{display:none}

/* ---------- 체험 무대(딥네이비) ---------- */
.kd__stage{grid-area:stage;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 316px minmax(0,320px);grid-template-areas:"copy visual call";
  align-items:center;gap:0 clamp(24px,2.6vw,40px);padding:clamp(34px,3.4vw,48px) clamp(28px,3.2vw,48px);border-radius:var(--r-xl);color:#fff;overflow:hidden;touch-action:pan-y;
  background:linear-gradient(160deg,#0C1530 0%,#12224A 58%,#0B1733 100%);box-shadow:0 32px 64px -28px rgba(12,21,48,.55)}
/* 가운데 휴대폰 뒤의 은은한 조명 + 통화 신호를 뜻하는 동심원 2개(전화 장면임을 알리는 배경) */
.kd__stage::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(64,140,255,.30),rgba(64,140,255,0));pointer-events:none}

.kd__copy{grid-area:copy;min-width:0;align-self:center}
.kd__ctx{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#8FC4FF}
.kd__ico{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(143,196,255,.12);color:#8FC4FF}
.kd__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kd__title{margin-top:16px;font-size:clamp(20px,1.6vw,24px);line-height:1.42;letter-spacing:-.025em;font-weight:500;color:rgba(255,255,255,.74);min-height:5.68em;text-wrap:pretty}
.kd__title b{display:block;font-weight:800;color:#fff}
.kd__asks{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0;list-style:none}
.kd__asks li{padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:700;color:rgba(255,255,255,.86)}
.kd__gain{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.74);min-height:4.95em}
.kd__gain svg{flex:none;width:22px;height:22px;margin-top:1px;padding:4px;border-radius:50%;background:rgba(61,220,151,.16);fill:none;stroke:#5BE3A8;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 휴대폰 ---------- */
.kd__visual{grid-area:visual;position:relative;margin:0;display:grid;place-items:center;min-height:580px;padding-bottom:18px}
.kd__visual::before,.kd__visual::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;border-radius:50%;border:1px solid rgba(143,196,255,.16);transform:translate(-50%,-50%);pointer-events:none}
.kd__visual::before{width:400px;height:400px}
.kd__visual::after{width:540px;height:540px;border-color:rgba(143,196,255,.08)}
.kd-phone{position:relative;z-index:1;width:288px;padding:10px;border-radius:48px;background:linear-gradient(160deg,#3B4559,#151A25 55%);
  box-shadow:0 44px 80px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 1.5px rgba(255,255,255,.18)}
.kd-phone__screen{position:relative;display:flex;flex-direction:column;height:540px;border-radius:38px;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F4F8FE 100%)}
.kd-phone__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px 0;font-size:12px;font-weight:800;color:var(--cx-ink)}
.kd-phone__bar i{width:84px;height:24px;border-radius:14px;background:#11151D}
.kd-phone__sig{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.kd-phone__sig b{width:3px;border-radius:1px;background:var(--cx-ink)}
.kd-phone__sig b:nth-child(1){height:4px}.kd-phone__sig b:nth-child(2){height:6px}.kd-phone__sig b:nth-child(3){height:8px}.kd-phone__sig b:nth-child(4){height:11px}
.kd-phone__who{display:grid;justify-items:center;text-align:center;padding:16px 16px 14px}
.kd-phone__av{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;font-size:18px;font-weight:800;
  box-shadow:0 0 0 6px rgba(91,107,240,.12),0 10px 22px rgba(91,107,240,.35)}
.kd-phone__name{margin-top:10px;font-size:16.5px;font-weight:800;color:var(--cx-ink)}
.kd-phone__line{margin-top:2px;font-size:12.5px;color:var(--cx-ink-3);font-variant-numeric:tabular-nums}
.kd-phone__tag{margin-top:8px;display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--cx-line);font-size:11.5px;font-weight:800;color:var(--cx-ink-2)}
.kd-phone__tag .kb-wave{color:var(--cx-blue-deep)}
.kd-phone__chat{flex:1;display:flex;flex-direction:column;gap:8px;padding:6px 12px 60px;border-top:1px solid var(--cx-line-2)}
.kd-bub{max-width:92%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.55;color:var(--cx-ink);margin-top:6px}
.kd-bub b{display:block;font-size:10.5px;font-weight:800;color:var(--cx-ink-3);margin-bottom:2px}
.kd-bub--cust{align-self:flex-end;background:#fff;border:1px solid var(--cx-line);border-top-right-radius:6px}
.kd-bub--ai{align-self:flex-start;background:var(--cx-blue-soft);border-top-left-radius:6px}
.kd-bub--ai b{color:var(--cx-blue-text)}

/* 휴대폰 아래쪽에 걸친 결과 카드 — 상담원 연결(handoff) · AI 상담원 안내(done) */
.kd-out{position:absolute;z-index:2;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;align-items:center;gap:11px;width:300px;padding:13px 14px;border-radius:16px;background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.35);border:1px solid var(--cx-line-2)}
.kd-out__ico{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#E9F8F1;color:#14794F}
.kd-out--hand .kd-out__ico{background:#EEF0FE;color:#4352D8}
.kd-out--hand .kd-out__ico svg{stroke-width:1.8}
.kd-out__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kd-out__b{display:grid;gap:1px;font-size:11.5px;line-height:1.45;color:var(--cx-ink-3)}
.kd-out__b b{font-size:13px;font-weight:800;color:var(--cx-ink)}

/* ---------- 전화 카드 — 이 섹션의 1순위. 어두운 무대 위 흰 카드 ---------- */
.kd-call{grid-area:call;align-self:center;display:grid;min-width:0;padding:28px 26px 26px;border-radius:24px;background:#fff;color:var(--cx-ink);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.kd-call__head{display:flex;align-items:center;gap:12px}
.kd-call__ico{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--cx-blue-deep);box-shadow:0 0 0 6px rgba(47,128,237,.14)}
.kd-call__ico svg,.kd-call__go svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kd-call__k{font-size:14px;font-weight:700;line-height:1.4;color:var(--cx-ink-3)}
.kd-call__k span{color:var(--cx-ink)}
/* (F07.1) 큰 번호 자리 = 체험 제목(같은 위계 · 한 단계 작게) · 안내 · 체험 버튼 1 · 새 창 안내. 번호 · 상태 점 · 복사 버튼은 없앴다 */
.kd-call__t{margin-top:18px;font-size:clamp(21px,1.7vw,24px);font-weight:800;letter-spacing:-.01em;line-height:1.35;color:var(--cx-ink);text-wrap:balance}
.kd-call__t span{display:inline-block}  /* JA 의미 단위 줄바꿈(「AIオペレーターと / 実際に話してみませんか？」) */
.kd-call__hint{margin-top:8px;font-size:13.5px;line-height:1.65;color:var(--cx-ink-3);text-wrap:pretty}
.kd-call__act{display:grid;gap:10px;margin-top:20px}
.kd-call__go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 24px;border-radius:var(--r-pill);background:var(--cx-blue-deep);color:#fff;font-size:16.5px;font-weight:800;text-decoration:none;box-shadow:0 10px 22px -8px rgba(47,128,237,.6)}
.kd-call__go svg{width:20px;height:20px}
.kd-call__go[href]:hover{background:#2470d8}
.kd-call__go:focus-visible{outline:3px solid var(--cx-blue);outline-offset:2px}
/* 체험 URL이 없는 업종(KO 전체) — 준비 중 · 눌러도 이동 없음 */
.kd-call__go[aria-disabled="true"]{background:var(--cx-bg-soft);color:var(--cx-ink-3);box-shadow:none;cursor:default}
.kd-call__go[aria-disabled="true"] svg{stroke:currentColor}
.kd-call__note{margin-top:10px;font-size:12.5px;line-height:1.5;text-align:center;color:var(--cx-ink-3)}
.kd-call__note[hidden]{display:none}

.kd__more{margin-top:18px;font-size:var(--fs-small);color:var(--cx-ink-3)}
.kd__more a{margin-left:6px;white-space:nowrap;color:var(--cx-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- 전환 연출 (사용자가 직접 바꿀 때만 · 자동 넘김 없음) ---------- */
@keyframes kd-in-next{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes kd-in-prev{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes kd-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes kd-pop-c{from{opacity:0;transform:translate(-50%,8px) scale(.97)}to{opacity:1;transform:translateX(-50%)}}
.kd__stage.is-in[data-dir="next"] .kd__copy > *{animation:kd-in-next .45s cubic-bezier(.2,.7,.2,1) both}
.kd__stage.is-in[data-dir="prev"] .kd__copy > *{animation:kd-in-prev .45s cubic-bezier(.2,.7,.2,1) both}
.kd__stage.is-in .kd__copy > :nth-child(2){animation-delay:.04s}
.kd__stage.is-in .kd__copy > :nth-child(3){animation-delay:.08s}
.kd__stage.is-in .kd__copy > :nth-child(4){animation-delay:.12s}
.kd__stage.is-in[data-dir="next"] .kd-phone__who,.kd__stage.is-in[data-dir="prev"] .kd-phone__who{animation:kd-pop .4s ease both}
.kd__stage.is-in .kd-bub--cust{animation:kd-pop .4s ease .15s both}
.kd__stage.is-in .kd-bub--ai{animation:kd-pop .4s ease .65s both}
.kd__stage.is-in .kd-out{animation:kd-pop-c .45s ease 1.1s both}
.kd__stage.is-in .kd-call__k{animation:kd-pop .35s ease both}
@media (prefers-reduced-motion:reduce){
  .kd__stage.is-in *,.kd__stage.is-in .kd__copy > *{animation:none !important}
  .kd__tab,.kd__arrow,.kd__tab svg{transition:none}
}

/* ---------- 반응형 ---------- */
@media (max-width:1100px){
  .kd__stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy copy" "visual call";gap:28px 32px}
  .kd__title{min-height:0}
  .kd__gain{min-height:0}
}
@media (max-width:900px){
  .kd__show{grid-template-columns:minmax(0,1fr);grid-template-areas:"tabs" "stage" "nav";gap:14px}
  .kd__nav{justify-content:center}
  .kd__stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "call" "visual";gap:22px;padding:26px 20px 28px}
  .kd__stage::before{top:auto;bottom:-120px;transform:translateX(-50%);width:520px;height:520px}
  .kd__title{min-height:5.68em}
  .kd__gain{min-height:4.95em}
  .kd__visual{min-height:0;padding:8px 0 22px}
  .kd__visual::before{width:300px;height:300px}
  .kd__visual::after{width:400px;height:400px}
  .kd-call{max-width:440px;width:100%;justify-self:center}
}
@media (max-width:560px){
  .kd__tabs{gap:6px}
  .kd__tab{flex:1 1 auto;justify-content:center;min-height:44px;padding:0 10px;font-size:14.5px}
  .kd__tab svg{display:none}
  /* (F07.1) 업종 4개 — JA 탭 이름(クリニック · レストラン)이 단어 중간에서 끊기지 않게 여백 · 글자만 줄인다 */
  html[lang="ja"] .kd__tab{padding:0 7px;font-size:13.5px;white-space:nowrap}
  .kd__stage{padding:22px 16px 24px;border-radius:var(--r-lg)}
  .kd__title{font-size:19px;margin-top:12px}
  .kd__asks{display:none}
  .kd__gain{margin-top:12px;font-size:14px}
  .kd-call{padding:20px 18px}
  .kd-call__ico{width:42px;height:42px;border-radius:13px}
  .kd-call__ico svg{width:21px;height:21px}
  .kd-call__t{margin-top:14px;font-size:20px}
  .kd-call__act{margin-top:16px}
  .kd-phone{width:min(100%,262px);border-radius:42px;padding:8px}
  .kd-phone__screen{height:440px;border-radius:34px}
  .kd-phone__bar{padding:10px 20px 0}
  .kd-phone__who{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av name" "av line" "tag tag";justify-items:start;text-align:left;column-gap:12px;padding:14px 16px 12px}
  .kd-phone__av{grid-area:av;width:46px;height:46px;font-size:15px;box-shadow:0 0 0 5px rgba(91,107,240,.12),0 8px 18px rgba(91,107,240,.3)}
  .kd-phone__name{grid-area:name;margin-top:0;align-self:end;font-size:15px}
  .kd-phone__line{grid-area:line;align-self:start}
  .kd-phone__tag{grid-area:tag;margin-top:10px}
  .kd-phone__chat{padding:4px 10px 56px}
  .kd-bub{font-size:13px}
  .kd-out{width:min(100%,276px);bottom:-4px;padding:11px 12px}
}

/* ---------- (F04 · 2026-10-21) 고객 DB 조회 줄 — 고객 말 다음에 연동된 고객 DB에서 확인한 내용(데이터 call.lookup) · KO · JA 공용 ---------- */
.kd-bub--sys{align-self:stretch;max-width:100%;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:8px 11px;border-radius:12px;background:#F3F6FB;border:1px dashed #BFCBDD;font-size:12px;line-height:1.5;color:var(--cx-ink-2)}
.kd-bub--sys b{display:inline-flex;flex:none;align-items:center;gap:4px;margin:0;padding:2px 8px;border-radius:999px;background:#fff;border:1px solid #BFCBDD;font-size:10.5px;font-weight:800;color:var(--cx-blue-text);white-space:nowrap}
.kd-bub--sys b svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kd-bub--sys span{flex:1 1 160px;min-width:0}
.kd__stage.is-in .kd-bub--sys{animation:kd-pop .4s ease .4s both}
.kd__stage.is-in .kd-bub--sys ~ .kd-bub--ai{animation-delay:.9s}
.kd__stage.is-in .kd-bub--sys ~ .kd-out{animation-delay:1.3s}