/* Callix F05 — 라이트/다크 테마. KO · JA 공용 · 모든 스타일시트 뒤에 읽는다.
   1) 헤더 테마 전환 버튼(라이트 · 다크 공용)
   2) html[data-theme="dark"] 범위의 다크 토큰 + 하드코딩 색 재정의 — 라이트 화면에는 적용되지 않는다
   원칙: 딥네이비 · 차콜 계열(검정 일변도 아님) · 제품 스크린샷 · 인물 사진은 색 변형 없음(주변 프레임 · 그림자만) · 전화 데모 무대는 기존 딥네이비 유지 */

/* ------------------------------------------------------------
   1. 테마 전환 버튼 (.header__side 맨 앞)
   ------------------------------------------------------------ */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;
  border:0;border-radius:var(--r-pill);background:transparent;color:var(--cx-ink-2);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--cx-line);transition:background .15s,color .15s,box-shadow .15s}
.theme-toggle:hover{background:var(--cx-bg-soft);color:var(--cx-ink)}
.theme-toggle:focus-visible{outline:3px solid var(--cx-blue-deep);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle__sun{display:none}
html[data-theme="dark"] .theme-toggle__moon{display:none}
html[data-theme="dark"] .theme-toggle__sun{display:block}
@media (max-width:560px){
  .theme-toggle{width:36px;height:36px}
  .theme-toggle svg{width:17px;height:17px}
}
/* 버튼이 헤더에 있는 381–560px만 간격을 2px 줄인다(≤380은 기존 간격 그대로) */
@media (min-width:381px) and (max-width:560px){.header__side{gap:8px}}
/* 모바일 메뉴 안 한 줄 스위치 — 헤더에 자리가 없는 ≤380px(로고 · JA/KO · 도입 상담 · 메뉴 우선)에서만 */
.theme-row{display:none}
@media (max-width:380px){
  .header__side .theme-toggle{display:none}
  .header.is-open .gnb .theme-row{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;padding:12px 14px;
    border:0;border-top:1px solid var(--cx-line);border-radius:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--cx-ink-2);cursor:pointer;text-align:start}
  .theme-row:focus-visible{outline:3px solid var(--cx-blue-deep);outline-offset:-3px}
  /* 스위치 모양: aria-pressed 상태를 그대로 보여 준다 */
  .theme-row i{position:relative;flex:none;width:44px;height:26px;border-radius:var(--r-pill);background:#C9D1DD;transition:background .15s}
  .theme-row i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
  .theme-row[aria-pressed="true"] i{background:#2F80ED}
  .theme-row[aria-pressed="true"] i::after{transform:translateX(18px)}
}

/* ------------------------------------------------------------
   2. 다크 토큰 — 공용 :root 와 B+ 장면 범위(.kb)가 각각 토큰을 정의하므로 둘 다 덮는다
   ------------------------------------------------------------ */
html[data-theme="dark"],
html[data-theme="dark"] .kb{
  color-scheme:dark;
  --cx-blue-soft:#132A4A;
  --cx-blue-text:#7DB8FF;     /* 카드 #152033 위 7.9:1 */
  --cx-red-soft:#3A2024;
  --cx-navy:#9DB7EA;
  --cx-grad-soft:linear-gradient(100deg,#0F2440 0%,#0E1828 50%,#2A1A26 100%);
  --cx-ink:#E8EDF5;           /* bg 15.9:1 */
  --cx-ink-2:#B7C1D1;         /* bg 10.3:1 */
  --cx-ink-3:#98A3B6;         /* 카드 6.4:1 */
  --cx-line:#26344C;
  --cx-line-2:#1C283C;
  --cx-bg:#0B1220;            /* 페이지 — 딥네이비 */
  --cx-bg-soft:#0F1829;       /* 교차 섹션 */
  --cx-bg-card:#152033;       /* 카드 */
  --cx-bg-raise:#1B2840;      /* 카드 안 칩 · 입력 */
  --sh-1:0 1px 3px rgba(0,0,0,.35);
  --sh-2:0 10px 30px rgba(0,0,0,.35);
  --sh-3:0 24px 60px rgba(0,0,0,.45);
  --sh-shot:0 24px 60px -18px rgba(0,0,0,.6);
}
html[data-theme="dark"] body{background:var(--cx-bg);color:var(--cx-ink)}

/* 로고(단색 #1E293B SVG) — 같은 파일을 밝게 렌더링. 형태 · 비율 변화 없음 */
html[data-theme="dark"] .brand__logo{filter:brightness(0) invert(.93)}

/* ------------------------------------------------------------
   3. 헤더 · 모바일 메뉴 · 버튼
   ------------------------------------------------------------ */
html[data-theme="dark"] .header{background:rgba(11,18,32,.84)}
html[data-theme="dark"] .header.is-stuck{box-shadow:0 2px 14px rgba(0,0,0,.35)}
html[data-theme="dark"] .lang{background:var(--cx-bg-card)}
html[data-theme="dark"] .lang a[aria-current="page"]{background:#2A3A56;color:#fff;box-shadow:none}
html[data-theme="dark"] .header.is-open .gnb{background:var(--cx-bg-card)}
html[data-theme="dark"] .theme-toggle{color:#F3C969}
html[data-theme="dark"] .theme-toggle:hover{background:var(--cx-bg-card);color:#FFD780}

/* 주 버튼: 라이트의 '먹색 면 + 흰 글자'를 다크에서는 '밝은 면 + 네이비 글자'로 뒤집는다 */
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .kb-btn--primary,
html[data-theme="dark"] .header.is-open .gnb .gnb__cta{background:#F1F5FB;color:#0B1220}
html[data-theme="dark"] .btn--primary:hover,
html[data-theme="dark"] .header.is-open .gnb .gnb__cta:hover{background:#fff;color:#0B1220}
html[data-theme="dark"] .btn--ghost,
html[data-theme="dark"] .kb-btn--ghost{background:transparent;color:var(--cx-ink);box-shadow:inset 0 0 0 1.5px #3A4A66}
html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] .kb-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cx-ink)}

/* ------------------------------------------------------------
   4. 라이트 섬 — 휴대폰 화면 · 전화 데모 무대는 원래 라이트 표현을 그대로 둔다
      (토큰만 라이트 값으로 되돌림 → 안의 규칙은 라이트와 동일하게 계산된다)
   ------------------------------------------------------------ */
html[data-theme="dark"] :is(.s2-ph,.sg-ph,.kd__stage){
  color-scheme:light;
  --cx-blue-soft:#EAF6FE; --cx-blue-text:#1F6BD1; --cx-red-soft:#FFEFEB; --cx-navy:#16295C;
  --cx-ink:#16181D; --cx-ink-2:#4A505C; --cx-ink-3:#666E7D;
  --cx-line:#E3E8EF; --cx-line-2:#F0F2F6;
  --cx-bg:#fff; --cx-bg-soft:#F5F7FA; --cx-bg-card:#fff;
  --sh-1:0 1px 3px rgba(22,24,29,.07); --sh-2:0 10px 30px rgba(22,24,29,.12);
}
html[data-theme="dark"] :is(.s2-ph,.sg-ph){color:#16181D;box-shadow:0 30px 60px -28px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14)}
/* 데모 무대: 딥네이비 유지 · 같은 색 계열 페이지 위에서 윤곽만 살짝 */
html[data-theme="dark"] .kd__stage{box-shadow:0 32px 64px -28px rgba(0,0,0,.7),0 0 0 1px rgba(143,196,255,.16)}

/* ------------------------------------------------------------
   5. Hero · 여정
   ------------------------------------------------------------ */
html[data-theme="dark"] .kb-hv__op img,
html[data-theme="dark"] .kb-hv__cust img,
html[data-theme="dark"] .call__cust img{border-color:#22324D;background:#22324D}
html[data-theme="dark"] :is(.kb-hv__op,.kb-hv__cust,.call__cust) figcaption,
html[data-theme="dark"] .hvb__hand em{background:var(--cx-bg-raise);color:var(--cx-ink);box-shadow:0 0 0 1px var(--cx-line)}
html[data-theme="dark"] .hvb__ai{border-color:#0F1C30}
html[data-theme="dark"] .kb-hv__ai{background:#1B2A44;color:#fff;box-shadow:0 0 0 1px rgba(125,184,255,.22),var(--sh-2)}
html[data-theme="dark"] .journey li{background:var(--cx-bg-card)}
html[data-theme="dark"] .journey li:hover{border-color:#3A4A66}
html[data-theme="dark"] .journey__g{border-bottom-color:rgba(125,184,255,.3)}

/* 스크린샷 창 프레임 — 이미지는 그대로, 창 머리 · 테두리만 다크 */
html[data-theme="dark"] .shotframe{background:var(--cx-bg-card);border-color:#2A3A56}
html[data-theme="dark"] .shotframe__bar{background:#1B2840;color:var(--cx-ink-2)}
html[data-theme="dark"] .shotframe__bar i{background:#34445F}

/* ------------------------------------------------------------
   6. 장면 01–05 · 화면 안내
   ------------------------------------------------------------ */
html[data-theme="dark"] :is(.call__card,.setup,.dbflow li,.hsteps .cond2,.cbstep,.s2-card,.s2-callcard,.sg__ask,.fqc__card,.kr-calc){background:var(--cx-bg-card)}
html[data-theme="dark"] :is(.chips li,.kb-scene--soft .chips li){background:var(--cx-bg-card)}
html[data-theme="dark"] .s2-card{border-color:var(--cx-line)}
html[data-theme="dark"] #s2[data-s2="rsv"] .s2-card[data-rel~="rsv"]{border-color:#2F5A92;box-shadow:0 6px 18px -10px rgba(0,0,0,.6)}
html[data-theme="dark"] .s2-stage{background:linear-gradient(160deg,#112640 0%,#0F1B2E 55%,#0D1626 100%)}
html[data-theme="dark"] .s2-label{background:rgba(21,32,51,.88);border-color:#2A3B57}
html[data-theme="dark"] .sg{background:var(--cx-bg)}
html[data-theme="dark"] .sg__in{background:linear-gradient(160deg,#112640 0%,#0F1B2E 60%,#0D1626 100%);border-color:#22344F}
html[data-theme="dark"] :is(.sg__label,.sg__pts i){background:var(--cx-bg-card);border-color:#2A3D5C}
html[data-theme="dark"] .sg__pts li{border-top-color:#22344F}
html[data-theme="dark"] .sg__pts li:last-child{border-bottom-color:#22344F}
html[data-theme="dark"] .cbstep--main{border-color:#2F5A92}
html[data-theme="dark"] .cbshot{background:linear-gradient(135deg,#2A1D28 0%,#141F33 55%,#112640 100%)}
html[data-theme="dark"] .zv__nav button{background:var(--cx-bg-card)}
html[data-theme="dark"] .zv__nav button[aria-pressed="true"]{background:#F1F5FB;color:#0B1220;border-color:#F1F5FB}
html[data-theme="dark"] .zv__nav button[aria-pressed="true"] small{color:#4A505C}
html[data-theme="dark"] .hb{box-shadow:0 0 0 4px rgba(125,184,255,.16)}
/* 번호 배지 · 단계 번호: 파란 원 + 흰 숫자 — 다크에서는 한 단계 깊은 파랑(흰 글자 5.2:1) */
html[data-theme="dark"] :is(.hb>b,.hn,.num){background:#2468D8;color:#fff}

/* ------------------------------------------------------------
   7. 장면 06 (어두운 띠) — 라이트의 먹색 띠를 차콜로 고정해 네이비 페이지와 구분
   ------------------------------------------------------------ */
html[data-theme="dark"] .kb-scene--dark{background:#151922;box-shadow:inset 0 1px 0 #232A36,inset 0 -1px 0 #232A36}
html[data-theme="dark"] .opstab[aria-selected="true"]{background:#F1F5FB;border-color:#F1F5FB;color:#4A505C}
html[data-theme="dark"] .opstab[aria-selected="true"] b{color:#16181D}

/* ------------------------------------------------------------
   8. 전화 데모 (무대 밖 탭 · 화살표)
   ------------------------------------------------------------ */
html[data-theme="dark"] :is(.kd__tab,.kd__arrow){background:var(--cx-bg-card)}
html[data-theme="dark"] .kd__tab[aria-selected="true"]{background:#F1F5FB;border-color:#F1F5FB;color:#0B1220}
html[data-theme="dark"] .kd__tab[aria-selected="true"] svg{color:#2F80ED}

/* ------------------------------------------------------------
   9. 신뢰성 · FAQ · CTA · 문의 폼 · Footer
   ------------------------------------------------------------ */
/* 서비스 로고(컬러 · 어두운 글자 포함): 색을 바꾸지 않고 밝은 판 위에 둔다 */
/* 판은 box-shadow로 바깥에 그려 레이아웃(높이)을 라이트와 같게 유지 — WebPinch 핀 위치 보존 */
html[data-theme="dark"] .tr-svc__logo{width:fit-content;max-width:100%;background:#F4F7FB;border-radius:6px;box-shadow:0 0 0 7px #F4F7FB}
html[data-theme="dark"] .tr-ico{background:#E6EDF6}
html[data-theme="dark"] .faq{border-top-color:#3A4A66}
html[data-theme="dark"] .fqc__card{border-color:#2A3D5C;box-shadow:0 24px 60px rgba(0,0,0,.35)}
html[data-theme="dark"] .fqc__ico{background:#1B2A44;color:#7DB8FF}
html[data-theme="dark"] .fqc__sub small{border-color:#33435E}
/* 브랜드 그라디언트(블루 → 코랄)를 다크 톤으로: 양끝 색만 남기고 가운데는 네이비 */
html[data-theme="dark"] .cta-band{background:linear-gradient(100deg,#123A5E 0%,#132540 30%,#121B2D 52%,#2C1C28 76%,#5A2622 100%)}
html[data-theme="dark"] .cta-band__card{background:var(--cx-bg-card);box-shadow:0 24px 60px rgba(0,0,0,.45)}
html[data-theme="dark"] .footer--lite .footer__sns a{background:var(--cx-bg-card)}
html[data-theme="dark"] .footer__sep{color:#56657F}
html[data-theme="dark"] .footer__co a{text-decoration-color:rgba(183,193,209,.45)}
/* JA 프라이버시마크: 공식 마크는 원래대로 흰 판 위에 */
html[data-theme="dark"][lang="ja"] .tr-ico--pm{background:#fff;border-color:#fff}


/* ------------------------------------------------------------
   10. F06 · F06.1 — 두 결과 인포그래픽(.oc) · 템플릿+워크플로(.sp-card) · 사업주 · 직원 앱(.oa · 실제 Android 화면: 이미지는 그대로, 프레임 · 그림자만) · 도입 방식(.of2) · 화면 안내 시연 컨트롤
   ------------------------------------------------------------ */
html[data-theme="dark"] .oc__panel{background:linear-gradient(160deg,#112640 0%,#0F1B2E 60%,#0D1626 100%);border-color:#22344F}
html[data-theme="dark"] :is(.oc-node,.oc-end,.oc-who a,.tpl2,.tpl2__pick li.on,.tpl2__f,.dbx__row,.of2__opt i,.sg-play){background:var(--cx-bg-card)}
html[data-theme="dark"] .oc-node{border-color:#2A3D5C}
html[data-theme="dark"] .oc-node--ai{border-color:#2F5A92}
html[data-theme="dark"] .oc-ico{background:#1B2A44;color:#7DB8FF}
html[data-theme="dark"] .oc-line,html[data-theme="dark"] .oc-ends::before{background:#34445F}
html[data-theme="dark"] .oc-line::after,html[data-theme="dark"] .oc-end::before{border-left-color:#7F93B0;border-top-color:transparent}
@media (max-width:1000px){html[data-theme="dark"] .oc-line::after{border-left-color:transparent;border-top-color:#7F93B0}}
html[data-theme="dark"] .oc-fork svg{stroke:#34445F}
html[data-theme="dark"] .oc-end--done{border-color:#2E5A3A;background:linear-gradient(135deg,#132A1C,var(--cx-bg-card) 70%)}
html[data-theme="dark"] .oc-end--done .oc-end__ico{background:#1C3A26;color:#7FD39A}
html[data-theme="dark"] .oc-end--human{border-color:#2F5A92;background:linear-gradient(135deg,#132A4A,var(--cx-bg-card) 70%)}
html[data-theme="dark"] .oc-end--human .oc-end__ico{background:#1B2A44;color:#7DB8FF}
html[data-theme="dark"] .prep-card{background:var(--cx-bg-card);border-color:#2A3D5C}
html[data-theme="dark"] :is(.prep-card--tpl,.prep-card--db){background:linear-gradient(160deg,#112640,var(--cx-bg-card) 60%)}
html[data-theme="dark"] .prep-card h4 i{background:#1B2A44;color:#7DB8FF}
html[data-theme="dark"] .dbx{background:var(--cx-bg-raise);border-color:var(--cx-line)}
html[data-theme="dark"] .dbsteps li{background:var(--cx-bg-card);border-color:var(--cx-line)}
html[data-theme="dark"] .dbsteps li+li::before{background:#34445F}
html[data-theme="dark"] .dbsteps i:not(.dbsteps__ai){background:#1B2A44;color:#7DB8FF}
html[data-theme="dark"] .dbx__chips em{background:#1B2A44;border-color:#2F5A92;color:#7DB8FF}
html[data-theme="dark"] .dbx__row--ai{background:#132A4A;border-color:#2F5A92}
html[data-theme="dark"] .oa-path__k i{background:#1B2A44}
html[data-theme="dark"] .sg-bubble::after{border-right-color:#fff}
html[data-theme="dark"] .tpl2__pick{background:var(--cx-bg-raise)}
html[data-theme="dark"] .tpl2__go{background:#F1F5FB;color:#0B1220}
html[data-theme="dark"] .wf2__crop{background:#1B2840}
html[data-theme="dark"] .oa{background:var(--cx-bg)}
html[data-theme="dark"] .oa__label{background:var(--cx-bg-card);border-color:#2A3D5C}
html[data-theme="dark"] .oa__label small{background:#1B2A44}
html[data-theme="dark"] .oa-path{background:var(--cx-bg-card)}
html[data-theme="dark"] .oa-ph{background:#0E1320;box-shadow:0 18px 40px -22px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14)}
html[data-theme="dark"] .kr-offer{background:var(--cx-bg)}
html[data-theme="dark"] .of2__opt{background:var(--cx-bg-raise);border-color:var(--cx-line)}
html[data-theme="dark"] .of2__dim--a .of2__k i{background:#1B2A44;color:#7DB8FF}
html[data-theme="dark"] .of2__dim--b .of2__k i{background:#15312B;color:#6FD3B5}
html[data-theme="dark"] .of2__dim--c .of2__k i{background:#241F45;color:#B4A7FF}
html[data-theme="dark"] .sg-dots li{background:#34445F}
html[data-theme="dark"] .sg-dots li[aria-current="step"]{background:#7DB8FF}
html[data-theme="dark"] .sg-play{border-color:#3A4A66;color:var(--cx-ink-2)}