/* Callix KO 메인 B+ 통합 — B안(시안 B · H-B Hero) 장면 스타일. index-ko.html 전용 · JA 영향 없음.
   출처: _review/callix-v2-b-hero-ai-identity-compare-01/hero-b.html 인라인 CSS → tools/build_bplus_p0.py로 변환.
   - 공용 callix.css와 이름이 겹치는 블록(.hero .btn .wrap .scene .hv .bub .av .eyebrow .wave)은 kb- 접두사
   - B의 :root 토큰 · body 글꼴은 .kb 범위에만(공용 --cx-* 토큰과 기존 섹션에 영향 없음)
   - 시안 전용 띠 · 시안 GNB · 시안 푸터 · B 데모 블록 규칙은 옮기지 않음 */

/* callix.css 전역 초기화를 B 범위에서 브라우저 기본값으로 되돌린다(B는 기본값 위에서 설계됨). :where()로 B 규칙보다 항상 약하게 */
.kb :where(h1,h2,h3,h4,h5,p,ul,ol){margin:revert;padding:revert}
.kb :where(ul,ol){list-style:revert}
.kb :where(button){font:revert;color:revert;cursor:revert;border:revert;background:revert}
.kb :where(svg){max-width:revert;height:revert;display:revert}
/* 공용 body의 글자 렌더링 설정(antialiased · optimizeLegibility 커닝)이 상속되면 B 장면의 줄바꿈 · 높이가 바뀐다 → B 검수 상태 유지 */
.kb{-webkit-font-smoothing:auto;text-rendering:auto}

/* ============ 시안 B · Experience-first — 한 통의 전화가 흘러가는 과정을 장면으로 ============
   브랜드 토큰은 운영 callix.css와 동일 값(새 색 없음 · 어두운 띠는 --cx-ink 활용). 내부 검수용 독립 시안.
   장면 제목은 공개 제품소개서(승인 자료)의 문장을 그대로 사용. */
.kb{--cx-blue:#6BC9F2; --cx-blue-deep:#2F80ED; --cx-blue-soft:#EAF6FE; --cx-blue-text:#1F6BD1;
  --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-ink:#16181D; --cx-ink-2:#4A505C; --cx-ink-3:#666E7D;
  --cx-bg:#fff; --cx-bg-soft:#F5F7FA; --cx-line:#E3E8EF;
  --r-pill:999px; --r-lg:22px; --r-md:14px;
  --sh-1:0 1px 3px rgba(22,24,29,.07); --sh-2:0 10px 30px rgba(22,24,29,.12);
  --sh-shot:0 24px 60px -18px rgba(22,36,58,.28);
  --wrap:1152px;}
.kb{margin:0;background:var(--cx-bg);color:var(--cx-ink);
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.72;word-break:keep-all}
:where(.kb) img{max-width:100%;height:auto;display:block}
:where(.kb) figure{margin:0}
:where(.kb) a{color:inherit;text-decoration:none}
.kb-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:where(.kb) :focus-visible{outline:3px solid var(--cx-blue-deep);outline-offset:3px;border-radius:4px}
.kb-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;border:0;cursor:pointer}
.kb-btn--primary{background:var(--cx-ink);color:#fff;box-shadow:var(--sh-2)}
.kb-btn--ghost{background:#fff;color:var(--cx-ink);box-shadow:inset 0 0 0 1.5px var(--cx-line)}
.kb-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cx-ink)}
.kb-eyebrow{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.05em;color:var(--cx-blue-text);
  background:var(--cx-blue-soft);padding:7px 16px;border-radius:var(--r-pill)}
.kb-wave{display:inline-flex;align-items:center;gap:2px}
.kb-wave i{width:3px;border-radius:2px;background:currentColor;height:6px;animation:kb-wv 1s ease-in-out infinite}
.kb-wave i:nth-child(2){height:12px;animation-delay:.15s}
.kb-wave i:nth-child(3){height:8px;animation-delay:.3s}
.kb-wave i:nth-child(4){height:13px;animation-delay:.45s}
.kb-wave i:nth-child(5){height:7px;animation-delay:.6s}
@keyframes kb-wv{50%{transform:scaleY(.45)}}
@media (prefers-reduced-motion:reduce){
  .kb-wave i{animation:none}
}
/* ================= HERO — 통합 01: 위쪽(카피 · 대표 비주얼) 규칙은 스타일 끝 'HERO — 통합 01' 블록. 여정 스트립 규칙은 아래 그대로 ================= */
/* 여정 스트립: 한 통의 전화 */
.journey{max-width:980px;margin:clamp(40px,5vw,64px) auto 0;padding:0 24px 72px;position:relative}
.journey ol{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0;padding:0;list-style:none;counter-reset:jn}
.journey li{position:relative;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);
  padding:20px 18px 18px;box-shadow:var(--sh-1);font-size:14px;line-height:1.55;color:var(--cx-ink-2)}
.journey li::before{counter-increment:jn;content:"0" counter(jn);display:block;font-size:12px;font-weight:800;color:var(--cx-blue-text);margin-bottom:6px}
.journey li b{display:block;font-size:16px;color:var(--cx-ink);margin-bottom:3px}
.journey li:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:14px;height:2px;background:var(--cx-ink-3);opacity:.5}
.journey__cap{text-align:center;font-size:12.5px;color:var(--cx-ink-3);margin:18px 0 0}
.journey a{display:block;height:100%}
.journey li:hover{border-color:var(--cx-ink-3)}
/* ================= 장면 공통 ================= */
.kb-scene{padding:clamp(64px,8vw,110px) 0}
.kb-scene__no{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--cx-blue-text)}
.kb-scene__no::before{content:"";width:34px;height:2px;background:var(--cx-blue-deep)}
.kb-scene h2{font-size:clamp(25px,3vw,36px);line-height:1.32;letter-spacing:-.02em;font-weight:400;margin:16px 0 0}
.kb-scene h2 b{font-weight:800}
.kb-scene__d{margin:16px 0 0;color:var(--cx-ink-2);font-size:16.5px;max-width:560px}
.kb-scene__cap{margin:12px 2px 0;font-size:12.5px;color:var(--cx-ink-3)}
.kb-scene__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.kb-scene__cols--rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.kb-scene--soft{background:var(--cx-bg-soft)}
.shotframe{background:#fff;border-radius:16px;box-shadow:var(--sh-shot);overflow:hidden;border:1px solid rgba(22,36,58,.08)}
.shotframe__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#EEF3F9;border-bottom:1px solid var(--cx-line);margin:0}
.shotframe__bar i{width:9px;height:9px;border-radius:50%;background:#D4DCE6}
.shotframe__bar span{margin-left:8px;font-size:11.5px;font-weight:700;color:var(--cx-ink-3)}
/* 장면 1 — 통화 카드 */
.call{position:relative;max-width:440px;margin:0 auto}
.call__card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-shot);padding:24px;border:1px solid var(--cx-line)}
.call__head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--cx-line)}
.call__av{width:44px;height:44px;border-radius:14px;background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.call__who b{display:block;font-size:15px}
.call__who span{font-size:12px;color:var(--cx-ink-3)}
.call__who .call__num{white-space:nowrap}  /* F06.3 — 예시 번호(03-****-**** · 1688-****)는 한 덩어리로 · 좁은 화면에서는 （例）/(예시) 뒤에서만 줄바꿈 */
.call__tag{margin-left:auto;flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--cx-ink-3);
  border:1px solid var(--cx-line);border-radius:var(--r-pill);padding:5px 11px}
.kb-bub{margin:14px 0 0;max-width:86%;border-radius:14px;padding:11px 15px;font-size:14.5px;line-height:1.6}
.kb-bub b{display:block;font-size:11px;font-weight:800;color:var(--cx-ink-3);margin-bottom:2px}
.kb-bub--cust{background:var(--cx-bg-soft)}
.kb-bub--ai{background:var(--cx-blue-soft);margin-left:auto}
.call__cust{position:absolute;left:-30px;top:-64px;margin:0;text-align:center}
.call__cust img{width:88px;height:88px;border-radius:50%;border:4px solid #fff;box-shadow:var(--sh-2);object-fit:cover}
/* F06.3 · WebPinch 6ade8c8b: 라벨을 사진 아래 가로 배치 — Hero의 お客様 · オペレーター 라벨과 같은 방식(사진 아래 가장자리에 걸친 알약) */
.call__cust figcaption{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);margin:0;white-space:nowrap;
  background:#fff;border-radius:var(--r-pill);padding:4px 13px;font-size:12.5px;font-weight:800;color:var(--cx-ink);box-shadow:var(--sh-1);border:1px solid var(--cx-line-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{font-size:13px;font-weight:700;color:var(--cx-ink-2);background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-pill);padding:7px 14px}
.kb-scene--soft .chips li{background:#fff}
/* 장면 2 — 행동 연결 (final 03): 왼쪽 대표 사용 예시(예약 안내 | 화면 안내) + 오른쪽 제목 · 기능 카드 3 */
#s2.kb-scene{padding:clamp(64px,7vw,96px) 0}
.s2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"vis head" "vis cards";
  column-gap:clamp(40px,5vw,72px);align-items:center}
.s2-vis{grid-area:vis;min-width:0}
.s2-head{grid-area:head;align-self:end}
.s2-head h2{font-size:clamp(25px,2.4vw,32px)}
.s2-head .kb-scene__d{margin-top:14px}
.s2-br{display:none}
@media (min-width:1101px){
  .s2-br{display:inline}
}
.s2-cards{grid-area:cards;align-self:start;list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
.s2-card{display:grid;grid-template-columns:40px 1fr;gap:0 14px;align-items:start;background:#fff;border:1px solid #EAEEF4;
  border-radius:var(--r-md);padding:13px 16px;transition:border-color .2s,box-shadow .2s}
.s2-card i{grid-row:1/3;width:40px;height:40px;border-radius:12px;background:var(--cx-blue-soft);color:var(--cx-blue-text);
  display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.s2-card svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.s2-card b{font-size:16px;line-height:1.4;padding-top:1px}
.s2-card span{font-size:14px;line-height:1.55;color:var(--cx-ink-2)}
#s2[data-s2="rsv"] .s2-card[data-rel~="rsv"]{border-color:#B9D3F5;box-shadow:0 6px 18px -10px rgba(47,128,237,.35)}
#s2[data-s2="rsv"] .s2-card[data-rel~="rsv"] i{background:var(--cx-blue-deep);color:#fff}
/* 비주얼 무대 */
.s2-stage{border-radius:28px;background:linear-gradient(160deg,#EAF6FE 0%,#F2F8FD 55%,#FAFCFE 100%);padding:18px 18px 0;overflow:hidden}
.s2-canvas{position:relative;height:486px;margin-top:14px;overflow:hidden}
.s2-panel{position:absolute;inset:0}
.s2-panel[hidden]{display:none}
/* 간소화 02: 탭 전환이 없어져 패널 등장 애니메이션 제거 */
.s2-cap{margin:12px 4px 0;font-size:12.5px;line-height:1.55;color:var(--cx-ink-3)}
/* 휴대폰 일부 프레임(아래는 무대 경계에서 잘림) */
.s2-ph{position:absolute;top:16px;height:calc(100% + 40px);background:var(--cx-ink);border-radius:40px 40px 0 0;
  padding:10px 10px 0;box-shadow:0 30px 60px -28px rgba(22,36,58,.5)}
.s2-ph__scr{height:100%;background:#fff;border-radius:31px 31px 0 0;overflow:hidden}
.s2-sb{display:flex;justify-content:space-between;align-items:center;margin:0;padding:11px 22px 6px;font-size:12px;font-weight:700;color:var(--cx-ink)}
.s2-sb .isl{width:76px;height:22px;border-radius:12px;background:var(--cx-ink)}
.s2-sb .sig{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.s2-sb .sig i{width:3px;border-radius:1px;background:var(--cx-ink)}
.s2-sb .sig i:nth-child(1){height:4px}
.s2-sb .sig i:nth-child(2){height:6px}
.s2-sb .sig i:nth-child(3){height:8px}
.s2-sb .sig i:nth-child(4){height:10px}
/* 예시 A — 예약 안내 문자 */
.s2-ph--rsv{right:20px;width:318px}
.s2-mh{display:flex;align-items:center;gap:10px;margin:0;padding:4px 16px 11px;border-bottom:1px solid var(--cx-line)}
.s2-mh .bk{font-size:21px;line-height:1;color:var(--cx-ink-3)}
.s2-mh .kb-av{flex:none;width:32px;height:32px;border-radius:50%;background:#2A3546;color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.s2-mh b{display:block;font-size:14.5px;line-height:1.25}
.s2-mh small{display:block;font-size:11.5px;color:var(--cx-ink-3)}
.s2-thread{padding:12px 12px 0}
.s2-day{margin:0 0 10px;text-align:center;font-size:11.5px;color:var(--cx-ink-3)}
.s2-msgrow{display:flex;align-items:flex-end;gap:6px}
.s2-sms{max-width:84%;background:#ECEEF1;color:var(--cx-ink);border-radius:18px 18px 18px 6px;padding:10px 13px;font-size:14px;line-height:1.5;font-weight:400;word-break:keep-all}
.s2-sms p{margin:0}
.s2-sms p+p{margin-top:.75em}
.s2-time{flex:none;font-size:10.5px;color:var(--cx-ink-3);padding-bottom:2px}
/* 통화 직후 맥락 카드(예약 안내 왼쪽) */
.s2-callcard{position:absolute;z-index:2;left:10px;top:150px;width:212px;background:#fff;border:1px solid var(--cx-line);border-radius:18px;box-shadow:var(--sh-2);padding:14px}
.s2-callcard__h{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.s2-callcard__h .kb-av{flex:none;width:32px;height:32px;border-radius:10px;background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.s2-callcard__h b{display:block;font-size:13.5px;line-height:1.25}
.s2-callcard__h small{display:block;font-size:11.5px;color:var(--cx-ink-3)}
.s2-callcard__b{margin:0;background:var(--cx-blue-soft);border-radius:12px 12px 12px 4px;padding:9px 11px;font-size:13px;line-height:1.5}
.s2-callcard__to{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;font-weight:800;color:var(--cx-blue-text)}
.s2-callcard__to svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1100px){
  .s2{grid-template-columns:1fr;grid-template-areas:"head" "vis" "cards";row-gap:28px}
  .s2-head{align-self:auto}
  .s2-cards{margin-top:0}
}
@media (max-width:640px){
  #s2.kb-scene{padding:44px 0}
  .s2{row-gap:18px}
  .s2-stage{padding:10px 10px 0;border-radius:22px}
  .s2-cap{margin-top:8px;font-size:12px}
  .s2-canvas{height:404px;margin-top:10px}
  .s2-ph{top:10px}
  .s2-mh{padding-bottom:9px}
  .s2-thread{padding-top:10px}
  .s2-day,.s2-time{display:none}
  .s2-sms{max-width:94%;font-size:13.5px;padding:9px 12px}
  .s2-sms p+p{margin-top:.6em}
  .s2-callcard{display:none}
  .s2-ph{top:14px;left:0;right:0;margin:0 auto;padding:8px 8px 0;border-radius:34px 34px 0 0}
  .s2-ph__scr{border-radius:27px 27px 0 0}
  .s2-ph--rsv{width:min(318px,100%)}
  .s2-sb{display:none}
  .s2-mh{padding-top:12px}
  .s2-cards{gap:6px}
  .s2-card{grid-template-columns:30px 1fr;gap:0 11px;padding:11px 13px}
  .s2-card i{width:30px;height:30px;border-radius:9px}
  .s2-card svg{width:18px;height:18px}
  .s2-card b{font-size:15px}
  .s2-card span{font-size:13.5px;line-height:1.5}
}
/* 장면 3 — 인계 */
.handoff__img{margin:0}
.handoff__img img{width:100%}
.cond{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);padding:16px;margin:22px 0 0;box-shadow:var(--sh-1)}
.cond img{width:100%;max-width:440px;border-radius:8px}
.cond p{margin:10px 0 0;font-size:13px;color:var(--cx-ink-2)}
/* 장면 4 — 어시스턴트 */
.assistwide{margin:clamp(28px,4vw,48px) 0 0}
.assistwide img{width:100%}
/* 장면 5 — 콜백 타임라인 */
.cbline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:clamp(30px,4vw,48px) 0 0;counter-reset:cb}
.cbline figure{position:relative;margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);padding:18px;box-shadow:var(--sh-1)}
.cbline figure::before{counter-increment:cb;content:"0" counter(cb);font-size:12px;font-weight:800;color:var(--cx-blue-text)}
.cbline img{width:100%;aspect-ratio:4/3.4;object-fit:contain;background:linear-gradient(135deg,#FFF6F3 0%,#F6F9FD 55%,#EEF6FD 100%);border-radius:8px;margin-top:10px;padding:10px;box-sizing:border-box}
.cbline figcaption{font-size:13.5px;font-weight:700;margin-top:auto;padding-top:12px}
.cbline figcaption em{display:block;font-style:normal;font-weight:400;font-size:12.5px;color:var(--cx-ink-3);margin-top:2px}
/* 장면 6 — 운영 (어두운 띠) */
.kb-scene--dark{background:var(--cx-ink);color:#EDF1F7}
.kb-scene--dark .kb-scene__no{color:#9CC8F7}
.kb-scene--dark .kb-scene__no::before{background:#9CC8F7}
.kb-scene--dark .kb-scene__d{color:#B9C2D0}
.kb-scene--dark .kb-scene__cap{color:#8C96A6}
.opsgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:clamp(30px,4vw,48px) 0 0;align-items:start}
.opsgrid .shotframe{border-color:rgba(255,255,255,.14)}
.opsgrid .shotframe img{width:100%;aspect-ratio:16/9.2;object-fit:cover;object-position:0 0}
.cycle{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 0;padding:0;list-style:none}
.cycle li{font-size:13px;font-weight:500;color:#DDE4EE;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);padding:8px 16px;cursor:default}
.cycle li.sep{background:none;border:0;padding:0;color:#7C8798}
/* ================= 데모 CTA ================= */
/* ================= 반응형 ================= */
@media (max-width:1100px){
  .kb-scene__cols,.kb-scene__cols--rev{grid-template-columns:1fr;gap:40px}
  .kb-scene__cols--rev>*:first-child{order:2}
  /* 모바일 장면 순서: 항상 글 → 이미지 */
  .opsgrid{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* 여정 스트립: 카드 → 구분선 목록으로 압축 */
  .journey{padding-bottom:52px}
  .journey ol{grid-template-columns:1fr;gap:0}
  .journey li{display:grid;grid-template-columns:auto auto 1fr;gap:0 10px;align-items:baseline;
    background:transparent;border:0;box-shadow:none;border-bottom:1px solid var(--cx-line);
    border-radius:0;padding:11px 2px;font-size:13px}
  .journey li::before{margin:0}
  .journey li b{font-size:14.5px;margin:0}
  .journey li:not(:last-child)::after{content:none}
  .cbline{grid-template-columns:1fr}
  .cbline img{aspect-ratio:auto;max-height:220px}
}
@media (max-width:640px){
  .kb{font-size:16px}
  .kb-hero__btns .kb-btn{flex:1 1 100%}
  .call{max-width:100%}
  .call__cust{position:relative;left:auto;top:auto;display:block;width:max-content;margin:0 0 34px}  /* F06.3: 사진 아래 라벨 — 작은 사진(56px)은 얼굴을 가리지 않게 겹치지 않고 바로 아래 · 카드와 간격 */
  .call__cust img{display:block;width:56px;height:56px}
  .call__cust figcaption{bottom:auto;top:calc(100% + 2px)}
  /* 모바일: 넓은 화면은 초점 영역 crop */
  .assistwide .shotframe img{aspect-ratio:4/3;object-fit:cover;object-position:62% 50%}
  .opsgrid .shotframe img{aspect-ratio:4/3.2;object-position:0 0}
}
/* ================= 정밀 개선 01(기능 보강 01 기반) — 장면 01 · 03 · 04 · 05 · 06 수정 · 화면 안내 인서트 규칙은 그대로 =================
   새 색 없음(기존 토큰만). 실제 제품 화면은 원본 파생본을 그대로 쓰고, 확대는 CSS crop(이미지 수정 없음)으로만 한다. */
/* 공통 — 실제 화면 crop: --iw 원본 폭 · --x/--y 시작점 · --w/--h 보여 줄 영역(px, 원본 기준) */
.crop{position:relative;overflow:hidden;aspect-ratio:var(--w)/var(--h);border-radius:10px;background:#F3F6FA}
.crop::after{content:"";position:absolute;inset:0;border:1px solid var(--cx-line);border-radius:inherit;pointer-events:none;z-index:1}
.crop img{position:absolute;max-width:none;width:calc(var(--iw)/var(--w)*100%);left:calc(var(--x)/var(--w)*-100%);top:calc(var(--y)/var(--h)*-100%)}
.mark.crop{border-radius:0;background:none}
.mark.crop::after{content:none}
.mark.crop>img{width:calc(var(--iw)/var(--w)*100%)}
.mark .hb{z-index:2}
/* 공통 — 화면 위 번호 영역(설명 목록과 같은 번호) */
.mark{position:relative}
.mark>img{width:100%}
.hb{position:absolute;left:calc(var(--l)*1%);top:calc(var(--t)*1%);width:calc(var(--bw)*1%);height:calc(var(--bh)*1%);
  border:2px solid var(--cx-blue-deep);border-radius:10px;box-shadow:0 0 0 4px rgba(47,128,237,.12);pointer-events:none}
.hb>b,.hn{position:absolute;left:var(--bx,-13px);top:var(--by,-13px);width:26px;height:26px;border-radius:50%;background:var(--cx-blue-text);color:#fff;
  font-size:13px;font-weight:800;line-height:26px;text-align:center;box-shadow:0 2px 8px rgba(22,36,58,.3)}
.hn{left:calc(var(--l)*1%);top:calc(var(--t)*1%);transform:translate(-50%,-50%)}
.num{display:inline-flex;flex:none;width:24px;height:24px;border-radius:50%;background:var(--cx-blue-deep);color:#fff;
  font-size:12.5px;font-weight:800;line-height:1;align-items:center;justify-content:center}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.legend li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:3px 12px;align-items:start;align-content:start}
.legend li>b{font-size:15.5px;line-height:1.45;padding-top:1px}
.legend .lg-d{grid-column:2;font-size:14px;line-height:1.62;color:var(--cx-ink-2)}
/* 화면 크게 보기(모바일): 같은 이미지 1장의 보여 줄 영역만 버튼으로 바꾼다 — 이미지 반복 없음 */
.zv.is-zoom .hb{display:none}
.zv__nav{display:none}
/* 장면 01 — 설정 → 응대 */
#s1 .kb-scene__cols{align-items:center}
.setup{margin:clamp(36px,4vw,52px) 0 0;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px);box-shadow:var(--sh-1)}
.setup__head{max-width:760px}
.setup__tag{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--cx-blue-text)}
#s1.kb-scene{padding-bottom:clamp(56px,6vw,84px)}
.setup h3{font-size:clamp(19px,1.8vw,22px);line-height:1.38;letter-spacing:-.015em;font-weight:400;margin:8px 0 0}
.setup h3 b{font-weight:800}
.setup__d{margin:12px 0 0;font-size:15.5px;line-height:1.68;color:var(--cx-ink-2)}
.setup__shot{margin:26px 0 0}
.setup .legend{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:24px}
/* 장면 03 — 조건 → 요약 전달 → 이어받기 */
.s3g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"head fig" "steps fig";gap:0 clamp(32px,5vw,72px)}
.s3g__head{grid-area:head}
.s3g__fig{grid-area:fig;align-self:center}
.s3g__steps{grid-area:steps}
.hsteps{list-style:none;margin:26px 0 0;padding:0}
.hsteps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:3px 14px;padding:15px 0;border-top:1px solid var(--cx-line)}
.hsteps li:first-child{border-top:0;padding-top:4px}
.hsteps b{font-size:16px;line-height:1.45;padding-top:1px}
.hsteps .d{grid-column:2;font-size:14.5px;line-height:1.62;color:var(--cx-ink-2)}
.hsteps .cond2{grid-column:2;margin:10px 0 0;background:#fff;border:1px solid var(--cx-line);border-radius:12px;padding:10px 12px;box-shadow:var(--sh-1)}
.hsteps .cond2 .crop{background:none}
.hsteps .cond2 .crop::after{content:none}
.hsteps .cond2 figcaption{margin-top:6px;font-size:12px;color:var(--cx-ink-3)}
/* F06.3 — 연결 조건 기입 예시(HTML · 説明用). 실제 입력란처럼 보이는 연한 면 · 글자 크기는 crop 시절 표시 크기와 비슷하게 */
.cond2__ex{max-width:380px;background:var(--cx-bg-soft);border:1px solid var(--cx-line);border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.6;color:var(--cx-ink-2)}
.cond2__ex p{margin:0}
.cond2__ex .cond2__k{font-weight:700;color:var(--cx-ink)}
/* 장면 04 — 상담원 데스크 전체 화면 + 번호 영역 */
.desk{margin:clamp(28px,4vw,44px) 0 0}
#s4 .legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:26px}
/* 장면 05 — 접수 → 예약 확인 → 연락 · 기록 */
.cbflow{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) minmax(0,1.1fr);gap:20px;margin:clamp(30px,4vw,44px) 0 0;align-items:stretch}
.cbstep{background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.cbstep--main{border-color:#C9DCF2}
.cbstep__h{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 10px;margin:0}
.cbstep__h small{grid-column:2;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--cx-blue-text)}
.cbstep__h b{grid-column:2;font-size:16.5px;line-height:1.4;text-wrap:balance}
.cbstep__h .num{grid-row:1/3}
.cbstep>p.d{margin:8px 0 0;font-size:14px;line-height:1.62;color:var(--cx-ink-2)}
.cbstep__shots{padding-top:16px;display:grid;gap:10px}
.cbshot{margin:0;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#FFF6F3 0%,#F6F9FD 55%,#EEF6FD 100%);border:1px solid var(--cx-line);padding:10px}
.cbshot img{width:100%;max-width:250px;margin:0 auto}
.cbshot figcaption{margin-top:6px;font-size:12px;color:var(--cx-ink-3);text-align:center}
.cbstep--main .crop{border-radius:12px}
/* 장면 06 — 운영 화면 탭 + 개선 사이클 */
.opstabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:clamp(28px,4vw,40px) 0 0}
.opstab{font:inherit;text-align:left;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);
  padding:14px 16px;color:#B9C2D0;display:grid;gap:3px;transition:background .2s,border-color .2s}
.opstab b{font-size:15.5px;line-height:1.4;color:#EDF1F7}
.opstab span{font-size:13.5px;line-height:1.5}
.opstab:hover{border-color:rgba(255,255,255,.4)}
.opstab[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--cx-ink-2)}
.opstab[aria-selected="true"] b{color:var(--cx-ink)}
.opspanel{margin-top:16px}
.opspanel[hidden]{display:none}
.opspanel .shotframe{border-color:rgba(255,255,255,.14)}
.opsimg{aspect-ratio:16/9;background:#E7EEF7}
.opsimg img{width:100%;height:100%;object-fit:contain}
.opsimg--top img{object-fit:cover;object-position:50% 0}
.opspanel .crop{display:none;border:0;border-radius:0}
.opspanel__d{display:none}
.opsmenu{margin:20px 0 0;font-size:13px;line-height:1.7;color:#8C96A6}
.opsmenu b{color:#C9D1DD;font-weight:700;margin-right:6px}
.cycle--6{margin-top:34px}
.cycle__h{margin:34px 0 0;font-size:15px;font-weight:700;color:#EDF1F7}
.cycle__h+.cycle{margin-top:14px}
@media (max-width:1100px){
  .setup__head{grid-template-columns:1fr}
  .setup .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s3g{grid-template-columns:1fr;grid-template-areas:"head" "fig" "steps";row-gap:28px}
}
@media (max-width:760px){
  /* 모바일: 넓은 화면은 전체 모습 + 번호 영역을 유지하고, 항목마다 읽을 수 있는 crop을 함께 보여 준다 */
  .zv__nav.is-ready{display:flex;gap:5px;margin:0 0 10px}
  .zv__nav button{flex:1;min-width:0;font:inherit;font-size:12.5px;font-weight:700;line-height:1.3;padding:7px 2px;border-radius:12px;
    border:1px solid var(--cx-line);background:#fff;color:var(--cx-ink-2);cursor:pointer;display:grid;gap:1px;align-content:center;min-height:44px}
  .zv__nav button small{font-size:10.5px;color:var(--cx-ink-3)}
  .zv__nav button[aria-pressed="true"]{background:var(--cx-ink);color:#fff;border-color:var(--cx-ink)}
  .zv__nav button[aria-pressed="true"] small{color:#C9D3E1}
  .legend{gap:14px}
  .legend .lg-d{font-size:13.5px;line-height:1.58}
  .setup__shot{margin-top:18px}
  .setup .legend,#s4 .legend{margin-top:18px}
  .hsteps li{padding:12px 0}
  .hsteps .d{font-size:14px}
  .cbstep>p.d{font-size:13.5px}
  .setup .legend,#s4 .legend{grid-template-columns:1fr}
  .cbshot img{max-width:250px !important}
  .cbshot{padding:6px}
  .cbshot figcaption{font-size:11.5px}
  .hb{border-width:1.5px;border-radius:6px;box-shadow:none}
  .hb>b,.hn{width:20px;height:20px;line-height:20px;font-size:11px;left:-9px;top:-9px}
  .hn{left:calc(var(--l)*1%);top:calc(var(--t)*1%)}
  .bridge li{grid-template-columns:1fr;gap:2px}
  .bridge .arr{display:none}
  .cbflow{grid-template-columns:1fr}
  .opstab span{display:none}
  .opstab{text-align:center;padding:11px 6px}
  .opstab b{font-size:14px}
  .opspanel__d{display:block;margin:0 0 12px;font-size:14px;line-height:1.6;color:#B9C2D0}
  .opsimg{display:none}
  .opspanel .crop{display:block}
}
@media (max-width:640px){
  #s1.kb-scene,#s3.kb-scene,#s4.kb-scene,#s5.kb-scene,#s6.kb-scene{padding-top:52px;padding-bottom:52px}
  .setup{margin-top:32px;padding:18px 12px}
  .cbstep{padding:18px 16px}
}
/* ================= 간소화 02 — 장면 02 예시 라벨 · 화면 안내 인서트(대표 화면 1장) ================= */
/* 장면 02: 탭 자리에 같은 모양의 정적 라벨(예약 안내 예시) — 무대 · 휴대폰 위치는 그대로 */
.s2-label{display:inline-flex;align-items:center;gap:7px;margin:0;padding:13px 18px;border-radius:999px;background:rgba(255,255,255,.8);
  border:1px solid #DCE7F3;font-size:14px;font-weight:700;line-height:1.72;color:var(--cx-ink-2)}
/* 높이 = 기존 탭 바(52px) — 무대 · 휴대폰 위치 유지 */
.s2-label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 인서트 (통합 01) — 간소화 02의 카드 · 휴대폰 규칙을 그대로 쓰고, 배치(그리드 영역) · 말풍선 · 핵심 3요소만 바꾼다. 새 색 없음 */
.sg{padding:0 0 clamp(64px,8vw,104px);background:#fff}
.sg__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:". vis" "text vis" "pts vis" ". vis";gap:0 clamp(32px,5vw,72px);align-items:start;
  background:linear-gradient(160deg,#EAF6FE 0%,#F4F9FE 60%,#FAFCFE 100%);border:1px solid #DCE9F6;border-radius:28px;padding:clamp(28px,4vw,52px) clamp(24px,4.4vw,64px)}
.sg__text{grid-area:text}
.sg__label{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:800;letter-spacing:.05em;color:var(--cx-blue-text);
  background:#fff;border:1px solid #CFE3F7;border-radius:999px;padding:6px 14px}
.sg__label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sg h2{font-size:clamp(24px,2.6vw,32px);line-height:1.34;letter-spacing:-.02em;font-weight:400;margin:18px 0 0}
.sg h2 b{font-weight:800}
.sg__d{margin:16px 0 0;color:var(--cx-ink-2);font-size:16.5px;line-height:1.72;max-width:460px}
/* 핵심 3요소 — 카드가 아닌 구분선 목록(작은 아이콘 · 제목 · 1줄) */
.sg__pts{grid-area:pts;list-style:none;margin:28px 0 0;padding:0;max-width:460px}
.sg__pts li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:1px 14px;align-items:start;padding:14px 0;border-top:1px solid #D9E7F5}
.sg__pts li:last-child{border-bottom:1px solid #D9E7F5}
.sg__pts i{grid-row:1/3;width:36px;height:36px;border-radius:11px;background:#fff;border:1px solid #CFE3F7;color:var(--cx-blue-text);
  display:flex;align-items:center;justify-content:center}
.sg__pts svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sg__pts b{font-size:16px;line-height:1.45;padding-top:1px}
.sg__pts span{font-size:14.5px;line-height:1.55;color:var(--cx-ink-2);text-wrap:pretty}
/* 휴대폰 1대 + 휴대폰 밖 고객 말풍선 */
.sg__vis{grid-area:vis;align-self:center;margin:0;display:flex;flex-direction:column;align-items:center}
.sg__ask{align-self:center;width:min(300px,100%);margin:0 0 16px;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--cx-line);
  border-radius:18px 18px 18px 4px;padding:11px 15px;font-size:14.5px;font-weight:700;line-height:1.5;box-shadow:var(--sh-1)}
.sg__ask span{font-size:11px;font-weight:800;color:var(--cx-ink-3)}
.sg-ph{width:min(300px,100%);background:var(--cx-ink);border-radius:40px;padding:9px;box-shadow:0 30px 60px -28px rgba(22,36,58,.5)}
.sg-scr{position:relative;height:430px;background:#fff;border-radius:31px;overflow:hidden}
.sg-sb{display:flex;justify-content:space-between;align-items:center;margin:0;padding:11px 22px 6px;font-size:12px;font-weight:700}
.sg-sb .isl{width:76px;height:22px;border-radius:12px;background:var(--cx-ink)}
.sg-sb .sig{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.sg-sb .sig i{width:3px;border-radius:1px;background:var(--cx-ink)}
.sg-sb .sig i:nth-child(1){height:4px}
.sg-sb .sig i:nth-child(2){height:6px}
.sg-sb .sig i:nth-child(3){height:8px}
.sg-sb .sig i:nth-child(4){height:10px}
.sg-app{margin:0;padding:6px 18px 12px;font-size:16px;font-weight:800;border-bottom:1px solid var(--cx-line)}
.sg-list{list-style:none;margin:8px 10px 0;padding:0}
.sg-list li{position:relative;display:flex;align-items:center;padding:12px 12px;border-radius:12px;font-size:14px;line-height:1.3;color:var(--cx-ink-2)}
.sg-list li::after{content:"›";margin-left:auto;color:#B3BCC8;font-size:17px}
.sg-list li.hl{background:#EAF3FE;box-shadow:inset 0 0 0 2px var(--cx-blue-deep);font-weight:800;color:var(--cx-ink)}
.sg-list li.hl::after{color:var(--cx-blue-deep)}
/* 터치 표시: 간소화 02의 3겹 물결 → 1겹으로 정리(강조 요소 줄임) */
.sg-tap{position:absolute;right:34px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:rgba(47,128,237,.26);
  box-shadow:0 0 0 6px rgba(47,128,237,.12)}
.sg-bar{position:absolute;left:10px;right:10px;bottom:12px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:1px 10px;align-items:center;margin:0;
  background:#fff;border:1px solid var(--cx-line);border-radius:18px;padding:11px 13px;box-shadow:0 12px 28px -12px rgba(22,36,58,.38)}
.sg-bar .kb-av{grid-row:1/3;width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.sg-bar small{font-size:11px;font-weight:800;color:var(--cx-blue-text)}
.sg-bar span:last-child{font-size:13.5px;line-height:1.45;font-weight:700}
.sg__cap{margin:12px 0 0;font-size:12px;color:var(--cx-ink-3)}
@media (max-width:900px){
  .sg__in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"text" "vis" "pts";gap:24px}  /* (F07.2) 1fr → minmax(0,1fr): 시연 슬라이드의 최소 폭이 칸을 밀어 KO 320px 가로 넘침(11px) */
  .sg__d,.sg__pts{max-width:none}
  .sg__pts{margin-top:0}
}
@media (max-width:640px){
  .sg__in{padding:24px 16px;border-radius:22px;gap:22px}
  .sg h2{font-size:23px}
  .sg__d{font-size:15.5px}
  .sg__ask{font-size:14px;padding:10px 14px}
  .sg__pts li{grid-template-columns:30px minmax(0,1fr);gap:0 12px;padding:10px 0}
  .sg__pts i{width:30px;height:30px;border-radius:9px}
  .sg__pts svg{width:16px;height:16px}
  .sg__pts b{font-size:15px}
  .sg__pts span{font-size:13.5px;line-height:1.5}
}
/* ================= HERO — 이야기의 시작 + 대표 비주얼 + 여정 스트립 (통합 01) =================
   새 색 · 새 그림자 없음(기존 토큰 · shotframe · crop · wave 재사용). 여정 스트립 규칙은 원래 자리에 간소화 02 그대로.
   스타일 끝에 두어 공통 .crop · .shotframe 규칙보다 뒤에서 적용된다(간소화 02의 옛 Hero 위쪽 규칙 7줄은 제거). */
.kb-hero{background:var(--cx-grad-soft);padding:clamp(44px,5vw,72px) 0 0;overflow:hidden}
.kb-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,4.4vw,64px);align-items:center}
.kb-hero__top{text-align:left}
.kb-hero h1{font-size:clamp(30px,2.9vw,42px);line-height:1.3;letter-spacing:-.025em;font-weight:400;margin:22px 0 0;text-wrap:balance}
.kb-hero h1 b{display:block;font-weight:800}
html[lang="ja"] .kb-hero h1 .kb-nw{display:inline-block}  /* F06.3 — 굵은 줄을 의미 단위로만 나눔(「…対応に / 集中できます。」 · 조사 줄머리 방지 · 문구 불변) */
html[lang="ja"] .kb-hero__sub{word-break:keep-all}  /* F06.3 — 본문은 <wbr> 구절 경계에서만 줄바꿈(「オペレーター」 「スタッフ」가 쪼개지지 않게 · 두 엔진 공통) */
.kb-hero__sub{margin:18px 0 0;color:var(--cx-ink-2);font-size:17px;max-width:500px}
.kb-hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.kb-hero__pdf{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0 0;font-size:14.5px}
/* (E) 데모 CTA — 보조 버튼 + 방향 화살표(체험 페이지로 이동) */
.kb-arr{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
a:hover > .kb-arr{transform:translateX(3px)}
.kb-btn--demo{box-shadow:inset 0 0 0 1.5px var(--cx-ink)}
.kb-hero__pdf a{color:var(--cx-blue-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* 대표 비주얼: 상담원(1순위) 앞 · 제품 화면(2순위) 뒤 · 고객과 상태 라벨(3순위) 위 */
.kb-hv{position:relative;margin:0;padding:48px 0 58px 96px}
.kb-hv__screen{margin:0}
.kb-hv__screen .shotframe{border-radius:16px}
.kb-hv .kb-hv__crop{--iw:1600;--x:486;--y:124;--w:780;--h:516;border-radius:0}
.kb-hv .kb-hv__crop::after{content:none}
.kb-hv__op{position:absolute;left:0;bottom:22px;margin:0;width:clamp(150px,15vw,214px);z-index:2}
.kb-hv__op img{width:100%;aspect-ratio:434/540;object-fit:cover;object-position:50% 0;border-radius:20px;border:5px solid #fff;box-shadow:var(--sh-shot);background:#fff}
.kb-hv__cust{position:absolute;right:-6px;top:0;margin:0;width:clamp(84px,7.4vw,108px);z-index:2}
.kb-hv__cust img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--sh-2);background:#fff}
.kb-hv__op figcaption,.kb-hv__cust figcaption{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);white-space:nowrap;
  background:#fff;border-radius:var(--r-pill);padding:3px 12px;font-size:12.5px;font-weight:800;color:var(--cx-ink);box-shadow:var(--sh-1)}
.kb-hv__ai{position:absolute;top:2px;right:calc(clamp(84px,7.4vw,108px) + 12px);z-index:2;display:inline-flex;align-items:center;gap:9px;margin:0;
  background:var(--cx-ink);color:#fff;border-radius:var(--r-pill);padding:7px 15px;font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap;box-shadow:var(--sh-2)}
.kb-hv__ai .kb-wave{color:#7CCBF4}
.kb-hv__cap{position:absolute;right:0;bottom:0;margin:0;font-size:12px;line-height:1.5;color:var(--cx-ink-3);text-align:right}
/* 여정 스트립: 2열 Hero의 카피 · 비주얼과 같은 컨테이너 폭(왼쪽 · 오른쪽 축 정렬). 카드 규칙은 원래 자리 그대로 */
.kb-hero .journey{max-width:var(--wrap)}
/* Hero 반응형 — 1열: 카피(가운데 정렬, 간소화 02와 같은 읽기 순서) → 비주얼 → 여정 */
@media (max-width:1100px){
  .kb-hero__in{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .kb-hero__top{text-align:center;max-width:820px;margin:0 auto}
  .kb-hero__sub{margin-left:auto;margin-right:auto;max-width:620px}
  .kb-hero__btns,.kb-hero__pdf{justify-content:center}
  .kb-hv{width:100%;max-width:620px;margin:0 auto}
}
@media (max-width:640px){
  .kb-hero h1{font-size:28px;line-height:1.36}
  html[lang="ja"] .kb-hero h1{font-size:24px;letter-spacing:-.03em;line-height:1.36}  /* F04.1 — 390px에서 JA 제목도 2줄(KO 28px · 360px에서는 KO · JA 모두 3줄) */
  .kb-hero__sub{font-size:16px;text-wrap:pretty}
  .kb-hero__in{gap:20px}
  .kb-hv{padding:38px 0 40px 30%}
  .kb-hero .journey{margin-top:24px}
  /* 모바일: 제품 화면은 'AI 에이전트' 열만 — 글자가 읽히는 배율 */
  .kb-hv .kb-hv__crop{--x:486;--y:124;--w:520;--h:430}
  .kb-hv__screen .shotframe{border-radius:12px}
  .kb-hv__screen .shotframe__bar{height:26px;padding:0 10px;gap:5px}
  .kb-hv__screen .shotframe__bar i{display:none}
  /* 좁은 폭: 창 점을 빼서 제목이 고객 원형 앞에서 끝나게 */
  .kb-hv__screen .shotframe__bar span{font-size:10.5px;margin-left:0}
  .kb-hv__op{width:42%;bottom:18px}
  .kb-hv__op img{border-width:4px;border-radius:16px}
  .kb-hv__cust{width:70px;right:-4px}
  .kb-hv__cust img{border-width:3px}
  .kb-hv__op figcaption,.kb-hv__cust figcaption{font-size:11.5px;padding:2px 10px;bottom:-10px}
  .kb-hv__ai{top:0;right:80px;padding:5px 11px;font-size:11.5px;gap:7px}
  .kb-hv__cap{left:calc(42% + 12px);font-size:11px}
}
/* 고객 사진 반전 01 — Hero 고객 원형의 사진만 좌우 반전(얼굴 · 시선이 Admin 화면 · 상담원 쪽). '고객' 라벨 · 장면 01 사진은 그대로.
   그림자는 반전되지 않도록 사진(img)에서 원형 컨테이너(figure · 사진과 같은 박스)로 옮긴다 — 값 var(--sh-2) 그대로 */
.kb-hv__cust{border-radius:50%;box-shadow:var(--sh-2)}
.kb-hv__cust img{transform:scaleX(-1);box-shadow:none}
/* ================= Hero AI 정체성 비교 01 — 대표 비주얼(.hv)만 다시 조립. 카피 · CTA · PDF · 여정 스트립 · 다른 장면 불변 =================
   AI 표식 = 장면 01 예시 통화 카드의 AI 아바타 그라데이션(#8C9BF5→#5B6BF0) 재사용 · 파형 = 기존 .wave / @keyframes wv. 새 이미지 · 새 아이콘 파일 0 */
@keyframes kb-hvpulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.32);opacity:0}}
/* ---- H-B: AI · 고객 · 상담원 관계형 ---- */
.kb-hv--b{--cw:clamp(84px,7.2vw,100px);--opw:clamp(132px,11.4vw,164px);--ai:clamp(104px,8.4vw,120px);padding:calc(var(--ai) - 24px) 0 58px calc(var(--opw) / 2 + var(--ai) / 2 + 14px)}
.kb-hv--b .kb-hv__op{width:var(--opw)}
/* AI 상담원 = 가장 큰 원. 상담원 사진과 같은 세로축(사진 가운데) 위에 둔다 */
.hvb__ai{position:absolute;z-index:3;top:0;left:calc(var(--opw) / 2 - var(--ai) / 2);width:var(--ai);height:var(--ai);border-radius:50%;
  background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;border:4px solid #fff;box-shadow:var(--sh-2);
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--ai) * .27);font-weight:800;letter-spacing:.02em}
.hvb__ai::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(91,107,240,.4);animation:kb-hvpulse 2.4s ease-out infinite}
.kb-hv--b .kb-hv__cust{top:calc((var(--ai) - var(--cw)) / 2);width:var(--cw)}
/* 통화선: AI 원 오른쪽 끝 ↔ 고객 원 왼쪽 끝 · 기존 'AI 상담원 응대 중' 알약을 선 가운데에 */
.hvb__call{position:absolute;z-index:2;top:calc(var(--ai) / 2 - 1px);left:calc(var(--opw) / 2 + var(--ai) / 2 + 4px);right:calc(var(--cw) - 2px);height:2px;
  background:linear-gradient(90deg,#5B6BF0,#8CC9F2)}
.kb-hv--b .hvb__call .kb-hv__ai{top:50%;left:50%;right:auto;transform:translate(-50%,-50%)}
/* 연결선: AI 원 아래 ↔ 상담원 사진 위(점선 = 조건부) */
.hvb__hand{position:absolute;z-index:1;left:calc(var(--opw) / 2 - 1px);top:calc(var(--ai) + 8px);bottom:calc(22px + var(--opw) * 1.2442 + 8px);border-left:2px dashed rgba(91,107,240,.55)}
.hvb__hand em{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-style:normal;font-size:12px;font-weight:700;color:var(--cx-ink-2);
  background:#fff;border-radius:var(--r-pill);padding:3px 11px;box-shadow:var(--sh-1)}
@media (max-width:640px){
  .kb-hv--b{--cw:56px;--opw:calc((100vw - 48px) * .3);--ai:80px;padding:calc(var(--ai) - 14px) 0 40px 28%}
  .kb-hv--b .kb-hv__op{bottom:18px}
  .hvb__ai{border-width:3px;font-size:22px}
  .hvb__ai::after{inset:-6px}
  .kb-hv--b .kb-hv__cust{right:-4px}
  .kb-hv--b .hvb__call .kb-hv__ai{padding:4px 9px;font-size:11px;gap:6px}
  .hvb__hand{top:calc(var(--ai) + 6px);bottom:calc(18px + var(--opw) * 1.2442 + 6px)}
  .hvb__hand em{font-size:11px;padding:2px 9px}
  .kb-hv--b .kb-hv__cap{left:calc(var(--opw) + 12px)}
}
@media (prefers-reduced-motion:reduce){
  .hvb__ai::after{animation:none}
}

/* ================= B+ P0 통합 — Hero H-B 미세 조정 (지시문 §4 A · B · C) =================
   구도(AI 원 · 고객 원 · 상담원 사진 · 실제 대시보드 · 통화선 · 조건부 연결선)는 그대로. 새 선 · 새 이미지 · 새 UI 없음.
   A. AI 원 = 가장 먼저 보이는 참여자: 원 안에 역할명(AI + 상담원)을 넣어 로고 · 장식이 아니라 'AI 상담원'으로 읽히게 하고,
      원을 한 단계 키우고(120 → 132px) 상담원 사진을 한 단계 줄인다(164 → 150px). 그림자에 AI 원 색을 얹어 시선 순서 1순위로.
   B. 사진이 줄어 '필요하면 연결' 점선이 길어진다(조건부 인계 관계가 더 분명히 읽힘).
   C. 모바일: Hero 위 여백만 줄여 AI 원을 첫 화면 위쪽으로. Hero 높이는 늘리지 않는다 */
.kb-hv--b{--ai:clamp(112px,9.2vw,132px);--opw:clamp(124px,10.4vw,150px);padding-top:calc(var(--ai) - 36px)}
.hvb__ai{flex-direction:column;line-height:1;gap:calc(var(--ai) * .045);
  box-shadow:0 16px 36px -12px rgba(91,107,240,.62),var(--sh-2)}
.hvb__ai small{font-size:max(10.5px,calc(var(--ai) * .108));font-weight:700;letter-spacing:.04em;opacity:.94}
@media (max-width:1100px){
  .kb-hv--b{padding-top:calc(var(--ai) - 24px)}
}
@media (max-width:640px){
  /* 비주얼 배치(원 80px · 선 · 사진)는 B 그대로 — 원을 키우면 '필요하면 연결' 라벨이 대시보드 제목 줄과 겹친다(360 확인) */
  .kb-hero{padding-top:30px}
  .kb-hv--b{--ai:80px;--opw:calc((100vw - 48px) * .3);padding-top:calc(var(--ai) - 14px)}
}

/* ---- 시각 검토(visual-reviewer) 반영 — SAFE 범위(크기 · 간격 · 정렬 · 반응형) ----
   1. 상담원 사진 150 → 136px: 사람 얼굴이 AI 원과 시선을 다투지 않게(AI 원 132px가 1순위)
   2. 상담원 사진 ↔ 대시보드 왼쪽 끝이 5px로 거의 맞닿아 실수처럼 보임 → 24px 띄움(PC · 1100)
   3. AI 원 바깥 맥동 고리를 옅게 — 앱 아이콘 느낌을 줄이고 원 색 그림자는 유지
   4. 모바일 캡션 끝 단어가 홀로 떨어지는 줄바꿈 정리 */
.kb-hv--b{--opw:clamp(118px,9.4vw,136px);padding-left:calc(var(--opw) + 24px)}
.hvb__ai::after{border-color:rgba(91,107,240,.22)}
@media (max-width:640px){
  .kb-hv--b{--opw:calc((100vw - 48px) * .3);padding-left:28%}  /* 위 PC 규칙이 B 모바일 값을 덮지 않게 다시 명시 */
  .kb-hv__cap{text-wrap:balance}
}
/* 5. 여정 스트립(≤760): li가 3열 격자인데 자식은 번호(::before)와 링크 2개 → 링크가 좁은 auto 열에 갇혀
      WebKit에서 설명이 두 줄로 꺾임(B 기준안에도 있던 현상 · 2엔진 측정으로 확인). 링크가 나머지 열을 모두 쓰게 */
@media (max-width:760px){
  .journey li a{grid-column:2 / -1}
}

/* ---- 페이지 기준선 통일 — 헤더 · 기존 섹션(업종 데모 ~ 푸터)의 컨테이너를 B 장면과 같게 ----
   공용 .wrap = 최대 1200 · 좌우 24(≤768: 18) ↔ B 장면 = 최대 1152 · 좌우 24 → 로고 · 섹션 제목 왼쪽 선이 21~24px 어긋남.
   이 파일은 index-ko.html만 읽으므로 공용 토큰을 이 페이지에서만 B 값으로 맞춘다(JA · 데모 페이지 영향 없음) */
:root{--wrap:1152px}
@media (max-width:768px){
  :root{--gutter:24px}
}

/* ================= B+ P0 2차 정합성 (CALLIX_V2_BPLUS_P0_ALIGNMENT_02 · D-60 DRAFT 미승인 후보) =================
   1. 여정 스트립 → 기능 바로 가기 목차: 장면 01~06과 1:1 · 6칸. 카드 사이 연결선 제거(순서 있는 '한 통화 단계'로 읽히지 않게).
      번호(01~06)는 장면 번호와 같은 값. ≤760 세로 목록 규칙은 그대로
   2. 화면 안내 인서트: 3요소 아래 보충 캡션(D-19 제공 형태 · 고객 직접 진행) — PC는 왼쪽 글 열 맨 아래 · 모바일은 3요소 뒤 */
.journey ol{grid-template-columns:repeat(6,minmax(0,1fr))}
.journey li:not(:last-child)::after{content:none}
.journey a{word-break:keep-all;text-wrap:balance}  /* 6칸 PC에서 설명이 단어 중간 · 한 단어만 남는 줄바꿈 방지 */
@media (max-width:1100px){
  .journey ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .journey ol{grid-template-columns:1fr}
  /* (F07.2 · Owner 결정) 모바일(이 컴포넌트의 목록형 전환 기준 760px 이하)에서는 기능 바로가기 6개(안내 문구 포함)를 숨긴다.
     PC · 태블릿(3칸)은 그대로. 실제 기능 설명 6개(#s1~#s6)와 앵커는 그대로 — 스크롤로 이어서 읽는다 */
  .journey{display:none}
  .kb-hero{padding-bottom:32px}  /* 바로가기가 맡던 아래 여백 — 상담원 사진 라벨이 Hero 끝에 붙지 않게 */
}
.sg__in{grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:". vis" "text vis" "pts vis" "note vis" ". vis"}
.sg__note{grid-area:note;margin:16px 0 0;max-width:460px;font-size:13px;line-height:1.6;color:var(--cx-ink-3);text-wrap:pretty}
@media (max-width:900px){
  .sg__in{grid-template-rows:none;grid-template-areas:"text" "vis" "pts" "note"}
  .sg__note{max-width:none;margin-top:-8px}
}

/* ================= 상용화 첫 묶음 (D-62 · 2026-10-20) =================
   1. 기능 목차 3기둥 그룹 라벨 — 묶음 첫 칸(li.journey__gs) 안의 span 하나로 세 레이아웃을 처리(스크린리더도 같은 순서로 읽음)
      PC 6칸: 카드 위에 묶음 폭(칸 수 × 100% + 사이 간격)만큼 라벨 + 밑줄 / 3칸(≤1100): 카드 위 라벨만 / 목록(≤760): 소제목 줄
   2. Hero 칩이 길어짐(HQ-1) — 좁은 화면에서 줄바꿈되면 두 줄을 고르게, 알약 모서리는 유지 */
.journey ol{padding-top:30px}
.journey__g{position:absolute;left:0;bottom:calc(100% + 8px);width:100%;padding-bottom:6px;
  border-bottom:2px solid rgba(31,107,209,.22);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  line-height:1.3;color:var(--cx-blue-text);white-space:nowrap;pointer-events:none}
.journey__g--2{width:calc(200% + 12px)}
.journey__g--3{width:calc(300% + 24px)}
/* F06.3 · WebPinch 6ade900e — 기능 아이콘: 제목 줄 안(카드 높이 불변) · 장면 01~06 아이콘 체계와 같은 선 두께 · 파란 글자색 */
.journey__ico{display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:-3px;color:var(--cx-blue-text)}
.journey__ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:761px){
  /* 카드형(6칸 · 3칸): 번호 줄 오른쪽 위 — 긴 JA 제목(オペレーター接続)이 줄바꿈돼도 아이콘이 홀로 남지 않고 카드 높이도 그대로 */
  .journey__ico{position:absolute;top:17px;right:16px;width:20px;height:20px;margin:0}
}
.journey__g--cont{display:none}  /* 3칸(≤1100)에서만: 둘째 줄 04~05가 '사람과 이어지는 상담'에 속함을 이어서 표시(스크린리더 중복 방지 aria-hidden) */
@media (max-width:1100px){
  .journey ol{row-gap:42px}
  .journey__g,.journey__g--3{width:100%}
  .journey__g--2{width:calc(200% + 12px)}
  .journey__g--cont{display:block;color:var(--cx-ink-3);border-bottom-style:dashed;border-bottom-color:rgba(31,107,209,.28)}
  .journey__g--cont::after{content:" · 이어서";font-weight:600}  /* 같은 묶음이 둘째 줄로 이어짐을 표시(새 묶음으로 오해 방지) */
}
@media (max-width:760px){
  .journey__g--cont{display:none}
  .journey ol{padding-top:0;row-gap:0}
  .journey li.journey__gs{padding-top:18px}
  .journey li.journey__gs:first-child{padding-top:4px}
  .journey__g{position:static;order:-1;grid-column:1 / -1;width:auto;margin:0 0 8px;padding:0;border:0;font-size:12px}
}
.kb-eyebrow{text-wrap:balance}
@media (max-width:640px){
  .kb-eyebrow{font-size:13.5px;letter-spacing:.02em;padding:7px 15px;line-height:1.45;max-width:100%}  /* PC와 같은 글자 크기 · 360에서도 한 줄(실측) · 더 좁으면 두 줄 균형 */
}
/* ================= OPS-01 (2026-10-20) — 장면 01 워크플로 이동 · 장면 06 대표 기능 4탭 (index-ko.html 전용 · JA 영향 없음)
   D2: 설정 항목 카드 4(.setup__steps) 제거 → 번호 설명 1~4를 화면 위로(.setup__legend) ================= */
.setup .setup__legend{margin-top:26px;padding-top:22px;border-top:1px solid var(--cx-line-2)}
.setup__wf{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);gap:clamp(24px,3.5vw,44px);align-items:center;
  margin:clamp(28px,3.5vw,40px) 0 0;padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--cx-line)}
.setup__wf h4{font-size:clamp(17px,1.6vw,20px);line-height:1.4;letter-spacing:-.01em;font-weight:400;margin:8px 0 0}
.setup__wf h4 b{font-weight:800}
.setup__wf .setup__d{font-size:15px}
.setup .setup__wf .legend{grid-template-columns:1fr;gap:12px;margin-top:18px}
.setup__wf-shot{margin:0}
.opstabs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.opspanel__d{display:block;margin:0 0 14px;max-width:860px;font-size:15px;line-height:1.65;color:#B9C2D0}
.opspanel--narrow .shotframe{max-width:780px;margin:0 auto}
.opspanel--sm .shotframe{max-width:580px}
.opsimg--crop{aspect-ratio:auto;background:none}
.opspanel .opsimg--crop .crop{display:block;border:0;border-radius:0;background:#F3F6FA}
.opspanel .opsimg--crop .crop::after{content:none}
.opspanel .opsimg--crop .crop img{width:calc(var(--iw)/var(--w)*100%);height:auto;object-fit:fill}
.opsfacts{list-style:none;margin:0;padding:clamp(18px,2.5vw,28px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;color:var(--cx-ink)}
.opsfacts li{background:var(--cx-bg-soft);border:1px solid var(--cx-line);border-radius:var(--r-md);padding:16px 18px;display:grid;gap:4px;align-content:start}
.opsfacts b{font-size:15.5px;line-height:1.4}
.opsfacts span{font-size:14px;line-height:1.6;color:var(--cx-ink-2)}
@media (max-width:1100px){
  .setup__wf{grid-template-columns:1fr;align-items:start}
}
@media (max-width:760px){
  .setup .setup__legend{margin-top:18px;padding-top:16px;gap:12px}
  .setup__wf{margin-top:24px;padding-top:20px}
  .opstabs--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opspanel__d{font-size:14px;margin:0 0 12px}
  .opspanel--narrow .shotframe,.opspanel--sm .shotframe{max-width:none}
  .opsfacts{grid-template-columns:1fr;padding:14px;gap:10px}
}
/* ================= F04 (2026-10-21) — 한·일 동등성: JA 페이지도 같은 .kb 구조를 쓴다. JA 글꼴 · 줄바꿈은 html[lang="ja"] 한정(KO 영향 없음) ================= */
html[lang="ja"] .kb{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;word-break:normal;line-break:strict}
html[lang="ja"] .kb :is(h4,.kb-scene__d,.setup__d,.lg-d,.hsteps .d,.cbstep .d,.opspanel__d,.journey a){overflow-wrap:anywhere}  /* (F07.2) h1~h3 는 아래 JA 구 단위 규칙(break-word) */
html[lang="ja"] :is(.kb-hero h1,.kb-scene h2){text-wrap:balance}
/* F07.2 — JA 제목 · 카드 제목은 구(文節) 단위로만 줄을 바꾼다: HTML <wbr> · 데이터 ​ 지점 + 구두점. 한 구가 한 줄보다 길 때만 overflow-wrap:anywhere 로 넘침을 막는다.
   (word-break:normal 이면 일본어는 아무 글자 사이에서나 끊기고, balance 가 「とき / は、」「AIオ / ペレーター」 같은 줄을 만들었다)
   overflow-wrap 은 anywhere 가 아니라 break-word — WebKit 은 balance 계산에 anywhere 지점까지 써서 「導 / 入」처럼 끊는다 */
html[lang="ja"] :is(.kb h1,.kb h2,.kb h3,main .head,.kd__title,.kd-call__t,.fqc__t,.kr-trust__svc b,.kr-trust__proof b,.cbstep__h b,.oc__d){word-break:keep-all;overflow-wrap:break-word}  /* .oc__d = CALLIX_F07_COPY_REFINEMENT_01 설명(<wbr> 구 단위) */
/* F04.1 — JA Hero 시작 인상: 제목 2줄(KO와 같은 줄 수)로 맞춘다. 글자 크기 41.8 → 35.5px(1440) · 자간 -.03em. 섹션을 통째로 밀지 않는다 */
html[lang="ja"] .kb-hero h1{font-size:clamp(24px,2.45vw,35.5px);letter-spacing:-.03em;line-height:1.32}
/* F04.1 — JA 장면 02 SMS 말풍선: keep-all 이 일본어 줄바꿈을 막아 말풍선 밖으로 넘치던 문제 → 자연 줄바꿈 */
html[lang="ja"] .s2-sms{word-break:normal;overflow-wrap:anywhere;line-break:strict;max-width:88%}
/* 공용 callix.css 의 html[lang="ja"] :is(p,li,figcaption){text-wrap:pretty} 는 white-space:nowrap 의 줄바꿈 금지를 푼다(text-wrap-mode 재설정) → 한 줄이어야 하는 라벨만 되돌린다 */
html[lang="ja"] :is(.kb-hv__op figcaption,.kb-hv__cust figcaption,.call__cust figcaption,.kb-hv__ai,.hvb__hand em,.kd-call__num,.kd-phone__line,.kd-phone__tag,.call__tag,.s2-callcard__to,.s2-label,.journey__g){text-wrap:nowrap}

/* ================= F04 (2026-10-21) — 장면 01 '고객 DB 연동' 개념 흐름 (KO · JA 공용 · 실제 관리자 화면 캡처가 없어 화면을 합성하지 않고 흐름만 보여 준다) ================= */
.setup__db{margin:clamp(28px,3.5vw,40px) 0 0;padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--cx-line)}
.setup__db h4{font-size:clamp(17px,1.6vw,20px);line-height:1.4;letter-spacing:-.01em;font-weight:400;margin:8px 0 0}
.setup__db h4 b{font-weight:800}
.setup__db .setup__d{font-size:15px;max-width:800px}
.dbflow{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dbflow li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;align-content:start;padding:16px 16px 16px 14px;background:#fff;border:1px solid var(--cx-line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.dbflow li>b{font-size:15px;line-height:1.4;padding-top:1px}
.dbflow li>span:not(.num){grid-column:2;font-size:13.5px;line-height:1.6;color:var(--cx-ink-2)}
.dbflow li+li::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:var(--cx-line)}
.dbflow__ex{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--cx-ink-3)}
.dbflow__ex b{font-weight:700;color:var(--cx-ink-2)}
@media (max-width:900px){.dbflow{grid-template-columns:repeat(2,minmax(0,1fr))}.dbflow li+li::before{display:none}}
@media (max-width:480px){.dbflow{grid-template-columns:1fr;gap:10px}.dbflow li{padding:14px 14px 14px 12px}}

/* ================= F06 (2026-10-22) — 제품 · 사업 방향 반영 (KO · JA 공용 · Owner 지시 CALLIX_F06_INTEGRATED_WEBSITE_REPOSITIONING)
   1. AI 첫 응대 · 두 가지 결과(.oc · Hero 다음) 2. 업종 템플릿 개념 화면(.setup__tpl · 장면 01 설정 안) 3. 사업주 · 직원 앱 인서트(.oa · 장면 05–06 사이 · 실제 Android 화면 · invert 없음)
   4. 화면 안내 시연(.sg — 고객이 직접 누르는 버튼 · 3단계 · 되돌리기 · reduced-motion). 다크 규칙은 callix-theme.css §10 ================= */
/* 1. (F06.1) AI 첫 응대 — 한 패널 안의 연결된 인포그래픽: 고객 전화 → AI → 분기(SVG) → 두 결과 */
/* (F06.2) Hero 그라디언트 끝선과 패널 사이 호흡: 목차 아래 여백 72 → 56 · 패널 앞 흰 여백 추가(§1) */
.oc{padding:clamp(28px,3.4vw,48px) 0 clamp(48px,6vw,80px)}
.journey{padding-bottom:56px}
.oc__panel{background:linear-gradient(160deg,#EAF6FE 0%,#F4F9FE 60%,#FAFCFE 100%);border:1px solid #DCE9F6;border-radius:28px;padding:clamp(24px,3.4vw,42px) clamp(20px,3.8vw,52px)}
.oc__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:10px clamp(24px,4vw,56px);align-items:end}
.oc__label{display:inline-flex;align-items:center;gap:10px;margin:0;grid-column:1/-1;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--cx-blue-text)}
.oc__label::before{content:"";width:34px;height:2px;background:var(--cx-blue-deep)}
.oc h2{font-size:clamp(23px,2.5vw,31px);line-height:1.34;letter-spacing:-.02em;font-weight:400;margin:0;text-wrap:balance}
.oc h2 b{font-weight:800}
.oc__d{margin:0 0 5px;color:var(--cx-ink-2);font-size:15px;line-height:1.65;text-wrap:pretty}
/* F06.3 · WebPinch 6ade8e99 — 계산기(#value) 바로 가기: 버튼이 아닌 작은 글자 링크(Hero CTA 위계와 겹치지 않게) */
.oc__more{display:flex;width:max-content;align-items:center;gap:6px;margin-top:8px;font-size:14px;font-weight:700;color:var(--cx-blue-text);text-decoration:underline;text-underline-offset:3px}
.oc__more .kb-arr{width:16px;height:16px}
.ocflow{--oc-gap:14px;display:grid;grid-template-columns:minmax(118px,.72fr) 36px minmax(150px,.95fr) 72px minmax(0,2.15fr);align-items:center;margin:clamp(22px,3vw,34px) 0 0}
.oc-node{display:grid;justify-items:center;text-align:center;gap:10px;padding:18px 14px;background:#fff;border:1px solid #D6E4F3;border-radius:18px;box-shadow:var(--sh-1)}
.oc-node b{font-size:15.5px;line-height:1.35;text-wrap:balance}
.oc-ico,.oc-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.oc-ico{background:var(--cx-blue-soft);color:var(--cx-blue-text)}
.oc-ico svg,.oc-end__ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.oc-av{background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;font-size:13.5px;font-weight:800;box-shadow:0 10px 22px -10px rgba(91,107,240,.75)}
.oc-node--ai{border-color:#C9DCF2;box-shadow:0 14px 32px -18px rgba(47,128,237,.5)}
.oc-line{position:relative;height:2px;background:#C5D5E8}
.oc-line::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid #9FB3CC;border-right:0}
.oc-fork{position:relative;align-self:stretch}
/* 분기선 끝(SVG 25% · 75%)이 두 결과 카드의 세로 중심(= 화살표 머리 .oc-end::before 위치)과 맞도록 SVG를 카드 사이 간격(--oc-gap)만큼 위아래로 넓힌다.
   (F07.2 이전: inset:0 → 간격 14px 때문에 선 끝이 카드 중심보다 3.5px씩 안쪽 — 위 머리는 선 위로, 아래 머리는 선 아래로 삐져나옴) */
.oc-fork svg{position:absolute;top:calc(var(--oc-gap) / -2);left:0;width:100%;height:calc(100% + var(--oc-gap));fill:none;stroke:#C5D5E8;stroke-width:2;stroke-linejoin:round}
.oc-fork path{vector-effect:non-scaling-stroke}
.oc-ends{display:grid;grid-template-rows:1fr 1fr;gap:var(--oc-gap);align-self:stretch}
.oc-end{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;align-items:start;align-content:center;padding:16px 18px;border-radius:18px;border:1px solid var(--cx-line);background:#fff;box-shadow:var(--sh-1)}
.oc-end::before{content:"";position:absolute;left:-8px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:7px solid #9FB3CC;border-right:0}
.oc-end__ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.oc-end--done{border-color:#BFE0C7;background:linear-gradient(135deg,#F3FBF5,#fff 70%)}
.oc-end--done .oc-end__ico{background:#DDF3E3;color:#1E7A3C}
.oc-end--human{border-color:#C9DCF2;background:linear-gradient(135deg,#F0F6FE,#fff 70%)}
.oc-end--human .oc-end__ico{background:var(--cx-blue-soft);color:var(--cx-blue-text)}
.oc-end>div{display:grid;gap:2px;min-width:0}
.oc-end b{font-size:17px;line-height:1.3}
.oc-end>div>span{font-size:13.5px;line-height:1.5;color:var(--cx-ink-2)}
.oc-who{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.oc-who a{display:grid;gap:1px;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--cx-line);color:inherit;text-decoration:none;transition:border-color .15s}
.oc-who a:hover{border-color:var(--cx-blue-deep)}
.oc-who b{font-size:14px;line-height:1.35;color:var(--cx-blue-text)}
.oc-who small{font-size:12px;line-height:1.4;color:var(--cx-ink-3)}
@media (max-width:1000px){
  .oc__head{grid-template-columns:1fr}
  .ocflow{grid-template-columns:1fr}
  .oc-line{width:2px;height:22px;margin:0 auto}
  .oc-line::after{right:auto;left:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:7px solid #9FB3CC;border-bottom:0}
  .oc-fork{display:none}
  .oc-node{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;align-items:center;gap:12px;padding:14px 16px}
  .oc-ends{grid-template-rows:none;gap:10px;margin-top:22px;position:relative}
  .oc-ends::before{content:"";position:absolute;left:50%;top:-22px;width:2px;height:22px;background:#C5D5E8}
  .oc-end::before{display:none}
}
@media (max-width:400px){html[lang="ja"] .oc h2{font-size:19.5px}}  /* F06.2 minor: 360에서 'AIで完結するお問い合わせも、'가 한 줄에(280px 안) */
@media (max-width:640px){
  .oc__panel{padding:22px 16px;border-radius:22px}
  .oc h2{font-size:22px}
  .oc-who{grid-template-columns:1fr}
}
/* 2. (F06.2) 'AI 상담 준비' — 상위 메시지 1 + 핵심 카드 4(2×2 · ≤1000 1열). 카드 = 제목(아이콘) 1 + 설명 1줄 + 시각 1. ①④ 연한 그라디언트 · ②③ 흰 면으로 리듬 */
.setup h3{font-size:clamp(22px,2.2vw,28px);text-wrap:balance}
.setup__br{display:none}
@media (max-width:640px){.setup__br{display:inline}}
.prep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);margin:clamp(22px,3vw,30px) 0 0}
.prep-card{display:flex;flex-direction:column;padding:clamp(18px,2.2vw,24px);border-radius:var(--r-lg);border:1px solid var(--cx-line);background:#fff}
.prep-card--tpl,.prep-card--db{background:linear-gradient(160deg,#EEF6FE 0%,#F7FAFE 55%,#fff 100%);border-color:#D6E4F3}
.prep-card h4{display:flex;align-items:center;gap:10px;margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.35;letter-spacing:-.01em;font-weight:800}
.prep-card h4 i{flex:none;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--cx-blue-soft);color:var(--cx-blue-text)}
.prep-card h4 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.prep-card__d{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--cx-ink-2);text-wrap:pretty}
.prep-card__vis{margin:auto 0 0;padding-top:18px}
.prep-card__vis figcaption{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--cx-ink-3)}
.prep-card__vis figcaption a{color:var(--cx-blue-text);font-weight:700}
.tpl2{display:grid;grid-template-columns:124px minmax(0,1fr);background:#fff;border:1px solid var(--cx-line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-2);font-size:13px}
.tpl2__pick{list-style:none;margin:0;padding:12px 10px;display:grid;gap:4px;align-content:start;background:var(--cx-bg-soft);border-right:1px solid var(--cx-line)}
.tpl2__pick li{padding:8px 10px;border-radius:8px;font-weight:600;color:var(--cx-ink-2);line-height:1.3}
.tpl2__pick li.on{background:#fff;color:var(--cx-ink);font-weight:800;box-shadow:inset 0 0 0 1.5px var(--cx-blue-deep)}
.tpl2__form{padding:14px 16px;display:grid;gap:8px;align-content:start;min-width:0}
.tpl2__k{margin:0 0 2px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--cx-ink-3)}
.tpl2__f{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--cx-line);border-radius:9px;background:#fff;min-width:0}
.tpl2__f span{font-size:11px;font-weight:700;color:var(--cx-ink-3)}
.tpl2__f b{font-size:13px;line-height:1.35;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl2__go{margin:4px 0 0;justify-self:end;padding:7px 16px;border-radius:var(--r-pill);background:var(--cx-ink);color:#fff;font-size:12.5px;font-weight:800}
.wf2{margin:0}
.wf2__crop{border-radius:0;background:#F3F6FA}
.wf2__crop::after{content:none}
/* 고객 DB 연계(ADDENDUM) — 3단 흐름 칩(고객 확인 → 조회 → 맞춤 안내) + 개념 화면 · 카드 위쪽 빈 공간 제거 */
.prep-card--db .prep-card__vis{margin-top:14px}
.dbsteps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dbsteps li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:1px 9px;align-items:start;padding:10px 10px 10px 9px;background:#fff;border:1px solid var(--cx-line);border-radius:12px}
.dbsteps li+li::before{content:"";position:absolute;left:-8px;top:50%;width:8px;height:2px;background:#C5D5E8}
.dbsteps i{grid-row:1/3;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--cx-blue-soft);color:var(--cx-blue-text);font-size:10.5px;font-weight:800;font-style:normal}
.dbsteps i.dbsteps__ai{background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;border-radius:50%}
.dbsteps svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dbsteps b{font-size:13px;line-height:1.35}
.dbsteps span{font-size:11.5px;line-height:1.4;color:var(--cx-ink-3)}
.dbx__chips{display:flex;flex-wrap:wrap;gap:6px}
.dbx__chips em{font-style:normal;font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);background:#fff;border:1px solid #CFE3F7;color:var(--cx-blue-text)}
.prep-card__vis figcaption a{font-weight:600;color:var(--cx-ink-3);text-decoration:none;margin-left:6px}
.prep-card__vis figcaption a:hover{color:var(--cx-blue-text)}
/* 고객 DB 조회 개념 UI — 확인 · 조회 결과 · AI 안내 3행 */
.dbx{display:grid;gap:8px;padding:14px 16px;background:#fff;border:1px solid var(--cx-line);border-radius:16px;box-shadow:var(--sh-2);font-size:13px}
.dbx__k{margin:0 0 2px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--cx-ink-3)}
.dbx__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--cx-line);border-radius:10px;background:var(--cx-bg-soft)}
.dbx__row span{font-size:11.5px;font-weight:800;color:var(--cx-ink-3);white-space:nowrap}
.dbx__row b{font-size:13px;line-height:1.4;font-weight:600;color:var(--cx-ink)}
.dbx__row--ai{background:var(--cx-blue-soft);border-color:#C9DCF2}
.dbx__row--ai .kb-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.dbx__row--ai b{font-weight:700}
@media (max-width:760px){.prep{grid-template-columns:1fr}.prep-card__vis>.wf2,.prep-card__vis>.tpl2,.prep-card__vis>.dbx{max-width:560px}}
@media (max-width:640px){
  .prep-card--wf .wf2__crop{--x:470;--y:330;--w:420;--h:380}
  html[lang="ja"] .prep-card--wf .wf2__crop{--x:620;--y:430;--w:560;--h:506}
  .prep-card{padding:16px}
}
@media (max-width:480px){
  .dbsteps{grid-template-columns:1fr;gap:6px}
  .dbsteps li+li::before{display:none}
  .tpl2{grid-template-columns:1fr}
  .tpl2__pick{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0;border-bottom:1px solid var(--cx-line)}
  .dbx__row{grid-template-columns:1fr;gap:2px}
}
/* 사업주 앱 방식 라벨: 번호 대신 아이콘 + 짧은 보조 레이블 */
.oa-path__k{display:inline-flex;align-items:center;gap:6px}
.oa-path__k i{width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:var(--cx-blue-soft)}
.oa-path__k svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 3. 사업주 · 직원 앱 인서트 — 실제 Android 화면(이미지 색 변형 없음 · 프레임만) */
.oa{padding:clamp(64px,8vw,110px) 0;background:#fff}
.oa__head{max-width:760px}
.oa__label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;max-width:100%;margin:0;font-size:12.5px;font-weight:800;letter-spacing:.05em;line-height:1.35;color:var(--cx-blue-text);background:#fff;border:1px solid #CFE3F7;border-radius:18px;padding:7px 14px}
.oa__label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oa__label small{font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);background:var(--cx-blue-soft);color:var(--cx-blue-text);letter-spacing:.02em}
.oa h2{font-size:clamp(25px,3vw,36px);line-height:1.32;letter-spacing:-.02em;font-weight:400;margin:18px 0 0;text-wrap:balance}
.oa h2 b{font-weight:800}
.oa__d{margin:16px 0 0;color:var(--cx-ink-2);font-size:16.5px;line-height:1.7;max-width:640px;text-wrap:pretty}
.oa__paths{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,.8fr);gap:16px;margin:clamp(28px,4vw,44px) 0 0;align-items:stretch}
.oa-path{display:flex;flex-direction:column;padding:22px 22px 20px;background:var(--cx-bg-soft);border:1px solid var(--cx-line);border-radius:var(--r-lg)}
.oa-path__k{margin:0;font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--cx-blue-text)}
.oa-path h3{font-size:clamp(17px,1.5vw,19.5px);line-height:1.4;letter-spacing:-.01em;font-weight:400;margin:8px 0 0;text-wrap:balance}
.oa-path h3 b{font-weight:800}
.oa-path__d{margin:10px 0 0;font-size:14px;line-height:1.65;color:var(--cx-ink-2);text-wrap:pretty}
.oa-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:auto;padding-top:18px}
.oa-shots--1{grid-template-columns:minmax(0,1fr)}
.oa-shot{margin:0;display:grid;gap:8px;justify-items:center}
.oa-ph{width:100%;max-width:180px;padding:5px;border-radius:26px;background:#1C2230;box-shadow:0 18px 40px -22px rgba(22,36,58,.55),0 0 0 1px rgba(0,0,0,.08)}
.oa-ph img{display:block;width:100%;height:auto;border-radius:21px}
.oa-shot figcaption{font-size:12.5px;line-height:1.45;color:var(--cx-ink-3);text-align:center}
.oa__note{margin:18px 0 0;font-size:13px;line-height:1.6;color:var(--cx-ink-3);max-width:860px;text-wrap:pretty}
.oa__note a{color:var(--cx-blue-text);font-weight:700}
@media (max-width:1100px){
  .oa__paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oa-path--side{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:0 24px;align-items:center;align-content:center}
  .oa-path--side>*{grid-column:1}
  .oa-path--side .oa-shots{grid-column:2;grid-row:1/4;padding-top:0;margin:0}
}
@media (max-width:640px){
  .oa{padding:56px 0}
  .oa h2{font-size:24px}
  .oa__d{font-size:15.5px}
  .oa__paths{grid-template-columns:1fr;gap:12px}
  .oa-path{padding:18px 16px 16px}
  .oa-path--side{grid-template-columns:1fr}
  .oa-path--side>*{grid-column:1}
  .oa-path--side .oa-shots{grid-column:1;grid-row:auto;padding-top:16px}
  .oa-ph{max-width:160px}
}
/* 4. (F06.2) 화면 안내 자동 연출 — 0 메뉴 화면 → 1 AI 말풍선 + 강조 → 2 손가락 이동 · 탭 · 리플 → 3 가로 슬라이드 + 다음 안내 → 0 */
.sg-scr{display:flex;flex-direction:column}
.sg-pages{flex:1;display:flex;width:200%;min-height:0;transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.sg-page{width:50%;flex:none;min-width:0}
.sg-ph[data-sg-step="3"] .sg-pages{transform:translateX(-50%)}
.sg-ph[data-sg-step="0"] .sg-pages{transition:none}
.sg-list li.hl{padding:0 12px 0 0;transition:background .3s,box-shadow .3s}
.sg-ph[data-sg-step="0"] .sg-list li.hl{background:transparent;box-shadow:none}
.sg-ph[data-sg-step="0"] .sg-list li.hl::after{color:#B3BCC8}
.sg-item{flex:1 1 auto;display:flex;align-items:center;min-height:44px;margin:0;padding:12px 12px;border:0;background:transparent;font:inherit;font-weight:800;color:inherit;text-align:left;cursor:pointer;border-radius:12px;position:relative;-webkit-tap-highlight-color:transparent}
.sg-item:focus-visible{outline:3px solid var(--cx-blue-deep);outline-offset:-3px}
.sg-item .sg-tap{right:22px;opacity:0}
.sg-ph[data-sg-step="1"] .sg-tap{opacity:1;animation:sgPulse 1.6s ease-in-out .5s infinite}
.sg-ph[data-sg-step="2"] .sg-tap{opacity:1;animation:sgRipple .55s ease-out .62s forwards}
.sg-finger{position:absolute;right:10px;top:50%;width:30px;height:35px;margin-top:-8px;opacity:0;transform:translate(46px,70px);pointer-events:none}
.sg-finger svg{display:block;width:30px;height:35px;fill:#fff;stroke:#1C2230;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(22,36,58,.35))}
.sg-ph[data-sg-step="2"] .sg-finger{animation:sgFinger 1.05s cubic-bezier(.25,.6,.25,1) both}
.sg-bk{display:inline-block;margin-right:8px;color:var(--cx-blue-deep);font-weight:800}
.sg-list--pay li.hl2{transition:background .3s,box-shadow .3s;gap:8px}
.sg-ph[data-sg-step="3"] .sg-list--pay li.hl2{background:#EAF3FE;box-shadow:inset 0 0 0 2px var(--cx-blue-deep);font-weight:800;color:var(--cx-ink);transition-delay:.6s}
.sg-ph[data-sg-step="3"] .sg-list--pay li.hl2::after{color:var(--cx-blue-deep)}
.sg-list--pay small{flex:none;white-space:nowrap;font-size:10px;line-height:1.3;font-weight:800;padding:2px 7px;border-radius:var(--r-pill);background:#fff;color:var(--cx-blue-text);border:1px solid #CFE3F7}  /* F06.2 minor: JA '基本' 한 줄(flex 축소 · 줄바꿈 금지) */
.sg-list--pay li.sg-add{color:var(--cx-blue-text);font-weight:700}
.sg-list--pay li.sg-add::after{content:none}
/* AI 말풍선: 아바타 + 꼬리 있는 버블 */
.sg-bar{position:absolute;left:10px;right:10px;bottom:12px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:end;margin:0;background:none;border:0;padding:0;box-shadow:none;opacity:0;transform:translateY(8px)}
.sg-bar .kb-av{grid-row:auto;width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#8C9BF5,#5B6BF0);color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(91,107,240,.6)}
.sg-bubble{position:relative;display:grid;gap:1px;background:#fff;border:1px solid var(--cx-line);border-radius:16px 16px 16px 4px;padding:10px 13px;box-shadow:0 12px 28px -12px rgba(22,36,58,.38)}
.sg-bubble::after{content:"";position:absolute;left:-7px;bottom:7px;border:6px solid transparent;border-right:7px solid #fff;border-left:0}
.sg-bubble small{font-size:11px;font-weight:800;color:var(--cx-blue-text)}
.sg-bubble .sg-say{font-size:13.5px;line-height:1.45;font-weight:700}
.sg-ph[data-sg-step="1"] .sg-bar,.sg-ph[data-sg-step="2"] .sg-bar{opacity:1;transform:none}
.sg-ph[data-sg-step="1"] .sg-bar{animation:sgBubble .38s cubic-bezier(.2,.7,.2,1) both}
.sg-ph[data-sg-step="3"] .sg-bar{animation:sgBubble .38s cubic-bezier(.2,.7,.2,1) .34s both}
.sg-ctl{display:grid;justify-items:center;gap:8px;margin:14px 0 0;width:min(300px,100%)}
.sg-cap{margin:0;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--cx-ink-2);text-align:center;min-height:1.4em}
.sg-ctl__row{display:flex;align-items:center;gap:12px}
.sg-dots{list-style:none;display:flex;align-items:center;gap:6px;margin:0;padding:0}
.sg-dots li{width:8px;height:8px;border-radius:4px;background:#C5D5E8;font-size:0;color:transparent;transition:width .25s,background .25s}
.sg-dots li[aria-current="step"]{width:22px;background:var(--cx-blue-deep)}
.sg-play{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--cx-line);background:#fff;color:var(--cx-ink-2);cursor:pointer}
.sg-play:hover{color:var(--cx-ink);border-color:var(--cx-ink-3)}
.sg-play svg{width:14px;height:14px;fill:currentColor}
.sg-play .ico-play{display:none}
.sg-play[aria-pressed="false"] .ico-pause{display:none}
.sg-play[aria-pressed="false"] .ico-play{display:block}
.sg-play:focus-visible{outline:3px solid var(--cx-blue-deep);outline-offset:2px}
@keyframes sgPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.7}}
@keyframes sgRipple{0%{transform:scale(1);opacity:.9}100%{transform:scale(3);opacity:0}}
@keyframes sgFinger{0%{opacity:0;transform:translate(46px,70px)}18%{opacity:1}55%{transform:none}66%{transform:scale(.86) translate(1px,1px)}78%{transform:none}100%{opacity:1;transform:none}}
@keyframes sgBubble{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sg-pages,.sg-list li.hl,.sg-list--pay li.hl2,.sg-dots li{transition:none}
  .sg-ph[data-sg-step="1"] .sg-tap,.sg-ph[data-sg-step="2"] .sg-tap,.sg-ph[data-sg-step="2"] .sg-finger,.sg-ph[data-sg-step="1"] .sg-bar,.sg-ph[data-sg-step="3"] .sg-bar{animation:none}
  .sg-ph[data-sg-step="2"] .sg-finger{opacity:1;transform:none}
  .sg-ph[data-sg-step="2"] .sg-tap{opacity:.5}
  .sg-ph[data-sg-step="3"] .sg-bar{opacity:1;transform:none}
}
/* JA: 새 블록의 긴 일본어 문장은 자연 줄바꿈(장면 블록과 같은 규칙) · 한 줄 라벨은 nowrap */
html[lang="ja"] .kb :is(.oc-node b,.oc-end>div>span,.oc-who small,.oa__d,.oa-path__d,.oa__note,.prep-card__d,.prep-card__vis figcaption,.dbx b,.sg-cap){overflow-wrap:anywhere}
html[lang="ja"] :is(.oa-path__k,.oc__label){text-wrap:nowrap}