/* ==========================================================================
   INTOWN — ai.css (ai.html 전용 · AI 플랫폼)
   site.css 의 토큰과 컴포넌트 위에 이 페이지의 레이아웃 · 도식만 더합니다.
   ========================================================================== */

/* ---------- 공통 ------------------------------------------------------------ */
.section[id] { scroll-margin-top: calc(var(--header-h) + 54px); }
/* 페이지 안 링크로 이동한 뒤 초점을 받는 섹션 — 섹션 전체에 초점 테두리를 그리지 않습니다 */
main > section[tabindex="-1"]:focus,
main > section[tabindex="-1"]:focus-visible { outline: none; }

/* 공통 보조 글자색 대비 보정 — 모든 페이지 CSS 에 같은 값(site.css 토큰이 같은 값으로 바뀌면 지워도 됩니다).
   --fog-3 #6c7585 → #7a8394 (night 위 5.3:1 · night-3 위 4.8:1) · --ink-3 #676e7b → #5f6673 (paper 위 5.2:1 · paper-2 위 4.7:1)
   헤더 · 공통 푸터 · 모바일 메뉴 · 눈썹 라벨 · 서브내비가 모든 페이지에서 같은 회색으로 보입니다. */
:root { --fog-3: #7a8394; --ink-3: #5f6673; }

/* 한글이 섞인 모노 라벨: 라틴 대문자용 자간(0.06~0.09em)이면 한글이 벌어져 보입니다 */
.is-ko,
.ai-hero .page-hero__meta dt, .ai-map__cols span, .ai-map__k, .ux-note__label, .viewer__label,
.modules__k, .profile-table thead th, .metric dt, .arch__zone-name, .arch__k, .divider-label, .trace__k,
.spec-strip__k, .ip-card__k, .feature__spec, .fan__k, .fan__log-k, .load-claim__stats dt, .placeholder__label,
.combo__label, .qwork__k, main .frame__bar > span:first-child { letter-spacing: 0.02em; }
/* 제품명 표기(AnyAI · MES Chatbot · DDP · Ray)를 대문자로 바꾸지 않습니다 */
main .frame__bar > span:first-child, .arch__node--core .arch__k, .feature__spec { text-transform: none; }

/* 스티키 서브내비: 아래 섹션의 테마를 따라 부드럽게 전환 (ai.js) */
.subnav { transition: top 0.6s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.35s, background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out); }
.subnav.is-away { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* 서브내비 링크 색 — 모든 하위 페이지 공통(fg-3 는 어두운 섹션 위 4.3:1 로 부족해 fg-2 와 섞어 4.5:1 이상) */
.subnav__link { color: color-mix(in oklab, var(--fg-2) 50%, var(--fg-3)); }
@media (max-width: 860px) {
  /* 목록이 넘치는 폭(≈845px 이하): 목록을 화면 끝까지 넓히고, 더 있는 쪽 가장자리를 흐리게 (ai.js 가 is-scrolled · is-end 표시) */
  .subnav > .container { width: 100%; }
  .subnav__list {
    padding-inline: calc(var(--gutter) - 12px); scroll-padding-inline: var(--gutter);
    --fl: 0px; --fr: 44px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  }
  .subnav__list.is-scrolled { --fl: 32px; }
  .subnav__list.is-end { --fr: 0px; }
  .subnav__link { padding: 0 12px; }
}
/* 서브내비: 챕터(대주제)마다 세로 구분선 — solutions.html(.sol-subnav__sep)과 같은 모양. 목록이 가로로 넘치는 폭에서는 숨깁니다 */
.ai-subnav__sep { flex: none; align-self: center; width: 1px; height: 16px; margin: 0 6px; background: var(--line-c2); }
@media (max-width: 1080px) { .ai-subnav__sep { display: none; } }

/* ---------- 챕터 띠 (대주제 01–05 도입부) ----------------------------------------
   solutions.html 의 .sol-chapter 와 같은 값입니다(두 페이지가 같은 모양이어야 합니다 — 공통화하면 site.css 로 옮길 후보).
   챕터 테마는 바로 뒤 첫 제품 섹션과 같고, 배경은 한 단계 다른 면(paper-2 · night-2)이라 제품 섹션과 구분됩니다. */
.ai-chapter { position: relative; overflow: hidden; padding: clamp(72px, 8vw, 120px) 0 clamp(32px, 4vw, 56px); }
main > .ai-chapter[data-theme="light"] { background-color: var(--paper-2); background-image: radial-gradient(70% 90% at 88% 0%, rgba(62, 154, 134, 0.08), transparent 62%); }
main > .ai-chapter[data-theme="dark"] { background-color: var(--night-2); background-image: radial-gradient(70% 90% at 88% 0%, rgba(82, 198, 174, 0.09), transparent 62%), radial-gradient(50% 70% at 100% 100%, rgba(122, 155, 255, 0.07), transparent 70%); }
.ai-chapter__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.ai-chapter__body { grid-column: 1 / span 8; display: grid; gap: 22px; align-content: end; }
.ai-chapter__title { font-size: clamp(3rem, 1.1rem + 5.4vw, 6.5rem); line-height: 1; letter-spacing: -0.052em; font-weight: 700; }
.ai-chapter__lead { max-width: 34em; font-size: var(--fs-lead); line-height: 1.66; color: var(--fg-2); letter-spacing: -0.016em; text-wrap: balance; }
.ai-chapter__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (max-width: 960px) { .ai-chapter__body { grid-column: 1 / -1; } }
/* 챕터 바로 뒤 첫 섹션은 위 여백을 줄여 한 묶음으로 읽히게 */
main > .ai-chapter + .section { padding-top: clamp(48px, 5vw, 80px); }
/* 제품명: solutions.html 과 같은 제목 위계(챕터 ≈95 > 제품 ≈61px, 390px 기준 48 > 32px).
   #tacit-knowledge 는 .prod 가 아니어서 main 기준으로 겁니다 */
main .prod__name { font-size: clamp(2rem, 1.2rem + 2.9vw, 4rem); line-height: 1.06; letter-spacing: -0.044em; text-wrap: balance; }
/* 같은 챕터 안에서 같은 테마의 섹션이 이어지면(01.1 → 01.2) 사이 여백을 줄여 빈 띠가 생기지 않게 */
main > .section[data-theme="dark"] + .section[data-theme="dark"],
main > .section[data-theme="light"] + .section[data-theme="light"] { padding-top: clamp(72px, 8vw, 120px); }
main > .section[data-theme="dark"]:has(+ .section[data-theme="dark"]),
main > .section[data-theme="light"]:has(+ .section[data-theme="light"]) { padding-bottom: clamp(72px, 8vw, 120px); }

.prod__tagline {
  font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.032em; font-weight: 620;
  color: var(--fg); text-wrap: balance;
}
.prod__head .t-lead { max-width: 38em; }
.prod__aside .t-lead { text-wrap: balance; }
.block-intro { max-width: 34em; margin-top: 14px; }
/* 넓은 화면에서만 줄을 나누는 <br> (SplitText 제목에는 쓰지 않음 — 숨겨도 강제 줄바꿈으로 처리됨) */
@media (max-width: 640px) { .br-d { display: none; } }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.block-head__meta { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--fg-3); }

/* JS 없이 볼 때: 투명 헤더가 서브내비와 겹치지 않게 */
html:not(.js) .site-header { background: var(--night); }
html:not(.js) .subnav { top: var(--header-h); }

/* ---------- Hero ------------------------------------------------------------ */
.ai-hero { isolation: isolate; }
.ai-hero .page-hero__title { max-width: 11.5em; }
.ai-hero .page-hero__lead { max-width: 60ch; }
.ai-hero .page-hero__meta > div { min-width: 0; }
@media (min-width: 1081px) {
  .ai-hero .page-hero__lead { max-width: min(60ch, 52vw); }
  .ai-hero .page-hero__meta { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 56px; max-width: min(calc(58.333% - 16px), 760px); }
}
/* 태블릿 · 모바일: 네 항목을 2 × 2 로 (flex 줄바꿈이면 768px 에서 3 + 1 로 '파트너' 하나만 남습니다).
   태블릿은 데스크톱처럼 내용 폭 두 칸(본문 아래에 모여 있게), 휴대폰은 같은 폭 두 칸 */
@media (max-width: 1080px) {
  .ai-hero .page-hero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 18px clamp(32px, 5vw, 56px); }
}
@media (max-width: 640px) {
  .ai-hero .page-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
}
/* 360px 미만: 한 칸 폭(≈130px)이 줄바꿈하지 않는 '테스트 6,000건 이상'(≈141px)보다 좁아 잘리므로 한 줄에 하나씩 */
@media (max-width: 359px) {
  .ai-hero .page-hero__meta { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* 오른쪽: 실제 운영 화면 세 장을 겹쳐 둔 구성 (장식 · aria-hidden) */
.ai-hero__stack {
  position: absolute; z-index: 1; top: calc(var(--header-h) + 44px);
  right: max(calc((100% - var(--container)) / 2 - 160px), calc(var(--gutter) * -1));
  width: min(50vw, 860px); height: 74%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
.ai-hero__shot { position: absolute; margin: 0; }
.ai-hero__shot .frame { border-radius: 12px; will-change: transform; }
.ai-hero__shot--a { right: 0; top: 0; width: 80%; }
.ai-hero__shot--b { right: 36%; top: 47%; width: 47%; z-index: 1; }
.ai-hero__shot--c { right: 12%; top: 58%; width: 42%; z-index: 2; }
.ai-hero__shot--b .frame, .ai-hero__shot--c .frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 36px 80px -24px rgba(0, 0, 0, 0.9); }
.ai-hero__shot--b .frame__media img, .ai-hero__shot--c .frame__media img { filter: brightness(0.9) saturate(0.92); }
@media (max-width: 1080px) { .ai-hero__stack { display: none; } }

/* ---------- Platform map ----------------------------------------------------- */
.ai-map {
  --map-cols: 52px minmax(0, 3fr) minmax(0, 3.3fr) 36px minmax(0, 4fr);
  --map-gap: clamp(14px, 1.8vw, 30px);
}
.ai-map .section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.ai-map__cols { display: grid; grid-template-columns: var(--map-cols); column-gap: var(--map-gap); padding-bottom: 12px; }
.ai-map__cols span { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.ai-map__cols span:nth-child(1) { grid-column: 2; }
.ai-map__cols span:nth-child(2) { grid-column: 3; }
.ai-map__cols span:nth-child(3) { grid-column: 5; }
.ai-map__list { list-style: none; margin: 0; padding: 0; }
/* 성격별 묶음(챕터 01–04): 묶음마다 굵은 머리선 + 번호 · 이름 — solutions.html 포트폴리오 목록과 같은 위계 */
.ai-map__groups { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 36px); }
.ai-map__ghead {
  display: grid; grid-template-columns: var(--map-cols); column-gap: var(--map-gap); align-items: baseline;
  padding: 22px 0 10px; border-top: 1px solid var(--fg);
}
.ai-map__gnum { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--fg-3); }
/* 묶음 이름 > 플랫폼 이름: solutions.html 의 .sol-pf__name(≈38/24px) > 항목(≈19/16px) 과 같은 단계 */
.ai-map__gname { grid-column: 2 / span 2; font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.375rem); line-height: 1.12; letter-spacing: -0.038em; font-weight: 650; }
.ai-map__gname .badge-soon { vertical-align: 0.3em; margin-left: 6px; }
/* 묶음 사이에는 다음 묶음의 굵은 머리선만 — 앞 묶음 마지막 줄의 가는 선과 겹쳐 두 줄로 보이지 않게 */
.ai-map__group:not(:last-child) .ai-map__list > li:last-child { border-bottom: 0; }
.ai-map__gen { grid-column: 5; justify-self: end; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ai-map__list > li { border-bottom: 1px solid var(--line-c); }
.ai-map__row {
  position: relative; isolation: isolate; display: grid; grid-template-columns: var(--map-cols);
  column-gap: var(--map-gap); align-items: center; padding: 24px 0;
}
.ai-map__row::before {
  content: ""; position: absolute; z-index: -1; inset: 6px -18px; border-radius: 14px; background: var(--card);
  box-shadow: 0 18px 40px -30px rgba(10, 20, 40, 0.45); opacity: 0; transform: scale(0.985);
  transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.35s;
}
.ai-map__row:hover::before { opacity: 1; transform: none; }
/* 키보드 초점: 테두리 대신 호버 카드에 초점 링을 입혀 사각형이 두 개 겹치지 않게 */
.ai-map__row:focus-visible { outline: none; }
.ai-map__row:focus-visible::before { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--accent), 0 18px 40px -30px rgba(10, 20, 40, 0.45); }
.ai-map__idx { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--fg-3); transition: color 0.3s; }
.ai-map__row:hover .ai-map__idx { color: var(--accent); }
.ai-map__name { display: grid; gap: 3px; }
.ai-map__name strong { font-size: clamp(1rem, 0.94rem + 0.25vw, 1.1875rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.3; }
.ai-map__name small { font-size: 0.8125rem; color: var(--fg-3); letter-spacing: -0.01em; }
.ai-map__cell { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.ai-map__cell--out { color: var(--fg); font-weight: 550; letter-spacing: -0.014em; }
.ai-map__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font-style: normal; }
.ai-map__arrow {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-c2); color: var(--fg-2);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s, transform 0.5s var(--ease-out);
}
.ai-map__arrow svg { width: 14px; height: 14px; }
.ai-map__row:hover .ai-map__arrow { background: var(--fg); border-color: var(--fg); color: var(--bg); transform: translateX(3px); }
.ai-map__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 16px; align-items: start; margin-top: clamp(28px, 3vw, 40px); }
.ai-map__note { grid-column: 1 / span 7; max-width: 46em; font-size: var(--fs-sm); line-height: 1.65; color: var(--fg-2); }
.ai-map__foot .link-arrow { grid-column: 1 / span 7; justify-self: start; }
@media (max-width: 960px) {
  .ai-map__note, .ai-map__foot .link-arrow { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ai-map__cols { display: none; }
  .ai-map__ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 16px; }
  .ai-map__gnum { flex: none; width: 40px; }
  .ai-map__gen { margin-left: auto; }
  .ai-map__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 10px; padding: 22px 0 24px; align-items: start; }
  .ai-map__row::before { inset: 4px -12px; }
  .ai-map__idx { grid-row: 1; padding-top: 5px; }
  .ai-map__name, .ai-map__cell { grid-column: 2; }
  .ai-map__arrow { display: none; }
  /* 라벨(입력 · 결과) 옆으로 줄이 이어지도록 두 칸 격자 — 둘째 줄이 라벨 아래로 돌아가지 않습니다 */
  .ai-map__cell { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
  .ai-map__k {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap;
    display: block; min-width: 0; margin: 0; font-family: var(--font-mono); font-size: 0.6875rem;
    color: var(--fg-3); font-weight: 500;
  }
  .ai-map__cell--out .ai-map__k { color: var(--accent); }
}

/* ---------- INFINI ------------------------------------------------------------ */
.prod--infini { overflow: hidden; }
.prod--infini::before {
  content: ""; position: absolute; left: 50%; top: 22%; width: min(1400px, 110vw); height: 900px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(79, 196, 173, 0.13), rgba(116, 151, 255, 0.07) 48%, transparent 72%);
  pointer-events: none;
}
.prod--infini > .container { position: relative; }

.ux-note { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-c2); }
.ux-note__label { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.ux-note__title { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 650; letter-spacing: -0.034em; line-height: 1.25; }
.ux-note .ux-note__list { display: grid; margin-top: 4px; }
.ux-note__list li { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-c); font-size: 0.9375rem; font-weight: 550; color: var(--fg); }
.ux-note__list li span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--accent-2); }

/* 운영 화면 뷰어 (탭) */
.viewer { perspective: 1800px; }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 20px; }
.viewer__label { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.viewer__stage { position: relative; transform-origin: 50% 0; }
.viewer .frame { border-radius: 16px; }
.viewer .frame__media { aspect-ratio: 1600 / 756; overflow: hidden; }
.viewer .frame__media img { object-fit: cover; object-position: 50% 0; }
.viewer .tabs__panel:focus-visible { outline-offset: 6px; border-radius: 18px; }
.viewer .tabs__panel:not([hidden]) .frame__media img { animation: viewer-in 0.9s var(--ease-out) both; }
.viewer__cap { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-2); max-width: 72ch; }
.viewer__cap b { color: var(--fg); font-weight: 600; }
@keyframes viewer-in { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } }
html:not(.js) .viewer [role="tabpanel"][hidden] { display: block !important; margin-top: 40px; }
@media (max-width: 640px) {
  .viewer__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); width: calc(100% + var(--gutter) * 2); }
  .viewer__tabs::-webkit-scrollbar { display: none; }
  .viewer__tabs .tabs__tab { flex: none; }
  .viewer__label { display: none; }
}
/* 390px 안팎: 탭 세 개가 화면 끝에서 몇 px 잘려 보이지 않도록 탭 안쪽 여백을 줄여 한 줄에 모두 들어오게 합니다 */
@media (max-width: 420px) {
  .viewer__tabs .tabs__tab { padding: 0 12px; }
}
@media (max-width: 640px) {
  .viewer .frame { border-radius: 12px; }
}

.infini-metrics { margin-top: clamp(32px, 3.4vw, 48px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.infini-metrics .metric dd { font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); }
@media (max-width: 640px) {
  .infini-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infini-metrics .metric:nth-child(3) { border-left: 0; padding-left: 0; }
  .infini-metrics .metric:nth-child(n + 3) { border-top: 1px solid var(--line-c); }
}

/* .prod__block 의 gap: 28px 가 .split 의 열 간격을 덮으면 12열 × 28px = 최소 308px 이 되어 320px 화면에서 글이 잘립니다 → 열 간격을 되돌립니다 */
.infini-why { column-gap: clamp(16px, 2vw, 32px); }
.infini-why .split__a { grid-column: 1 / span 4; }
.infini-why .split__b { grid-column: 6 / span 7; }
/* 제목 칸이 목록보다 짧아 생기는 빈 공간: 목록을 읽는 동안 제목이 따라옵니다 */
@media (min-width: 961px) { .infini-why .split__a { position: sticky; top: calc(var(--header-h) + 88px); } }
.compare-head { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 16px; padding-bottom: 12px; }
.infini-why .compare li, .infini-why .compare-head { grid-template-columns: minmax(0, 0.84fr) 32px minmax(0, 1.16fr); }
.prod--infini .compare__to { font-size: 1.0625rem; }
@media (max-width: 960px) { .infini-why .split__a, .infini-why .split__b { grid-column: 1 / -1; } }
@media (max-width: 640px) { .compare-head { display: none; } .infini-why .compare li { grid-template-columns: 1fr; } }

.feature-grid--lg .feature { padding-top: 28px; padding-bottom: 34px; gap: 14px; }
.feature-grid--lg .feature__title { font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.3125rem); }
.feature__spec { margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }

/* 도입 형태 */
.deploy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; align-items: start; }
.deploy__intro { grid-column: 1 / span 5; display: grid; gap: 0; }
.deploy__main { grid-column: 7 / span 6; display: grid; gap: 28px; }
.stack-card {
  margin-top: 28px; padding: 20px; border-radius: var(--radius-l); border: 1px solid var(--line-c2);
  background: linear-gradient(180deg, color-mix(in oklab, var(--fg) 5%, transparent), color-mix(in oklab, var(--fg) 1.5%, transparent));
}
.stack-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 14px; }
.stack-card__tool { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--accent-2); }
.stack-card__meta { font-size: 0.875rem; font-weight: 600; color: var(--fg); }
.stack-card__svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stack-card__svc li {
  position: relative; padding: 16px 10px 14px; border-radius: 10px; text-align: center; font-size: 0.9375rem; font-weight: 600;
  background: var(--card); border: 1px solid var(--line-c); letter-spacing: -0.01em;
}
.stack-card__svc li::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 auto 10px; border-radius: 50%; background: var(--c-green-hi); box-shadow: 0 0 10px rgba(160, 217, 112, 0.6); }
/* 표 내용이 짧아 site.css 의 최소 폭(560px)이 필요 없습니다 — 961~1260px 에서 잘리지 않게 */
.table.profile-table { min-width: 0; }
.profile-table td:first-child { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--accent); white-space: nowrap; }
.profile-table td { font-size: 0.9375rem; }
.modules { display: grid; gap: 12px; }
.modules__k { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.modules .tag-list { list-style: none; margin: 0; padding: 0; align-items: center; }
.modules .tag { height: 32px; padding: 0 13px; font-size: 0.875rem; }
/* 마지막 태그와 '등'이 줄바꿈으로 떨어지지 않게 */
.modules__last { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 0.875rem; color: var(--fg-3); }
@media (max-width: 960px) { .deploy__intro, .deploy__main { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .stack-card__svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-table th, .profile-table td { padding: 13px 10px; }
  .profile-table th:first-child, .profile-table td:first-child { padding-left: 14px; }
  .profile-table td { font-size: 0.8125rem; line-height: 1.5; }
  .profile-table td:first-child { font-size: 0.75rem; letter-spacing: 0; }
}

/* ---------- AnyAI : 조회 경로 도식 --------------------------------------------- */
.arch { margin: 0 0 clamp(64px, 7vw, 112px); }
.arch__zone {
  position: relative; border-radius: 26px; padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2.4vw, 36px) clamp(36px, 3.6vw, 52px);
  border: 1.5px dashed var(--line-c2);
  background: radial-gradient(90% 120% at 50% 0%, color-mix(in oklab, var(--white) 70%, transparent), transparent 70%);
}
.arch__zone-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.arch__zone-name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-2); }
.arch__zone-name::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--fg-2); }
.arch__zone-note { font-size: 0.875rem; color: var(--fg-2); }
.arch__track { position: relative; --edge: clamp(84px, 8.2vw, 124px); padding-bottom: 92px; }
.arch__row {
  list-style: none; margin: 0; padding: 0; display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) var(--edge) minmax(0, 1fr) var(--edge) minmax(0, 1fr) var(--edge) minmax(0, 1fr);
}
.arch__node {
  position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 18px 20px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line-c); box-shadow: 0 22px 40px -32px rgba(10, 20, 40, 0.45);
}
.arch__node--core {
  background: var(--ink); border-color: var(--ink); color: var(--fog);
  --fg: var(--fog); --fg-2: var(--fog-2); --fg-3: #7b8494;
  box-shadow: 0 30px 60px -34px rgba(10, 20, 40, 0.8);
}
.arch__node--core::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; background: var(--grad-brand-hi); }
.arch__k { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.arch__t { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.022em; line-height: 1.35; color: var(--fg); }
.arch__d { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-2); }
.arch__node--core .arch__k { color: var(--c-green-hi); }
.arch__edge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 8px; }
.arch__edge-t { font-size: 0.75rem; line-height: 1.35; color: var(--fg-2); text-align: center; font-weight: 550; }
.arch__line { position: relative; display: block; width: 100%; height: 1.5px; background: var(--fg-3); }
.arch__line::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--fg-3); border-right: 1.5px solid var(--fg-3); transform: translate(0, -50%) rotate(45deg); }
.arch__line::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--c-blue); box-shadow: 0 0 0 3px rgba(40, 72, 168, 0.16); opacity: 0;
}
.arch.is-live .arch__line::before { animation: arch-travel 3.2s var(--ease-in-out) infinite; animation-delay: calc(var(--k, 0) * 0.8s); }
@keyframes arch-travel {
  0% { left: 0; opacity: 0; }
  4% { opacity: 1; }
  24% { left: calc(100% - 9px); opacity: 1; }
  30%, 100% { left: calc(100% - 9px); opacity: 0; }
}
/* LLM → DB 직접 경로 없음 (에이전트 중심 → DB 중심을 잇는 끊긴 대괄호).
   ✕ 는 DB 쪽 끝에 둡니다 — 가운데(안전 쿼리 아래)에 두면 '안전 쿼리 경로가 막혔다'로 읽힙니다. */
.arch__blocked {
  --w: calc((100% - var(--edge) * 3) / 4);
  position: absolute; top: calc(100% - 92px); height: 46px;
  left: calc(var(--w) * 1.5 + var(--edge)); width: calc(var(--w) * 2 + var(--edge) * 2);
  border: 1.5px dashed var(--fg-3); border-top: 0; border-radius: 0 0 16px 16px;
}
.arch__blocked-x {
  position: absolute; left: 86%; bottom: -13px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--fg-2);
}
.arch__blocked-x::before, .arch__blocked-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; background: var(--fg); transform: rotate(45deg); }
.arch__blocked-x::after { transform: rotate(-45deg); }
.arch__blocked-t { position: absolute; right: 0; top: calc(100% + 20px); white-space: nowrap; font-size: 0.8125rem; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.arch__cap { margin-top: 18px; max-width: 76ch; font-size: var(--fs-sm); line-height: 1.65; color: var(--fg-2); }
@media (max-width: 1080px) {
  .arch__track { --edge: 64px; }
  .arch__node { padding: 16px 14px 18px; }
  .arch__edge-t { font-size: 0.6875rem; }
}
@media (max-width: 860px) {
  .arch__zone { padding-bottom: 26px; }
  .arch__track { padding-bottom: 0; }
  .arch__row { grid-template-columns: minmax(0, 1fr); }
  .arch__edge { flex-direction: row; justify-content: flex-start; height: 58px; padding: 0 0 0 26px; gap: 16px; }
  .arch__line { order: -1; width: 1.5px; height: 100%; }
  .arch__line::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translate(-50%, 0) rotate(135deg); }
  .arch__line::before { left: 50%; top: 0; margin: 0 0 0 -3.5px; }
  .arch.is-live .arch__line::before { animation-name: arch-travel-y; }
  .arch__blocked { position: relative; inset: auto; width: auto; height: auto; border: 0; margin-top: 18px; padding: 14px 16px 14px 52px; border-radius: 12px; background: color-mix(in oklab, var(--fg) 5%, transparent); }
  .arch__blocked-x { left: 14px; top: 50%; bottom: auto; margin: -13px 0 0 0; }
  .arch__blocked-t { position: static; transform: none; white-space: normal; display: block; }
}
@keyframes arch-travel-y {
  0% { top: 0; opacity: 0; }
  4% { opacity: 1; }
  24% { top: calc(100% - 9px); opacity: 1; }
  30%, 100% { top: calc(100% - 9px); opacity: 0; }
}

/* 큰 인용 + 도입 3단계 */
.anyai-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px; align-items: start; }
.big-quote { grid-column: 1 / span 6; margin: 0; }
.big-quote p { font-size: clamp(2rem, 1.15rem + 2.9vw, 3.75rem); line-height: 1.1; letter-spacing: -0.045em; font-weight: 650; text-wrap: balance; }
.big-quote footer { margin-top: 22px; max-width: 30em; font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-2); text-wrap: balance; }
.steps { grid-column: 8 / span 5; display: grid; gap: 8px; }
.steps__list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps__list li { display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; padding: 18px 0 20px; border-bottom: 1px solid var(--line-c); }
.steps__list strong { display: block; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.022em; line-height: 1.4; }
.steps__list li div span { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--fg-2); line-height: 1.55; }
.steps__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg-2); border: 1px solid var(--line-c2); }
.steps__list li.is-accent .steps__n { background: var(--fg); border-color: var(--fg); color: var(--bg); }
@media (max-width: 960px) { .big-quote, .steps { grid-column: 1 / -1; } }
/* 네 가지 가치: 행 목록 (번호 · 가치 · 근거 두 줄) */
/* 같은 밝은 테마가 이어지는 AnyAI → MES Chatbot 사이 여백을 줄여 한 장(章)으로 읽히게 */
.prod--anyai { padding-bottom: clamp(80px, 8vw, 128px); }
.prod--mes { padding-top: clamp(80px, 8vw, 128px); }
.values-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.values-list__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: baseline; padding: 26px 0 28px; border-bottom: 1px solid var(--line-c); }
.values-list__n { grid-column: 1; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--fg-3); }
.values-list__t { grid-column: 2 / span 3; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.3; }
.values-list .values-list__pts { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(20px, 2.4vw, 40px); }
.values-list__pts li { position: relative; padding-left: 20px; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
.values-list__pts li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 8px; height: 1.5px; background: var(--grad); }
@media (max-width: 960px) {
  .values-list__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 12px; }
  .values-list__n { grid-column: 1; }
  .values-list__t { grid-column: 2; }
  .values-list .values-list__pts { grid-column: 2; grid-template-columns: 1fr; }
}

/* ---------- MES Chatbot : 주요 기능 + 동작 흐름 ------------------------------------ */
.mes-flow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; margin-bottom: clamp(72px, 8vw, 128px); }
.mes-flow__intro { grid-column: 1 / span 4; display: grid; gap: 22px; position: sticky; top: calc(var(--header-h) + 88px); }
.mes-flow__lead { margin-top: -8px; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-2); }

/* 주요 기능 4가지 (회사소개서의 네 카드 — 순서가 있는 흐름이 아니라 기능 목록) */
.mes-caps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-c2); }
.mes-caps li { display: grid; gap: 5px; padding: 15px 0 16px; border-bottom: 1px solid var(--line-c); }
.mes-caps__k { font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.4; color: var(--fg); }
.mes-caps__d { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.mes-caps__chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.mes-caps__chips span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--fg); background: var(--card); border: 1px solid var(--line-c2); }
.mes-caps__retry { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); background: color-mix(in oklab, var(--accent) 7%, transparent); }
.mes-caps__retry svg { width: 13px; height: 13px; }

.trace { grid-column: 6 / span 7; margin: 0; }
.trace__list { list-style: none; margin: 0; padding: 0; position: relative; --p: 1; }
.trace__list::before, .trace__list::after { content: ""; position: absolute; left: 19.25px; top: 22px; width: 1.5px; border-radius: 2px; }
.trace__list::before { bottom: 30px; background: var(--line-c2); }
.trace__list::after { height: calc((100% - 52px) * var(--p)); background: linear-gradient(180deg, var(--c-green), var(--c-teal) 50%, var(--c-blue)); }
.trace__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 22px; }
.trace__n {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-2); background: var(--bg); border: 1px solid var(--line-c2);
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.trace__step.is-on .trace__n { border-color: var(--fg); color: var(--fg); }
.trace__step--end.is-on .trace__n, html:not(.js) .trace__step--end .trace__n { background: var(--fg); color: var(--bg); }
.trace__body { display: grid; gap: 6px; padding: 8px 0 30px; margin-bottom: 10px; border-bottom: 1px solid var(--line-c); }
.trace__step:last-child .trace__body { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.trace__k { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.trace__t { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.024em; line-height: 1.35; }
.trace__q { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.35; }
.trace__d { font-size: 0.875rem; line-height: 1.6; color: var(--fg-2); }
.trace__cap { margin: 22px 0 0 62px; font-size: var(--fs-xs); line-height: 1.6; color: var(--fg-3); }
@media (max-width: 960px) {
  .mes-flow__intro { grid-column: 1 / -1; position: static; }
  .trace { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .trace__step { column-gap: 16px; grid-template-columns: 34px minmax(0, 1fr); }
  .trace__n { width: 34px; height: 34px; font-size: 0.6875rem; }
  .trace__list::before, .trace__list::after { left: 16.25px; top: 18px; }
  .trace__cap { margin-left: 50px; }
}

/* 결과물 3종(한 줄, 같은 높이) + 기술 구성 띠 */
.mes-out { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(40px, 4vw, 56px); align-items: start; }
.mes-out__item { display: grid; gap: 0; align-content: start; }
.mes-out__item .frame { margin-bottom: 24px; }
/* 세 화면의 높이를 맞춰 제목 기준선을 정렬합니다 */
.mes-out__item .frame__media { aspect-ratio: 539 / 296; overflow: hidden; }
.mes-out__item .frame__media img { object-fit: cover; }
/* 시작 화면: 빈 사이드바 대신 가운데 질문 영역이 보이게 (원본 해상도를 넘지 않는 범위에서 확대) */
.mes-out__item--a .frame__media img { object-position: 50% 50%; transform: scale(1.22); transform-origin: 60% 52%; }
.mes-out__item--b .frame__media img { object-position: 0 0; }
.mes-out__item--c .frame__media img { object-position: 50% 0; }
.mes-out__item--a { grid-column: 1 / span 4; grid-row: 1; }
.mes-out__item--b { grid-column: 5 / span 4; grid-row: 1; }
.mes-out__item--c { grid-column: 9 / span 4; grid-row: 1; }
.mes-out__title { font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.024em; line-height: 1.35; margin-bottom: 14px; }
.mes-out__tech { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 1080px) {
  .mes-out__item--a { grid-column: 1 / span 6; }
  .mes-out__item--b { grid-column: 7 / span 6; }
  .mes-out__item--c { grid-column: 1 / span 6; grid-row: 2; }
  .mes-out__tech { grid-column: 7 / span 6; grid-row: 2; }
}
@media (max-width: 640px) {
  .mes-out__item--a, .mes-out__item--b, .mes-out__item--c, .mes-out__tech { grid-column: 1 / -1; grid-row: auto; }
}

/* 기술 구성 띠 (MES · 행동 데이터 · 적재) */
.spec-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line-c); }
.spec-strip li { display: grid; align-content: start; gap: 8px; padding: 18px clamp(12px, 1.4vw, 22px) 22px 0; font-size: 0.9375rem; font-weight: 550; line-height: 1.5; letter-spacing: -0.014em; color: var(--fg); }
.spec-strip li + li { padding-left: clamp(12px, 1.4vw, 22px); border-left: 1px solid var(--line-c); }
.spec-strip__k { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; color: var(--fg-3); }
.spec-strip__num { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1; }
.spec-strip__num small { margin-left: 6px; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-2); }
.mes-out__tech { --n: 4; }
@media (max-width: 1080px) {
  .mes-out__tech { --n: 1; }
  .mes-out__tech li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-c); }
}
.bdx-strip { --n: 3; }
@media (max-width: 760px) {
  .spec-strip { grid-template-columns: 1fr; }
  .spec-strip li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-c); }
}

/* ---------- 분산 AI 학습 -------------------------------------------------------- */
.ip-card {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 20px 16px 16px;
  border: 1px solid var(--line-c2); border-radius: var(--radius-l);
  background: linear-gradient(135deg, color-mix(in oklab, var(--fg) 6%, transparent), color-mix(in oklab, var(--fg) 1%, transparent));
}
.ip-card__thumb { width: 92px; }
/* 확대 보기를 제공하지 않으므로(원본 234px) 선택 가능한 것처럼 들뜨지 않게 */
.ip-card .cert__thumb:hover { transform: none; box-shadow: 0 16px 30px -22px rgba(10, 20, 40, 0.5); }
.ip-card__body { display: grid; gap: 6px; }
.ip-card__k { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--c-green-hi); }
.ip-card__v { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.026em; line-height: 1.35; }
.ip-card__v b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; margin: 0 1px; }
.ip-card__d { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-2); }
.feature-grid.dist-points { margin-bottom: clamp(40px, 5vw, 72px); }
.dist-points .feature { padding-bottom: 28px; }

/* 정렬 모자이크: 한 줄의 화면 높이를 같게 (flex-grow = 가로세로비) */
.mosaic { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.mosaic__row { display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 20px); }
.mosaic__item { flex: var(--r, 1) 1 0; min-width: 0; margin: 0; }
@media (max-width: 760px) {
  .mosaic__row { flex-direction: column; }
  .mosaic__item { flex: none; width: 100%; }
}

/* ---------- 행동 데이터 : 정본 → 로봇 도식 ------------------------------------- */
.prod--bdx .prod__head { align-items: start; }
.metric-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-c2); }
.metric-quad .metric { padding: 18px 16px 20px 0; border-bottom: 1px solid var(--line-c); }
.metric-quad .metric + .metric { border-left: 0; padding-left: 0; }
.metric-quad .metric:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--line-c); }
.metric-quad .metric dd { font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.625rem); }
.metric-quad .metric__note { font-weight: 450; letter-spacing: -0.01em; }

.fan { margin: 0 0 clamp(64px, 7vw, 112px); }
.fan__grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) clamp(90px, 9vw, 150px) minmax(0, 1fr) clamp(96px, 9vw, 160px) minmax(0, 1.15fr);
}
.fan__src, .fan__core, .fan__target { position: relative; border-radius: 16px; padding: 18px 20px 20px; display: grid; gap: 6px; }
.fan__src { background: var(--card); border: 1px solid var(--line-c); box-shadow: 0 22px 40px -32px rgba(10, 20, 40, 0.45); }
.fan__core {
  background: var(--ink); color: var(--fog); padding: 24px 22px 24px; box-shadow: 0 34px 70px -36px rgba(10, 20, 40, 0.85);
  --fg: var(--fog); --fg-2: var(--fog-2); --fg-3: #7b8494;
}
.fan__core::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 2px; border-radius: 2px; background: var(--grad-brand-hi); }
.fan__k { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.fan__core .fan__k { color: var(--c-green-hi); }
.fan__t { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.024em; line-height: 1.35; }
.fan__big { font-size: clamp(2.5rem, 1.8rem + 2vw, 3.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 4px 0 2px; }
.fan__d { font-size: 0.8125rem; color: var(--fog-2); }
.fan__edge { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 10px; }
.fan__edge-t { font-size: 0.75rem; font-weight: 550; color: var(--fg-2); text-align: center; line-height: 1.35; }
.fan__line { position: relative; display: block; width: 100%; height: 1.5px; background: var(--fg-3); }
.fan__line::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--fg-3); border-right: 1.5px solid var(--fg-3); transform: translate(0, -50%) rotate(45deg); }
.fan__split { position: relative; align-self: stretch; }
.fan__split svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fan__split path { fill: none; stroke: var(--fg-3); stroke-width: 1.5; }
.fan.is-live .fan__split path { stroke-dasharray: 5 7; animation: fan-dash 1.6s linear infinite; }
@keyframes fan-dash { to { stroke-dashoffset: -24; } }
/* 세 갈래가 한 점(정본)에서 갈라지는 것이 보이도록 원점에 점을 둡니다 (겹친 선이 화살촉처럼 보이지 않게) */
@media (min-width: 961px) {
  .fan__split::before { content: ""; position: absolute; z-index: 1; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--fg-3); box-shadow: 0 0 0 4px var(--bg); }
}
.fan__split-t { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 10px; border-radius: 999px; background: var(--bg); font-size: 0.75rem; font-weight: 550; color: var(--fg-2); white-space: nowrap; }
.fan__targets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.fan__targets li { display: flex; align-items: center; padding: 6px 0; }
.fan__target { width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; background: var(--card); border: 1px solid var(--line-c); }
.fan__target::before { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 1.5px solid var(--fg-3); border-right: 1.5px solid var(--fg-3); transform: rotate(45deg); background: transparent; }
.fan__t2 { font-size: 0.9875rem; font-weight: 650; letter-spacing: -0.02em; }
.fan__t2 b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 5px; border-radius: 6px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--bg); background: var(--fg); vertical-align: 1px; }
.fan__target em { font-style: normal; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; }
.fan__target--custom { border-style: dashed; border-color: var(--line-c2); background: transparent; }
.fan__log { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 26px; padding: 14px 18px; border-radius: 12px; background: color-mix(in oklab, var(--fg) 4%, transparent); font-size: 0.9375rem; color: var(--fg); font-weight: 550; letter-spacing: -0.014em; }
.fan__log-k { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; color: var(--fg-2); padding: 3px 8px; border: 1px solid var(--line-c2); border-radius: 6px; }
.fan__cap { margin-top: 16px; max-width: 80ch; font-size: var(--fs-sm); line-height: 1.65; color: var(--fg-2); }
@media (max-width: 960px) {
  .fan__grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .fan__edge { flex-direction: row; justify-content: flex-start; height: 56px; padding: 0 0 0 26px; gap: 16px; }
  .fan__line { order: -1; width: 1.5px; height: 100%; }
  .fan__line::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translate(-50%, 0) rotate(135deg); }
  .fan__split { height: 56px; }
  .fan__split svg { display: none; }
  .fan__split::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1.5px; background: var(--fg-3); }
  .fan__split::after { content: ""; position: absolute; left: 26.75px; bottom: 0; width: 7px; height: 7px; border-top: 1.5px solid var(--fg-3); border-right: 1.5px solid var(--fg-3); transform: translate(-50%, 0) rotate(135deg); }
  .fan__split-t { left: 42px; top: 50%; transform: translateY(-50%); background: transparent; padding: 0; }
  .fan__targets { grid-template-rows: none; gap: 8px; }
  .fan__targets li { padding: 0; }
  .fan__target::before { display: none; }
}

.bdx-screens { margin-bottom: clamp(48px, 5vw, 80px); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px; }
.bdx-screen { display: grid; align-content: start; }
.bdx-screen .frame { margin-bottom: 24px; }
/* 두 화면의 원본 높이가 6px 다릅니다(928×525 · 928×531) → 같은 비율로 맞춰 제목 기준선을 정렬합니다.
   대시보드는 왼쪽(로고)을 살리고 오른쪽 스크롤바 쪽만 몇 px 잘립니다. */
.bdx-screen .frame__media { aspect-ratio: 928 / 531; overflow: hidden; }
.bdx-screen .frame__media img { object-fit: cover; object-position: 0 0; }
.bdx-screen__title { font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.024em; margin-bottom: 14px; }

/* ---------- 적재 시뮬레이터 ------------------------------------------------------ */
@media (min-width: 961px) { .prod--load .prod__title { grid-column: 1 / span 9; } }
.load-claim {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 36px; align-items: end;
  padding: clamp(36px, 4vw, 56px) 0; margin-bottom: clamp(48px, 5vw, 80px); border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c);
}
.load-claim__title { grid-column: 1 / span 6; font-size: clamp(2.25rem, 1.2rem + 3.5vw, 4.75rem); line-height: 1.04; letter-spacing: -0.048em; font-weight: 650; }
.load-claim__stats { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.load-claim__stats > div { display: grid; align-content: end; gap: 10px; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line-c); }
.load-claim__stats dt { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.load-claim__stats dd { margin: 0; font-size: clamp(3rem, 2rem + 3.2vw, 5.25rem); font-weight: 650; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.load-claim__stats dd small { margin-left: 6px; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3125rem); font-weight: 600; letter-spacing: -0.02em; color: var(--fg-2); }
.load-claim__stats dd.load-claim__note { font-size: 0.875rem; font-weight: 450; letter-spacing: -0.01em; line-height: 1.55; color: var(--fg-2); max-width: 20em; }
@media (max-width: 960px) {
  .load-claim__title, .load-claim__stats { grid-column: 1 / -1; }
  .load-claim__stats > div:first-child { padding-left: 0; border-left: 0; }
}
.load-mosaic { margin-bottom: clamp(48px, 5vw, 80px); }
.load-cap { margin-top: 24px; }
.load-cap__title { font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.024em; margin-bottom: 14px; }
.load-strip li { align-content: space-between; }

/* ---------- 01.2 현장 암묵지 AI ------------------------------------------------------ */
.tacit { overflow: hidden; }
.tk-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 28px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.tk-head__title { grid-column: 1 / span 6; display: grid; gap: 20px; }
.tk-head__tag { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.tk-head__tag::before { content: ""; display: inline-block; width: 28px; height: 2px; margin: 0 12px 0.3em 0; vertical-align: middle; background: var(--grad); }
.tk-head__points { grid-column: 8 / span 5; }
.tk-head__points li { font-size: 1rem; color: var(--fg-2); }

.tk-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 clamp(48px, 6vw, 80px); border-top: 1px solid var(--line-c); }
.tk-pillars > div { padding: 22px clamp(14px, 1.6vw, 24px) 24px 0; border-bottom: 1px solid var(--line-c); }
.tk-pillars > div + div { padding-left: clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--line-c); }
.tk-pillars dt { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.1; color: var(--fg); }
.tk-pillars dt small { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; margin-left: 3px; color: var(--fg-2); }
.tk-pillars dd { margin: 10px 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); }
.tk-pillars--compact dt { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }

.tk-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.tk-feature { display: grid; align-content: start; gap: 14px; margin: 0; }
.tk-feature .frame { margin-bottom: 6px; }
.tk-feature__title { font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.024em; }
.tk-feature .ticks li { font-size: 0.9375rem; }

.tk-strip { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 8px 0; border-radius: var(--radius-m); background: var(--card); border: 1px solid var(--line-c); font-size: 0.9375rem; font-weight: 600; color: var(--fg); letter-spacing: -0.015em; }
.tk-strip li { display: inline-flex; align-items: center; }
.tk-strip li + li::before { content: ""; width: 1px; height: 14px; margin: 0 20px; background: var(--line-c2); }

.tk-demo { margin-top: clamp(80px, 10vw, 140px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-c); }
.tk-demo__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 24px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.tk-demo__title { grid-column: 1 / span 5; display: grid; gap: 16px; }
.tk-demo__head > .ticks { grid-column: 7 / span 6; }
.tk-wide { margin: 0 0 clamp(28px, 3vw, 40px); }
.tk-wide .frame { max-width: 1040px; }
.tk-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tk-screens .frame__media { aspect-ratio: 16 / 10; }
.tk-screens .frame__media img { object-fit: cover; object-position: left top; }
.tk-demo > .source-note { margin-top: 24px; }

@media (max-width: 1080px) {
  .tk-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-pillars > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .tk-screens { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .tk-head__title, .tk-head__points, .tk-demo__title, .tk-demo__head > .ticks { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tk-duo, .tk-screens { grid-template-columns: 1fr; }
  .tk-strip { display: grid; gap: 10px; }
  .tk-strip li + li::before { display: none; }
}
@media (max-width: 480px) {
  .tk-pillars { grid-template-columns: 1fr; }
  .tk-pillars > div + div { padding-left: 0; border-left: 0; }
}

/* ---------- 05.1 양자 컴퓨팅 ---------------------------------------------------------- */
.quantum { overflow: hidden; }
.quantum__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: stretch; margin-bottom: clamp(56px, 6vw, 96px); }
.quantum__lead { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: end; padding-bottom: 4px; }
.quantum__visual {
  grid-column: 7 / span 6; position: relative; min-height: clamp(340px, 32vw, 470px); overflow: hidden; isolation: isolate;
  border-radius: var(--radius-l); border: 1px solid var(--line-c);
  background: radial-gradient(70% 90% at 50% 45%, rgba(79, 196, 173, 0.07), transparent 70%), var(--night-2);
}
.quantum__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.quantum__visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, rgba(9, 13, 21, 0), var(--night-2) 78%); pointer-events: none; }
.quantum__visual-cap { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--fog-2); }
@media (max-width: 960px) {
  .quantum__lead, .quantum__visual { grid-column: 1 / -1; }
  .quantum__visual { min-height: 0; aspect-ratio: 16 / 10; }
}
.quantum__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.combo {
  grid-column: 1 / span 5; display: grid; gap: 18px; padding: clamp(22px, 2.4vw, 34px); border-radius: var(--radius-l);
  border: 1px solid var(--line-c2); background: var(--night-3);
}
.combo__label { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--c-green-hi); }
.combo__control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.combo__lbl { font-size: 0.875rem; color: var(--fg-2); white-space: nowrap; }
.combo__n { min-width: 3.4em; text-align: right; font-family: var(--font-mono); font-size: 0.875rem; color: var(--fg); }
.combo__range { --fill: 28.6%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.combo__range:focus-visible { outline-offset: 4px; }
.combo__range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-green-hi) 0, var(--c-blue-hi) var(--fill), var(--line-c2) var(--fill)); }
.combo__range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--fog); border: 0; box-shadow: 0 0 0 5px rgba(160, 217, 112, 0.16); transition: box-shadow 0.25s; }
.combo__range:active::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(160, 217, 112, 0.22); }
.combo__range::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-c2); }
.combo__range::-moz-range-progress { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-green-hi), var(--c-blue-hi)); }
.combo__range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--fog); box-shadow: 0 0 0 5px rgba(160, 217, 112, 0.16); }
.combo__result { display: flex; flex-direction: column; justify-content: flex-end; min-height: 2.5em; font-size: clamp(1.5rem, 1.15rem + 0.9vw, 2rem); line-height: 1.2; }
.combo__num { font-size: 1em; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; word-break: normal; overflow-wrap: anywhere; color: var(--fg); }
.combo__unit { margin-left: 8px; font-size: 0.5em; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.combo__read { font-size: 0.9375rem; color: var(--fg-2); }
.combo__read sup { font-size: 0.7em; line-height: 0; }
.combo__note { padding-top: 16px; border-top: 1px solid var(--line-c); font-size: 0.8125rem; line-height: 1.6; color: var(--fg-3); }
.quantum__work { grid-column: 7 / span 6; display: grid; gap: 14px; }
.quantum__intro { font-size: var(--fs-sm); color: var(--fg-2); margin-bottom: 6px; }
.qwork { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-c2); }
.qwork li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); column-gap: 20px; row-gap: 4px; padding: 18px 0 20px; border-bottom: 1px solid var(--line-c); }
.qwork__k { grid-row: 1 / span 2; padding-top: 5px; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; color: var(--fg-3); }
.qwork__t { justify-self: start; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.024em; line-height: 1.4; color: var(--fg); }
a.qwork__t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
a.qwork__t:hover { background-size: 100% 1px; }
/* 같은 페이지 위쪽 섹션으로 이동 — 외부 링크(↗)로 오해하지 않게 위쪽 화살표 */
a.qwork__t::after { content: " ↑"; font-size: 0.8em; color: var(--fg-3); }
.qwork__d { font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.quantum__statement { margin: clamp(80px, 9vw, 150px) 0 0; max-width: 15em; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.04em; font-weight: 650; text-wrap: balance; }
@media (max-width: 960px) {
  .combo, .quantum__work { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .combo__control { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .combo__lbl { grid-column: 1 / -1; }
  .qwork li { grid-template-columns: 1fr; }
  .qwork__k { grid-row: auto; padding-top: 0; }
}

/* ---------- 마무리 CTA ------------------------------------------------------------ */
/* 어두운 양자 섹션 → CTA → 푸터가 이어지므로, 잘린 광원이 떠 있는 판처럼 보이지 않게
   가장자리 전에 0 으로 사라지는 광원으로 바꾸고 머리선을 긋습니다 */
.quantum + .cta-band { border-top: 1px solid var(--line-c); }
.quantum + .cta-band .cta-band__glow {
  inset: 0; width: auto; height: auto; max-height: none; transform: none;
  background: radial-gradient(60% 80% at 50% 50%, rgba(79, 196, 173, 0.2), rgba(116, 151, 255, 0.1) 38%, transparent 62%);
}

/* ---------- 모션 감소 ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .viewer .tabs__panel:not([hidden]) .frame__media img { animation: none; }
}