/* ═══════════════════════════════════════════════════════════
   COBOTSYS — Robot Perception
   토큰은 .kb 에 정의 (:root 아님) — 위젯/부분 삽입 환경에서도 동작
   ═══════════════════════════════════════════════════════════ */
.kb{
  /* 브랜드 */
  --navy:  #1A2A33;
  --teal:  #137A7F;
  --amber: #E4A11B;

  /* 파생 */
  --bg:     #0C1418;
  --surface:#132029;
  --fg:     #EEF2F3;
  --muted:  rgba(238,242,243,.56);
  --faint:  rgba(238,242,243,.34);
  --hair:   rgba(238,242,243,.13);

  --pad:    clamp(20px, 4.5vw, 72px);
  --sec:    clamp(88px, 12vh, 168px);

  background:var(--bg); color:var(--fg);
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;              /* 한글: 어절 중간에서 끊기지 않게 */
}
html{scroll-behavior:smooth; scroll-padding-top:88px}
.kb *{box-sizing:border-box; margin:0; padding:0}
/* :where() 로 명시도 0 — 아래 컴포넌트 규칙이 항상 이김 */
.kb :where(a){color:inherit; text-decoration:none}
.kb :where(ul){list-style:none}

/* ── 공통 조판 ─────────────────────────────────────────── */
.kb-eyebrow{
  display:flex; align-items:center; gap:11px;
  font-size:11.5px; font-weight:600; letter-spacing:.2em;
  color:var(--muted); text-transform:uppercase;
}
.kb-eyebrow::before{
  content:""; width:clamp(24px,3vw,44px); height:1px; background:var(--teal);
}
.kb-badge{
  display:inline-block; margin-left:10px; vertical-align:2px;
  padding:3px 8px; border-radius:2px;
  font-size:10px; font-weight:700; letter-spacing:.08em; white-space:nowrap;
  color:var(--amber); background:rgba(228,161,27,.09);
  border:1px solid rgba(228,161,27,.32);
}

/* ═══ 히어로 ═══════════════════════════════════════════════ */
.kb-hero{
  position:relative; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; overflow:hidden;
}
.kb-hero__bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(118% 88% at 74% 14%, rgba(19,122,127,.22) 0%, transparent 56%),
    radial-gradient(96% 74% at 8% 98%,  rgba(26,42,51,.72)  0%, transparent 62%),
    linear-gradient(180deg,#14232C 0%,#0C1418 100%);
}
.kb-hero__bg::after{                 /* 미세한 결. 영상 넣으면 지워도 됨 */
  content:""; position:absolute; inset:0; opacity:.45;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
}
.kb-hero__video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.04) brightness(.7);
}
.kb-hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,20,24,.7) 0%, rgba(12,20,24,.12) 36%, rgba(12,20,24,.86) 100%),
    linear-gradient(90deg,  rgba(12,20,24,.7) 0%, transparent 62%);
}

/* ── 네비 ─────────────────────────────────────────────── */
/* 히어로 밖에 둔다 — 히어로의 isolation 안에 있으면 뒷 섹션에 가려짐 */
.kb-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); height:clamp(58px,6vw,76px);
  border-bottom:1px solid transparent; background:transparent;
  transition:background .3s, border-color .3s;
}
.kb-nav[data-stuck="1"]{
  background:rgba(12,20,24,.74); backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);
}
.kb-nav__logo{font-size:15px; font-weight:700; letter-spacing:.16em}
.kb-nav__menu{display:flex; gap:clamp(16px,2.1vw,34px)}
.kb-nav__menu a{font-size:13.5px; font-weight:500; letter-spacing:-.01em; color:var(--muted); transition:color .2s}
.kb-nav__menu a:hover{color:var(--fg)}
@media (max-width:820px){ .kb-nav__menu{display:none} }

/* ── 히어로 본문 ───────────────────────────────────────── */
.kb-hero__body{
  position:relative; z-index:1; flex:1; width:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(40px,7vh,92px);
}
.kb-hero__body .kb-eyebrow{margin-bottom:26px}
.kb-hero h1{
  font-size:clamp(1.95rem,5.3vw,4.7rem);
  font-weight:600; line-height:1.14; letter-spacing:-.028em;
  max-width:1400px; text-wrap:balance;
}
.kb-hero h1 em{font-style:normal; color:rgba(238,242,243,.62)}
.kb-hero__sub{
  margin-top:clamp(18px,2.4vh,28px); max-width:min(620px,100%);
  font-size:clamp(.95rem,1.28vw,1.12rem); line-height:1.68; letter-spacing:-.012em;
  color:var(--muted); text-wrap:pretty;
}

/* ── 버튼 ─────────────────────────────────────────────── */
.kb-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,4vh,44px)}
.kb-btn{
  display:inline-flex; align-items:center; gap:9px;
  height:50px; padding:0 26px; border-radius:2px;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.kb-btn--primary{background:var(--fg); color:var(--bg); border:1px solid var(--fg)}
.kb-btn--primary:hover{background:transparent; color:var(--fg); transform:translateY(-1px)}
.kb-btn--ghost{border:1px solid var(--hair)}
.kb-btn--ghost:hover{border-color:var(--teal); color:var(--fg); transform:translateY(-1px)}
.kb-btn svg{width:15px; height:15px; flex:none}

/* ── 히어로 하단 3기둥 스트립 ──────────────────────────── */
.kb-pillars{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,52px);
  margin-top:clamp(34px,5.5vh,62px); padding-top:24px;
  border-top:1px solid var(--hair);
}
.kb-pillars a{display:block; transition:opacity .2s}
.kb-pillars a:hover{opacity:.62}
.kb-pillars i{
  display:block; font-style:normal; margin-bottom:10px;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; color:var(--faint);
}
.kb-pillars b{display:block; margin-bottom:7px; font-size:clamp(.95rem,1.35vw,1.1rem); font-weight:600; letter-spacing:-.015em}
.kb-pillars em{display:block; font-style:normal; font-size:12.5px; line-height:1.62; color:var(--muted)}
@media (max-width:760px){
  .kb-pillars{grid-template-columns:1fr; gap:15px}
  .kb-pillars em{display:none}
}

/* ── 스크롤 힌트 ───────────────────────────────────────── */
.kb-scroll{
  position:absolute; right:var(--pad); bottom:clamp(40px,7vh,92px); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-size:10.5px; font-weight:600; letter-spacing:.18em; color:var(--faint);
  writing-mode:vertical-rl;
}
.kb-scroll i{
  display:block; width:1px; height:56px; transform-origin:top;
  background:linear-gradient(180deg,transparent,var(--teal));
  animation:kb-drop 2.1s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes kb-drop{0%{transform:scaleY(0);opacity:0}22%{opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:900px){ .kb-scroll{display:none} }

/* ═══ 일반 섹션 ════════════════════════════════════════════ */
.kb-sec{padding:var(--sec) var(--pad); position:relative}
.kb-sec__head{max-width:900px; margin-bottom:clamp(44px,6vh,80px)}
.kb-sec__head .kb-eyebrow{margin-bottom:22px}
.kb-sec h2{
  font-size:clamp(1.6rem,3.3vw,2.9rem);
  font-weight:600; line-height:1.24; letter-spacing:-.028em; text-wrap:balance;
}
.kb-sec__lead{
  margin-top:18px; max-width:640px;
  font-size:clamp(.94rem,1.2vw,1.06rem); line-height:1.72; color:var(--muted); text-wrap:pretty;
}

/* ── 제품 3기둥 (행 레이아웃) ──────────────────────────── */
.kb-prod{border-top:1px solid var(--hair)}
.kb-prod__row{
  display:grid; grid-template-columns:74px minmax(200px,.9fr) minmax(0,1.5fr);
  gap:clamp(14px,3vw,48px); align-items:start;
  padding:clamp(26px,4vh,44px) 0;
  border-bottom:1px solid var(--hair);
  transition:background .25s;
}
.kb-prod__row:hover{background:rgba(19,122,127,.05)}
.kb-prod__no{font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--faint); padding-top:6px}
.kb-prod__name b{display:block; font-size:clamp(1.15rem,1.9vw,1.6rem); font-weight:600; letter-spacing:-.025em}
.kb-prod__name > span{display:block; margin-top:7px; font-size:11.5px; font-weight:600; letter-spacing:.14em; color:var(--teal)}
.kb-prod__items{display:flex; flex-wrap:wrap; gap:8px 10px; padding-top:5px}
.kb-prod__items li{
  padding:7px 13px; border:1px solid var(--hair); border-radius:2px;
  font-size:12.5px; letter-spacing:-.005em; color:var(--muted);
}
@media (max-width:820px){
  .kb-prod__row{grid-template-columns:1fr; gap:16px}
  .kb-prod__no{padding-top:0}
}

/* ── 사례 ─────────────────────────────────────────────── */
.kb-media{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--hair); border-radius:3px;
  background:linear-gradient(135deg,var(--surface),var(--bg));
}
.kb-media video,.kb-media iframe{display:block; width:100%; height:100%; object-fit:cover; border:0}
.kb-media__ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--faint);
}
.kb-media__ph::before{
  content:""; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--hair);
  background:radial-gradient(circle at 54% 50%, rgba(19,122,127,.42) 0 22%, transparent 23%);
}
.kb-case__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,3vw,44px); margin-top:clamp(32px,4.5vh,56px);
  padding-top:26px; border-top:1px solid var(--hair);
}
.kb-case__facts dt{font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--faint); margin-bottom:9px}
.kb-case__facts dd{font-size:13.5px; line-height:1.66; color:var(--muted)}


/* -- 그 외 제작 사례 ------------------------------------- */
.kb-works{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(24px,3.5vw,56px);
}
.kb-works h3{
  margin-top:20px; font-size:clamp(1.05rem,1.6vw,1.32rem);
  font-weight:600; letter-spacing:-.022em;
}
.kb-works p{
  margin-top:9px; max-width:44ch;
  font-size:13.5px; line-height:1.68; color:var(--muted);
}

/* ── 아직 안 만든 섹션 자리 ────────────────────────────── */
.kb-todo{
  padding:clamp(30px,5vh,52px) var(--pad);
  border-top:1px solid var(--hair);
  font-size:12.5px; letter-spacing:.02em; color:var(--faint);
}

/* ── 등장 모션 ─────────────────────────────────────────── */
.kb-rise{opacity:0; transform:translateY(22px); animation:kb-rise .95s cubic-bezier(.16,1,.3,1) forwards}
.kb-hero h1.kb-rise{animation-delay:.16s}
.kb-hero__sub.kb-rise{animation-delay:.27s}
.kb-cta.kb-rise{animation-delay:.38s}
.kb-pillars.kb-rise{animation-delay:.50s}
@keyframes kb-rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .kb-rise{animation:none; opacity:1; transform:none}
  .kb-scroll i{animation:none}
  .kb-hero__video{display:none}
}

/* ── 다이어그램 ────────────────────────────────────────── */
.kb-fig{margin:0; margin-top:clamp(28px,4.5vh,56px)}
.kb-fig__scroll{overflow-x:auto; overflow-y:hidden; padding-bottom:8px}
.kb-fig svg{display:block; width:100%; min-width:840px; height:auto}
.kb-fig figcaption{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--hair);
  font-size:12px; line-height:1.6; color:var(--faint); letter-spacing:.01em;
}
/* SVG 내부 — 색은 전부 토큰에서 받음 */
.kb-dia text{font-family:inherit}
.kb-dia .d-rail{stroke:var(--hair); fill:none; stroke-width:1}
.kb-dia .d-flow{stroke:var(--teal); fill:none; stroke-width:1.2}
.kb-dia .d-gl{stroke:var(--teal); fill:none; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round}
.kb-dia .d-gl-dim{stroke:var(--faint); fill:none; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round}
.kb-dia .d-dot{fill:var(--teal)}
.kb-dia .d-node{fill:var(--bg); stroke:var(--teal); stroke-width:1.2}
.kb-dia .d-lab{fill:var(--fg); font-size:15px; font-weight:600; letter-spacing:-.02em}
.kb-dia .d-sub{fill:var(--muted); font-size:11.5px; letter-spacing:-.005em}
.kb-dia .d-cap{fill:var(--faint); font-size:10.5px; font-weight:600; letter-spacing:.14em}
.kb-dia .d-plate{fill:var(--surface); stroke:var(--hair); stroke-width:1}
.kb-dia .d-teach{stroke:var(--faint); fill:none; stroke-width:1.4; stroke-dasharray:7 6}
.kb-dia .d-fix{stroke:var(--teal); fill:none; stroke-width:2.2; stroke-linecap:round}
.kb-dia .d-delta{stroke:var(--amber); fill:none; stroke-width:1.2}
.kb-dia .d-delta-lab{fill:var(--amber); font-size:11.5px; font-weight:600}

/* ── 후보 팬 / 프로파일 ─────────────────────────────────── */
.kb-dia .d-fan-a{stroke:var(--hair); stroke-width:1; fill:none}
.kb-dia .d-fan-b{stroke:var(--faint); stroke-width:1; fill:none; opacity:.55}
.kb-dia .d-fan-c{stroke:var(--teal); stroke-width:1.4; fill:none}
.kb-dia .d-div{stroke:var(--hair); stroke-width:1; stroke-dasharray:3 4; fill:none}
.kb-dia .d-fb{stroke:var(--teal); stroke-width:1.1; stroke-dasharray:6 5; fill:none; opacity:.75}

.kb-badge--rd{
  color:var(--teal); background:rgba(19,122,127,.10); border-color:rgba(19,122,127,.36);
}

.kb-ask{border-top:1px solid var(--hair)}
.kb-ask__row{
  display:grid; grid-template-columns:minmax(160px,.7fr) minmax(0,1.7fr);
  gap:clamp(12px,3vw,48px); align-items:baseline;
  padding:clamp(20px,3vh,32px) 0; border-bottom:1px solid var(--hair);
  transition:background .25s;
}
.kb-ask__row:hover{background:rgba(19,122,127,.05)}
.kb-ask__row b{font-size:clamp(1rem,1.5vw,1.2rem); font-weight:600; letter-spacing:-.022em}
.kb-ask__row p{font-size:clamp(.94rem,1.2vw,1.06rem); line-height:1.6; color:var(--muted)}
@media (max-width:760px){
  .kb-ask__row{grid-template-columns:1fr; gap:8px}
}

.kb-dia .d-cull{stroke:var(--faint); stroke-width:1.1; fill:none; opacity:.55; stroke-linecap:round}

/* ── 회귀 사다리 ───────────────────────────────────────── */
.kb-dia .d-step{stroke:var(--teal); stroke-width:2.4; fill:none; stroke-linecap:round}
.kb-dia .d-step-next{stroke:var(--muted); stroke-width:2; fill:none; stroke-linecap:round; stroke-dasharray:9 8; opacity:.55}
.kb-dia .d-riser{stroke:var(--hair); stroke-width:1; stroke-dasharray:3 4; fill:none}
.kb-dia .d-base{stroke:var(--hair); stroke-width:1; opacity:.5}
.kb-dia .d-lab-lg{fill:var(--fg); font-size:19px; font-weight:600; letter-spacing:-.025em}
.kb-dia .d-dim{fill:var(--muted)}
.kb-dia .d-here{fill:var(--amber); font-size:10.5px; font-weight:700; letter-spacing:.12em}

.kb-note{margin-top:clamp(30px,4.5vh,54px); max-width:680px}
.kb-note em{font-style:normal; color:var(--fg)}