@charset "utf-8";
/* ============================================================
   Callix Product Site — Core Stylesheet
   RSUPPORT CO., LTD.
   Structure : tokens > reset > layout > components > sections
               > ui-mockups > responsive
   ============================================================ */

/* ------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------ */
:root{
  /* Brand */
  --cx-blue:          #6BC9F2;
  --cx-blue-deep:     #2F80ED;
  --cx-blue-soft:     #EAF6FE;
  --cx-blue-text:     #1F6BD1;   /* OWNER-A1: 작은 파란 글자 전용(흰 5.1 · blue-soft 4.7:1). 면 · 선 · 그래픽은 --cx-blue-deep 유지 */
  --cx-red:           #FF5B41;
  --cx-red-soft:      #FFEFEB;
  --cx-navy:          #16295C;
  --cx-violet:        #6C6CF0;

  /* Brand gradient (deck signature) */
  --cx-grad:          linear-gradient(100deg,#6BC9F2 0%,#BFE4F6 30%,#F4F1EE 50%,#FFB6A3 74%,#FF5B41 100%);
  --cx-grad-soft:     linear-gradient(100deg,#DBF0FB 0%,#F2F7FA 50%,#FFE3DB 100%);
  --cx-grad-blue:     linear-gradient(135deg,#8AD5F5 0%,#2F80ED 100%);

  /* Ink & surface */
  --cx-ink:           #16181D;
  --cx-ink-2:         #4A505C;
  --cx-ink-3:         #666E7D;  /* N8 대비: 흰 5.1 · bg-soft 4.8 · blue-soft 4.7 (이전 #7C8494 = 3.5~3.8) */
  --cx-line:          #E4E8EF;
  --cx-line-2:        #F0F2F6;
  --cx-bg:            #FFFFFF;
  --cx-bg-soft:       #F5F7FA;
  --cx-bg-card:       #FFFFFF;

  /* Type scale */
  --fs-display:       clamp(34px, 5.2vw, 60px);
  /* 제목 위계 (D-29 확장): Hero 60 > 하단 CTA(Hero 짝) 44 > 주요 섹션 H2 = Core 제목 축 38 > 보조 섹션 H2 32 > 장면 제목 */
  --fs-h1:            clamp(26px, 3.05vw, 44px);   /* 하단 CTA 제목 (.head--lg) */
  --fs-h2:            clamp(24px, 2.65vw, 38px);   /* 주요 섹션 — Core 제목(.cx-h)과 같은 축 */
  --fs-h2-sub:        clamp(22px, 2.25vw, 32px);   /* 보조 섹션 — Use Cases · FAQ */
  --fs-h3:            clamp(20px, 2.1vw, 26px);
  --fs-h4:            clamp(17px, 1.5vw, 20px);
  --fs-body:          clamp(15px, 1.15vw, 17px);
  --fs-small:         14px;
  --fs-xs:            13px;

  /* Radius & shadow */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  26px;
  --r-xl:  34px;
  --r-pill:999px;
  --product-radius: var(--r-md); /* 製品スクリーンショット共通の角丸（.shot / .shot__bar 内画像は 0） */
  --sh-1: 0 2px 8px rgba(20,28,45,.06);
  --sh-2: 0 10px 30px rgba(20,28,45,.08);
  --sh-3: 0 24px 60px rgba(20,28,45,.12);

  /* Layout */
  --wrap: 1200px;
  --gutter: 24px;
  /* 섹션 리듬: 기본 96 / 390 48 · 보조(콜백) 72 / 40 · 제목 블록 eyebrow→H2 16 · H2→리드 12 · 제목→내용 40 / 28 */
  --sec-pad: clamp(48px, 6.67vw, 96px);
  --sec-pad-sm: clamp(40px, 5vw, 72px);
  --gap-eyebrow: 16px;
  --gap-lede: 12px;
  --gap-content: clamp(28px, 2.8vw, 40px);
  --gap-evidence: clamp(32px, 3.6vw, 52px);   /* 머리(제목 · 리드) → 증거 블록(Admin 무대 · 서비스 격자 · 사례 카드) — D-50 */
  --header-h: 72px;
}

/* Language-specific font stacks.
   KO : Pretendard 우선, 없으면 시스템 한글 폰트
   JA : Noto Sans JP 우선, 없으면 시스템 일본어 폰트 */
html[lang="ko"] body{
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  word-break:keep-all;
}
html[lang="ja"] body{
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",
    "Yu Gothic","Meiryo",system-ui,sans-serif;
  word-break:normal;
  line-break:strict;
}

/* ------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;background:var(--cx-bg);color:var(--cx-ink);
  font-size:var(--fs-body);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--cx-blue-deep);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-pad)}
.section--soft{background:var(--cx-bg-soft)}
.section--tint{background:var(--cx-grad-soft)}
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center{text-align:center}
.stack-8 >*+*{margin-top:8px}
.stack-16>*+*{margin-top:16px}
.stack-24>*+*{margin-top:24px}
.stack-40>*+*{margin-top:40px}

/* ------------------------------------------------------------
   4. Typography components
   ------------------------------------------------------------ */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-small);font-weight:700;letter-spacing:.04em;
  color:var(--cx-blue-text);background:var(--cx-blue-soft);
  padding:7px 16px;border-radius:var(--r-pill);
}
.eyebrow--red{color:#D8402A;background:var(--cx-red-soft)}

/* 2단 헤드라인 : 1행 라이트 + 2행 볼드 (Callix 덱 고유 패턴) */
.head{font-size:var(--fs-h2);line-height:1.28;letter-spacing:-.02em;font-weight:400}
.head b,.head strong{font-weight:800}
.head--lg{font-size:var(--fs-h1)}
.hero .eyebrow{color:var(--cx-blue-text)} /* D-59: Hero 칩도 작은 글자용 파랑(OWNER-A1 · blue-soft 위 4.7:1) — 배경 · 테두리 · 반경 · 배치 불변 */
.eyebrow + .head{margin-top:var(--gap-eyebrow)}
.head + .lede{margin-top:var(--gap-lede)}
.head--lg + .lede{margin-top:18px}
.head--sm{font-size:var(--fs-h3);line-height:1.4}
.lede{margin-top:18px;color:var(--cx-ink-2);font-size:var(--fs-body);line-height:1.85}
.rule-left{border-left:3px solid var(--cx-ink);padding-left:20px}

/* ------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 28px;border-radius:var(--r-pill);
  font-size:16px;font-weight:700;letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--cx-ink);color:#fff;box-shadow:var(--sh-2)}
.btn--primary:hover{background:#000}
.btn--blue{background:var(--cx-blue-deep);color:#fff;box-shadow:0 8px 22px rgba(47,128,237,.32)}
.btn--ghost{background:#fff;color:var(--cx-ink);box-shadow:inset 0 0 0 1.5px var(--cx-line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cx-ink)}
.btn--line-w{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn--sm{min-height:42px;padding:0 20px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row--center{justify-content:center}
.arrow::after{content:"→";font-weight:600}

/* ------------------------------------------------------------
   6. Header / GNB
   ------------------------------------------------------------ */
.header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.header.is-stuck{border-bottom-color:var(--cx-line);box-shadow:0 2px 14px rgba(20,28,45,.05)}
.header__inner{display:flex;align-items:center;gap:28px;height:100%}
.header .brand{flex:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.02em}
.brand__mark{width:30px;height:30px;flex:none}
.gnb{display:flex;gap:6px;margin-inline-start:16px}
.gnb a{
  display:block;padding:10px 14px;border-radius:var(--r-xs);
  font-size:15px;font-weight:600;color:var(--cx-ink-2);white-space:nowrap;
  transition:color .15s,background .15s;
}
@media (max-width:1280px){.gnb a{padding:10px 9px;font-size:14px}.header__inner{gap:16px}}
.gnb a:hover{color:var(--cx-ink);background:var(--cx-bg-soft)}
.gnb .gnb__cta{display:none}
.header__side{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang{display:flex;gap:2px;padding:4px;background:var(--cx-bg-soft);border-radius:var(--r-pill)}
.lang a{padding:6px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--cx-ink-3)}
.lang a[aria-current="page"]{background:#fff;color:var(--cx-ink);box-shadow:var(--sh-1)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--r-xs);align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--cx-ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--cx-ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

/* ------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------ */
.hero{position:relative;background:var(--cx-grad);overflow:hidden;padding-block:clamp(40px,5vw,64px) clamp(56px,7vw,96px)}
.hero__card{
  background:#fff;border-radius:var(--r-xl);padding:clamp(32px,4.4vw,64px);
  box-shadow:var(--sh-3);
}
.hero__top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.hero h1{font-size:var(--fs-display);line-height:1.2;letter-spacing:-.03em;font-weight:400}
.hero h1 b{display:block;font-weight:800}
.hero__sub{margin-top:20px;font-size:clamp(16px,1.5vw,20px);color:var(--cx-ink-2)}
.hero__meta{margin-top:32px;padding-top:24px;border-top:1px solid var(--cx-line);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;font-size:var(--fs-small);color:var(--cx-ink-3)}
.hero__visual{margin-top:clamp(32px,4vw,56px)}

/* Hero AI + human 비주얼 */
.aiplus{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,20px);flex-wrap:wrap}
.aiplus__avatar{width:clamp(72px,9vw,112px);height:clamp(72px,9vw,112px);border-radius:50%;overflow:hidden;
  background:var(--cx-grad-blue);display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:var(--sh-2)}
.aiplus__tile{width:clamp(104px,13vw,168px);height:clamp(104px,13vw,168px);border-radius:var(--r-lg);
  display:grid;place-items:center;font-size:clamp(34px,4.6vw,58px);font-weight:800;color:#fff;box-shadow:var(--sh-2)}
.aiplus__tile--ai{background:linear-gradient(140deg,#5B6BF0,#8E5BF0 55%,#3F4FD8)}
.aiplus__tile--human{background:#F1F5F9;color:var(--cx-ink);font-size:clamp(13px,1.4vw,16px);
  text-align:center;line-height:1.5;padding:14px}
.aiplus__plus{width:clamp(38px,4.4vw,56px);height:clamp(38px,4.4vw,56px);flex:none;
  display:grid;place-items:center;background:var(--cx-blue-deep);color:#fff;
  font-size:clamp(24px,2.8vw,34px);font-weight:800;border-radius:10px;box-shadow:var(--sh-2)}
.wave{display:flex;align-items:center;gap:4px;height:56px}
.wave i{display:block;width:3px;border-radius:2px;background:rgba(255,255,255,.85)}
.wave--ink i{background:rgba(22,41,92,.35)}

/* ------------------------------------------------------------
   8. Cards & generic blocks
   ------------------------------------------------------------ */
.card{background:var(--cx-bg-card);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,36px);box-shadow:var(--sh-1);
  border:1px solid var(--cx-line-2);height:100%}
.card--flat{box-shadow:none;background:var(--cx-bg-soft);border-color:transparent}
.card__num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--cx-ink);color:#fff;font-size:14px;font-weight:800;margin-bottom:16px}
.card__title{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;line-height:1.45}
.card__desc{margin-top:10px;color:var(--cx-ink-2);font-size:15px;line-height:1.8}

/* 문제제기 카드 */
.pain{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--cx-line);
  border-radius:var(--r-md);padding:22px 24px}
.pain__q{flex:none;width:30px;height:30px;border-radius:50%;background:var(--cx-red-soft);color:#D8402A;
  display:grid;place-items:center;font-weight:800;font-size:15px}
.pain p{font-size:15.5px;line-height:1.7}

/* 2단 피처 블록 (텍스트 + 목업) */
.feature{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,64px);align-items:center}
.feature--rev .feature__media{order:-1}
.feature__media{min-width:0}
.feature + .feature{margin-top:clamp(56px,7vw,104px)}

/* 4분면 보드 */
.quad{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.quad__grid{display:grid;grid-template-columns:1fr 1fr}
.quad__cell{padding:clamp(24px,3vw,40px);border-right:1px solid var(--cx-line);border-bottom:1px solid var(--cx-line);
  min-height:clamp(200px,22vw,280px);display:flex;flex-direction:column;gap:14px}
.quad__cell:nth-child(2n){border-right:0}
.quad__cell:nth-last-child(-n+2){border-bottom:0}
.quad__cell h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em}
.quad__cell p{color:var(--cx-ink-2);font-size:15px;line-height:1.75}
.quad__art{margin-top:auto}

/* 3열 프로세스 */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--sh-2);overflow:hidden}
.tri__col{padding:clamp(24px,3vw,40px);border-right:1px solid var(--cx-line);display:flex;flex-direction:column;gap:18px}
.tri__col:last-child{border-right:0}
.tri__label{font-size:15px;color:var(--cx-ink-2);line-height:1.5}
.tri__label b{display:block;font-size:var(--fs-h3);font-weight:800;color:var(--cx-ink);letter-spacing:-.02em;margin-top:4px}

/* 지표 */
.stat{display:flex;flex-direction:column;gap:6px}
.stat__num{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.stat__label{font-size:14px;color:var(--cx-ink-3)}

/* 인용 */
.quote{font-size:clamp(18px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.6;text-align:center}
.quote b{font-weight:800}

/* 신뢰 배지 */
.badge{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--cx-line);
  border-radius:var(--r-md);padding:22px 24px}
.badge__ico{flex:none;width:46px;height:46px;border-radius:12px;background:var(--cx-bg-soft);
  display:grid;place-items:center;color:var(--cx-blue-deep)}
.badge__t{display:block;font-weight:800;font-size:15.5px;line-height:1.45}
.badge__d{display:block;font-size:13.5px;color:var(--cx-ink-3);margin-top:4px;line-height:1.6}

/* FAQ — 구성 · 모양은 27절(D-49) */
#faq .head,#usecase .head{font-size:var(--fs-h2-sub);line-height:1.32}

/* 하단 CTA 밴드 */
.cta-band{background:var(--cx-grad);padding-block:clamp(48px,5.6vw,80px)}
.cta-band__card{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-3);
  padding:clamp(28px,3.6vw,52px) clamp(24px,4.4vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(28px,4vw,64px)}
.cta-band__text .lede{margin-top:14px;max-width:620px}
.cta-band__act{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:260px}
.cta-band__act .btn-row{flex-direction:column;gap:10px}
.cta-band__act .btn{width:100%;justify-content:center}
.cta-band__act .cta-band__tel{margin-top:16px;text-align:center}
@media (max-width:860px){.cta-band__card{grid-template-columns:1fr;gap:24px}.cta-band__act{min-width:0}}

/* ------------------------------------------------------------
   9. UI Mockups (PDF 일본어 화면 → 코드 재현, 언어별 텍스트 치환)
   ------------------------------------------------------------ */
.mock{background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-3);overflow:hidden;
  border:1px solid var(--cx-line);font-size:12px;line-height:1.5;color:var(--cx-ink)}
.mock__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#F7F8FA;border-bottom:1px solid var(--cx-line)}
.mock__dots{display:flex;gap:6px}
.mock__dots i{width:10px;height:10px;border-radius:50%;display:block}
.mock__dots i:nth-child(1){background:#FF5F57}
.mock__dots i:nth-child(2){background:#FEBC2E}
.mock__dots i:nth-child(3){background:#28C840}
.mock__url{flex:1;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-pill);
  padding:4px 14px;font-size:11px;color:var(--cx-ink-3)}
.mock__body{display:flex;min-height:280px}

/* 좌측 사이드바 */
.mock-side{width:190px;flex:none;border-right:1px solid var(--cx-line);padding:16px 12px;background:#FCFCFD}
.mock-side__brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;padding:0 6px 14px}
.mock-side__brand svg{width:18px;height:18px}
.mock-side__sel{display:flex;align-items:center;justify-content:space-between;gap:6px;
  border:1px solid var(--cx-line);border-radius:8px;padding:7px 10px;font-size:11.5px;color:var(--cx-ink-2);margin-bottom:14px}
.mock-side__cap{font-size:10.5px;font-weight:700;color:var(--cx-ink-3);letter-spacing:.04em;padding:12px 8px 6px}
.mock-side a,.mock-side span.item{display:block;padding:7px 10px;border-radius:7px;font-size:12px;color:var(--cx-ink-2)}
.mock-side .is-active{background:#EEF2F7;color:var(--cx-ink);font-weight:700}

/* 우측 본문 */
.mock-main{flex:1;min-width:0;padding:18px 20px;background:#FBFCFE}
.mock-main__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.mock-main__title{font-size:11px;color:var(--cx-ink-3);font-weight:700}
.mock-main__title b{display:block;font-size:17px;color:var(--cx-ink);font-weight:800;letter-spacing:-.02em}
.mock-main__tools{display:flex;gap:10px;font-size:11px;color:var(--cx-ink-3)}
.mock-btn{display:inline-flex;align-items:center;gap:6px;background:var(--cx-blue-deep);color:#fff;
  border-radius:var(--r-pill);padding:7px 14px;font-size:11.5px;font-weight:700}
.mock-btn--ghost{background:#fff;color:var(--cx-ink-2);box-shadow:inset 0 0 0 1px var(--cx-line)}
.mock-btn--dark{background:var(--cx-navy)}

/* 에이전트 카드 그리드 */
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.agent-card{background:#fff;border:1px solid var(--cx-line);border-radius:10px;padding:12px;box-shadow:var(--sh-1)}
.agent-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.agent-card__name{display:flex;align-items:flex-start;gap:8px;font-weight:700;font-size:12px;line-height:1.4}
.agent-card__name b{display:block;font-weight:700}
.agent-card__ico{width:22px;height:22px;border-radius:50%;background:var(--cx-blue-soft);flex:none;
  display:grid;place-items:center;font-size:11px}
.agent-card__meta{display:block;font-size:10px;color:var(--cx-ink-3);margin-top:3px;font-weight:400;white-space:nowrap}
.agent-card.is-off{opacity:.45}
.toggle{width:30px;height:17px;border-radius:var(--r-pill);background:var(--cx-blue-deep);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:2px;inset-inline-end:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.toggle.is-off{background:#D6DCE5}
.toggle.is-off::after{inset-inline-end:auto;inset-inline-start:2px}
.chip{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);background:#EEF2F7;
  font-size:10px;font-weight:700;color:var(--cx-ink-3)}

/* 폼 목업 */
.form-mock{display:grid;grid-template-columns:1.25fr .9fr;gap:16px}
.form-sec__h{font-size:12.5px;font-weight:800;margin-bottom:10px}
.field{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:center;margin-bottom:8px}
.field__l{font-size:10.5px;color:var(--cx-ink-2);font-weight:600}
.field__l i{color:var(--cx-red);font-style:normal}
.field__v{background:#fff;border:1px solid var(--cx-line);border-radius:7px;padding:7px 10px;font-size:11px;color:var(--cx-ink-2)}
.radio-row{display:flex;gap:6px;flex-wrap:wrap}
.radio{border:1px solid var(--cx-line);border-radius:7px;padding:6px 9px;font-size:10.5px;background:#fff;
  display:flex;align-items:center;gap:5px;color:var(--cx-ink-2)}
.radio i{width:9px;height:9px;border-radius:50%;border:1.5px solid #C6CEDA;display:block;flex:none}
.radio.is-on{border-color:var(--cx-blue-deep);color:var(--cx-ink);font-weight:700}
.radio.is-on i{border-color:var(--cx-blue-deep);background:var(--cx-blue-deep);box-shadow:inset 0 0 0 2px #fff}
.textarea{background:#fff;border:1px solid var(--cx-line);border-radius:8px;padding:10px 12px;
  font-size:10.5px;color:var(--cx-ink-3);line-height:1.75;max-height:150px;overflow:hidden}
.panel{background:#fff;border:1px solid var(--cx-line);border-radius:10px;padding:12px}
.panel__h{font-size:12px;font-weight:800;margin-bottom:10px}
.panel__row{padding:9px 0;border-bottom:1px solid var(--cx-line-2)}
.panel__row:last-child{border-bottom:0}
.panel__row b{display:block;font-size:11px;font-weight:700}
.panel__row span{display:block;font-size:10px;color:var(--cx-ink-3);margin-top:2px;line-height:1.5}
.select{margin-top:6px;white-space:nowrap;display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--cx-line);border-radius:7px;padding:6px 10px;font-size:10.5px;color:var(--cx-ink-2)}

/* 말풍선 대화 목업 */
.chatbox{background:linear-gradient(160deg,#DCE4F7,#C9D6F2 55%,#B9C6EE);border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,30px);box-shadow:var(--sh-2)}
.chatbox__t{text-align:center;font-size:14px;font-weight:700;margin-bottom:18px;color:#1F2A44}
.chat{display:flex;flex-direction:column;gap:10px}
.bub{display:flex;align-items:flex-end;gap:8px;max-width:86%}
.bub--ai{align-self:flex-end;flex-direction:row-reverse}
.bub__av{width:30px;height:30px;border-radius:50%;flex:none;background:#fff;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:var(--cx-ink-3);box-shadow:var(--sh-1);overflow:hidden}
.bub--ai .bub__av{background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff}
.bub__txt{background:#fff;border-radius:14px;padding:9px 14px;font-size:12.5px;font-weight:600;
  box-shadow:var(--sh-1);line-height:1.6}
.bub__txt .hl-b{color:var(--cx-blue-deep);font-weight:800}
.bub__txt .hl-r{color:var(--cx-red);font-weight:800}
.bub--reply{margin-inline-start:34px;position:relative}
.chat__status{margin-top:18px;text-align:center;font-size:12px;font-weight:800;
  background:linear-gradient(90deg,#5B6BF0,#B45BF0);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 상담원 콘솔 목업 */
.console{display:grid;grid-template-columns:1fr 1.15fr .8fr;gap:0;font-size:11px}
.console__col{padding:12px;border-right:1px solid var(--cx-line);min-width:0}
.console__col:last-child{border-right:0}
.console__h{font-size:11.5px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.log{display:flex;flex-direction:column;gap:8px}
.log__row{background:#F6F8FC;border-radius:8px;padding:8px 10px;font-size:10.5px;line-height:1.6}
.log__row b{display:block;font-size:9.5px;color:var(--cx-ink-3);font-weight:700;margin-bottom:2px}
.assist{background:linear-gradient(180deg,#FDF2F6,#F3F1FE);border-radius:8px;padding:10px;margin-bottom:8px}
.assist__t{font-size:10.5px;font-weight:800;margin-bottom:5px}
.assist ul li{font-size:10px;color:var(--cx-ink-2);line-height:1.65;padding-inline-start:9px;position:relative}
.assist ul li::before{content:"·";position:absolute;inset-inline-start:0}
.kw{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.kw span{background:#EDF1FA;border-radius:var(--r-pill);padding:3px 9px;font-size:10px;font-weight:700;color:#3B4A6B}
.kw span i{font-style:normal;background:var(--cx-blue-deep);color:#fff;border-radius:50%;
  display:inline-grid;place-items:center;width:13px;height:13px;font-size:8.5px;margin-inline-start:4px}

/* 콜백 / 예약 목업 */
.cal{background:#fff;border:1px solid var(--cx-line);border-radius:10px;padding:10px;font-size:10px;box-shadow:var(--sh-1)}
.cal__h{display:flex;align-items:center;justify-content:space-between;font-weight:700;margin-bottom:8px;font-size:10.5px}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal__grid b{font-size:9px;color:var(--cx-ink-3);font-weight:700;padding:3px 0}
.cal__grid span{padding:4px 0;border-radius:6px;color:var(--cx-ink-2)}
.cal__grid span.mute{color:#C9CFD9}
.cal__grid span.on{background:var(--cx-navy);color:#fff;font-weight:700}
.cal__grid span.soft{background:var(--cx-blue-soft);color:var(--cx-blue-deep);font-weight:700}
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.metric{background:#fff;border:1px solid var(--cx-line);border-radius:9px;padding:8px;text-align:center;box-shadow:var(--sh-1)}
.metric b{display:block;font-size:9.5px;color:var(--cx-ink-3);font-weight:700}
.metric span{display:block;font-size:15px;font-weight:800;margin-top:2px}
.metric span.g{color:#12A150}.metric span.v{color:#7C3AED}
.metric span.r{color:#E5484D}.metric span.o{color:#F2851F}.metric span.b{color:var(--cx-blue-deep)}
.metric--wide{grid-column:span 4}

/* 모바일 위젯 목업 */
.phone{width:clamp(200px,22vw,244px);background:#fff;border-radius:26px;box-shadow:var(--sh-3);
  border:1px solid var(--cx-line);overflow:hidden;font-size:11px}
.phone__status{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 4px;font-size:9px;color:var(--cx-ink-3)}
.phone__nav{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--cx-line);font-weight:800;font-size:12px}
.phone__body{padding:12px 14px 18px}
.phone__list li{padding:9px 0;border-bottom:1px solid var(--cx-line-2);font-size:10.5px;color:var(--cx-ink-2);
  text-decoration:underline;text-underline-offset:3px}
.phone__cta{margin-top:14px;background:var(--cx-red-soft);border-radius:12px;padding:14px 12px;text-align:center}
.phone__cta small{display:block;font-size:9.5px;color:var(--cx-ink-3);margin-bottom:7px}
.phone__cta .pill{display:inline-flex;align-items:center;gap:6px;background:#E0264A;color:#fff;
  border-radius:var(--r-pill);padding:8px 16px;font-size:11px;font-weight:800}
.phone__cta p{font-size:9.5px;color:var(--cx-ink-3);margin-top:8px;line-height:1.6}
.phone__ghost{margin-top:10px;border:1px solid #E0264A;color:#E0264A;border-radius:var(--r-pill);
  padding:7px 14px;font-size:10.5px;font-weight:700;text-align:center}

/* 위젯 (챗+보이스) */
.widget{background:linear-gradient(150deg,#E7ECFA,#DCE3F8);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1)}
.widget__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.widget__bot{width:52px;height:52px;border-radius:14px;background:linear-gradient(140deg,#8C9BF5,#5B6BF0);
  display:grid;place-items:center;color:#fff;font-size:22px}
.widget__voice{width:64px;height:44px;border-radius:14px 14px 4px 14px;background:var(--cx-blue-deep);
  display:grid;place-items:center;color:#fff}
.widget__input{margin-top:14px;background:#fff;border-radius:var(--r-pill);padding:11px 14px;
  display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--cx-ink-3)}
.widget__send{width:24px;height:24px;border-radius:50%;background:var(--cx-navy);color:#fff;display:grid;place-items:center;font-size:11px}

/* 전환 흐름 (AI → 사람) */
.handoff{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.handoff__ai{width:64px;height:64px;border-radius:14px;background:linear-gradient(140deg,#5B6BF0,#3F4FD8);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px}
.handoff__arrow{font-size:22px;color:var(--cx-ink-3)}
.handoff__person{width:64px;height:64px;border-radius:14px;background:var(--cx-bg-soft);display:grid;place-items:center;font-size:26px}
.callcard{background:#fff;border:2px solid var(--cx-blue-deep);border-radius:14px;padding:12px;
  box-shadow:var(--sh-2);text-align:center;max-width:260px;margin-inline:auto;margin-top:14px}
.callcard__h{font-size:10.5px;font-weight:800;color:var(--cx-blue-deep);margin-bottom:6px;text-align:start}
.callcard__num{font-size:15px;font-weight:800;letter-spacing:-.01em}
.callcard__d{font-size:10px;color:var(--cx-ink-3);margin-top:4px;line-height:1.6}
.callcard__btns{display:flex;justify-content:center;gap:12px;margin-top:10px}
.callcard__btns i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:15px;font-style:normal}
.callcard__btns i:first-child{background:var(--cx-blue-deep)}
.callcard__btns i:last-child{background:#E5484D}
.oplist li{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--cx-line);
  border-radius:var(--r-pill);padding:8px 14px;font-size:11.5px;font-weight:600;box-shadow:var(--sh-1)}
.oplist li+li{margin-top:8px}
.oplist .av{width:24px;height:24px;border-radius:50%;background:var(--cx-bg-soft);flex:none;display:grid;place-items:center;font-size:11px}
.oplist .no{margin-inline-start:auto;color:var(--cx-blue-deep);font-weight:800}

/* 액션 태그 (SMS 전송 / 콜 포워딩) */
.acts{display:flex;flex-wrap:wrap;gap:8px}
.act{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:var(--r-pill);
  padding:9px 16px;font-size:12.5px;font-weight:700;box-shadow:var(--sh-2)}
.act i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-style:normal;flex:none}
.act--sms i{background:#FEF0D9;color:#C77700}
.act--call i{background:#FEF0D9;color:#C77700}
.tag-dark{display:inline-flex;align-items:center;gap:8px;background:var(--cx-ink);color:#fff;
  border-radius:var(--r-pill);padding:9px 18px;font-size:13px;font-weight:800}
.tag-line{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--cx-ink);
  border-radius:var(--r-pill);padding:8px 16px;font-size:12.5px;font-weight:700}

/* 체크 결과 카드 */
.testcard{background:#fff;border:1px solid var(--cx-line);border-radius:12px;padding:14px;position:relative;box-shadow:var(--sh-1)}
.testcard b{font-size:12px;font-weight:800}
.testcard .ln{height:12px;border-radius:6px;background:#DCE7F8;margin-top:8px}
.testcard .ln.w1{width:58%}.testcard .ln.w2{width:100%;height:22px}.testcard .ln.w3{width:74%}
.testcard .ok{position:absolute;top:-12px;inset-inline-end:-10px;width:34px;height:34px;border-radius:10px;
  background:#22C55E;color:#fff;display:grid;place-items:center;font-size:17px;font-weight:800;box-shadow:var(--sh-2)}
.cursor-tip{display:inline-flex;align-items:center;gap:8px;background:var(--cx-ink);color:#fff;
  border-radius:10px;padding:9px 15px;font-size:12px;font-weight:700}

/* 카드 안에 들어가는 축소 목업 */
.card .agent-grid{grid-template-columns:repeat(2,1fr)}
.card .mock{font-size:11px}
.card .mock-side{width:150px}

/* ------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------ */
.footer{background:#0E1116;color:#98A0AE;padding-block:clamp(48px,6vw,72px);font-size:14px}
.footer a{color:#C3C9D4}
.footer a:hover{color:#fff}
.footer__top{display:grid;grid-template-columns:1.2fr 2fr;gap:40px;padding-bottom:36px;border-bottom:1px solid #22262E}
.footer__brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:20px}
.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.footer__nav h4{color:#fff;font-size:14px;font-weight:800;margin-bottom:14px}
.footer__nav li+li{margin-top:9px}
.footer__nav a{font-size:13.5px}
.footer__info{padding-top:28px;font-size:13px;line-height:2}
.footer__info dl{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0}
.footer__info dt{font-weight:700;color:#C3C9D4}
.footer__info dd{margin:0}
.footer__legal{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:12.5px}
.footer__legal a{font-weight:700}
.footer__copy{margin-top:18px;font-size:12px;color:#6C7484;letter-spacing:.02em}
.footer__sns{display:flex;gap:10px;margin-top:20px}
.footer__sns a{width:36px;height:36px;border-radius:50%;background:#1A1F27;display:grid;place-items:center;font-size:14px}

/* ------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------ */
@media (max-width:1120px){
  :root{--header-h:64px}
  .gnb{display:none}
  .nav-toggle{display:flex}
  .header.is-open .gnb{
    display:flex;flex-direction:column;gap:2px;position:absolute;top:var(--header-h);inset-inline:0;
    background:#fff;border-bottom:1px solid var(--cx-line);padding:12px var(--gutter) 20px;margin:0;
    box-shadow:var(--sh-2);
  }
  .feature{grid-template-columns:1fr}
  .feature--rev .feature__media{order:0}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .tri{grid-template-columns:1fr}
  .tri__col{border-right:0;border-bottom:1px solid var(--cx-line)}
  .tri__col:last-child{border-bottom:0}
  .console{grid-template-columns:1fr}
  .console__col{border-right:0;border-bottom:1px solid var(--cx-line)}
  .footer__top{grid-template-columns:1fr}
}
@media (max-width:359px){
  /* 極小幅：ロゴ＋JA/KO切替＋メニューボタンを優先し、CTAはモバイルメニュー内へ移動
     초소폭: 로고+JA/KO 전환+메뉴 버튼을 우선하고 CTA는 모바일 메뉴로 이동 */
  .header__side .btn--sm{display:none}
  .header.is-open .gnb .gnb__cta{
    display:block;margin-top:8px;background:var(--cx-ink);color:#fff;
    text-align:center;border-radius:var(--r-pill);font-weight:700;
  }
  .header.is-open .gnb .gnb__cta:hover{background:#000;color:#fff}
}
@media (max-width:768px){
  :root{--gutter:18px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .quad__grid{grid-template-columns:1fr}
  .quad__cell{border-right:0}
  .quad__cell:nth-last-child(-n+2){border-bottom:1px solid var(--cx-line)}
  .quad__cell:last-child{border-bottom:0}
  .mock__body{flex-direction:column}
  .mock-side{width:100%;border-right:0;border-bottom:1px solid var(--cx-line);
    display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .mock-side__brand,.mock-side__sel,.mock-side__cap{display:none}
  .mock-side a,.mock-side span.item{padding:6px 10px;font-size:11px}
  .agent-grid{grid-template-columns:repeat(2,1fr)}
  .form-mock{grid-template-columns:1fr}
  .footer__nav{grid-template-columns:1fr 1fr}
  .hero__top{flex-direction:column}
  .hero__brand{display:none}
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%}
  .header .btn--sm{padding:0 14px;font-size:13px;min-height:38px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* 인쇄 시 목업 배경 유지 */
@media print{
  .header,.nav-toggle{display:none}
  .mock,.card{box-shadow:none;border:1px solid #ccc}
}

/* ------------------------------------------------------------
   12. JA Pilot v2 — 実製品スクリーンショット・説明用グラフィック
   (index-ja.html 用。既存 §9 のモック用クラスは index-ko.html が
    参照しているため残し、ここでは新クラスのみ追加する)
   ------------------------------------------------------------ */

/* Hero v2 */
.hero--v2 .hero__card{padding-bottom:clamp(28px,3.6vw,48px)}
.hero__h1{margin-top:18px}
.hero__btns{margin-top:32px}
.hero--v2 .hero__meta{gap:14px 24px}
.hero__tag{font-weight:700;color:var(--cx-ink-2)}
.hero__chips{display:flex;flex-wrap:wrap;gap:6px}
.hero__chips i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--cx-ink-2);background:var(--cx-bg-soft);
  border:1px solid var(--cx-line);border-radius:var(--r-pill);padding:4px 11px}
.hero__visual--shot{position:relative;margin-top:clamp(28px,3.6vw,44px)}
.shot--hero{margin-inline:auto;max-width:none}
.hero__flow{position:absolute;left:clamp(12px,3vw,40px);bottom:clamp(-18px,-1.6vw,-12px);
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-pill);padding:8px 14px 8px 8px;
  box-shadow:var(--sh-2);font-size:13px;font-weight:700}
.hero__flow-node{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--r-pill);background:var(--cx-bg-soft);color:var(--cx-ink)}
.hero__flow-node--ai{background:var(--cx-blue-deep);color:#fff}
.hero__flow-arrow{color:var(--cx-ink-3);font-weight:400}
.hero__flow-plus{color:var(--cx-blue-deep);font-size:12.5px}

/* スクリーンショット枠（実際の製品画面） */
.shot{margin:0;background:#fff;border-radius:var(--product-radius);box-shadow:var(--sh-3);overflow:hidden;
  border:1px solid var(--cx-line)}
.shot img{width:100%;height:auto;display:block;border-radius:0} /* 角丸はコンテナのみ（二重角丸禁止） */
/* 제품 라벨 줄 — 가짜 브라우저 창(신호등 점) 없이 제품 이름만 둔다 */
.shot__bar{display:flex;align-items:center;gap:8px;padding:7px 14px;background:#fff;border-bottom:1px solid var(--cx-line)}
.shot__url{flex:1;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-pill);
  padding:4px 14px;font-size:11.5px;color:var(--cx-ink-3);text-align:center}
.shot--wide{margin-top:40px}
.shot--narrow{max-width:520px}
.shot .cap{padding:12px 16px;border-top:1px solid var(--cx-line-2);margin:0}

/* キャプション：実画面 / イメージ の区別 */
.cap{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--cx-ink-3);flex-wrap:wrap}
.cap__tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.02em;
  border-radius:var(--r-pill);padding:3px 10px}
.cap__tag--real{background:var(--cx-blue-soft);color:var(--cx-blue-deep)}
.cap__tag--real::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cx-blue-deep)}
.cap__tag--concept{background:var(--cx-bg-soft);color:var(--cx-ink-3);border:1px dashed #C6CEDA}

/* セクション見出し（左：見出し／右：リード） */
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:24px clamp(28px,4vw,64px);align-items:end}
.sec-head .lede{margin-top:0}

/* 機能ラベル・チェックリスト・脚注・キーライン */
.feature__label{font-size:14px;font-weight:800;color:var(--cx-blue-deep);letter-spacing:.02em;margin-bottom:12px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.7}
.checks li+li{margin-top:8px}
.checks li::before{content:"✓";color:var(--cx-blue-deep);font-weight:800;flex:none}
.footnote{margin-top:18px;font-size:12.5px;color:var(--cx-ink-3);line-height:1.7}
.keyline{margin-top:16px;display:inline-block;font-size:clamp(16px,1.5vw,19px);font-weight:800;color:var(--cx-ink);
  background:var(--cx-red-soft);border-left:4px solid var(--cx-red);padding:10px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;line-height:1.5}
.feature .lede + .keyline{margin-top:16px}

/* Callixとは：4要素の関係図 */
.about__head{max-width:900px}
.sys{margin-top:44px;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-xl);box-shadow:var(--sh-2);
  padding:clamp(20px,3vw,40px)}
.sys__row{display:grid;grid-template-columns:.8fr auto 1fr auto 1.25fr;gap:12px;align-items:stretch}
.sys__node{background:var(--cx-bg-soft);border-radius:var(--r-md);padding:20px 18px;display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--cx-line-2);min-width:0}
.sys__node b{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em}
.sys__node>span{font-size:13.5px;color:var(--cx-ink-2);line-height:1.65}
.sys__ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:800;
  background:#fff;box-shadow:var(--sh-1);margin-bottom:6px}
.sys__ico img{width:24px;height:24px;display:block}
.sys__node--ai{background:var(--cx-blue-soft);border-color:#CFE8FA}
.sys__node--ai .sys__ico{background:var(--cx-blue-deep);color:#fff;font-size:15px}
.sys__node--human{background:#fff;border:1.5px solid var(--cx-line)}
.sys__node--cust .sys__ico{font-size:20px}
.sys__arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:64px;color:var(--cx-ink-3);font-size:11.5px;font-weight:700;text-align:center}
.sys__arrow::before{content:"→";font-size:26px;color:var(--cx-blue-deep);font-weight:400;line-height:1}
.sys__assist{margin-top:10px;background:linear-gradient(180deg,#FDF2F6,#F3F1FE);border-radius:var(--r-sm);padding:12px 14px;
  display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center}
.sys__assist i{font-style:normal;color:#B45BF0;font-weight:800;grid-row:span 2}
.sys__assist b{font-size:14px;font-weight:800}
.sys__assist span{font-size:12.5px;color:var(--cx-ink-2);line-height:1.5}
.sys__base{margin-top:14px;background:var(--cx-ink);color:#fff;border-radius:var(--r-md);padding:16px 22px;
  display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.sys__base b{font-size:15px;font-weight:800;letter-spacing:.01em}
.sys__base span{font-size:13.5px;color:#C3C9D4}

/* 会話バブル v2（自然な会話／引き継ぎ） */
.talk{background:var(--cx-bg-soft);border:1px solid var(--cx-line);border-radius:var(--r-lg);padding:clamp(12px,1.5vw,16px);box-shadow:var(--sh-2)}
.talk__t{font-size:15px;font-weight:800;margin:2px 6px 12px;color:var(--cx-ink)}
.talk__panel{background:#fff;border:1px solid var(--cx-line-2);border-radius:var(--r-md);padding:clamp(14px,1.8vw,20px)}
.talk__chat,.handoff2__chat{display:flex;flex-direction:column;gap:10px}
.tb{display:flex;align-items:flex-end;gap:8px;max-width:88%;position:relative}
.tb--ai{align-self:flex-start}
.tb--cust{align-self:flex-end;flex-direction:row-reverse}
.tb__av{width:30px;height:30px;border-radius:50%;flex:none;background:var(--cx-bg-soft);display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:var(--cx-ink-3);box-shadow:var(--sh-1)}
.tb--ai .tb__av{background:var(--cx-blue-deep);color:#fff}
.tb__txt{background:var(--cx-bg-soft);border-radius:14px;padding:9px 14px;font-size:13.5px;font-weight:500;line-height:1.6;color:var(--cx-ink)}
.tb--cust .tb__txt{background:var(--cx-blue-deep);color:#fff}
.tb__txt em{font-style:normal;font-weight:800}
.tb__txt .hl-b{color:var(--cx-blue-deep)}
.tb--cust .tb__txt .hl-r{color:#FFD8CF}
.tb--cut .tb__txt{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cx-red)}
.tb__note{position:absolute;right:38px;bottom:-18px;font-size:11px;color:#D8402A;font-weight:700;white-space:nowrap}
.tb--cut{margin-bottom:14px}
.talk__status{margin-top:10px;display:flex;align-items:center;gap:10px;
  background:var(--cx-blue-soft);border:1px solid #D7ECFB;border-radius:var(--r-sm);
  padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--cx-blue-deep)}
.talk__st-ico{display:grid;place-items:center;flex:none}
.talk__st-ico svg{display:block}
.talk__st-label{white-space:nowrap}
.talk__status .wave{height:14px;gap:2px;flex:1;min-width:48px;justify-content:center}
.talk__status .wave i{width:2px;background:rgba(47,128,237,.45)}
.talk__time{margin-inline-start:auto;font-variant-numeric:tabular-nums;color:var(--cx-ink-3);font-weight:700;white-space:nowrap}

/* 引き継ぎ 3ステップ */
.handoff2{display:grid;gap:12px}
.handoff2__step{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--sh-1)}
.handoff2__h{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:800;margin-bottom:12px;color:var(--cx-ink)}
.handoff2__h i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--cx-ink);color:#fff;font-size:11.5px;display:grid;place-items:center}
.handoff2 .tb{max-width:100%}
.handoff2 .tb__txt{font-size:12.5px}
.summary{background:linear-gradient(180deg,#FDF2F6,#F3F1FE);border-radius:var(--r-sm);padding:14px 16px}
.summary__t{font-size:12.5px;font-weight:800;margin-bottom:8px}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px}
.summary dt{font-weight:700;color:var(--cx-ink-3);white-space:nowrap}
.summary dd{margin:0;color:var(--cx-ink);line-height:1.55}
/* Step3: AIから渡された文脈 → 通話状態 → オペレーターの発話（着信UIではなく通話中UI） */
.takeover__ctx{background:var(--cx-bg-soft);border:1px solid var(--cx-line-2);border-radius:var(--r-sm);padding:12px 14px}
.takeover__from{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--cx-blue-deep);margin-bottom:8px}
.takeover__ico{display:grid;place-items:center;flex:none}
.takeover__ico svg{display:block}
.takeover__ctx dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px}
.takeover__ctx dt{font-weight:700;color:var(--cx-ink-3);white-space:nowrap}
.takeover__ctx dd{margin:0;color:var(--cx-ink);line-height:1.55}
.takeover__call{margin-top:10px;flex-wrap:wrap;padding:6px 12px;row-gap:4px}
.takeover__call .wave{height:11px;flex:0 1 100px}
.takeover__conn{flex-basis:100%;font-size:10.5px;font-weight:600;color:var(--cx-ink-3);line-height:1.4}
.takeover__say{margin-top:12px;padding-inline-start:12px;border-inline-start:3px solid var(--cx-blue-deep)}
.takeover__who{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:var(--cx-ink-2);margin-bottom:5px}
.takeover__who .wave{height:10px;gap:2px}
.takeover__who .wave i{width:2px;background:rgba(47,128,237,.4)}
.takeover__speech{font-size:12.5px;line-height:1.65;color:var(--cx-ink)}

/* AIアシスタント：Operator Workspace（左=STT / 右=Search & Assist） */
.ws{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.ws__bar{display:flex;align-items:center;gap:10px;background:var(--cx-blue-deep);color:#fff;padding:7px 14px}
.ws__title{font-size:11.5px;font-weight:800;letter-spacing:.01em;line-height:1.5}
.ws__live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;line-height:1.5;
  background:rgba(255,255,255,.18);border-radius:var(--r-pill);padding:2px 9px}
.ws__live i{width:5px;height:5px;border-radius:50%;background:#7CF2B0;display:block;flex:none}
.ws__body{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.ws__col{padding:14px;min-width:0}
.ws__col--stt{border-inline-end:1px solid var(--cx-line-2);background:#FCFDFE}
.ws__col--ai{background:#F8FBFE}
.ws__ch{font-size:12px;font-weight:800;color:var(--cx-ink);margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.ws__ch span{font-size:10.5px;font-weight:600;color:var(--cx-ink-3)}
.ws__ch--ai{color:var(--cx-blue-deep)}
/* STT transcript */
.stt__row+.stt__row{margin-top:9px}
.stt__meta{display:flex;align-items:baseline;gap:8px;font-size:10px;color:var(--cx-ink-3)}
.stt__meta b{font-weight:800;color:var(--cx-ink-2)}
.stt__row--cust .stt__meta b{color:var(--cx-blue-deep)}
.stt__txt{font-size:11.5px;line-height:1.6;color:var(--cx-ink);margin-top:2px;
  padding-inline-start:8px;border-inline-start:2px solid var(--cx-line)}
.stt__row--cust .stt__txt{border-inline-start-color:#BEDCF7}
/* Search & Assist */
.ws__search{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--cx-line);
  border-radius:var(--r-xs);padding:6px 10px;font-size:11px;color:var(--cx-ink-3)}
.ws__search-ico{display:grid;place-items:center;flex:none;color:var(--cx-ink-3)}
.ws__l{font-size:11px;font-weight:800;margin:12px 0 6px}
.kw2{display:flex;flex-wrap:wrap;gap:5px}
.kw2 span{background:#E7F0FD;border-radius:var(--r-pill);padding:3px 9px;font-size:10.5px;font-weight:700;color:#3B4A6B;display:inline-flex;align-items:center;gap:5px}
.kw2 span i{font-style:normal;background:var(--cx-blue-deep);color:#fff;border-radius:50%;display:inline-grid;place-items:center;width:14px;height:14px;font-size:9px}
.rec{margin-top:10px;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-sm);padding:10px 12px}
.rec--msg{background:#F7F5FE;border-color:#E3DCFA}
.rec__t{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--cx-ink);margin-bottom:5px}
.rec__ico{display:grid;place-items:center;flex:none;color:var(--cx-blue-deep)}
.rec--msg .rec__ico{color:#7C5CE0}
.rec__hint{margin-inline-start:auto;font-size:9.5px;font-weight:700;color:var(--cx-ink-3);
  background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-pill);padding:1px 7px;white-space:nowrap}
.rec__b{font-size:11.5px;line-height:1.6;color:var(--cx-ink)}
.rec__src{margin-top:5px;font-size:10px;font-weight:700;color:var(--cx-blue-deep)}
/* 通話ステータス（AI会話ビジュアルと同じグラマー） */
.ws__foot{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--cx-blue-soft);border-top:1px solid #D7ECFB}
.ws__st{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--cx-blue-deep);white-space:nowrap}
.ws__st-ico{display:grid;place-items:center;flex:none}
.ws__foot .wave{height:12px;gap:2px;flex:1;min-width:40px;justify-content:center}
.ws__foot .wave i{width:2px;background:rgba(47,128,237,.45)}
.ws__time{font-size:11px;font-weight:700;color:var(--cx-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ws__ctl{display:inline-flex;gap:5px;flex:none}
.ws__ctl i{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--cx-line);
  display:grid;place-items:center;color:var(--cx-ink-2)}
.ws__ctl .ws__ctl--end{background:#E5484D;border-color:#E5484D;color:#fff}

/* KPI カード（Admin） */
.kpi{margin-top:28px}
.kpi__card{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);padding:20px 22px}
.kpi__card b{display:block;font-size:15.5px;font-weight:800;margin-bottom:6px}
.kpi__card span{font-size:13.5px;color:var(--cx-ink-2);line-height:1.7}

/* タブ Showcase（設定・テスト） */
.tabs{margin-top:40px}
.tabs__list{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--cx-line);padding-bottom:14px}
.tabs__btn{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:var(--r-pill);font-size:14.5px;font-weight:700;
  color:var(--cx-ink-2);background:var(--cx-bg-soft);transition:background .15s,color .15s}
.tabs__btn i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--cx-ink-3);font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:var(--sh-1)}
.tabs__btn:hover{color:var(--cx-ink)}
.tabs__btn[aria-selected="true"]{background:var(--cx-ink);color:#fff}
.tabs__btn[aria-selected="true"] i{background:var(--cx-blue-deep);color:#fff}
.tabs__panel{margin-top:28px;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(20px,3vw,44px);align-items:start}
.tabs__panel[hidden]{display:none}
.tabs__text h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;line-height:1.4}
.tabs__text p{margin-top:14px;color:var(--cx-ink-2);font-size:15px;line-height:1.8}
.tabs__panel .shot--narrow{max-width:520px;margin-inline:auto}

/* モニタリング：大画面 + 縦パネル */
.mon{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:20px;align-items:stretch}
.mon .shot--tall{display:flex;flex-direction:column;min-height:0}
.mon .shot--tall img{flex:1;min-height:0;height:100%;object-fit:cover;object-position:top}
.mon__points{margin-top:28px}
.mon__points li{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);padding:18px 20px}
.mon__points b{display:block;font-size:15px;font-weight:800;margin-bottom:6px}
.mon__points span{font-size:13.5px;color:var(--cx-ink-2);line-height:1.7}

/* コールバック（付加機能） */
.cb{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,64px);align-items:center}
.cb__shot{margin-inline:auto;max-width:440px} /* 付加機能：意図的に他のNarrow(520px)より小さく */
.steps{margin-top:24px;counter-reset:st;display:grid;gap:10px}
.steps li{counter-increment:st;display:grid;grid-template-columns:28px 130px 1fr;gap:12px;align-items:center;
  background:var(--cx-bg-soft);border-radius:var(--r-sm);padding:12px 14px;font-size:14px}
.steps li::before{content:counter(st);width:26px;height:26px;border-radius:50%;background:var(--cx-ink);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.steps li b{font-weight:800}
.steps li span{color:var(--cx-ink-2);line-height:1.6}
.cb__more{margin-top:22px;font-size:13.5px;color:var(--cx-ink-2);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.cb__more b{color:var(--cx-ink);font-size:13px;background:var(--cx-bg-soft);border-radius:var(--r-pill);padding:3px 10px}

/* 活用シーン */
.scenes{margin-top:40px}
.scene{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px)}
.scene__no{font-size:12px;font-weight:800;color:var(--cx-blue-deep);letter-spacing:.06em}
.scene h3{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;margin-top:8px;line-height:1.45}
.scene__sit{margin-top:14px;font-size:14px;color:var(--cx-ink-3);padding-left:14px;border-left:2px solid var(--cx-line);line-height:1.7}
.scene__how{margin-top:12px;font-size:14.5px;color:var(--cx-ink-2);line-height:1.8}
.scene__how::before{content:"Callixでは";display:block;font-size:12px;font-weight:800;color:var(--cx-blue-deep);margin-bottom:4px}
html[lang="ko"] .scene__how::before{content:"Callix는"}

/* セキュリティ・信頼：製品 / 会社 の2列 */
.trust{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.trust__h{font-size:13px;font-weight:800;color:var(--cx-ink-3);letter-spacing:.04em;margin-bottom:12px}
.trust .badge+.badge{margin-top:12px}

/* CTA 電話 */
.cta-band__tel{margin-top:22px;font-size:14px;color:var(--cx-ink-3)}
.cta-band__tel a{font-weight:800;color:var(--cx-ink)}

/* Responsive (v2) */
@media (max-width:1120px){
  .sec-head{grid-template-columns:1fr;align-items:start}
  .sys__row{grid-template-columns:1fr 1fr;}
  .sys__node--human{grid-column:span 2}
  .sys__arrow{display:none}
  .mon{grid-template-columns:1fr}
  .shot--tall{max-width:520px}
  .mon .shot--tall img{height:auto;object-fit:contain}
  .cb{grid-template-columns:1fr}
  .tabs__panel{grid-template-columns:1fr}
}
@media (max-width:1120px){
  .ws__body{grid-template-columns:1fr}
  .ws__col--stt{border-inline-end:0;border-bottom:1px solid var(--cx-line-2)}
}
@media (max-width:768px){
  .ws__foot{flex-wrap:wrap}
  .ws__foot .wave{order:3;flex-basis:100%;justify-content:flex-start;min-width:0}
  .hero__flow{position:static;margin-top:16px;justify-content:center;width:100%}
  .sys__row{grid-template-columns:1fr}
  .sys__node--human{grid-column:auto}
  .trust{grid-template-columns:1fr}
  .steps li{grid-template-columns:28px 1fr}
  .steps li span{grid-column:2}
  .tb{max-width:100%}
  .tb__note{position:static;display:block;margin-top:4px;white-space:normal}
  .tb--cut{margin-bottom:0}
  .tabs__list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .tabs__btn{flex:none}
}
@media (max-width:480px){
  .hero--v2 h1{font-size:30px}
  .hero--v2 .hero__card{padding:26px 22px}
}
/* 言語切替 JA/KO / note アイコン */
.lang[hidden]{display:none}
/* 狭幅ではロゴ・CTA・メニューボタンと同じ行に収まるよう言語切替を圧縮 */
@media (max-width:560px){
  .lang{gap:0;padding:3px}
  .lang a{padding:5px 8px;font-size:12px}
}
.footer__sns--note,.footer__sns--sm{font-size:10px;font-weight:800;letter-spacing:-.02em}

/* Footer (lite) — JA 公開版：簡潔・ライト。旧 .footer スタイルは KO 用に保持 */
.footer--lite{background:var(--cx-bg-soft);color:var(--cx-ink-3);border-top:1px solid var(--cx-line);padding-block:clamp(40px,5vw,56px) 28px;font-size:13.5px;line-height:1.8}
.footer--lite a{color:var(--cx-ink-2)}
.footer--lite a:hover{color:var(--cx-ink)}
.footer__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:start;padding-bottom:28px;border-bottom:1px solid var(--cx-line)}
.footer--lite .footer__brand{color:var(--cx-ink);font-size:18px;gap:8px}
.footer--lite .footer__brand .brand__mark{width:24px;height:24px}
.footer__by{margin-top:10px;max-width:420px}
.footer__co p{margin:0}
.footer__co a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(70,78,92,.45)}
.footer__co a:hover,.footer__co a:focus-visible{color:var(--cx-ink);text-decoration-color:currentColor}
.footer__co-name{color:var(--cx-ink);font-weight:700}
.footer__sep{margin:0 8px;color:#C6CEDA}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding-top:22px}
.footer__links{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;font-weight:600}
.footer--lite .footer__sns{margin-top:0}
.footer--lite .footer__sns a{background:#fff;border:1px solid var(--cx-line);color:var(--cx-ink-2);width:32px;height:32px;font-size:12px}
.footer--lite .footer__sns a:hover{border-color:var(--cx-ink)}
.footer--lite .footer__copy{margin-top:22px;color:var(--cx-ink-3);font-size:12px}
@media (max-width:768px){
  .footer__row{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}
/* 公式ロゴ（callix-logo-good.svg, 156x60）— 比率維持、高さのみ指定 */
.brand__logo{height:30px;width:auto;display:block}
.hero__brand .brand__logo{height:34px}
.footer--lite .footer__brand .brand__logo{height:26px}
@media (max-width:768px){.brand__logo{height:26px}}

/* 会話バブル：話者ラベル（AIオペレーター / お客様 / オペレーター） */
.tb__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.tb--cust .tb__body{align-items:flex-end}
.tb__who{font-size:11px;color:var(--cx-ink-3);line-height:1.3;padding-inline:4px}
.tb__av svg{display:block;color:var(--cx-ink-3)}
.tb{align-items:flex-start}
.tb--ai .tb__av,.tb--cust .tb__av{margin-top:2px}
/* Security / Trust icons — 1 icon family (48 viewBox, flat 2-tone) */
.badge__ico{width:48px;height:48px;border-radius:12px}
.badge__ico img{width:28px;height:28px;display:block}

/* ------------------------------------------------------------
   13. Support Agent — 모바일 앱 화면 안내 (`.sa-*` 전용 네임스페이스)
   기존 공통 클래스는 수정하지 않고 이 블록만 추가합니다.
   ------------------------------------------------------------ */
.sa-stage{background:var(--cx-bg-soft);border:1px solid var(--cx-line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:clamp(16px,2vw,26px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.2vw,26px);align-items:center}
.sa-stage .sa-note{grid-column:1/-1}

/* 세로형 스마트폰 프레임 : 폭이 넓어져도 가로로 늘어나지 않도록 max-width + aspect-ratio 고정 */
.sa-phone{width:min(100%,300px);margin-inline:auto;aspect-ratio:9/18.5;
  padding:9px;border-radius:38px;background:#1B1E25;box-shadow:var(--sh-3)}
.sa-phone__screen{height:100%;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border-radius:30px;padding:10px 12px 8px}
.sa-phone__status{display:flex;align-items:center;justify-content:space-between;
  margin:0;padding:2px 6px 6px;font-size:11px;font-weight:800;color:var(--cx-ink);font-variant-numeric:tabular-nums}
.sa-phone__sig{display:flex;align-items:flex-end;gap:2px}
.sa-phone__sig i{width:3px;border-radius:1px;background:var(--cx-ink-3);display:block}
.sa-phone__sig i:nth-child(1){height:4px}
.sa-phone__sig i:nth-child(2){height:7px}
.sa-phone__sig i:nth-child(3){height:10px}
.sa-phone__bar{display:flex;align-items:center;gap:6px;margin:0;padding:8px 4px 12px;
  font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--cx-ink);border-bottom:1px solid var(--cx-line-2)}
.sa-phone__back{color:var(--cx-ink-3);font-size:18px;line-height:1}
.sa-phone__home{flex:none;width:96px;height:4px;border-radius:var(--r-pill);
  background:var(--cx-line);margin:10px auto 2px}

/* 앱 메뉴 목록 (중립적인 보안 설정 화면 예시) */
.sa-menu{margin:4px 0 0;padding:0;list-style:none}
.sa-menu li{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 8px;font-size:12.5px;font-weight:600;color:var(--cx-ink-2);
  border-bottom:1px solid var(--cx-line-2)}
.sa-menu li i{font-style:normal;color:var(--cx-ink-3);font-size:14px;line-height:1}
/* 선택 행 : 사방이 모두 닫힌 하나의 rounded rectangle.
   `.sa-menu li`(특이도 0,1,1)의 border-bottom 이 우선하지 않도록
   `li.sa-menu__target`(0,2,1)로 4면 border를 명시적으로 override 한다.
   padding은 border 두께만큼 줄여 다른 행과 텍스트·화살표 위치를 맞춘다. */
.sa-menu li.sa-menu__target{margin:5px 0;padding:9px 6px;overflow:visible;
  border:2px solid var(--cx-blue-deep);border-radius:var(--r-sm);
  background:var(--cx-blue-soft);color:var(--cx-blue-deep);font-weight:800}
.sa-menu li.sa-menu__target i{color:var(--cx-blue-deep)}

/* 화면 위 AI 안내 말풍선 */
.sa-tip{margin-top:auto;display:flex;gap:8px;align-items:flex-start;
  background:var(--cx-blue-soft);border:1px solid #D7ECFB;border-radius:var(--r-md);padding:10px 11px}
.sa-tip__av{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--cx-blue-deep);color:#fff;font-size:9.5px;font-weight:800}
.sa-tip__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sa-tip__who{font-size:10.5px;font-weight:800;color:var(--cx-blue-deep);letter-spacing:.01em}
.sa-tip__txt{font-size:12px;font-weight:500;line-height:1.6;color:var(--cx-ink)}
.sa-tip__txt b{font-weight:800;color:var(--cx-blue-deep)}

/* 안내 흐름 4단계 */
.sa-steps{counter-reset:sa;margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sa-steps li{counter-increment:sa;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;
  align-items:center;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-sm);padding:10px 14px}
.sa-steps li::before{content:counter(sa);grid-row:span 2;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--cx-ink);color:#fff;font-size:11.5px;font-weight:800}
.sa-steps b{font-size:13.5px;font-weight:800;color:var(--cx-ink);letter-spacing:-.01em}
.sa-steps span{font-size:12px;color:var(--cx-ink-3);line-height:1.5}

/* 범위 안내 : 조작 주체는 고객 */
.sa-note{margin:0;text-align:center;font-size:12.5px;line-height:1.7;color:var(--cx-ink-2);font-weight:600}

/* 폭이 확보되면 폰 + 단계 2열. 폰 컬럼은 300px 고정이라 데스크톱에서도 가로로 늘어나지 않음 */
@media (min-width:680px){
  .sa-stage{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .sa-steps{gap:12px}
}

/* ------------------------------------------------------------
   14. 보안·운영 신뢰성 — 좌우 6개 카드 equal height (KO / JA 공통)
   .trust > div 두 래퍼를 display:contents 로 풀어 6개 .badge 를
   .trust 그리드의 직접 아이템으로 만들고, grid-auto-rows:1fr 로
   3개 행 높이를 동일하게 맞춘다. (행 높이는 가장 높은 카드 기준이므로
   텍스트가 잘리거나 넘치지 않는다 — 언어별 글자 수 차이와 무관)
   2열일 때(≥769px)만 적용하고, 1열로 내려가는 ≤768px 에서는
   기존 동작(콘텐츠 자연 높이) 그대로 둔다.
   ------------------------------------------------------------ */
@media (min-width:769px){
  .trust{gap:12px 24px;grid-auto-rows:1fr;align-items:stretch}
  .trust > div{display:contents}
  .trust > div:first-child > *{grid-column:1}
  .trust > div:last-child  > *{grid-column:2}
  .trust .trust__h{grid-row:1;margin-bottom:0;align-self:end}
  .trust > div > .badge:nth-of-type(1){grid-row:2}
  .trust > div > .badge:nth-of-type(2){grid-row:3}
  .trust > div > .badge:nth-of-type(3){grid-row:4}
  .trust .badge + .badge{margin-top:0}
}

/* ------------------------------------------------------------
   15. 콜백 — 4역할 카드 (`.cb-role*` 전용 네임스페이스, KO / JA 공통)
   고객 → AI 상담원 → 상담원 → 관리자 순서를 2×2 로 배치한다.
   기존 토큰(--cx-line / --r-md / --cx-bg-soft / --cx-blue-deep)만 재사용하고
   다른 섹션 셀렉터는 건드리지 않는다.
   ------------------------------------------------------------ */
.cb-roles{counter-reset:cbr;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);
  grid-auto-rows:1fr}   /* 2행 높이를 맞춰 카드 4장이 같은 높이가 되도록 */
.cb-role{counter-increment:cbr;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);
  padding:clamp(20px,2.2vw,28px)}
.cb-role__h{display:flex;align-items:center;gap:10px}
.cb-role__h::before{content:counter(cbr);flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--cx-ink);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.cb-role__t{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;color:var(--cx-ink)}
.cb-role__d{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--cx-ink-2)}
/* 이미지 영역 : 네 장의 원본 비율이 제각각이라 높이를 고정하고 contain 으로 중앙 정렬해
   비율을 유지한 채 시각적 무게를 맞춘다 (늘리거나 자르지 않음) */
.cb-role__fig{flex:1;margin:clamp(16px,1.8vw,22px) 0 0;padding:clamp(14px,1.6vw,20px);
  background:var(--cx-bg-soft);border-radius:var(--r-sm);
  display:grid;place-items:center;min-height:0}
.cb-role__fig img{display:block;width:auto;height:auto;max-width:100%;
  max-height:clamp(240px,21vw,300px)}

@media (max-width:900px){
  .cb-roles{grid-template-columns:1fr}
  .cb-role__fig img{max-height:280px}
}
@media (max-width:400px){
  .cb-role{padding:18px}
  .cb-role__fig{padding:12px}
  .cb-role__fig img{max-height:250px}
}

/* ------------------------------------------------------------
   16. KO REVIEW BUILD V1 — 신규 IA 전용 컴포넌트
   기존 셀렉터는 수정하지 않는다. 전부 새 네임스페이스로 추가한다.
   ------------------------------------------------------------ */

/* 16-0 · 구 앵커 호환 (외부 참조 유지 · 시각 영향 0) */
.anchor{display:block;height:0;overflow:hidden}

/* 16-1 · 컨텍스트 바 : 모든 문의는 AI가 먼저 받는다 */
.ctxbar{display:inline-flex;align-items:center;gap:10px;background:var(--cx-ink);color:#fff;
  border-radius:var(--r-pill);padding:11px 22px;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.ctxbar::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--cx-blue)}
.ctx-wrap{margin-bottom:clamp(20px,2.4vw,32px)}

/* 16-2 · Platform 해결 경로 (V-1) — 갈래는 정확히 2개, 굵기·채도 동일 */
.pf{margin-top:44px;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);padding:clamp(20px,2.6vw,36px)}
.pf__entry{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:700}
.pf__entry b{color:var(--cx-ink-2);margin-inline-end:4px}
.pf__entry span{background:var(--cx-bg-soft);border-radius:var(--r-pill);padding:5px 14px;color:var(--cx-ink-2)}
.pf__spine{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:0;list-style:none}
.pf__spine li{position:relative;background:var(--cx-bg-soft);border:1px solid var(--cx-line);border-radius:var(--r-md);
  padding:16px 18px;font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.45}
.pf__spine li:nth-child(2){background:var(--cx-blue-soft);border-color:#CFE8FA}
.pf__spine li+li::before{content:"→";position:absolute;inset-inline-start:-14px;top:50%;transform:translateY(-50%);
  color:var(--cx-ink-3);font-weight:400;line-height:1}
.pf__fork{margin-top:16px;text-align:center;font-size:12.5px;font-weight:800;color:var(--cx-ink-3);letter-spacing:.02em}
.pf__paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
.pf__path{background:#fff;border:1.5px solid var(--cx-ink);border-radius:var(--r-md);padding:20px 22px}
.pf__path-n{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--cx-blue-deep)}
.pf__path-t{margin-top:8px;font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;line-height:1.45}
.pf__steps{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.pf__steps li{background:var(--cx-bg-soft);border-radius:var(--r-pill);padding:5px 12px;
  font-size:12.5px;font-weight:700;color:var(--cx-ink-2)}
.pf__tail{margin-top:14px;background:var(--cx-bg-soft);border-radius:var(--r-md);padding:14px 20px;
  font-size:13.5px;color:var(--cx-ink-2);line-height:1.7}
.pf__tail b{color:var(--cx-ink);font-weight:800}
@media (max-width:900px){
  .pf__spine{grid-template-columns:1fr;gap:22px}
  .pf__spine li+li::before{content:"↓";inset-inline-start:50%;top:-18px;transform:translateX(-50%)}
  .pf__paths{grid-template-columns:1fr}
}

/* 16-3 · Knowledge 3블록 (V-2) — 되돌아오는 화살표 0개 */
.kn{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.kn__b{position:relative;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:14px}
.kn__n{font-size:12px;font-weight:800;color:var(--cx-blue-deep);letter-spacing:.06em}
.kn__h{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;line-height:1.45}
.kn__l{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.kn__l li{background:var(--cx-bg-soft);border-radius:var(--r-pill);padding:6px 13px;
  font-size:12.5px;font-weight:700;color:var(--cx-ink-2)}
.kn__p{margin:0;font-size:13.5px;color:var(--cx-ink-2);line-height:1.75}
.kn__tech{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--cx-ink-3);
  background:var(--cx-bg-soft);border:1px solid var(--cx-line);border-radius:var(--r-pill);padding:3px 11px}
.kn__b+.kn__b::before{content:"→";position:absolute;inset-inline-start:-16px;top:50%;transform:translateY(-50%);
  color:var(--cx-ink-3);line-height:1}
@media (max-width:900px){
  .kn{grid-template-columns:1fr;gap:28px}
  .kn__b+.kn__b::before{content:"↓";inset-inline-start:50%;top:-22px;transform:translateX(-50%)}
}

/* 16-4 · 실제 제품 UI 소형 크롭 */
.ui-crop{margin:0;background:var(--cx-bg-soft);border:1px solid var(--cx-line-2);border-radius:var(--r-sm);padding:12px}
.ui-crop img{width:100%;height:auto;border-radius:6px}
.ui-crop+.ui-crop{margin-top:10px}
.ui-crop--narrow{display:grid;place-items:center}
.ui-crop--narrow img{width:auto;max-width:100%;max-height:120px}
.ui-cap{margin-top:10px;font-size:11.5px;color:var(--cx-ink-3);line-height:1.6}

/* 16-5 · Customer Journey 접점·행동 */
.jr{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(24px,3vw,56px);align-items:center}
.jr__group+.jr__group{margin-top:30px}
.jr__h{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em}
.jr__d{margin-top:10px;font-size:14px;color:var(--cx-ink-2);line-height:1.8}
.jr__list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.jr__list li{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-pill);
  padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--cx-ink-2)}
.jr__fig{margin:0;justify-self:center;max-width:280px}
.jr__fig img{width:100%;border-radius:var(--r-md);box-shadow:var(--sh-2)}
@media (max-width:900px){.jr{grid-template-columns:1fr}}

/* 16-6 · 화면 안내 PLANNED 블록 (V-5) — 사이트 전체에서 정확히 1곳 */
.planned{margin-top:clamp(44px,5vw,76px);border:2px dashed #C6CEDA;border-radius:var(--r-xl);
  background:var(--cx-bg-soft);padding:clamp(22px,2.8vw,40px)}
.planned__badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--cx-line);
  border-radius:var(--r-pill);padding:5px 15px;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--cx-ink-3)}
.planned__h{margin-top:16px;font-size:clamp(16px,1.6vw,19px);font-weight:700;line-height:1.55;color:var(--cx-ink-3)}
.planned__bound{margin-top:16px;font-size:clamp(19px,2.3vw,30px);font-weight:800;line-height:1.55;
  letter-spacing:-.02em;color:var(--cx-ink);border-inline-start:3px solid var(--cx-ink-3);padding-inline-start:20px}
.planned__grid{margin-top:28px;display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,34px);align-items:center;opacity:.9}
.planned__grid .sa-phone{box-shadow:var(--sh-2);filter:saturate(.68)}
.planned__cap{margin-top:12px;text-align:center;font-size:11.5px;font-weight:700;color:var(--cx-ink-3)}
.planned__note{margin-top:22px;font-size:12.5px;color:var(--cx-ink-3);line-height:1.75}
@media (max-width:760px){.planned__grid{grid-template-columns:1fr}}

/* 16-7 · Z3 BUILD · TEST · OPERATE — 좌측 단계 내러티브 + 우측 상주 Admin 프레임 (V3 SaaS 프로토타입) */
.z3-head{max-width:720px}
.z3-head__lede{max-width:560px}

/* 운영 대시보드 예시 데이터 — 마스킹 자산 위에 HTML 텍스트로 합성 값을 올린다. 좌표는 원본 px(1600×900) 기준 */
.z3-dash{position:relative;container-type:inline-size}
.z3-dash__ov{position:absolute;inset:0;pointer-events:none}
.z3-dash__ov>span:not(.z3-dash__tag){position:absolute;display:flex;align-items:center;white-space:nowrap;
  left:calc(var(--x) * 100cqw / 1600);top:calc(var(--y) * 100cqw / 1600);
  min-width:calc(var(--w) * 100cqw / 1600);height:calc(var(--h) * 100cqw / 1600);
  padding-inline-start:calc(var(--p) * 100cqw / 1600);
  font-size:calc(var(--fs) * 100cqw / 1600);font-weight:700;letter-spacing:-.01em;line-height:1;
  color:var(--c);background:var(--bg);font-variant-numeric:tabular-nums}
.z3-dash__tag{position:absolute;left:calc(168 * 100cqw / 1600);top:calc(70 * 100cqw / 1600);
  padding:0 5px;border:1px solid #D5DCE6;border-radius:var(--r-pill);background:rgba(255,255,255,.7);
  font-size:max(9px,calc(12 * 100cqw / 1600));font-weight:600;color:#7A8699;line-height:1.5}

/* 좁은 프레임에서는 태그가 카드와 겹치지 않도록 우상단(관리자·로그아웃 영역)으로 옮긴다 */
@container (max-width:560px){.z3-dash__tag{left:auto;right:4px;top:4px}}

/* 16-8 · Use Cases 운영 흐름 3종 (V-4) — 산업 아이콘 그리드 없음 */
.uc{margin-top:var(--gap-evidence);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.uc__c{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
.uc__n{font-size:12px;font-weight:800;color:var(--cx-blue-text);letter-spacing:.06em}
.uc__h{margin-top:8px;font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;line-height:1.45}
.uc__d{margin-top:12px;font-size:14px;color:var(--cx-ink-2);line-height:1.8}
/* 운영 흐름 = 칸(입력란처럼 보이던 회색 바)이 아니라 가는 선으로 나눈 목록. 번호는 붙이지 않는다(순서 강제 · 운영 예시 번호와 중복) */
.uc__flow{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;border-top:1px solid var(--cx-line)}
.uc__flow li{padding:11px 0;font-size:14px;font-weight:500;color:var(--cx-ink);line-height:1.55}
.uc__flow li+li{border-top:1px solid var(--cx-line-2)}
/* 데스크톱: 세 카드의 목록 시작선을 맞춘다(머리 = 1행 · 목록 = 2행, subgrid) */
@media (min-width:901px){
  .uc__c{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}
/* 범위 문장 = 상자 없는 섹션 주석 · 읽기 좋은 줄 길이 */
.uc__scope{margin-top:40px;max-width:60em;font-size:14px;color:var(--cx-ink-2);line-height:1.75;text-wrap:pretty}
html[lang="ja"] .uc__scope{max-width:46em}
@media (max-width:900px){.uc{grid-template-columns:1fr}}
@media (max-width:480px){.uc__flow{margin-top:20px}.uc__flow li{padding:10px 0}.uc__scope{margin-top:28px}}

/* 16-9 · Why RSUPPORT 역량 4축 (V-6) — 화살표·그라데이션·타임라인 금지 */
.maker__cap{margin-top:clamp(32px,4vw,52px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-xl);overflow:hidden}
.maker__col{padding:clamp(22px,2.4vw,32px);border-inline-end:1px solid var(--cx-line)}
.maker__col:last-child{border-inline-end:0}
.maker__t{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;line-height:1.4}
.maker__d{margin-top:12px;font-size:13.5px;color:var(--cx-ink-2);line-height:1.75}
@media (max-width:900px){
  .maker__cap{grid-template-columns:1fr}
  .maker__col{border-inline-end:0;border-bottom:1px solid var(--cx-line)}
  .maker__col:last-child{border-bottom:0}
}

/* 16-10 · 11번 Why RSUPPORT + 12번 Security 공유 배경 밴드 (DOM은 분리) */
.band{background:var(--cx-bg-soft)}
.band--t{padding-bottom:clamp(28px,3.2vw,44px)}
.band--b{padding-top:clamp(28px,3.2vw,44px)}

/* 16-11 · 섹션 간 이동 링크 */
.link-more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:13.5px;font-weight:800;color:var(--cx-blue-deep)}
.link-more::after{content:"→"}

/* ------------------------------------------------------------
   17. Z2 STATIC PRODUCT STORY — Platform Overview + Proof 01/02/03
   스크롤 기반 상태 전환(구 .z2-map/.z2-step/.z2-frame/is-current/is-active)을
   전면 제거하고, 정적 4단 구성으로 대체한다. 기존 컴포넌트(.pf .talk .kn
   .z2-kn .z2-complete .handoff2 .summary .takeover .ws .checks)를 그대로
   재사용하며, 신규 CSS는 레이아웃 셸(그리드 분할·연결선)에 한정한다.
   모바일/태블릿 기본값 = 순차 스택(DOM 순서 그대로), JS 의존 없음.
   ------------------------------------------------------------ */

/* 17-0 · Part A Platform Overview 셸 */
.z2-overview{margin-top:36px}

/* 17-1 · Proof 01/02/03 공통 상단 여백 (리듬 차등을 위한 레이아웃별 모디파이어는 아래) */
.z2-proof{margin-top:clamp(56px,6vw,88px)}

/* 17-2 · Proof 01 — 좌 40% 텍스트 / 우 60% 제품 증거 (에디토리얼 분할, sticky 없음) */
.z2-proof--01{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.08fr);
  gap:clamp(28px,3.6vw,56px);align-items:start}
/* #features 호환 앵커(span.anchor)가 그리드의 첫 셀을 차지해 텍스트/증거 컬럼을 밀어내는 것을 방지 */
.z2-proof--01>.anchor{grid-column:1/-1}

/* 지식 근거 서브블록 (Proof 01 텍스트 컬럼 내부 · 독립 섹션 아님) */
.z2-kn{margin-top:24px;background:var(--cx-bg-soft);border:1px solid var(--cx-line);border-radius:var(--r-md);padding:20px 22px}
.z2-kn__t{font-size:14.5px;font-weight:800;color:var(--cx-ink);letter-spacing:-.01em;line-height:1.5}
.z2-kn .kn__l{margin-top:12px}
.z2-kn .kn__p{margin-top:12px}

/* 완결 마커 (Path A/Proof 01 종결 · Path B와 동등한 완결감을 부여) */
.z2-complete{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;
  color:var(--cx-ink);background:#EAF7EE;border:1px solid #CDEBD6;border-radius:var(--r-pill);padding:9px 18px}
.z2-complete__dot{width:8px;height:8px;border-radius:50%;background:#2FB35B;flex:none}
.z2-complete--frame{margin-top:16px}
.z2-resolved{margin-top:16px}

/* 17-3 · Proof 02 — 상단 소개+소형 증거, 하단 연결된 3단 흐름(화살표로 연결) */
.z2-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.z2-flow .handoff2__step{position:relative}
.z2-flow .handoff2__step+.handoff2__step::before{content:"→";position:absolute;
  inset-inline-start:-14px;top:50%;transform:translateY(-50%);color:var(--cx-ink-3);
  font-weight:400;font-size:20px;line-height:1}

@media (max-width:900px){
  .z2-proof--01{grid-template-columns:1fr}
  .z2-flow{grid-template-columns:1fr;gap:26px}
  .z2-flow .handoff2__step+.handoff2__step::before{content:"↓";inset-inline-start:50%;top:-19px;
    transform:translateX(-50%)}
}

/* ------------------------------------------------------------
   19. Human + AI 실제 상담원 화면 · 01/02/03 주석 줄 (D-18 · Product Story 장면 03에서 재사용)
   ------------------------------------------------------------ */
.z2h-shot{margin-top:clamp(24px,2.6vw,36px)}
.z2h-notes{margin:clamp(18px,2vw,26px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px)}
.z2h-notes li{padding-top:14px;border-top:2px solid var(--cx-line)}
.z2h-notes__n{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--cx-blue-text);font-variant-numeric:tabular-nums}
.z2h-notes__t{margin-top:4px;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.45;color:var(--cx-ink)}
.z2h-notes__d{margin-top:4px;font-size:13.5px;line-height:1.65;color:var(--cx-ink-2)}

@media (max-width:900px){
  .z2h-notes{grid-template-columns:1fr;gap:14px}
}

/* ------------------------------------------------------------
   21. PRODUCT STORY — 하나의 이야기 · 세 장면 (OWNER LOCKED · D-21)
   01 AI 음성 상담(텍스트 좌 · 이미지 우) → 02 화면 안내(휴대폰 좌 · 텍스트 우) → 03 Human + AI(텍스트 상단 · 실제 화면 · 3열 주석 줄).
   장면 배치는 역할마다 다르고, 공통 문법은 여는 줄(가는 선 → 번호 → 본문) · 색 바탕 없음 · 절제된 테두리/그림자 위계 (Slice 04).
   그림자는 실제 상담원 화면(03)만 크게 — 01 프레임 · Admin 화면은 가는 선, 02 휴대폰은 작은 그림자.
   ------------------------------------------------------------ */
.ps-intro{max-width:860px}
.ps-intro + .ps-scene{margin-top:calc(clamp(36px,3.6vw,52px) + var(--ps-open))}
.ps-intro__lede{font-size:16px;line-height:1.8}

.ps-scene{--ps-open:clamp(18px,1.8vw,26px);position:relative;margin-top:calc(clamp(64px,7.2vw,112px) + var(--ps-open))}
/* 장면 여는 줄 — 세 장면 공통. 장면 상자 밖(위 여백 안)에 그려 장면 03의 렌더링은 그대로 둔다 */
.ps-scene::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--ps-open));height:1px;background:var(--cx-line)}
.ps-scene--screen{display:grid;align-items:center;gap:clamp(28px,4vw,64px)}
.ps-scene--screen{grid-template-columns:minmax(0,210px) minmax(0,1fr);padding:0 clamp(22px,5vw,80px)}

.ps-no{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--cx-ink-2)}
.ps-no b{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--cx-blue-text);font-variant-numeric:tabular-nums}
.ps-h{margin-top:10px;font-size:clamp(20px,2vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.4;color:var(--cx-ink)}
.ps-d{margin-top:10px;font-size:15px;line-height:1.8;color:var(--cx-ink-2)}
.ps-text--wide{max-width:820px}

.ps-fig{margin:0}
.ps-cap{margin-top:8px;text-align:center;font-size:11.5px;color:var(--cx-ink-3)}

/* 02 — 휴대폰(내용 높이) + 짧은 요점 칩 + SDK 보조 문장 */
.ps-fig--phone .sa-phone{width:100%;aspect-ratio:auto;padding:5px;border-radius:30px;box-shadow:var(--sh-1)}
.ps-fig--phone .sa-phone__screen{height:auto;border-radius:24px;padding:8px 10px 6px}
.ps-fig--phone .sa-phone__bar{padding:4px 4px 8px;font-size:13.5px}
.ps-fig--phone .sa-menu li{padding:8px 6px;font-size:11.5px}
.ps-fig--phone .sa-menu li.sa-menu__target{margin:4px 0;padding:6px 4px}
.ps-fig--phone .sa-tip{margin-top:10px;padding:8px 9px;gap:7px}
.ps-fig--phone .sa-tip__av{width:22px;height:22px;font-size:9px}
.ps-fig--phone .sa-tip__txt{font-size:11px;line-height:1.55}
.ps-fig--phone .sa-phone__home{margin:8px auto 1px;width:72px}
.ps-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.ps-tags span{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-pill);padding:5px 13px;font-size:13px;font-weight:700;color:var(--cx-ink-2)}
.ps-note{margin-top:16px;padding-top:12px;border-top:1px solid var(--cx-line);font-size:13px;line-height:1.7;color:var(--cx-ink-3)}

/* 03 — P2 실제 화면 · 주석 줄은 기존 .z2h-shot · .z2h-notes 그대로 */
.ps-scene--human .z2h-shot{margin-top:clamp(22px,2.4vw,32px)}

@media (max-width:760px){
  .ps-scene--screen{grid-template-columns:1fr;gap:22px;padding-inline:0}
  .ps-scene--screen .ps-fig--phone{order:2;width:min(100%,210px);margin-inline:auto}
}

/* 21-1 · 장면 01 — 세 가지 상담 품질 선택(과정 아님: 화살표 · 순서 표기 없음) + 증거 프레임 1개 (공용 [data-tabs])
   프레임은 3:2 고정 — 선택을 바꿔도 위치 · 높이가 변하지 않는다 */
.ps-cap3{margin-top:14px;display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:clamp(20px,2.6vw,36px);align-items:center}
.ps-sel{display:flex;flex-direction:column;gap:10px}
.ps-sel__i{position:relative;display:block;width:100%;text-align:start;cursor:pointer;padding:18px 42px 18px 20px;
  border-radius:var(--r-md);border:1px solid var(--cx-line);background:#fff;transition:background .15s,border-color .15s,box-shadow .15s}
.ps-sel__i::after{content:"";position:absolute;inset-inline-end:18px;top:22px;width:7px;height:7px;
  border-top:2px solid var(--cx-ink-3);border-inline-end:2px solid var(--cx-ink-3);transform:rotate(45deg);transition:border-color .15s,transform .15s}
.ps-sel__t{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.45;color:var(--cx-ink-2)}
.ps-sel__d{display:block;margin-top:6px;font-size:14px;line-height:1.65;color:var(--cx-ink-3)}
/* D-57: 승인 문구에서 뽑은 짧은 근거 줄(새 주장 아님) — 탭 1 = 설명 문장의 세 조건, 탭 2 = 응대 설정 근거 줄(ps-ev__k)의 세 항목. 읽기는 설명 문장이 담당(aria-hidden) */
.ps-sel__cues{display:grid;gap:5px;margin-top:12px;padding-top:11px;border-top:1px solid var(--cx-line)}
.ps-sel__cues i{position:relative;padding-inline-start:13px;font-style:normal;font-size:13px;font-weight:600;line-height:1.5;color:var(--cx-ink-3)}
.ps-sel__cues i::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:5px;height:5px;border-radius:50%;background:#B8C4D3}
.ps-sel__i[aria-selected="true"] .ps-sel__cues{border-top-color:#C9DFF5}
.ps-sel__i[aria-selected="true"] .ps-sel__cues i{color:var(--cx-ink-2)}
.ps-sel__i[aria-selected="true"] .ps-sel__cues i::before{background:var(--cx-blue-deep)}
.ps-sel__i:hover{border-color:#B9C3D2;box-shadow:var(--sh-1)}
.ps-sel__i:hover .ps-sel__t{color:var(--cx-ink)}
.ps-sel__i:hover::after{border-color:var(--cx-ink);transform:translateX(2px) rotate(45deg)}
.ps-sel__i:focus-visible{outline:2px solid var(--cx-blue-deep);outline-offset:2px}
.ps-sel__i[aria-selected="true"]{background:var(--cx-blue-soft);border-color:var(--cx-blue-deep);box-shadow:0 0 0 1px var(--cx-blue-deep)}
.ps-sel__i[aria-selected="true"]::after{border-color:var(--cx-blue-deep)}
.ps-sel__i[aria-selected="true"] .ps-sel__t{color:var(--cx-ink)}
.ps-sel__i[aria-selected="true"] .ps-sel__d{color:var(--cx-ink-2)}

.ps-ev{position:relative;aspect-ratio:3/2;border-radius:var(--r-lg);background:#fff;border:1px solid var(--cx-line);overflow:hidden}
.ps-ev__panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:clamp(16px,2.4vw,32px)}
.ps-ev__panel[hidden]{display:none}
.ps-ev__panel--voice{padding:0}
.ps-ev__panel--voice img{display:block;width:100%;height:100%;object-fit:cover}
.ps-ev__panel--voice .ps-ev__cap{position:absolute;bottom:8px;left:0;right:0}
#ps-panel-2{padding:clamp(16px,2vw,28px)}
.ps-ev__shot{width:100%;box-shadow:none} /* 실제 Admin 화면 — 프레임을 채우고 가는 선(.shot 테두리)만 */
.ps-ev__k{font-size:13px;font-weight:700;color:var(--cx-blue-text);text-align:center}
.ps-ev__scene{display:block;width:auto;max-width:100%;height:auto;max-height:66%;flex:none}
.ps-ev__panel--handoff{gap:8px;padding:14px clamp(14px,1.8vw,24px) 10px}
.ps-ev__panel--handoff .ps-ev__scene{flex:1 1 auto;min-height:0;max-height:none;width:100%;object-fit:contain}
.ps-ev__cond{width:100%;max-width:560px;flex:none;background:#fff;border-radius:var(--r-sm);padding:8px 18px 9px}
.ps-ev__cond-t{font-size:12.5px;font-weight:800;color:var(--cx-ink)}
.ps-ev__cond-l{margin:3px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 20px}
.ps-ev__cond-l li{position:relative;padding-inline-start:12px;font-size:13px;line-height:1.55;color:var(--cx-ink-2)}
.ps-ev__cond-l li::before{content:"";position:absolute;inset-inline-start:0;top:8.5px;width:4px;height:4px;border-radius:50%;background:var(--cx-ink-3)}
.ps-ev__cap{font-size:11px;color:var(--cx-ink-3);text-align:center}
@media (prefers-reduced-motion:reduce){.ps-sel__i,.ps-sel__i::after{transition:none}}
@media (max-width:900px){
  .ps-cap3{grid-template-columns:1fr;gap:14px}
  .ps-sel{gap:6px}
  .ps-sel__i{padding:12px 40px 12px 14px}
  .ps-sel__i:not([aria-selected="true"]) .ps-sel__d{display:none}
  .ps-sel__cues{margin-top:8px;padding-top:8px;display:flex;flex-wrap:wrap;gap:3px 14px}
  .ps-sel__cues i{font-size:12.5px}
  .ps-sel__t{font-size:15.5px}
  .ps-sel__i::after{top:18px}
}
@media (max-width:560px){
  .ps-ev{aspect-ratio:auto}
  .ps-ev__panel{position:static}
  .ps-ev__panel--voice img{height:auto}
  .ps-ev__panel--voice .ps-ev__cap{position:static;padding-bottom:8px}
  .ps-ev__scene{max-height:none}
  .ps-ev__cond-l{grid-template-columns:1fr}
  .ps-ev__panel--handoff .ps-ev__scene{flex:none;height:auto}
}

/* ------------------------------------------------------------
   22. CORE EXPERIENCE — 3장면 · 1+2 비대칭 · Option A 신호 스토리보드 (REVIEW 10 · 2026-10-06)
   Hero 아래 첫 시각 = 빠른 개요. 장면마다 신호 하나만 — 자세한 증거는 상세 01–04에서 한 번씩.
   01 통화 상태 휴대폰(파란 톤) / 02 세 방식(중립 톤) / 03 인계 뒤 상담원(흰 톤). 위 악센트 선은 세 장면 모두 같은 파란 선(D-48).
   ------------------------------------------------------------ */
#flow{padding-block:clamp(8px,1.2vw,16px) var(--sec-pad)} /* D-51: 제품 개요 바로 아래 '응대 흐름' — 위는 개요와 이어지도록 짧게 */
.cx-head{max-width:820px}
.cx-h{font-size:clamp(26px,2.8vw,38px);line-height:1.25}
.cx-lede{margin-top:10px;font-size:15.5px;line-height:1.75;max-width:720px}

.cx-grid{margin-top:clamp(22px,2.6vw,32px);display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);grid-template-rows:1fr auto; /* 남는 높이는 02가 흡수 · 03은 자연 높이 */
 
  gap:clamp(14px,1.6vw,20px)}
.cx-sc{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:clamp(18px,2vw,24px);overflow:hidden;min-width:0}
.cx-sc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--cx-blue-deep)}
.cx-sc--voice{grid-row:1/3;background:linear-gradient(180deg,#E8F4FD 0%,#EDF7FE 100%)} /* 위쪽 색을 살짝 밝혀 번호 글자(--cx-blue-text) 대비 4.6:1 */
.cx-sc--app{background:var(--cx-bg-soft)}
.cx-sc--desk{background:#fff;border:1px solid var(--cx-line)}
.cx-sc__h{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline}
.cx-sc__n{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--cx-blue-text);font-variant-numeric:tabular-nums}
.cx-sc__t{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.4;color:var(--cx-ink)}
.cx-sc__d{grid-column:2;margin-top:3px;font-size:13.5px;line-height:1.6;color:var(--cx-ink-2)}

/* 01 — 통화 중인 휴대폰(주인공) + 옆의 음성 대화 4턴. 말풍선은 화면을 가리지 않는다(휴대폰 바깥 열).
   말풍선 머리의 작은 파형 = 음성 상담(채팅 제품처럼 보이지 않게 입력창 · 전송 버튼 없음) */
.cx-voice{margin-block:auto;padding-top:22px;display:flex;flex-direction:column;align-items:center;gap:16px}
.cx-voice__row{display:flex;align-items:center;justify-content:center;gap:0;width:100%}
.cx-call{position:relative;z-index:1;flex:0 0 auto;width:196px;margin:0;background:#1B1E25;border-radius:28px;padding:6px;box-shadow:var(--sh-3)}
.cx-call__screen{background:#fff;border-radius:23px;padding:10px 12px 11px;display:flex;flex-direction:column;align-items:center;min-height:340px}
.cx-call__status{align-self:stretch;display:flex;justify-content:space-between;align-items:center;margin:0;font-size:10.5px;font-weight:800;color:var(--cx-ink);font-variant-numeric:tabular-nums}
.cx-call__brand{margin:28px 0 0;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--cx-ink)}
.cx-call__brand b{color:var(--cx-blue-deep)}
.cx-call__state{margin:4px 0 0;font-size:10.5px;color:var(--cx-ink-3);text-align:center}
.cx-call__time{margin:6px 0 0;font-size:13.5px;font-weight:700;color:var(--cx-ink-2);font-variant-numeric:tabular-nums}
.cx-call__wave{margin-top:22px;height:38px;gap:3px}
.cx-call__wave i{width:3px;background:var(--cx-blue-deep);opacity:.85}
.cx-call__ctl{margin:auto 0 0;padding-top:18px;display:flex;gap:12px}
.cx-call__ctl i{display:block;width:32px;height:32px;border-radius:50%;background:var(--cx-bg-soft);border:1px solid var(--cx-line)}
.cx-call__ctl .cx-call__end{background:#FF5B41;border-color:#FF5B41;width:42px;height:42px;margin-top:-5px}
.cx-call__home{width:56px;height:4px;border-radius:2px;background:var(--cx-line);margin-top:10px}
.cx-basis{margin:0;padding:3px 10px;border-radius:var(--r-pill);background:#fff;font-size:11.5px;font-weight:800;color:var(--cx-blue-text);text-align:center}

.cx-talk{position:relative;z-index:2;flex:1 1 0;min-width:0;max-width:230px;margin-left:-14px;display:flex;flex-direction:column;gap:9px}
.cx-bub{margin:0;max-width:94%;padding:7px 11px 8px;border-radius:13px;background:#fff;box-shadow:0 8px 22px rgba(20,28,45,.11);
  font-size:12.5px;font-weight:600;line-height:1.45;color:var(--cx-ink)}
.cx-bub__who{display:flex;align-items:center;gap:5px;margin-bottom:2px;font-size:10px;font-weight:800;letter-spacing:.02em;color:var(--cx-ink-3)}
.cx-bub__wv{height:11px;gap:1.5px}
.cx-bub__wv i{width:1.5px;background:currentColor;opacity:.75}
.cx-bub--cust{align-self:flex-start;background:#F3F5F8;box-shadow:none;border:1px solid var(--cx-line);border-top-left-radius:4px}
.cx-bub--ai{align-self:flex-end;border-top-right-radius:4px}
.cx-bub--ai .cx-bub__who{color:var(--cx-blue-text)}

/* 02 · 03 공통 — 신호는 설명 아래 남는 높이 안에 둔다 */
.cx-sig{margin-top:auto;padding-top:22px}

/* 02 — 글자 중심(D-47 · D-48): 주어 AI 상담원은 장면 설명 문장 안 → 바로 아래 같은 너비 · 같은 무게의 세 방식(라벨 + 승인 한 줄).
   그림 · 갈래선 · 화살표 · 번호 없음 = 순서 아님. 세 칸 사이는 가는 세로선만 */
.cx-acts{margin-block:auto;padding-block:20px 4px}
.cx-acts__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cx-acts__list li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 14px;text-align:center;min-width:0}
.cx-acts__list li + li{border-left:1px solid var(--cx-line)}
.cx-acts__t{font-size:clamp(17px,1.4vw,20px);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--cx-ink)}
.cx-acts__d{font-size:13px;line-height:1.55;color:var(--cx-ink-3)}

/* 03 — 인계 뒤: 상담원(가운데 주인공) ← 왼쪽 AI 상담 요약 · 오른쪽 AI 실시간 지원. 두 지원은 상담원 쪽으로 향하는 선으로 붙는다
   (AI는 인계 뒤에도 곁에 남는다). 인계 과정 · 가짜 상담원 화면 없음 */
.cx-op{margin-block:auto;padding-block:18px 8px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;column-gap:46px;justify-items:center}
.cx-op__sig{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:34px}
.cx-op__sig--sum::after,.cx-op__sig--ai::after{content:"";position:absolute;top:66px;width:46px;height:1.5px;background:var(--cx-blue-deep);opacity:.55}
.cx-op__sig--sum::after{left:100%}
.cx-op__sig--ai::after{right:100%}
.cx-op__sig--sum::before,.cx-op__sig--ai::before{content:"";position:absolute;top:63px;width:6px;height:6px;border-top:1.5px solid var(--cx-blue-deep);border-right:1.5px solid var(--cx-blue-deep);opacity:.75}
.cx-op__sig--sum::before{left:calc(100% + 38px);transform:rotate(45deg)}
.cx-op__sig--ai::before{right:calc(100% + 38px);transform:rotate(-135deg)}
.cx-op__card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:132px;padding:9px 11px 10px;border-radius:11px;background:#fff;border:1px solid var(--cx-line);box-shadow:0 6px 16px rgba(20,28,45,.07)}
.cx-op__card i{display:block;height:4px;border-radius:2px;background:#D8DEE8;width:100%}
.cx-op__card i:nth-of-type(2){width:84%}
.cx-op__card i:nth-of-type(3){width:60%}
.cx-op__ai{display:inline-grid;place-items:center;padding:1px 6px;border-radius:5px;background:var(--cx-blue-soft);font-size:9.5px;font-weight:800;color:var(--cx-blue-text)}
.cx-op__card--ai{border-color:#CFE3F4}
.cx-op__chips{display:flex;gap:4px;width:100%}
.cx-op__chips i{flex:1 1 0;height:10px !important;border-radius:5px !important;background:var(--cx-blue-soft) !important;box-shadow:inset 0 0 0 1px #CFE3F4}
.cx-op__srch{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cx-blue-soft);color:var(--cx-blue-deep)}
.cx-op__t{margin-top:9px;font-size:13.5px;font-weight:800;letter-spacing:-.01em;line-height:1.4;color:var(--cx-ink)}
.cx-op__core{display:flex;flex-direction:column;align-items:center;text-align:center}
.cx-op__avatar{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--cx-ink);color:#fff;box-shadow:0 0 0 6px #fff,0 0 0 7px var(--cx-line),var(--sh-2)}
.cx-op__avatar svg{width:46px;height:46px}
.cx-op__name{margin-top:12px;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--cx-ink)}

@media (max-width:1120px){
  .cx-grid{grid-template-columns:1fr;grid-template-rows:none}
  .cx-sc--voice{grid-row:auto}
  .cx-talk{max-width:280px}
}
@media (max-width:760px){
  .cx-head{max-width:none}
  .cx-sc{padding:18px 16px}
  .cx-sig{padding-top:18px}
}
/* 좁은 화면 — 01: 휴대폰 위 · 아래로 대화 2턴, 겹침 없음 / 02: 주어 아래 가는 선으로 나눈 글 3줄 /
   03: 세로로 요약 → 상담원 → AI 지원(가운데 정렬) */
@media (max-width:560px){
  .cx-voice__row{flex-direction:column;gap:10px}
  .cx-talk{display:contents}
  .cx-bub{max-width:82%}
  .cx-bub--1{order:-1;align-self:flex-start}
  .cx-bub--2{align-self:flex-end}
  .cx-bub--3,.cx-bub--4{display:none}
  .cx-call{width:176px}
  .cx-call__screen{min-height:296px}
  .cx-acts{padding-block:12px 0}
  .cx-acts__list{grid-template-columns:1fr}
  .cx-acts__list li{align-items:flex-start;gap:2px;padding:10px 0;text-align:start}
  .cx-acts__list li:first-child{border-top:1px solid var(--cx-line)}
  .cx-acts__list li + li{border-left:0;border-top:1px solid var(--cx-line)}
  .cx-acts__list li:last-child{padding-bottom:0}
  .cx-acts__t{font-size:16px}
  .cx-acts__d{font-size:12.5px}
  .cx-op{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:12px;padding-top:10px}
  .cx-op__sig{padding-top:14px}
  .cx-op__card{width:100%;max-width:104px;padding:7px 8px 8px}
  .cx-op__t{font-size:12px}
  .cx-op__avatar{width:72px;height:72px}
  .cx-op__avatar svg{width:34px;height:34px}
  .cx-op__name{font-size:13px}
  .cx-op__sig--sum::after,.cx-op__sig--ai::after{top:48px;width:14px}
  .cx-op__sig--sum::before,.cx-op__sig--ai::before{display:none}
}

/* ------------------------------------------------------------
   23. CALLBACK — 짧은 곁이야기 (Customer Journey 대체 · Owner 리뷰 프로토타입)
   메인 챕터보다 작고 가볍게: 한 판 안에 말 걸기 질문 + 답 한 줄 + 실제 화면 3개를 계단식으로.
   4역할 카드 · 타임라인 · 채널 반복 없음. 기존 .jr / .cb-role CSS는 JA가 쓰므로 그대로 둔다.
   ------------------------------------------------------------ */
#journey.cb2{padding-block:var(--sec-pad-sm)}
.cb2-box{display:grid;grid-template-columns:minmax(0,32fr) minmax(0,68fr);gap:clamp(24px,3.4vw,52px);align-items:center;
  background:linear-gradient(135deg,#FFF6F3 0%,#F6F9FD 55%,#EEF6FD 100%);border-radius:var(--r-xl);padding:clamp(24px,3vw,40px) clamp(22px,3.4vw,48px)}
.cb2-q{display:inline-block;background:#fff;border-radius:16px 16px 16px 4px;padding:8px 15px;box-shadow:var(--sh-1);
  font-size:14.5px;font-weight:700;color:var(--cx-ink-2)}
.cb2-h{margin-top:16px;font-size:clamp(22px,2.1vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.36;color:var(--cx-ink)}
.cb2-h b{font-weight:800}
.cb2-note{margin-top:12px;font-size:14px;line-height:1.7;color:var(--cx-ink-2)}
/* 세 장면 — 하나의 미니 컴포넌트 체계. 같은 틀(폭 · 높이 · 모서리 · 안쪽 여백 · 그림자 · 라벨 위치), 장면 문법만 다르다:
   01 음성 상담 + 예약 / 02 문자 메시지 / 03 상담원 화면(Callix 데스크 문법 · 제품 캡처 아님) */
.cbx{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.cbx-step{min-width:0}
.cbx-frame{height:300px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-2);padding:14px;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.cbx-lbl{margin:12px 0 0;display:flex;align-items:baseline;gap:7px;font-size:13.5px;font-weight:800;color:var(--cx-ink);letter-spacing:-.01em}
.cbx-lbl b{font-size:11.5px;letter-spacing:.06em;color:var(--cx-blue-text);font-variant-numeric:tabular-nums}
.cbx-av{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--cx-blue-deep);color:#fff;font-size:9px;font-weight:800}
.cbx-btn{margin:0;text-align:center;padding:8px 0;border-radius:var(--r-pill);background:var(--cx-blue-deep);color:#fff;font-size:12.5px;font-weight:800}
.cbx-btn--dark{background:var(--cx-ink)}
/* 01 */
.cbx-call{margin:0;flex:none;height:32px;box-sizing:border-box;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--cx-line-2)}
.cbx-call__who{font-size:12px;font-weight:800;color:var(--cx-ink)}
.cbx-call__live{margin-inline-start:auto;font-size:10.5px;font-weight:700;color:var(--cx-blue-deep);font-variant-numeric:tabular-nums}
.cbx-bub{margin:0;padding:8px 11px;border-radius:14px;font-size:12px;line-height:1.5}
.cbx-bub--cust{align-self:flex-end;max-width:90%;background:var(--cx-blue-deep);color:#fff;border-top-right-radius:4px}
/* 01 — 음성 대화가 곧 예약: 통화 상태 + 파형이 주인공, 말풍선 두 개, 결과는 작은 표시 하나 */
.cbx-frame--call{gap:8px;background:linear-gradient(180deg,#F2F8FE 0%,#fff 46%)}
.cbx-wave{height:28px;gap:3px;justify-content:center;margin:0}
.cbx-wave i{width:3px;background:var(--cx-blue-deep);opacity:.8}
.cbx-bub--ai{align-self:flex-start;max-width:94%;display:flex;gap:7px;align-items:flex-start;background:#fff;color:var(--cx-ink);
  border:1px solid #D7E6F5;border-top-left-radius:4px;box-shadow:var(--sh-1)}
.cbx-bub--ai .cbx-av{width:18px;height:18px;font-size:8px;margin-top:1px}
.cbx-frame--call .cbx-bub{padding:7px 10px;line-height:1.48}
.cbx-done{margin:auto 0 0;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  background:#EAF7EE;border:1px solid #CDEBD6;font-size:11px;font-weight:800;color:#1E7A3C}
.cbx-done i{width:6px;height:6px;border-radius:50%;background:#2FB35B}
/* 02 */
.cbx-frame--sms{background:#F7F8FA}
.cbx-sms__head{margin:0;flex:none;height:32px;box-sizing:border-box;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--cx-line-2)}
.cbx-sms__head b{font-size:12px;font-weight:800;color:var(--cx-ink)}
.cbx-sms__head span:last-child{margin-inline-start:auto;font-size:10.5px;color:var(--cx-ink-3)}
.cbx-sms__icon{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--cx-ink);color:#fff;font-size:10px;font-weight:800}
/* 02 — 내용이 적은 장면: 장식으로 채우지 않고, 시각 + 말풍선 한 묶음을 위쪽 1/3 지점에 둔다 */
.cbx-sms__thread{margin:auto 0;padding-bottom:18px;display:flex;flex-direction:column;gap:10px}
.cbx-sms__time{margin:0;text-align:center;font-size:10.5px;color:var(--cx-ink-3)}
.cbx-sms__bub{align-self:flex-start;max-width:94%;background:#fff;border-radius:16px;border-top-left-radius:4px;padding:12px 14px;box-shadow:var(--sh-1)}
.cbx-sms__line{margin:0;font-size:12.5px;line-height:1.55;color:var(--cx-ink)}
.cbx-sms__when{margin:8px 0;padding:8px 10px;border-radius:10px;background:var(--cx-blue-soft);font-size:16px;font-weight:800;color:var(--cx-blue-deep);font-variant-numeric:tabular-nums}
/* 03 */
.cbx-frame--desk{padding:0;gap:0}
.cbx-desk__bar{margin:0;flex:none;height:46px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 14px;background:linear-gradient(90deg,#1E3A8A,#16295C)}
.cbx-desk__logo{font-size:12.5px;font-weight:800;color:#fff}
.cbx-desk__tabs{margin-inline-start:auto;display:flex;gap:2px;padding:2px;border-radius:var(--r-pill);background:rgba(255,255,255,.14)}
.cbx-desk__tabs i{font-style:normal;padding:3px 7px;border-radius:var(--r-pill);font-size:10px;font-weight:700;color:rgba(255,255,255,.8)}
.cbx-desk__tabs i.is-on{background:#fff;color:var(--cx-ink)}
.cbx-desk__body{flex:1;display:flex;flex-direction:column;gap:9px;padding:12px 14px 14px;background:#F6F8FC}
.cbx-desk__res{margin:0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding:9px 11px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--cx-line)}
.cbx-desk__res span{font-size:10.5px;font-weight:800;color:var(--cx-blue-deep)}
.cbx-desk__res b{font-size:13px;color:var(--cx-ink);font-variant-numeric:tabular-nums}
.cbx-desk__res em{margin-inline-start:auto;font-style:normal;font-size:11px;color:var(--cx-ink-3)}
.cbx-desk__hist{padding:9px 11px;border-radius:var(--r-sm);background:linear-gradient(135deg,#EEF4FF,#F6EEFB)}
.cbx-desk__ht{margin:0 0 6px;font-size:11px;font-weight:800;color:var(--cx-ink)}
.cbx-desk__hist dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:11.5px;line-height:1.5}
.cbx-desk__hist dt{font-weight:700;color:var(--cx-ink-3)}
.cbx-desk__hist dd{margin:0;color:var(--cx-ink)}
.cbx-desk__body .cbx-btn{margin-top:auto}
.cb2-cap{margin-top:8px;font-size:11.5px;color:var(--cx-ink-3);text-align:center}
@media (max-width:1120px){
  .cb2-box{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cb2-box{padding:20px 16px}
  /* 모바일: 같은 틀 세 개를 01→02→03 순서로 쌓고, 높이는 내용에 맞춘다(축소 금지) */
  .cbx{grid-template-columns:1fr;gap:18px}
  .cbx-frame{height:auto;min-height:0}
  .cbx-sms__thread{margin:4px 0 0;padding-bottom:0}
}

/* ------------------------------------------------------------
   24. WHY RSUPPORT + TRUST — 한 밴드로 압축 (Owner 리뷰 프로토타입)
   위: 역량 4축 한 줄(서비스 표기 · 역량명 · 한 줄). 병렬 · 화살표/계보 없음.
   아래: 작은 신뢰 줄(인증 · 지원 2개). 기존 .maker__ / .trust / .badge 는 JA가 쓰므로 그대로 둔다.
   ------------------------------------------------------------ */
.rs{padding-block:var(--sec-pad)}
.rs-lede{max-width:820px}
/* ------------------------------------------------------------
   25. HERO (텍스트 중심 · KO 전용 .hero--text) + Hero/Core 제목 위계 — D-27 · D-28 · D-29
   Hero에는 이미지가 없다. 첫 제품 시각은 바로 아래 Core Experience.
   위계: L1 Hero 제목 > L2 Core 제목 > L3 장면 제목 > L4 보조 문장 > L5 eyebrow · 칩.
   강조 규칙 하나 — 첫 구절 보통(400), 둘째 줄만 굵게(800). Hero와 Core가 같은 규칙을 쓴다.
   JA는 같은 .hero--v2를 쓰므로 모든 규칙을 .hero--text로 한정한다.
   ------------------------------------------------------------ */
.hero--text{padding-block:clamp(28px,3.4vw,48px) clamp(32px,3.8vw,56px)}
.hero--text .hero__h1{font-size:clamp(34px,4.2vw,60px);line-height:1.18;font-weight:400;letter-spacing:-.03em}
.hero--text .hero__sub{margin-top:18px;font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--cx-ink-2)}
.hero--text .hero__btns{margin-top:28px}
.hero--text .hero__meta{margin-top:28px;padding-top:20px}
.cx-h{font-size:clamp(24px,2.65vw,38px);line-height:1.28;font-weight:400}
.cx-h b{display:block;font-weight:800}
.cx-lede{margin-top:12px;font-size:clamp(14.5px,1.12vw,16px);line-height:1.7;color:var(--cx-ink-2)}
.cx-sc__t{font-size:clamp(18px,1.4vw,20px);line-height:1.4;font-weight:800}
.cx-sc__d{font-size:14px;line-height:1.6}
@media (max-width:760px){
  .hero--text .hero__h1{font-size:32px;line-height:1.22}
  .cx-sc__d{font-size:13.5px}
}

/* ------------------------------------------------------------
   26. JA 전용 모바일 제목 크기 — 일본어는 같은 크기에서 한국어보다 가로로 길어 제목이 3~4줄로 꺾인다.
   위계(Hero > Core > 장면)는 유지하고 JA 페이지에만 적용한다(KO 영향 없음).
   ------------------------------------------------------------ */
@media (max-width:760px){
  html[lang="ja"] .hero--text .hero__h1{font-size:28px;line-height:1.28}
  html[lang="ja"] .cta-band .head--lg{font-size:26px}
}
@media (max-width:380px){
  html[lang="ja"] .hero--text .hero__h1{font-size:26px}
  html[lang="ja"] .cta-band .head--lg{font-size:24px}
}
/* JA 제목 줄바꿈 — 글자 중간에서 꺾이지 않도록 쉼표 · <wbr> 위치에서만 꺾는다.
   overflow-wrap:anywhere는 금칙(행두 「、」 등)을 깨므로 쓰지 않는다. break-word는 넘칠 때만 쓰는 안전장치. */
html[lang="ja"] :is(.head,.cb2-h,.ps-h,.uc__h){word-break:keep-all;overflow-wrap:break-word;line-break:strict;text-wrap:balance}
/* JA Use Cases 흐름 줄 · FAQ 질문 — 같은 원칙(가타카나 단어 중간 꺾임 방지), <wbr> 위치에서만 꺾는다 */
html[lang="ja"] :is(.uc__flow li,.faq__q,.cx-basis,.cx-acts__t,.cx-acts__d,.cx-op__t,.cx-bub,.cx-sc__d,.footer__by){word-break:keep-all;overflow-wrap:break-word}
/* JA 두 줄 설명 끝에 「す。」「ます。」만 떨어지지 않도록(span이라 위 pretty 규칙 밖 · Chrome pretty로도 안 풀림) */
html[lang="ja"] :is(.cx-sc__d,.adm__tab span){text-wrap:balance}
/* JA 푸터 — 전화 라벨과 번호를 한 덩어리로 · note 글자를 32px 원 안에 */
html[lang="ja"] .footer__tel{white-space:nowrap}
@media (max-width:560px){html[lang="ja"] .footer__tel{display:block}html[lang="ja"] .footer__co .footer__sep{display:none}}
.footer--lite .footer__sns a.footer__sns--note{font-size:9.5px;letter-spacing:-.04em}
/* JA 콜백 제목 — 좌측 칼럼(약 320px)에서 첫 구절 「ご希望の時間を伝えれば、」가 한 줄에 들어가는 최대 크기 27px (KO 30) */
html[lang="ja"] .cb2-h{font-size:clamp(22px,1.9vw,27px)}
/* JA 본문 — 금칙 strict · 끝줄 1~2글자 방지(pretty). 긴 리드는 예외: WebKit의 pretty가 문단 전체를 고르게 맞추느라
   단어 중간에서 꺾고 오른쪽을 비우므로 리드는 기본 줄바꿈, 구 단위(auto-phrase)를 지원하는 엔진에서만 balance. */
html[lang="ja"] :is(p,li,dd,figcaption,.faq__q,.faq__a){line-break:strict;text-wrap:pretty}
html[lang="ja"] :is(.lede,.hero__sub,.ps-note){text-wrap:wrap}
@media (min-width:761px){html[lang="ja"] :is(.lede,.hero__sub,.ps-note){text-wrap:pretty}} /* 넓은 화면의 1~2줄 리드는 pretty로 끝줄 보정 */
@supports (word-break:auto-phrase){
  html[lang="ja"] :is(.lede,.hero__sub,.ps-note){word-break:auto-phrase;text-wrap:balance}
}
/* JA 콜백 상담원 화면 탭 — 일본어 라벨이 두 줄로 꺾이지 않게 */
html[lang="ja"] .cbx-desk__bar{padding:0 10px 0 14px;gap:6px}
html[lang="ja"] .cbx-desk__tabs i{white-space:nowrap;padding:3px 5px;letter-spacing:-.02em}
html[lang="ja"] .z3-head__h2 b{display:inline-block}
/* JA 대시보드 — 제목 'ダッシュボード'가 KO보다 길어, 예시 데이터 태그를 제목 오른쪽으로 옮긴다 */
@container (min-width:561px){html[lang="ja"] .z3-dash__tag{left:calc(262 * 100cqw / 1600)}}
/* JA WHY RSUPPORT — 제목·카드 라벨은 <wbr>/구 단위에서만 줄바꿈 */
html[lang="ja"] .rs-h>span{display:inline-block}

/* ------------------------------------------------------------
   27. SELECTIVE ADOPTION — Callix Admin · WHY RSUPPORT/Trust · FAQ + 자료 카드 (D-49)
   Concept 01(concept/claude-autonomous-redesign) 구성을 이 사이트의 색 · 글자 체계로 옮긴다.
   문구 · 화면 · 마스킹 · 예시 값 · 로고 · 인증 표기 · PDF 연결은 승인본 그대로. 창 장식(점 · 제목 줄) 없음.
   ------------------------------------------------------------ */

/* Callix Admin — 왼쪽 단계별 세로 탭(01 준비 · 02 검증 · 03 운영과 개선) · 오른쪽 큰 실제 화면 무대 */
.adm{margin-top:var(--gap-evidence);display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(28px,3.2vw,48px);align-items:start}
.adm__nav{display:grid;gap:22px;align-content:start}
.adm__grp{display:grid}
.adm__k{margin:0;padding:0 0 8px 18px;font-size:12.5px;font-weight:800;letter-spacing:.05em;color:var(--cx-ink-3)}
.adm__k em{font-style:normal;margin-inline-end:6px;color:var(--cx-blue-text)}
.adm__tab{display:block;width:100%;text-align:start;padding:12px 16px;border-inline-start:2px solid var(--cx-line);
  transition:background-color .2s,border-color .2s}
.adm__tab b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--cx-ink-2)}
.adm__tab span{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--cx-ink-3)}
.adm__tab:hover b{color:var(--cx-ink)}
.adm__tab:focus-visible{outline:2px solid var(--cx-blue-deep);outline-offset:2px}
.adm__tab[aria-selected="true"]{border-inline-start-color:var(--cx-ink);background:#fff;border-radius:0 10px 10px 0}
.adm__tab[aria-selected="true"] b{font-weight:800;color:var(--cx-ink)}
/* 무대 = 고정 16:10.4 면. 프레임은 화면 비율(--iar)로 맞춰 어느 화면이든 통째로 들어온다(탭을 바꿔도 아래가 움직이지 않음) */
.adm__stage{position:relative;padding-bottom:34px;min-width:0}
.adm__panel[hidden]{display:none}
.adm__fit{aspect-ratio:16/10.4;display:grid;place-items:start center;container-type:inline-size}
.adm__frame{margin:0;width:min(100cqw,calc(100cqw * 10.4 / 16 * var(--iar)));background:#fff;border:1px solid var(--cx-line);border-radius:var(--product-radius);
  box-shadow:var(--sh-3);overflow:hidden}
.adm__shot{position:relative;overflow:hidden;aspect-ratio:var(--iar)}
.adm__c{position:relative}
.adm__c img{display:block;width:100%;height:auto}
.adm__desc{display:none}
.adm__cap{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font-size:13px;line-height:1.55;color:var(--cx-ink-3)}
@media (prefers-reduced-motion:reduce){.adm__tab{transition:none}}

/* WHY RSUPPORT / Trust — 제목 좌 · 리드 우, 열린 4칸 서비스 격자(선만), 증거 카드 2장 */
.tr-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,3.4vw,48px);align-items:end}
.tr-head .rs-lede{margin-top:0}
.tr-svc{list-style:none;margin:var(--gap-evidence) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--cx-line);border-inline-start:1px solid var(--cx-line)}
.tr-svc li{min-width:0;padding:30px 28px 28px;border-inline-end:1px solid var(--cx-line);border-bottom:1px solid var(--cx-line)}
.tr-svc__logo{height:34px;display:flex;align-items:center}
.tr-svc__logo img{display:block;width:auto;height:auto;max-width:100%;object-fit:contain}
.tr-svc__logo img[src*="remotecall"]{height:20px;max-width:150px}
.tr-svc__logo img[src*="remotevs"]{height:21px;max-width:150px}
.tr-svc__logo img[src*="airepoto"]{height:34px;max-width:110px}
.tr-svc__logo img[src*="remotemeeting"]{height:23px;max-width:156px}
.tr-svc__t{display:block;margin-top:20px;font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.45;color:var(--cx-ink)}
.tr-svc__d{display:block;margin-top:4px;font-size:14px;line-height:1.55;color:var(--cx-ink-3)}
.tr-proofs{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.tr-proof{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:24px 28px;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md)}
.tr-row{display:flex;align-items:center;gap:20px}
/* JA 보안 카드: ISO 행과 프라이버시마크 행은 각자 마크 · 각자 글 — 가는 선으로 나눈 별개의 증거 */
.tr-row + .tr-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--cx-line-2)}
.tr-ico{flex:none;width:48px;height:48px;border-radius:12px;background:var(--cx-bg-soft);display:grid;place-items:center}
.tr-ico img{display:block;width:26px;height:26px}
.tr-mark{flex:none;width:64px}
.tr-mark img{display:block;width:100%;height:auto}
.tr-txt{margin:0;min-width:0}
.tr-h{display:block;font-size:13px;font-weight:700;line-height:1.45;color:var(--cx-ink-3)}
.tr-k{display:block;margin-top:2px;font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.4;color:var(--cx-ink)}
.tr-k--pm{margin-top:0;font-size:16px}
.tr-nw{white-space:nowrap}
.tr-d{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--cx-ink-2)}

/* FAQ 아코디언 — 모두 닫힘으로 시작 · .faq[data-faq-single]이면 한 번에 하나(F07 · callix.js). FAQ + 문의 카드 배치는 callix-ko-renewal.css .fqc */
.faq{border-top:1px solid var(--cx-ink)}
.faq__item{border-bottom:1px solid var(--cx-line)}
.faq__q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;text-align:start;
  font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.5;color:var(--cx-ink)}
.faq__q::after{content:"";flex:none;width:11px;height:11px;margin-inline-end:4px;border-right:2px solid var(--cx-ink-3);border-bottom:2px solid var(--cx-ink-3);
  transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.faq__item.is-open .faq__q::after{transform:translateY(3px) rotate(225deg)}
.faq__q:focus-visible{outline:2px solid var(--cx-blue-deep);outline-offset:2px}
.faq__a{display:none;padding:0 48px 26px 0;font-size:15.5px;line-height:1.8;color:var(--cx-ink-2)}
.faq__a p{margin:0}
.faq__a p+p{margin-top:10px}
.faq__item.is-open .faq__a{display:block}
@media (prefers-reduced-motion:reduce){.faq__q::after{transition:none}}

html[lang="ja"] :is(.adm__tab b,.tr-svc__t,.tr-h,.tr-k,.tr-d,.cta-band__text .lede){word-break:keep-all;overflow-wrap:break-word;line-break:strict}

@media (max-width:1100px){
  .adm{grid-template-columns:1fr;gap:28px}
  .adm__nav{grid-template-columns:repeat(3,auto);justify-content:start;gap:28px}
  .tr-head{grid-template-columns:1fr;gap:0}
  .tr-head .rs-lede{margin-top:18px}
}
@media (max-width:1000px){
  .tr-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 모바일 — Admin: 탭은 두 칸 칩(설명 숨김) · 화면은 읽히는 영역만 잘라(1:1 근처) 보인다 · 아래에 탭 설명 / Trust: 서비스 2칸 · 카드 1열 */
@media (max-width:760px){
  .adm{margin-top:28px;gap:18px}
  .adm__nav{grid-template-columns:1fr 1fr;gap:8px}
  .adm__grp{display:contents}
  .adm__k{display:none}
  .adm__grp:last-child .adm__tab{grid-column:1/-1}
  .adm__tab{text-align:center;padding:9px 12px;border:1px solid var(--cx-line);border-radius:999px;background:#fff}
  .adm__tab span{display:none}
  .adm__tab b{font-size:14px}
  .adm__tab[aria-selected="true"]{background:var(--cx-ink);border-color:var(--cx-ink);border-radius:999px}
  .adm__tab[aria-selected="true"] b{color:#fff}
  .adm__stage{padding-bottom:0}
  .adm__fit{aspect-ratio:auto;display:block;container-type:normal}
  .adm__frame{width:100%}
  .adm__shot{aspect-ratio:var(--m-ar)}
  .adm__c{position:absolute;width:var(--m-cw);left:var(--m-cx);top:var(--m-cy)}
  .adm-sec .adm__c .z3-dash__tag{left:calc(540 * 100cqw / 1600);right:auto;top:calc(76 * 100cqw / 1600)}
  .adm__desc{display:block;margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--cx-ink-2)}
  .adm__cap{position:static;margin-top:4px;text-align:start}
  .tr-svc{margin-top:32px}
  .tr-svc li{padding:20px 16px 18px}
  .tr-svc__logo{height:26px}
  .tr-svc__logo img[src*="remotecall"]{height:16px;max-width:120px}
  .tr-svc__logo img[src*="remotevs"]{height:17px;max-width:120px}
  .tr-svc__logo img[src*="airepoto"]{height:26px;max-width:84px}
  .tr-svc__logo img[src*="remotemeeting"]{height:18px;max-width:124px}
  .tr-svc__t{margin-top:14px;font-size:14px}
  .tr-svc__d{font-size:12.5px}
  .tr-proofs{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
  .tr-proof{padding:18px}
  .tr-row{align-items:flex-start;gap:14px}
  .tr-ico{width:42px;height:42px;border-radius:11px}
  .tr-ico img{width:23px;height:23px}
  .tr-mark{width:52px}
  .tr-k{font-size:16px}
  .tr-k--pm{font-size:15px}
  .tr-d{font-size:13.5px}
  .faq__q{padding:20px 0;gap:16px;font-size:15.5px}
  .faq__a{padding-right:0;font-size:14.5px}
}

/* ------------------------------------------------------------
   28. LANDING RESTRUCTURE (D-51 · 2026-10-07) — Owner 코멘트 + Callix_2p PPT
   Hero(사람 + 제품 화면) → 제품 개요(역할 4) → 응대 흐름(Core) → 과제와 해결 → 주요 기능 4 → 콜백 → 도입 효과 → 활용 장면 → 관리·운용 …
   장식용 그라디언트 블롭 · 가짜 수치 없음. 사진 2장 = Owner PPT 추출(라이선스 확인 전 Preview 전용).
   ------------------------------------------------------------ */
/* Hero v3 — 왼쪽 글 · 오른쪽 제품 화면 + 상담원 사진 + 고객 PIP */
.hero--v3{padding-block:clamp(20px,2.6vw,40px) clamp(32px,3.8vw,56px)}
.hero--v3 .hero__card{display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);align-items:center;
  gap:clamp(28px,3.4vw,56px);padding:clamp(28px,3.6vw,56px)}
.hv__chip{letter-spacing:.01em}
.hero--v3 .hero__h1{margin-top:18px;font-size:clamp(30px,2.95vw,44px);line-height:1.22;letter-spacing:-.03em;font-weight:400}
.hero--v3 .hero__h1 b{display:block;font-weight:800}
.hv__nw{white-space:nowrap}
html[lang="ja"] .hero--v3 .hero__h1{font-size:clamp(26px,2.5vw,36px);line-height:1.3}
.hero--v3 .hv__vis figcaption,.hero--v3 .hv__ai{white-space:nowrap;text-wrap:nowrap}
.hero--v3 .hero__sub{margin-top:18px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.75;color:var(--cx-ink-2)}
.hv__pillars{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.hv__pillars li{display:flex;align-items:center;gap:12px;font-size:clamp(15px,1.15vw,17px);font-weight:700;line-height:1.45;color:var(--cx-ink)}
.hv__pillars span{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--cx-blue-soft);color:var(--cx-blue-text);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.hero--v3 .hero__btns{margin-top:30px}
.hv__vis{position:relative;padding:clamp(28px,2.6vw,40px) 0 clamp(44px,4.4vw,64px) clamp(64px,6.4vw,104px)}
.hv__screen{margin:0;border-radius:var(--product-radius);overflow:hidden;border:1px solid var(--cx-line);box-shadow:var(--sh-3);background:#fff}
.hv__screen img{display:block;width:100%;height:auto}
.hv__op{position:absolute;left:0;bottom:0;margin:0;width:clamp(150px,14.6vw,214px)}
.hv__op img{display:block;width:100%;aspect-ratio:434/540;object-fit:cover;object-position:50% 0;
  border-radius:var(--r-lg);border:5px solid #fff;box-shadow:var(--sh-3);background:#fff}
.hv__cust{position:absolute;right:clamp(-8px,-.6vw,-4px);top:0;margin:0;width:clamp(84px,7.6vw,112px);text-align:center}
.hv__cust img{display:block;width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:var(--sh-3);background:#fff}
.hv__op figcaption,.hv__cust figcaption{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);white-space:nowrap;
  padding:4px 12px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--cx-line);box-shadow:0 4px 12px rgba(20,28,45,.08);
  font-size:12.5px;font-weight:800;color:var(--cx-ink)}
.hv__ai{position:absolute;top:clamp(4px,.6vw,10px);right:calc(clamp(84px,7.6vw,112px) + 14px);display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:var(--r-pill);background:var(--cx-ink);color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;
  box-shadow:0 8px 20px rgba(20,28,45,.18)}
.hv__wv{height:12px;gap:2px}
.hv__wv i{width:2px;background:#7CCBF4}

/* 제품 개요 — 고객 → AI 상담원 → 상담원 (화살표) · 아래 Callix Admin 띠 */
.ov{padding-block:var(--sec-pad) clamp(40px,4.4vw,64px)}
.ov-head{max-width:820px}
.ov-flow{list-style:none;margin:var(--gap-evidence) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,3.6vw,56px)}
.ov-r{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  padding:clamp(22px,2.2vw,30px);border:1px solid var(--cx-line);border-radius:var(--r-lg);background:#fff}
.ov-r:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(-1 * clamp(36px,3.6vw,56px) / 2 - 9px);width:18px;height:18px;transform:translateY(-50%);
  background:var(--cx-blue-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.ov-r--ai{background:linear-gradient(180deg,#E8F4FD 0%,#F3F9FE 100%);border-color:#D6E9F8}
.ov-r__pic{display:block;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--cx-blue-soft);flex:none}
.ov-r__pic img{display:block;width:100%;height:100%;object-fit:cover}
.ov-r__pic--ai{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--cx-blue-deep);color:#fff}
.ov-r__pic--ai b{font-size:20px;font-weight:800;letter-spacing:.02em;line-height:1}
.ov-r__pic--ai .wave{height:12px;gap:2px}
.ov-r__pic--ai .wave i{width:2px;background:rgba(255,255,255,.85)}
.ov-r__k{margin-top:18px;font-size:clamp(19px,1.6vw,22px);font-weight:800;letter-spacing:-.02em;line-height:1.35;color:var(--cx-ink)}
.ov-r__d{margin-top:8px;font-size:clamp(15px,1.15vw,16.5px);line-height:1.75;color:var(--cx-ink-2)}
.ov-r__via{position:absolute;top:-13px;left:clamp(22px,2.2vw,30px);padding:3px 11px;border-radius:var(--r-pill);
  background:var(--cx-blue-deep);color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
.ov-adm{margin-top:16px;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:6px 18px;
  padding:clamp(18px,1.8vw,22px) clamp(22px,2.2vw,30px);border-radius:var(--r-lg);background:var(--cx-bg-soft);border:1px solid var(--cx-line)}
.ov-adm__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--cx-line);color:var(--cx-blue-deep)}
.ov-adm .ov-r__k,.ov-adm .ov-r__d{margin:0}
#flow .cx-head .eyebrow + .head{margin-top:var(--gap-eyebrow)}
/* 응대 흐름 — 장면 제목 · 설명을 한 단계 키운다(D-51 '처리 과정 글자 크게') */
#flow .cx-sc__t{font-size:clamp(20px,1.75vw,25px)}
#flow .cx-sc__d{font-size:clamp(15px,1.15vw,16.5px);line-height:1.65}
#flow .cx-sc__n{font-size:14px}
#flow .cx-acts__d{font-size:14px}
#flow .cx-op__t{font-size:14px}

/* 과제와 해결 — 고민(위) ↔ Callix(아래) 한 장씩, 3 × 2 */
.pb-head{max-width:820px}
.pb-grid{list-style:none;margin:var(--gap-evidence) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pb-i{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);overflow:hidden}
.pb-i__q{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding:22px 24px 20px;
  font-size:clamp(15.5px,1.2vw,17px);font-weight:700;line-height:1.6;color:var(--cx-ink)}
.pb-i__n{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--cx-ink-3);font-variant-numeric:tabular-nums}
.pb-i__a{margin-top:auto;padding:16px 24px 20px;border-top:1px solid #DCEBF8;background:#F3F9FE;font-size:15px;line-height:1.7;color:var(--cx-ink-2)}
.pb-i__k{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--cx-blue-text)}
.pb-i__k::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--cx-blue-deep)}
.pb-bridge{margin-top:clamp(28px,3vw,40px);text-align:center;font-size:clamp(18px,1.6vw,22px);line-height:1.5;letter-spacing:-.01em;color:var(--cx-ink)}
.pb-bridge b{font-weight:800}

/* 주요 기능 — 01 제목 · 03 인계 블록 · 04 관리 화면 카드 */
.ps-h--f{margin-top:10px;margin-bottom:clamp(18px,2vw,26px)}
.ps-no{font-size:15px}
.ps-no b{font-size:15px}
.ft-sub{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--cx-ink)}
.ft-sub span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cx-ink);color:#fff;font-size:11.5px}
.ft-hand{margin-top:clamp(24px,2.6vw,36px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,3vw,48px);align-items:center;
  padding:clamp(22px,2.6vw,36px);border-radius:var(--r-lg);background:var(--cx-bg-soft)}
.ft-hand__t{margin-top:14px;font-size:clamp(18px,1.5vw,21px);font-weight:800;letter-spacing:-.02em;line-height:1.4;color:var(--cx-ink)}
.ft-hand__d{margin-top:8px;font-size:15px;line-height:1.75;color:var(--cx-ink-2)}
.ft-hand__ct{margin-top:18px;font-size:13px;font-weight:800;color:var(--cx-ink)}
.ft-hand__cl{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.ft-hand__cl li{position:relative;padding-inline-start:14px;font-size:14.5px;line-height:1.6;color:var(--cx-ink-2)}
.ft-hand__cl li::before{content:"";position:absolute;inset-inline-start:0;top:9.5px;width:5px;height:5px;border-radius:50%;background:var(--cx-blue-deep)}
.ft-hand__fig{margin:0}
.ft-hand__fig img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.ft-hand__fig figcaption{margin-top:8px;font-size:11.5px;color:var(--cx-ink-3);text-align:center}
.ft-sub--desk{margin-top:clamp(32px,3.4vw,48px)}
.ps-scene--human .ft-sub--desk + .z2h-shot{margin-top:14px}

/* 주요 기능 끝 → 콜백(자기 면이 있는 상자): Admin 04 제거 뒤(D-54) 아래 여백을 작은 절 값으로 — 두 절 사이 합계 약 144 */
#platform{padding-bottom:var(--sec-pad-sm)}

/* D-55 — Owner 피드백 마감 */
/* 제품 개요: 상담 흐름(고객 → AI → 상담원)과 운영 기반(Callix Admin)을 라벨로 구분 — Admin은 응대 단계가 아니다 */
.ov-k{margin-top:var(--gap-evidence);font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--cx-ink-3)}
.ov-k + .ov-flow{margin-top:20px}
.ov-k--adm{margin-top:28px;padding-top:20px;border-top:1px dashed #CBD5E1}
.ov-k--adm + .ov-adm{margin-top:12px}
/* 응대 흐름: 장면 제목 옆 주체(누가 하는가) */
.cx-sc__who{display:inline-block;margin-inline-start:10px;padding:2px 9px;border-radius:var(--r-pill);vertical-align:3px;
  background:#fff;border:1px solid #CFE3F6;font-size:12px;font-weight:800;letter-spacing:0;color:var(--cx-blue-text);white-space:nowrap}
.cx-sc--voice .cx-sc__who{background:rgba(255,255,255,.8)}
/* 과제와 해결: 한 줄에 고민 → Callix */
.pb-grid--rows{grid-template-columns:minmax(0,1fr);gap:10px}
/* D-56: 한 줄 = 두 개의 독립 면(고민 · Callix) + 사이 화살표. 큰 카드 하나를 안에서 나누지 않는다 */
.pb-grid--rows .pb-i{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1.12fr);align-items:stretch;background:none;border:0;border-radius:0;overflow:visible}
.pb-grid--rows .pb-i__q{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;align-content:center;
  padding:16px 22px;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md)}
.pb-grid--rows .pb-i__a{margin:0;padding:14px 22px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:start;
  background:#EEF5FC;border:1px solid #D7E6F5;border-radius:var(--r-md)}
.pb-grid--rows .pb-i__k{display:block;margin:0 0 3px;font-size:12px;letter-spacing:.06em;line-height:1.4}
.pb-grid--rows .pb-i__k::before{content:none}
.pb-i__arw{display:grid;place-items:center;color:var(--cx-blue-deep)}
/* 도입 효과: 3칸 */
.bn-grid.bn-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 도입 효과 — 4칸, 누구에게 무엇이 달라지는가 */
.bn-grid{list-style:none;margin:var(--gap-evidence) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bn-i{min-width:0;padding:clamp(22px,2.2vw,28px);border-radius:var(--r-md);background:#fff;border:1px solid var(--cx-line)}
.bn-i__k{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);background:var(--cx-blue-soft);color:var(--cx-blue-text);font-size:12.5px;font-weight:800}
.bn-i__t{margin-top:14px;font-size:clamp(19px,1.5vw,21px);font-weight:800;letter-spacing:-.02em;line-height:1.4;color:var(--cx-ink)}
.bn-i__d{margin-top:10px;max-width:30em;font-size:15px;line-height:1.7;color:var(--cx-ink-2)}
.bn-grid--3 .bn-i{padding:clamp(22px,2.2vw,28px) clamp(22px,2.2vw,28px) clamp(20px,2vw,26px)}

/* 활용 장면 — 4장면 · 장면마다 AI / 사람(또는 고객) 역할 */
.us-grid{list-style:none;margin:var(--gap-evidence) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.us{display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2.2vw,28px);border-radius:var(--r-md);border:1px solid var(--cx-line);background:#fff}
.us__n{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--cx-blue-text)}
.us__h{margin-top:8px;font-size:clamp(18px,1.4vw,20px);font-weight:800;letter-spacing:-.02em;line-height:1.4;color:var(--cx-ink)}
.us__r{margin:16px 0 0;display:grid;gap:12px}
.us__r>div{padding-top:12px;border-top:1px solid var(--cx-line)}
.us__r dt{font-size:12.5px;font-weight:800;color:var(--cx-ink)}
.us__r>div:first-child dt{color:var(--cx-blue-text)}
.us__r dd{margin:3px 0 0;font-size:14.5px;line-height:1.7;color:var(--cx-ink-2)}
@media (min-width:761px){
  .us-grid{row-gap:16px}
  .us{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .us__r{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .us__r>div{padding:12px 0}
  .us__r>div:last-child{padding-bottom:0}
}
#usecase .head{font-size:var(--fs-h2)}
#usecase .uc__scope{margin-top:clamp(24px,2.6vw,32px)}

/* JA — 구 단위 줄바꿈 */
html[lang="ja"] :is(.hv__pillars li,.ov-r__k,.pb-bridge,.ft-hand__t,.ft-sub,.bn-i__t,.us__h,.us__r dt,.hv__ai){word-break:keep-all;overflow-wrap:break-word;line-break:strict}

@media (max-width:1100px){
  .hero--v3 .hero__card{grid-template-columns:1fr}
  .hv__vis{max-width:720px}
  .bn-grid,.us-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bn-grid.bn-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hero--v3 .hero__card{gap:28px;padding:26px 20px 30px}
  .hero--v3 .hero__h1{font-size:30px;line-height:1.28}
  html[lang="ja"] .hero--v3 .hero__h1{font-size:26px;line-height:1.34}
  .hv__pillars li{font-size:15px}
  .hv__vis{padding:22px 0 36px 16%}
  .hv__op{width:34%}
  .hv__op img{border-width:4px}
  .hv__cust{width:66px;right:-4px}
  .hv__cust img{border-width:3px}
  .hv__cust figcaption{bottom:-10px;font-size:11px;padding:2px 8px}
  .hv__op figcaption{font-size:11.5px;padding:3px 10px}
  .hv__ai{right:80px;top:0;padding:5px 10px;font-size:11px}
  .ov-flow{grid-template-columns:1fr;gap:34px}
  .ov-r{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;padding:20px}
  .ov-r__pic{grid-row:1/3;width:60px;height:60px}
  .ov-r__pic--ai b{font-size:16px}
  .ov-r__k{margin-top:2px;font-size:18px}
  .ov-r__d{margin-top:4px;font-size:15px}
  .ov-r:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:-26px;transform:translateX(-50%) rotate(90deg)}
  .ov-r__via{left:auto;right:16px}
  .ov-adm{grid-template-columns:auto minmax(0,1fr);padding:18px 20px}
  .ov-adm__ico{grid-row:1/3;width:44px;height:44px}
  .pb-grid,.bn-grid,.us-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .pb-i__q{padding:18px 20px 16px;font-size:15.5px}
  .pb-i__a{padding:14px 20px 18px;font-size:14.5px}
  .pb-bridge{text-align:start;font-size:18px}
  .ft-hand{grid-template-columns:minmax(0,1fr);padding:20px}
  .pb-grid--rows{gap:20px}
  .pb-grid--rows .pb-i{grid-template-columns:minmax(0,1fr)}
  .bn-grid.bn-grid--3{grid-template-columns:minmax(0,1fr)}
  .pb-grid--rows .pb-i__q{padding:14px 16px;gap:12px}
  .pb-grid--rows .pb-i__a{padding:12px 16px 14px}
  .pb-i__arw{height:20px}
  .pb-i__arw svg{width:15px;height:15px;transform:rotate(90deg)}
  .cx-sc__who{margin-inline-start:8px;font-size:11.5px}
  .bn-i,.us{padding:20px}
}

/* ------------------------------------------------------------
   29. FINAL FULL-PAGE RHYTHM (D-58 · 2026-10-08) — 여백 · 면 · 보조 문단 표현만. 문구 · 구조 · 증거 불변
   ------------------------------------------------------------ */
/* 주요 기능: 장면 사이 130 → 96, 소개 → 01 78 → 56, 03 안 인계 상자 · 보조 제목 간격 축소. 화면 증거 크기는 그대로 */
#platform{padding-top:clamp(48px,5.6vw,80px);padding-bottom:clamp(40px,4.4vw,64px)}
.ps-scene{margin-top:calc(clamp(48px,4.9vw,70px) + var(--ps-open))}
.ps-intro + .ps-scene{margin-top:calc(clamp(28px,2.1vw,30px) + var(--ps-open))}
.ft-hand{margin-top:clamp(20px,1.8vw,26px);grid-template-columns:minmax(0,6fr) minmax(0,5fr);padding:clamp(20px,2vw,28px) clamp(22px,2.4vw,32px)}
.ft-sub--desk{margin-top:clamp(24px,2.2vw,32px)}
.ps-scene--human .z2h-notes{margin-top:clamp(16px,1.6vw,22px)}
/* 관리·운용(회색) → 신뢰성: 흰 면으로 바꿔 회색 두 절이 이어지지 않게. FAQ(흰)와는 본문 폭 가는 선으로 구분 */
#maker.band{background:var(--cx-bg)}
#faq > .wrap{position:relative}
#faq > .wrap::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:calc(-1 * var(--sec-pad));height:1px;background:var(--cx-line)}
/* 활용 장면 아래 적용 범위 문단: 본문 블록이 아닌 보조 안내로 — 왼쪽 가는 선 · 한 단계 옅은 글 · 짧은 행 */
#usecase .uc__scope{margin-top:clamp(28px,2.8vw,40px);max-width:42em;padding-inline-start:16px;border-inline-start:2px solid var(--cx-line);
  font-size:13.5px;line-height:1.8;color:var(--cx-ink-3)}
html[lang="ja"] #usecase .uc__scope{max-width:46em}
@media (max-width:760px){
  .ps-scene--human .z2h-notes{margin-top:16px}
  #usecase .uc__scope{padding-inline-start:12px}
}