/* AX blocks. 장(서비스) · 그룹 · 가로 목록 순서로 구성하며 콘텐츠는 ACF에서 편집.
   형태는 사이트 공통 기준을 따름: 각진 모서리, 4px 구분선, 분할 버튼, 이어 붙인 사각 이동 버튼. */
:root { word-break: keep-all; }
.blocks-item[data-slug^="ax-"] { overflow:visible; }

/* 1. 기준 값. 색은 테마 변수를 사용하고 배경에 따라 --ink 이하 값만 교체. */
.ax-block {
 --blue:var(--primary-color,#2C4DFF); --blue-soft:#EEF1FF; --yellow:#FFD23F;
 --surface:#fff; --ink:var(--gray-black-color,#111); --body:var(--gray-dark-color,#333); --muted:var(--gray-color,#666); --line:var(--gray-white-color,#ddd); --rule:var(--gray-dark-color,#333);
 --tile:#fff; --tile-line:var(--gray-white-color,#ddd); --tag:var(--white-gray-color,#f6f6f6); --numeral:var(--gray-white-color,#ddd); --inverse:#fff; --accent:var(--blue);
 --shadow:4px 4px 6px rgba(0,0,0,.1); --ax-gap:20px; --ax-space:clamp(72px,8vw,120px);
 font-family:var(--font-ko); font-size:16px; line-height:1.76; letter-spacing:normal; font-style:normal; color:var(--body); background:var(--surface); overflow-wrap:break-word; overflow-x:clip;
 scroll-margin-top:calc(var(--header-height,96px) + 16px);
}
@supports not (overflow-x:clip) { .ax-block { overflow-x:hidden; } }
.ax-block *, .ax-block *::before, .ax-block *::after { box-sizing:border-box; letter-spacing:normal; font-style:normal; }
.ax-block :where(h1,h2,h3,h4,p,ul,ol,dl,dd) { margin:0; padding:0; }
.ax-block :where(h1,h2,h3,h4) { color:var(--ink); line-height:1.5; text-wrap:balance; }
.ax-block :where(b,strong) { font-weight:700; }
.ax-block :where(a) { text-decoration:none; }
.ax-block :where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--primary-light-color,#637BFF); outline-offset:4px; }
.ax-block button { font-family:inherit; letter-spacing:normal; }
/* 단계 전환 후 읽기 위치로만 쓰는 제목·안내에는 초점 테두리를 표시하지 않음. */
.ax-block [tabindex="-1"]:focus { outline:none; }
.ax-block [hidden] { display:none !important; }
.ax-block .ax-sr-only,.ax-honeypot { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ax-wrap { width:100%; }
.ax-wrap > * { min-width:0; }
/* 안쪽 너비: 전체 너비가 필요한 블록(상단 커버, 서비스 소개, WHY SADARI 사진 띠, 대표 강사 띠, 문의 고정 띠)만 .l_wrapper를 쓰고, 나머지 블록은 사이트 공통 .l_container로 넓은 화면의 상한(1440px 이상 1680px, 1480px 이상 1800px)을 둠.
   양옆 여백은 .l_wrapper와 같게 맞춤. .ax-block 안은 border-box라 content-box로 되돌려 상한이 내용 너비 기준이 되게 함. 1440px 미만은 공통 상한 960px이 AX 배치에 좁아 제한하지 않음. */
.ax-block .l_container { box-sizing:content-box; width:auto; padding:0 var(--gap-2x); }
@media (max-width:1439px) { .ax-block .l_container { max-width:none; } }
@media (max-width:960px) { .ax-block .l_container { padding:0 var(--gap); } }
@media (max-width:640px) { .ax-block .l_container { padding:0 20px; } }
/* AX 페이지의 공통 블록(고객 로고 띠 머리글, FAQ)은 AI VIDEO 페이지와 템플릿을 같이 쓰므로 구조는 두고, 이 페이지에서만 .l_container와 같은 상한을 줌. */
@media (min-width:1440px) { .page_ax .bl_factory-clients > .l_wrapper,.page_ax .bl_factory-faq > .l_wrapper { max-width:1680px; } }
@media (min-width:1480px) { .page_ax .bl_factory-clients > .l_wrapper,.page_ax .bl_factory-faq > .l_wrapper { max-width:1800px; } }

/* 2. 섹션 배경 */
.ax-sec { padding:clamp(72px,9vw,128px) 0; border-top:1px solid var(--line); }
.ax-sec.ax-gray { --surface:var(--white-gray-color,#f6f6f6); --tile-line:transparent; --tag:#fff; --numeral:#ccc; border-top:0; }
.ax-sec.ax-dark { --surface:var(--gray-black-color,#111); --ink:#fff; --body:var(--gray-lighten-color,#bbb); --muted:var(--gray-light-color,#999); --line:var(--gray-dark-color,#333); --rule:#fff; --tile:var(--gray-darken-color,#222); --tile-line:transparent; --tag:var(--gray-darken-color,#222); --numeral:#555; --inverse:#111; --accent:var(--primary-light-color,#637BFF); border-top-color:var(--gray-darken-color,#222); }

/* 3. 제목 */
.ax-head { margin-bottom:56px; }
.ax-label { display:block; margin-bottom:14px; font-size:14px; font-weight:700; color:var(--accent); }
/* 자가진단 눈썹: 파란 말풍선(왼쪽 아래 꼬리). */
.ax-diagnosis .ax-label { position:relative; display:inline-block; margin-bottom:22px; padding:7px 14px; border-radius:16px; background:var(--blue); color:#fff; line-height:1.4; }
.ax-diagnosis .ax-label::after { content:''; position:absolute; left:16px; bottom:-7px; width:12px; height:8px; background:var(--blue); clip-path:polygon(0 0,100% 0,25% 100%); }
/* 말풍선 등장: 화면에 들어오면(is-on) 꼭지 끝(왼쪽 19px, 아래 7px 바깥)을 축으로 작게 시작해 좌우로 두어 번 흔들린 뒤 멈춤. */
.ax-diagnosis .ax-cl-copy.is-ready .ax-label { opacity:0; transform-origin:19px calc(100% + 7px); }
.ax-diagnosis .ax-cl-copy.is-on .ax-label { opacity:1; animation:ax-bubble-in 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ax-bubble-in { 0% { opacity:0; transform:scale(.5) rotate(-12deg); } 40% { opacity:1; transform:scale(1.05) rotate(6deg); } 62% { transform:scale(.98) rotate(-4deg); } 80% { transform:rotate(2deg); } 92% { transform:rotate(-1deg); } 100% { transform:none; } }
@media (prefers-reduced-motion: reduce) { .ax-diagnosis .ax-cl-copy.is-ready .ax-label { opacity:1; } .ax-diagnosis .ax-cl-copy.is-on .ax-label { animation:none; } }
/* 영문만 있는 분류 문구는 사이트의 영문 라벨 표기를 따름. */
.ax-label.font_en { font-family:var(--font-en); letter-spacing:.14em; text-transform:uppercase; }
.ax-title { color:var(--ink); font-weight:400; white-space:normal; line-height:var(--line-height-narrow); margin-bottom:0; }
.ax-title b { font-weight:700; }
.ax-desc { display:block; margin-top:20px; max-width:640px; color:var(--muted); line-height:1.8; }
.ax-chapter-head,.ax-split-head { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); column-gap:var(--gap-2x); align-items:end; }
.ax-chapter-head > :is(.ax-chapter-mark,.ax-label),.ax-split-head > .ax-label { grid-column:1 / -1; }
.ax-chapter-head > .ax-desc,.ax-split-head > .ax-desc { margin-top:0; }
/* 장 번호는 문의 페이지의 "01." 표기와 같은 방식. */
.ax-chapter-mark { display:flex; align-items:baseline; gap:16px; margin-bottom:16px; }
.ax-chapter-no { font-family:var(--font-en); font-size:64px; font-weight:400; line-height:1.1; color:var(--numeral); font-variant-numeric:tabular-nums; }
.ax-chapter-no::after { content:'.'; }
.ax-chapter-name { font-size:23px; font-weight:600; color:var(--ink); }

/* 4. 그룹. 소제목 위 4px 선은 사이트 공통 구분선(common_line)과 같이 화면 오른쪽 끝까지 이어짐. */
.ax-group { margin-top:var(--ax-space); }
.ax-group-first { margin-top:0; }
.ax-group-title { position:relative; padding:30px 0 var(--gap,40px); font-size:2rem; font-weight:700; line-height:1.5; } /* 작은 묶음 제목(산출물·업무 분해 예시 등): 20px 굵게 */
.ax-group-title::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; margin-right:-50vw; background:var(--rule); }
/* 사진 목록 앞의 묶음 제목은 더 크게. */
.ax-group-title-lg { padding-top:32px; font-size:2.6rem; font-weight:700; line-height:1.4; text-wrap:balance; } /* 큰 묶음 제목(교육 현장): 26px */
/* 묶음 제목 줄: 제목 바로 오른쪽에 보조 문구. 4px 선은 줄 전체에 그림. */
.ax-group-head { position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 28px; padding:32px 0 var(--gap,40px); }
.ax-group-head::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; margin-right:-50vw; background:var(--rule); }
.ax-group-head > .ax-group-title { padding:0; }
.ax-group-head > .ax-group-title::before { display:none; }
.ax-group-head > .ax-etc { flex:1 1 320px; max-width:720px; margin:0; text-wrap:balance; }
.ax-note-s { margin-top:20px; font-size:14px; color:var(--muted); }

/* 5. 버튼. 사이트 공통 분할 버튼(.button)과 같은 치수이며 hover 변화 없음. */
.ax-btn { display:inline-flex; align-items:center; flex-shrink:0; height:48px; padding:0 0 0 1.4em; border:1px solid currentColor; border-radius:0; font-size:16px; font-weight:500; line-height:1; white-space:nowrap; box-shadow:var(--shadow); cursor:pointer; }
.ax-btn:not(:has(svg)) { padding-right:1.4em; }
.ax-btn svg { box-sizing:content-box; flex-shrink:0; width:18px; height:100%; margin-left:1.4em; padding:0 14px; border-left:1px solid currentColor; }
.ax-btn.ax-blue { background:var(--blue); border-color:var(--blue); color:#fff; }
.ax-btn.ax-blue svg { border-left-color:rgba(255,255,255,.4); }
.ax-btn.ax-black { background:#111; border-color:#111; color:#fff; }
.ax-btn.ax-black svg { border-left-color:rgba(255,255,255,.4); }
.ax-btn.ax-white { background:#fff; border-color:#fff; color:#111; }
.ax-btn.ax-white svg { border-left-color:rgba(0,0,0,.2); }
.ax-btn.ax-line-w { background:transparent; color:#fff; }
.ax-btn.ax-line-k { background:#fff; color:#111; }
.ax-btn.ax-flat { box-shadow:none; } /* 그림자 없는 버튼(자가진단 `더 알아보기`) */
.ax-fnav .ax-btn.ax-line-k { border-color:#ddd; box-shadow:none; } /* 문의 폼의 이전 버튼은 조용하게: 옅은 테두리, 그림자 없음 */
.ax-btn:disabled { cursor:wait; background:#c9c9c9; border-color:#c9c9c9; color:#fff; } /* 전송 중 비활성: 밝은 회색 */
.ax-linkbtn { padding:0; background:none; border:0; color:var(--muted); text-decoration:underline; text-underline-offset:3px; font-size:14px; cursor:pointer; }

/* 6. 가로 목록(Swiper). 화면 오른쪽 끝까지 이어짐. */
.ax-rail { width:100%; overflow:visible; }
.ax-rail:not(.swiper-initialized) { overflow-x:auto; }
.ax-rail:not(.swiper-initialized) .swiper-slide { margin-right:var(--ax-gap); }
.ax-rail .swiper-slide { width:var(--ax-slide,86%); height:auto; }
/* 이미지 자체의 끌기 동작이 목록 넘김을 가로채지 않도록 처리. */
.ax-rail img { pointer-events:none; -webkit-user-drag:none; user-select:none; }
.ax-rail--lg { --ax-slide:min(44%,640px); }
.ax-rail--md { --ax-slide:min(36%,480px); }
.ax-rail--tiles { --ax-slide:calc((100% - (var(--ax-cols,3) - 1) * var(--ax-gap)) / var(--ax-cols,3)); }
.ax-cols-3 { --ax-cols:3; }
.ax-cols-4 { --ax-cols:4; }
.ax-cols-5 { --ax-cols:5; }
/* 이동 버튼과 위치 표시는 common_nav · common_controls 스타일을 그대로 사용. */
.ax-rail:not(.swiper-initialized) + .ax-rail-nav,.ax-rail-nav:has(.swiper-button-lock) { display:none; }
.ax-rail-nav { display:flex; flex-wrap:wrap; align-items:center; }
.ax-rail-nav > .common_nav-dots { flex:0 0 auto; width:auto; }
/* 이동 줄의 위치 점 바로 오른쪽에 붙는 보조 문구(예: 보안 안내). */
.ax-rail-note { flex:0 1 auto; max-width:60%; margin:0; font-size:14px; line-height:48px; color:var(--muted); }
.ax-rail-nav .common_controls button { cursor:pointer; }
.ax-rail-nav .common_controls button:disabled { cursor:default; }
/* 검정 블록의 레일 이동 버튼: 어두운 버튼(#222, 테두리 #333)에 연한 파란 화살표(공통 화살표 그림 대신 선 svg). 비활성은 화살표만 흐리게. */
.ax-dark .ax-rail-nav:not(.ax-band-white *) .common_controls.type_light button { background-color:var(--gray-darken-color,#222); border-color:var(--gray-dark-color,#333); box-shadow:4px 4px 6px rgba(0,0,0,.35); }
.ax-dark .ax-rail-nav:not(.ax-band-white *) .common_controls.type_light button.swiper-button-disabled::after { opacity:.3; }
/* 어두운 블록의 이동 화살표는 흰색(파랑 #637BFF는 어두운 단추 위에서 묻혀 보임). */
.ax-dark .ax-rail-nav:not(.ax-band-white *) .common_controls.type_light button::after { filter:none; background-size:8px 10px; background-position:center; background-repeat:no-repeat; }
.ax-dark .ax-rail-nav:not(.ax-band-white *) .common_controls.type_light button[data-direction="prev"]::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M6 1 2 5l4 4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ax-dark .ax-rail-nav:not(.ax-band-white *) .common_controls.type_light button[data-direction="next"]::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ax-dark .ax-rail-nav:not(.ax-band-white *) .swiper-pagination-bullet::before { background-color:var(--primary-light-color,#637BFF); }
.ax-dark .ax-rail-nav:not(.ax-band-white *) .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { opacity:.4; }

/* 7. 타일: 글 중심 항목 */
.ax-tile { display:flex; flex-direction:column; min-width:0; padding:32px; border:1px solid var(--tile-line); background:var(--tile); }
.ax-tile :is(h3,h4) { font-size:18px; font-weight:700; }
.ax-tile p { margin-top:10px; color:var(--muted); }
.ax-more { display:inline-flex; align-items:center; align-self:flex-start; gap:6px; margin-top:auto; padding-top:28px; font-size:16px; font-weight:500; color:var(--ink); }
.ax-etc { margin-top:24px; font-size:15px; color:var(--muted); }
.ax-etc b { color:var(--ink); margin-right:8px; }
/* 단계 표기는 AI VIDEO 제작 과정의 "STEP 1"과 같은 영문 라벨 방식. */
.ax-step-no { margin-bottom:14px; font-family:var(--font-en); font-size:13px; font-weight:500; line-height:1.4; letter-spacing:.14em; color:var(--muted); font-variant-numeric:tabular-nums; }
.ax-step-no::before { content:'STEP '; }

/* 8. 샷: 이미지 중심 항목. 형태는 ABOUT의 슬라이드 항목(bl_slide-item)을 따름. */
.ax-shot { display:flex; flex-direction:column; min-width:0; }
.ax-shot-img { display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; background:var(--tag); }
.ax-doc .ax-shot-img { aspect-ratio:4 / 3; }
.ax-shot-cap { display:block; max-width:600px; padding:20px 4px 0; }
.ax-shot-cap h4,.ax-case-title { display:block; font-size:18px; font-weight:500; line-height:1.76; color:var(--ink); text-wrap:balance; }
.ax-shot-cap p,.ax-case .ax-sm { display:block; margin-top:2px; color:var(--muted); text-wrap:balance; } /* 요약 문장은 줄 길이를 고르게(마지막 줄에 한 어절만 남지 않게) */
.ax-org { display:flex; align-items:center; min-height:34px; margin-bottom:10px; font-size:14px; font-weight:700; color:var(--accent); }
.ax-org-logo { display:block; width:auto; max-width:180px; height:30px; object-fit:contain; object-position:left center; }
.ax-block:not(.ax-dark) .ax-org-logo { mix-blend-mode:multiply; }
.ax-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ax-tags span { padding:0 12px; border-radius:2px; background:var(--tag); font-size:14px; line-height:26px; color:var(--body); }
.ax-tags span::before { content:'# '; color:var(--muted); }
.ax-case { width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.ax-case-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:14px; }
/* 사례 분류 표시는 꼬리표 모양: 납품 사례는 파랑, 자체 개발은 검정 바탕. */
.ax-badge { display:inline-block; padding:4px 10px; background:#111; font-size:14px; font-weight:700; line-height:22px; color:#fff; }
.ax-badge.ax-dl { background:var(--blue); }
.ax-dark .ax-badge.ax-own { background:#333; }
.ax-case-meta .ax-cl { display:inline-flex; align-items:center; gap:12px; color:var(--muted); }
.ax-case-meta .ax-cl::before { content:''; width:1px; height:12px; background:var(--line); }
/* 눌러서 여는 항목의 제목은 사이트의 다른 목록과 같이 강조색 사용. */
.ax-case-title { margin-top:10px; font-size:18px; font-weight:700; line-height:1.4; color:var(--accent); } /* 사례 제목은 산출물 제목과 같은 18px */
.ax-case-more { display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding-bottom:2px; border-bottom:1px solid currentColor; font-size:15px; font-weight:500; line-height:1.4; color:var(--ink); } /* 카드가 눌리는 요소임을 알리는 안내 문구(밑줄 + 화살표) */
.ax-development .ax-case-more { color:#fff; }
/* 사례 카드 오른쪽 끝 ↗ 화살표: 설명 칸을 카드 너비까지 넓히고(글 너비는 600px 유지) 오른쪽 위에 둠. 분류 표시 줄과 세로 가운데를 맞춤.
   선은 1.5px 고정(non-scaling-stroke)이라 크기를 키워도 얇게 유지됨. 카드에 마우스를 올리면 오른쪽 위로 3px 움직임(사용자 요청). */
.ax-case .ax-shot-cap { position:relative; max-width:none; padding-right:56px; }
.ax-case .ax-shot-cap > :not(.ax-case-arrow) { max-width:600px; }
.ax-case-arrow { position:absolute; right:-4px; top:15px; display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; color:var(--ink); transition:transform .25s ease; }
.ax-case-arrow svg { width:40px; height:40px; }
.ax-case:hover .ax-case-arrow { transform:translate(3px,-3px); }
.ax-development .ax-case-arrow { color:#fff; }
@media (prefers-reduced-motion: reduce) { .ax-case-arrow { transition:none; } .ax-case:hover .ax-case-arrow { transform:none; } }
.ax-open { display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:17px; font-weight:700; color:var(--ink); }
.ax-open svg { width:20px; height:20px; }
/* 분류 버튼은 AI VIDEO 포트폴리오의 분류 버튼 형태. */
.ax-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.ax-filters button { min-height:38px; padding:0 14px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--body); font-size:14px; font-weight:700; cursor:pointer; } /* 분류 버튼은 작게(높이 38px, 테두리 1px) */
.ax-filters button.ax-on { border-color:var(--accent); color:var(--accent); }
.ax-dark .ax-filters button { border-color:#444; }
.ax-dark .ax-filters button.ax-on { border-color:#fff; color:#fff; }

/* 9. 가격 및 다음 장 연결 */
/* 가격 띠: 파란 바탕 + 흰 디더링 점무늬 + 커버와 같은 큰 원 선. 금액은 슬롯처럼 굴러 내려옴. */
.ax-price-bar { position:relative; overflow:hidden; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:28px; margin-top:var(--ax-space); padding:64px 56px; background:var(--blue); color:#fff; }
.ax-price-bar > :not(.ax-dither):not(.ax-price-rings) { position:relative; z-index:1; }
.ax-price-rings { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgba(255,255,255,.85); stroke-width:1; pointer-events:none; }
/* 두 원은 포인터 움직임에 서로 반대 방향으로 밀림(스크립트가 --mx·--my 설정). */
.ax-price-ring { transform:translate(var(--mx,0px),var(--my,0px)); }
.ax-price-bar .ax-p1 { font-size:28px; font-weight:700; color:#fff; }
.ax-price-bar .ax-p2 { margin-top:6px; font-size:52px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.ax-price-bar .ax-p2 .ax-won { margin-left:.12em; font-size:.6em; vertical-align:.12em; } /* 원 글자는 숫자보다 조금 작게. 글자 아래쪽이 숫자 밑선과 맞도록 살짝 올림 */
.ax-price-bar .ax-p2 small { margin-left:10px; font-size:20px; font-weight:400; color:rgba(255,255,255,.8); }
.ax-price-bar .ax-p3 { margin-top:10px; font-size:16px; color:rgba(255,255,255,.8); }
/* 흰 변형: 흰 바탕에 파란 글자, 회색 점무늬, 파란 원 선, 파란 버튼. */
.ax-price-bar.ax-price-white { background:#fff; color:var(--blue); }
.ax-price-bar.ax-price-white .ax-p1 { color:var(--blue); }
.ax-price-bar.ax-price-white .ax-p2 small,.ax-price-bar.ax-price-white .ax-p3 { color:rgba(44,77,255,.75); }
.ax-price-bar.ax-price-white .ax-price-rings { stroke:rgba(44,77,255,.45); }
/* 슬롯: 숫자마다 0~9를 두 바퀴 돈 띠를 1em 높이의 창으로 보여 주고, 화면에 들어오면 띠를 끌어올려 목표 숫자에 멈춤. */
.ax-amount { display:inline-flex; align-items:baseline; }
.ax-slot { display:inline-block; height:1em; overflow:hidden; line-height:1; vertical-align:-.08em; }
.ax-slot-strip { display:block; transform:translateY(0); transition:transform 1.5s cubic-bezier(.18,.82,.26,1) calc(var(--i,0) * 90ms); }
.ax-slot-strip span { display:block; height:1em; line-height:1; }
[data-ax-slots].is-on .ax-slot-strip { transform:translateY(-20em); }
[data-ax-slots]:not(.is-ready) .ax-slot-strip { transform:translateY(-20em); transition:none; }
.ax-sec:has(> .ax-bridge, > .ax-band-white > .ax-bridge) { padding-bottom:0; }
.ax-bridge { padding:72px 20px 0; text-align:center; font-size:clamp(22px,2vw,28px); font-weight:500; line-height:1.5; color:var(--ink); text-wrap:balance; }
/* 다리 문구 아래 세로선은 다음 장의 시작까지 길게 끌어 내리고, 스크롤해 내려올수록 검정 선이 위에서 아래로 차오름(--ax-fill 0~1). */
.ax-bridge-line { display:block; position:relative; width:1px; height:160px; margin:32px auto 0; background:#bdbdbd; }
.ax-bridge-line > i { position:absolute; left:0; top:0; width:100%; height:100%; background:var(--blue); transform:scaleY(var(--ax-fill,0)); transform-origin:top; }
/* 검정 블록 끝의 다리 문구: 흰 글자, 바탕 선은 어두운 회색. 블록 끝 파란 띠 뒤에 오면 띠를 가격 띠에서 끝냄. */
.ax-dark .ax-bridge { color:#fff; }
.ax-dark .ax-bridge-line { background:#444; }
/* 파란 띠 안의 다리 문구(개발 장): 바탕 선은 반투명 흰색, 차오르는 선은 흰색. */
.ax-band-blue .ax-bridge-line { background:rgba(255,255,255,.35); }
.ax-band-blue .ax-bridge-line > i { background:#fff; }

/* 10. 표 */
.ax-panel { border:1px solid var(--tile-line); background:var(--tile); }
.ax-tbl-wrap { overflow:visible; } /* 안쪽 스크롤 없음(사다리 칸의 머리글이 위로 솟아 있어 overflow:auto면 세로 스크롤바가 생겼음). 좁은 화면은 칸을 비율로 잡아 표가 너비 안에 들어감. */
.ax-vs,.ax-tbl { width:100%; border-collapse:collapse; }
.ax-tbl :is(th,td) { padding:20px 28px; border-top:1px solid var(--line); text-align:left; vertical-align:top; }
.ax-tbl thead th { border-top:0; font-size:14px; font-weight:500; color:var(--muted); }
/* 비교표: 항목 이름은 바탕 위에, 일반 칸은 흰 상자, 사다리 칸은 파란 머리글·파란 테두리·옅은 파란 바탕의 상자. 사다리 칸 앞에만 ✓ 표시. 글자 크기는 항목 이름과 칸 모두 17px. */
.ax-vs { border-collapse:separate; border-spacing:0; }
.ax-vs :is(th,td) { padding:26px 28px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.ax-vs thead th { padding-top:30px; padding-bottom:30px; font-size:18px; font-weight:700; color:var(--ink); }
.ax-vs thead th:first-child { border-bottom-color:transparent; }
.ax-vs tbody th { width:18%; padding-left:0; font-size:17px; font-weight:700; color:var(--ink); }
.ax-vs td { width:41%; }
.ax-vs .ax-o { background:#fff; color:var(--muted); }
.ax-vs thead .ax-o { color:var(--ink); }
.ax-vs .ax-n { background:var(--blue-soft); border-left:1px solid var(--blue); border-right:1px solid var(--blue); color:var(--ink); }
.ax-vs thead .ax-n { position:relative; background:var(--blue); border-color:var(--blue); color:#fff; }
.ax-vs thead .ax-n .ax-vs-mark { position:absolute; right:28px; top:50%; width:auto; height:30px; translate:0 -50%; }
.ax-vs tbody tr:last-child .ax-n { border-bottom-color:var(--blue); }
.ax-vs tbody td { font-size:17px; font-weight:500; }
.ax-vs tbody td.ax-n { font-weight:700; }
.ax-vs tbody td.ax-n { position:relative; padding-left:56px; }
.ax-vs tbody td.ax-n::before { content:''; position:absolute; left:28px; top:31px; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%232C4DFF' stroke-width='2'%3E%3Cpath d='m3.5 9.5 3.5 3.5L14.5 5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.ax-tbl { min-width:680px; font-size:15px; }
.ax-tbl :is(th,td) { padding-top:16px; padding-bottom:16px; vertical-align:middle; }
.ax-tbl tbody th { font-weight:500; color:var(--ink); }
/* 컨설팅 진행 단계: 칸 다섯 개가 파란 화살표로 이어짐. 화면에 들어오면(is-on) 칸·번호·화살표가 순서대로 나타남. 마지막 칸은 파란 바탕(결과). */
.ax-cflow { position:relative; display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:36px; list-style:none; margin:0; padding:0; }
.ax-cflow-step { position:relative; padding:30px 24px 34px; border:1px solid var(--tile-line); background:var(--tile); }
.ax-cflow-step:not(:last-child)::after { content:''; position:absolute; right:-24px; top:50%; width:11px; height:11px; border-top:2px solid var(--blue); border-right:2px solid var(--blue); transform:translateY(-50%) rotate(45deg); transition:opacity .3s ease calc(var(--i,0) * .44s + .4s); }
.ax-cflow-no { display:block; font-family:var(--font-en); font-size:40px; font-weight:400; line-height:1; color:var(--numeral); font-variant-numeric:tabular-nums; transition:color .3s ease calc(var(--i,0) * .44s + .3s); }
.ax-cflow-step h4 { margin-top:18px; font-size:20px; font-weight:700; color:var(--ink); }
.ax-cflow-step p { margin-top:10px; font-size:15px; line-height:1.7; color:var(--muted); text-wrap:balance; }
.ax-cflow-step:last-child { border-color:var(--blue); background:var(--blue); }
.ax-cflow-step:last-child :is(h4,p,.ax-cflow-no) { color:#fff; }
.ax-cflow-step:last-child p { color:rgba(255,255,255,.8); }
.ax-cflow.is-on .ax-cflow-no { color:var(--blue); }
.ax-cflow.is-ready .ax-cflow-step::after { opacity:0; }
.ax-cflow.is-on .ax-cflow-step::after { opacity:1; }
.ax-cflow.is-on .ax-cflow-step:last-child .ax-cflow-no { color:#fff; }
.ax-cflow.is-ready .ax-cflow-step { opacity:0; translate:0 16px; }
.ax-cflow.is-on .ax-cflow-step { opacity:1; translate:0 0; transition:opacity .5s ease calc(var(--i,0) * .44s + .1s),translate .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * .44s + .1s); }
@media (prefers-reduced-motion: reduce) { .ax-cflow-step,.ax-cflow-step::after,.ax-cflow-no { transition:none !important; } }
/* 업무 분해 릴: 짧은 영상처럼 장면이 이어지는 검정 화면(2:1)과 아래 재생 막대.
   표 형태: 왼쪽 단계 이름 · 가운데 시간 막대(길이 100% = 현재 총 소요, 조각은 앞 조각 끝에서 이어짐) · 오른쪽 처방. 맨 아래 합계 줄.
   장면 클래스는 스크립트가 붙임: is-0(합계 막대만) → from-1(줄이 펼쳐지며 조각 등장) → from-2(조각이 판정 색, 꼬리표) → from-3(처방) → is-4(조각이 적용 후 길이로 줄고 합계가 파랗게 짧아짐, 보고서 카드). */
.ax-reel { border:1px solid var(--tile-line); background:#111; color:#fff; }
.ax-reel-screen { position:relative; display:flex; flex-direction:column; width:100%; aspect-ratio:16 / 7; overflow:hidden; padding:32px 44px 76px; } /* 아래 여백은 문단열 얼굴·말풍선 자리 */
.ax-reel-screen > :not(.ax-dither) { position:relative; z-index:1; }
.ax-reel-screen > .ax-reel-caption,.ax-reel-screen > .ax-reel-result,.ax-reel-screen > .ax-reel-talk { position:absolute; }
/* 첫 장면의 큰 질문: 무대 위쪽 가운데. 다음 장면부터 사라짐. */
.ax-reel-screen > .ax-reel-ask { position:absolute; left:44px; right:44px; top:24%; margin:0; font-size:clamp(24px,2.8vw,38px); font-weight:700; line-height:1.4; text-align:center; color:#fff; text-wrap:balance; opacity:0; translate:0 10px; transition:opacity .5s ease,translate .5s ease; pointer-events:none; }
.ax-reel-screen.is-0 > .ax-reel-ask:not(.ax-reel-ask-after) { opacity:1; translate:0 0; transition-delay:.3s; }
/* 결과 장면 첫머리: "사다리 컨설팅을 받는다면?"이 2.6초 동안 떠올랐다 사라진 뒤 압축이 시작됨. */
/* 판정 장면 첫머리: 화면 왼쪽 아래(자막 자리)에 "사다리 컨설팅을 받는다면?"이 3초 동안 보였다 사라지고, 그 뒤(2.4초) 판정 색·꼬리표·범례·자막이 시작됨. */
.ax-reel-screen > .ax-reel-ask-after { top:auto; bottom:18px; right:108px; left:auto; max-width:calc(100% - 152px); padding:12px 20px 13px; border-radius:18px; background:#fff; font-size:22px; line-height:1.4; text-align:left; color:#111; }
.ax-reel-screen.is-2 > .ax-reel-ask-after { animation:ax-ask-flash 3s ease both; }
.ax-reel-screen.is-2 > .ax-reel-caption { animation:ax-caption-late 2.8s ease both; }
@keyframes ax-caption-late { 0% { opacity:0; } 88% { opacity:0; } 100% { opacity:1; } }
@keyframes ax-ask-flash { 0% { opacity:0; translate:0 10px; } 10% { opacity:1; translate:0 0; } 74% { opacity:1; translate:0 0; } 92% { opacity:0; translate:0 -8px; } 100% { opacity:0; } }
/* 표: 가운데 정렬된 세 열 */
.ax-reel-screen > .ax-reel-grid { flex:1; display:flex; flex-direction:column; justify-content:center; margin:0; padding:12px 0 0; }
.ax-reel-screen > .ax-reel-grid > .ax-reel-rows { list-style:none; margin:0; padding:0; }
.ax-reel-row,.ax-reel-sum-row { display:grid; grid-template-columns:230px minmax(0,1fr) 260px; column-gap:24px; align-items:center; }
.ax-reel-row { max-height:0; opacity:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * .25s),opacity .4s ease calc(var(--i,0) * .25s + .1s); }
.ax-reel-screen.from-1 .ax-reel-row { max-height:56px; opacity:1; }
.ax-reel-lab { padding:6px 0; line-height:1.35; }
.ax-reel-no { margin-right:8px; font-family:var(--font-en); font-size:13px; font-weight:700; color:var(--primary-light-color,#637BFF); }
.ax-reel-lab b { font-size:15px; font-weight:700; color:#fff; }
.ax-reel-lab small { display:block; margin-top:2px; font-size:14px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ax-reel-track { position:relative; height:22px; }
/* 간트 안내선: 막대 칸을 넷으로 나누는 세로 점선. 줄 높이 전체(위아래 18px 더)로 늘려 줄끼리 이어져 보임. */
.ax-reel-row .ax-reel-track::before { content:''; position:absolute; left:0; right:0; top:-18px; bottom:-18px; border-right:1px dashed rgba(255,255,255,.22); background:linear-gradient(to right,rgba(255,255,255,.22) 1px,transparent 1px) 0 0 / 25% 100% repeat-x; pointer-events:none; }
/* 눈금 줄: 단계 줄과 같은 세 칸 격자, 가운데 칸에 0·¼·½·¾·전체 지점의 날짜. 줄이 펼쳐질 때(from-1) 함께 나타남. */
.ax-reel-scale { display:grid; grid-template-columns:230px minmax(0,1fr) 260px; column-gap:24px; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s ease,opacity .4s ease .1s; }
.ax-reel-screen.from-1 .ax-reel-scale { max-height:28px; opacity:1; }
.ax-reel-ticks { position:relative; display:block; height:22px; }
.ax-reel-ticks i { position:absolute; top:0; translate:-50% 0; font-size:13px; font-style:normal; line-height:22px; color:#888; white-space:nowrap; }
.ax-reel-ticks i:nth-child(1) { left:0; translate:0 0; }
.ax-reel-ticks i:nth-child(2) { left:25%; }
.ax-reel-ticks i:nth-child(3) { left:50%; }
.ax-reel-ticks i:nth-child(4) { left:75%; }
.ax-reel-ticks i:nth-child(5) { left:100%; translate:-100% 0; }
.ax-reel-seg { position:absolute; z-index:1; top:0; bottom:0; left:calc(var(--x,0) * 100%); width:calc(var(--w,.2) * 100%); background:repeating-linear-gradient(135deg,#fff 0 5px,#d9d9d9 5px 7px); clip-path:inset(0 100% 0 0); transition:left 2.8s cubic-bezier(.3,.6,.2,1),width 2.8s cubic-bezier(.3,.6,.2,1); } /* 빗금 = 사람이 손으로 하는 일 */
/* 분해 장면: 조각이 시간순으로 한 땀씩 채워짐(전체 2일을 3.2초에, 각 조각은 길이만큼의 시간). */
.ax-reel-screen.from-1 .ax-reel-seg { clip-path:inset(0 0 0 0); transition:clip-path calc(var(--w,.2) * 3.2s) linear calc(.4s + var(--x,0) * 3.2s),left 2.8s cubic-bezier(.3,.6,.2,1),width 2.8s cubic-bezier(.3,.6,.2,1); }
/* 그래프 전체 영역: 막대 칸 0~2일을 덮는 옅은 판. 줄이 펼쳐질 때 나타나고, 결과 장면에서 조각·합계 막대와 함께 적용 후 길이(25%)로 눌려 줄어듦. */
.ax-reel-row .ax-reel-track::after { content:''; position:absolute; left:0; top:-18px; bottom:-18px; width:100%; background:rgba(255,255,255,.07); border-left:1px solid rgba(255,255,255,.3); border-right:1px solid rgba(255,255,255,.3); opacity:0; pointer-events:none; transition:opacity .5s ease .3s,width 2.8s cubic-bezier(.2,.85,.25,1.04) .8s; }
.ax-reel-screen.from-1 .ax-reel-row .ax-reel-track::after { opacity:1; }
.ax-reel-screen.is-4 .ax-reel-row .ax-reel-track::after { width:calc(var(--after,1) * 100%); background:rgba(99,123,255,.14); border-color:var(--primary-light-color,#637BFF); }
.ax-reel-seg::after { content:''; position:absolute; inset:0; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.2,.7,.2,1) calc(2.4s + var(--i,0) * .3s); }
.ax-reel-row[data-kind="mx"] .ax-reel-seg::after { background:var(--primary-light-color,#637BFF); }
.ax-reel-row[data-kind="hu"] .ax-reel-seg::after { background:repeating-linear-gradient(135deg,#8c8c8c 0 5px,#767676 5px 7px); } /* 사람 판단은 회색 빗금(여전히 손으로) */
.ax-reel-screen.from-2 .ax-reel-seg::after { transform:scaleX(1); }
.ax-reel-screen.is-4 .ax-reel-seg { left:calc(var(--xa,0) * 100%); width:calc(var(--a,.1) * 100%); transition:left 2.8s cubic-bezier(.2,.85,.25,1.04) .8s,width 2.8s cubic-bezier(.2,.85,.25,1.04) .8s; } /* 아래 `사다리 컨설팅을 받는다면?` 막대와 동시에(.8초 뒤, 2.8초) 압축 */
/* 꼬리표: 조각 끝 오른쪽. 끝이 오른쪽 가장자리에 닿는 줄은 조각 왼쪽에. */
.ax-reel-tag { position:absolute; top:50%; left:calc((var(--x,0) + var(--w,0)) * 100% + 10px); translate:0 -50%; padding:0 8px; font-size:14px; font-weight:700; font-style:normal; line-height:24px; white-space:nowrap; opacity:0; scale:1.5; transition:opacity .25s ease calc(2.7s + var(--i,0) * .3s),scale .35s cubic-bezier(.2,.9,.3,1.3) calc(2.7s + var(--i,0) * .3s),left 2.8s cubic-bezier(.3,.6,.2,1); }
.ax-reel-row[data-tag="left"] .ax-reel-tag { left:auto; right:calc((1 - var(--x,0)) * 100% + 10px); transition:opacity .25s ease calc(2.7s + var(--i,0) * .3s),scale .35s cubic-bezier(.2,.9,.3,1.3) calc(2.7s + var(--i,0) * .3s),right 2.8s cubic-bezier(.3,.6,.2,1); }
.ax-reel-screen.from-2 .ax-reel-tag { opacity:1; scale:1; }
.ax-reel-screen.is-4 .ax-reel-tag { left:calc((var(--xa,0) + var(--a,0)) * 100% + 10px); transition:left 2.8s cubic-bezier(.2,.85,.25,1.04) .8s; } /* 조각·영역·합계 막대와 같은 시점·완급으로 함께 압축 */
.ax-reel-screen.is-4 .ax-reel-row[data-tag="left"] .ax-reel-tag { left:auto; right:calc((1 - var(--xa,0)) * 100% + 10px); transition:right 2.8s cubic-bezier(.2,.85,.25,1.04) .8s; }
.ax-reel-rx { font-size:14px; font-weight:500; line-height:1.5; color:#fff; opacity:0; translate:-8px 0; transition:opacity .4s ease calc(var(--i,0) * .25s),translate .4s ease calc(var(--i,0) * .25s); }
.ax-reel-arrow { margin-right:6px; color:var(--primary-light-color,#637BFF); }
.ax-reel-screen.from-3 .ax-reel-rx { opacity:1; translate:0 0; }
/* 합계 줄 하나: 흰 막대(업무 1건, 2일)가 처음부터 가득 차 있고, 결과 장면에서 파란 줄무늬 막대로 바뀐 뒤 위 그래프 영역과 함께(.8초 뒤, 2.8초) 적용 후 길이로 눌려 줄어듦. 줄무늬가 촘촘해져 압축되는 느낌. */
.ax-reel-sum { margin-top:14px; padding-top:14px; border-top:1px solid #333; }
.ax-reel-screen.is-0 .ax-reel-sum { border-top-color:transparent; }
.ax-reel-sum .ax-reel-lab { display:grid; }
.ax-reel-sum .ax-reel-lab b { grid-area:1 / 1; color:#bbb; transition:opacity .4s ease .8s; }
.ax-reel-lab-after { opacity:0; color:var(--primary-light-color,#637BFF) !important; }
.ax-reel-screen.is-4 .ax-reel-lab-now { opacity:0; }
.ax-reel-screen.is-4 .ax-reel-lab-after { opacity:1; }
.ax-reel-sum .ax-reel-track { height:28px; }
.ax-reel-ghost { position:absolute; top:0; bottom:0; left:0; width:100%; background:#fff; transition:background .6s ease,outline-color .6s ease; outline:1px dashed transparent; outline-offset:-1px; }
.ax-reel-screen.is-4 .ax-reel-ghost { background:linear-gradient(to right,rgba(255,255,255,.45) 0 2px,transparent 2px) 0 0 / 18px 100% repeat-x var(--blue); outline-color:transparent; animation:ax-squeeze 2.8s cubic-bezier(.2,.85,.25,1.04) .8s both; }
@keyframes ax-squeeze { from { width:100%; background-size:18px 100%; } to { width:calc(var(--after,1) * 100%); background-size:5px 100%; } }
.ax-reel-total { position:absolute; left:100%; top:50%; translate:10px -50%; font-size:14px; font-weight:700; white-space:nowrap; color:#fff; }
.ax-reel-total b { margin-right:2px; font-size:22px; font-variant-numeric:tabular-nums; }
.ax-reel-screen.is-4 .ax-reel-total { animation:ax-squeeze-label 2.8s cubic-bezier(.2,.85,.25,1.04) .8s both; }
@keyframes ax-squeeze-label { from { left:100%; } to { left:calc(var(--after,1) * 100%); } }
.ax-reel-total em { margin-left:10px; padding:2px 8px; background:var(--blue); font-size:13px; font-style:normal; color:#fff; opacity:0; transition:opacity .4s ease 3.7s; }
.ax-reel-screen.is-4 .ax-reel-total em { opacity:1; }
/* 결과: 흰 보고서 카드가 아래에서 올라옴. 머리글(영문 꼬리표 · 업무 이름) 아래 요약 세 칸. */
/* 결과: 문단열(큰 얼굴, 파란 테두리 빛, 아래 이름표)가 흰 말풍선으로 결과를 설명. 말풍선은 머리말(한 줄 결론) + 설명 + 필요한 교육 꼬리표. 얼굴 → 이름표 → 말풍선 → 꼬리표 순으로 등장. */
.ax-reel-result { position:absolute; left:50%; top:50%; display:flex; align-items:flex-start; gap:24px; width:min(780px,100% - 88px); color:#111; opacity:0; translate:-50% calc(-50% + 28px); pointer-events:none; transition:opacity .8s ease 4.6s,translate .8s cubic-bezier(.2,.7,.2,1) 4.6s; }
.ax-reel-persona { display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 auto; }
.ax-reel-face { display:block; width:132px; height:132px; border-radius:50%; object-fit:cover; outline:4px solid #fff; box-shadow:0 0 0 10px rgba(99,123,255,.28),0 18px 44px rgba(0,0,0,.5); scale:.6; transition:scale .7s cubic-bezier(.2,.9,.3,1.3) 4.6s; }
.ax-reel-name { display:flex; flex-direction:column; align-items:center; line-height:1.3; text-align:center; color:#fff; opacity:0; translate:0 8px; transition:opacity .5s ease 5s,translate .5s ease 5s; }
.ax-reel-name b { font-size:18px; font-weight:700; }
.ax-reel-name small { margin-top:2px; font-size:14px; color:#bbb; }
.ax-reel-bubble { position:relative; flex:1 1 auto; min-width:0; margin-top:14px; padding:24px 28px 22px; border-radius:24px; background:#fff; box-shadow:0 22px 56px rgba(0,0,0,.5); opacity:0; translate:-12px 0; scale:.96; transform-origin:left center; transition:opacity .6s ease 5.1s,translate .6s cubic-bezier(.2,.7,.2,1) 5.1s,scale .6s cubic-bezier(.2,.9,.3,1.2) 5.1s; }
.ax-reel-bubble::before { content:''; position:absolute; left:-12px; top:40px; width:14px; height:18px; background:#fff; clip-path:polygon(100% 0,100% 100%,0 40%); }
.ax-reel-headline { font-size:clamp(20px,1.8vw,24px); font-weight:700; line-height:1.4; color:#111; text-wrap:balance; }
.ax-reel-headline b,.ax-reel-say b { color:var(--blue); }
.ax-reel-say { margin-top:10px; font-size:16px; line-height:1.75; color:#333; text-wrap:pretty; }
.ax-reel-edu { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid #eee; opacity:0; translate:0 6px; transition:opacity .5s ease 5.7s,translate .5s ease 5.7s; }
.ax-reel-edu span { margin-right:4px; font-size:14px; color:#666; }
.ax-reel-edu em { padding:5px 12px; background:var(--blue-soft,#EEF1FF); font-size:14px; font-style:normal; font-weight:700; color:var(--blue); }
/* 처음으로 돌아갈 때: 검정 덮개가 덮인 뒤(is-fade) 전환 없이 첫 장면으로 되돌리고 덮개를 걷음. */
.ax-reel-screen::after { content:''; position:absolute; inset:0; z-index:5; background:#111; opacity:0; pointer-events:none; transition:opacity .45s ease; }
.ax-reel-screen.is-fade::after { opacity:1; }
.ax-reel-screen.is-4 .ax-reel-result { opacity:1; translate:-50% -50%; }
.ax-reel-screen.is-4 .ax-reel-face { scale:1; }
.ax-reel-screen.is-4 .ax-reel-name,.ax-reel-screen.is-4 .ax-reel-edu { opacity:1; translate:0 0; }
.ax-reel-screen.is-4 .ax-reel-bubble { opacity:1; translate:0 0; scale:1; }
/* 보고서 카드가 뜰 때 화면 전체를 어둡게 덮음(카드만 덮개 위). */
.ax-reel-screen::before { content:''; position:absolute; inset:0; z-index:2; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .6s ease; }
.ax-reel-screen.is-4::before { opacity:1; transition-delay:4.6s; }
.ax-reel-screen > .ax-reel-result { z-index:3; }
.ax-reel-screen.is-4 .ax-reel-rows { opacity:.14; transition:opacity .8s ease 4.4s; } /* 단계 줄만 흐려지고 전후 비교(합계)는 그대로 */
/* 문단열(문단열 캐릭터): 왼쪽 아래 둥근 얼굴. 자막은 그 오른쪽의 흰 말풍선(왼쪽 꼬리가 얼굴을 가리킴). 비어 있으면 숨김. 결과 장면에서는 가운데 큰 얼굴로 바뀌므로 작은 얼굴은 사라짐. */
.ax-reel-talk { right:44px; bottom:16px; width:52px; height:52px; z-index:2; transition:opacity .4s ease; }
.ax-reel-face-s { display:block; width:52px; height:52px; border-radius:50%; object-fit:cover; outline:3px solid #fff; box-shadow:0 8px 20px rgba(0,0,0,.4); }
.ax-reel-screen.is-4 > .ax-reel-talk { opacity:0; }
.ax-reel-caption { position:absolute; right:108px; left:auto; bottom:18px; max-width:calc(100% - 152px); padding:10px 16px 11px; border-radius:16px; background:#fff; font-size:17px; font-weight:500; line-height:1.5; color:#111; text-wrap:pretty; }
.ax-reel-caption::before,.ax-reel-screen > .ax-reel-ask-after::before { content:'문단열'; display:block; margin-bottom:2px; font-size:14px; font-weight:700; line-height:1.3; color:#111; } /* 말하는 이 */
.ax-reel-caption::after,.ax-reel-screen > .ax-reel-ask-after::after { content:''; position:absolute; right:-9px; bottom:14px; width:11px; height:14px; background:#fff; clip-path:polygon(0 0,0 100%,100% 55%); } /* 오른쪽 아래 꼬리(얼굴 쪽) */
.ax-reel-caption:empty { display:none; }
.ax-reel-screen.is-reset * { transition:none !important; }
.ax-reel-bar { display:flex; align-items:center; gap:18px; padding:14px 20px; border-top:1px solid #333; }
.ax-reel-play { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; padding:0; border:0; background:#fff; color:#111; cursor:pointer; }
.ax-reel-play svg { width:14px; height:14px; fill:currentColor; }
/* 다시보기: 끝난 뒤에만 보임(hidden 속성). 재생 버튼과 같은 흰 바탕. */
.ax-reel-replay { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; height:36px; margin-left:auto; padding:0 14px; border:0; background:#fff; font-size:14px; font-weight:700; color:#111; cursor:pointer; }
.ax-reel-replay[disabled] { opacity:.35; cursor:default; } /* 끝나기 전에는 비활성 */
.ax-reel-replay svg { width:14px; height:14px; }
.ax-reel.is-ended .ax-reel-time { margin-left:0; }
.ax-reel .ax-reel-ico-play,.ax-reel.is-playing .ax-reel-ico-pause { display:block; }
.ax-reel.is-playing .ax-reel-ico-play,.ax-reel .ax-reel-ico-pause { display:none; }
.ax-reel-chapters { flex:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; list-style:none; margin:0; padding:0; }
.ax-reel-chapter { position:relative; display:block; width:100%; padding:10px 0 0; border:0; background:none; font-size:14px; font-weight:500; color:#999; text-align:left; cursor:pointer; }
.ax-reel-chapter::before,.ax-reel-chapter::after { content:''; position:absolute; left:0; top:0; height:3px; }
.ax-reel-chapter::before { width:100%; background:#333; }
.ax-reel-chapter::after { width:calc(var(--p,0) * 100%); background:var(--blue); }
.ax-reel-chapter.is-on { color:#fff; font-weight:700; }
.ax-reel-time { flex:0 0 auto; font-family:var(--font-en); font-size:14px; color:#999; font-variant-numeric:tabular-nums; }
@keyframes ax-rise { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }
@keyframes ax-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.ax-tag-ai,.ax-tag-hu,.ax-tag-mx { display:inline-block; padding:0 10px; border-radius:2px; font-size:14px; font-weight:700; line-height:26px; white-space:nowrap; }
.ax-tag-ai { background:var(--blue); color:#fff; }
.ax-tag-hu { background:var(--ink); color:var(--inverse); }
.ax-tag-mx { background:var(--blue-soft); color:var(--blue); }
/* 태블릿·모바일용 표(≤1100px에서 릴 대신): 단계 표(단계·AI 도입 전·판정·처방) → 아래 문단열 말풍선(회색 바탕, 왼쪽 꼬리, 결론·설명·필요한 교육). 판정 꼬리표는 너비를 같게. */
.ax-reel-static { display:none; }
.ax-reel-static-talk { display:flex; align-items:flex-start; gap:16px; margin-top:24px; }
.ax-reel-static-talk img { flex:0 0 auto; width:64px; height:64px; border-radius:50%; object-fit:cover; outline:3px solid #fff; box-shadow:0 0 0 6px rgba(99,123,255,.22),0 10px 24px rgba(0,0,0,.18); }
.ax-reel-static-talk .ax-bub { position:relative; flex:1 1 auto; min-width:0; margin-top:4px; padding:16px 20px 18px; border-radius:18px; background:var(--white-gray-color,#f6f6f6); }
.ax-reel-static-talk .ax-bub::before { content:''; position:absolute; left:-10px; top:22px; width:12px; height:16px; background:var(--white-gray-color,#f6f6f6); clip-path:polygon(100% 0,100% 100%,0 40%); }
.ax-reel-static-talk .ax-who { font-size:14px; font-weight:700; color:#111; }
.ax-reel-static-talk .ax-hl { margin-top:4px; font-size:18px; font-weight:700; line-height:1.4; color:#111; text-wrap:balance; }
.ax-reel-static-talk .ax-say { margin-top:6px; font-size:15px; line-height:1.7; color:#333; text-wrap:pretty; }
.ax-reel-static-talk .ax-hl b,.ax-reel-static-talk .ax-say b { color:var(--blue); }
.ax-reel-static-talk .ax-edu { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #e3e3e3; }
.ax-reel-static-talk .ax-edu span { margin-right:4px; font-size:14px; color:#666; }
.ax-reel-static-talk .ax-edu em { padding:4px 10px; background:#fff; font-size:14px; font-style:normal; font-weight:700; color:var(--blue); }
.ax-reel-tbl :is(.ax-tag-ai,.ax-tag-hu,.ax-tag-mx) { box-sizing:border-box; min-width:92px; text-align:center; }
.ax-reel-tbl { width:100%; border-collapse:collapse; border-top:1px solid #111; }
.ax-reel-tbl :is(th,td) { padding:16px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; font-size:15px; line-height:1.5; }
.ax-reel-tbl thead th { padding:12px; font-size:14px; font-weight:500; color:#666; }
.ax-reel-tbl tbody th { font-weight:700; color:#111; }
.ax-reel-tbl tbody td { color:#444; }
.ax-sum { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.ax-sum > div { padding:24px 28px; }
.ax-sum > div + div { border-left:1px solid var(--line); }
.ax-sum .ax-k { font-size:14px; color:var(--muted); }
.ax-sum .ax-v { margin-top:2px; font-size:20px; font-weight:700; line-height:1.5; color:var(--ink); }

/* 11. 히어로. 배경 그래픽 위에 제목과 구성 그래픽을 배치. */
.ax-hero { position:relative; }
.ax-hero.ax-dark { padding:0; background:#000; border:0; }
.ax-hero-cover { position:relative; isolation:isolate; overflow:hidden; padding:calc(var(--header-height,96px) + 72px) 0 96px; }
.ax-hero-layout { position:relative; z-index:1; }
/* 제목 영역은 글자 너비만큼만 차지해, 큰 원이 피해야 할 범위를 정확히 잡음. */
.ax-hero-copy { width:fit-content; max-width:min(720px,100%); }
.ax-hero .ax-title { font-size:clamp(36px,3.2vw,48px); line-height:1.45; }
.ax-hero .ax-desc { max-width:720px; margin:24px 0 36px; color:#E5E5E5; }
.ax-hero .ax-btns { display:flex; flex-wrap:wrap; gap:12px; }
/* A의 사선 끝이 제목 글자보다 왼쪽으로 보이지 않도록 로고 너비의 10%만큼 이동. */
.ax-brand { width:48px; margin-bottom:20px; translate:10% 0; }
.ax-brand-image { display:block; width:100%; height:auto; }
/* 제목 강조 문구: 강조색 계열 그라디언트가 천천히 흐르고 글자 주변이 빛남. */
.ax-glow { background:linear-gradient(100deg,#fff 0%,#C9D1FF 24%,#8C9CFF 50%,#C9D1FF 76%,#fff 100%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 20px rgba(157,170,255,.75)); animation:ax-glow 5s ease-in-out infinite alternate; }
@keyframes ax-glow { from { background-position:0% 50%; } to { background-position:100% 50%; } }
.ax-hero-media { position:absolute; inset:0; z-index:-1; pointer-events:none; background:#111; }
.ax-hero-media video,.ax-hero-media canvas { display:block; width:100%; height:100%; object-fit:cover; }
.ax-hero-video::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.80) 52%,rgba(0,0,0,.72) 100%),linear-gradient(180deg,rgba(0,0,0,.24) 15%,rgba(0,0,0,.86) 100%); }
/* 배경 그래픽: WebGL을 쓸 수 없을 때는 같은 색의 고정 배경 표시. */
.ax-hero-field { background:linear-gradient(90deg,#04050A 0 17%,#0E1685 17% 33%,#2C4DFF 33% 50%,#0A1060 50% 67%,#1D2FC4 67% 83%,#070B3A 83%); }
/* 제목이 놓이는 왼쪽은 어둡게 덮어 글자 대비를 확보. 상단 메뉴는 배경과 섞이는 방식이라 메뉴 뒤는 검정에 가깝게 유지. */
.ax-hero-field::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,3,10,.5) 0%,rgba(2,3,10,.3) 42%,rgba(2,3,10,.16) 72%,rgba(2,3,10,.16) 100%),linear-gradient(180deg,rgba(2,3,10,.96) 0,rgba(2,3,10,.82) 84px,transparent 210px); }

/* 11-1. 구성 그래픽: 커버보다 큰 원 세 개가 커버 안으로 걸쳐 들어오는 형태. 흰색 선 한 가지만 사용.
   무대(정사각형) 안에서 원의 중심·크기·이름 위치를 %로 정해, 무대 크기만 바꾸면 구도가 그대로 유지됨.
   아래 값은 기본 구도이며, 스크립트가 접속할 때마다 무작위 구도로 바꾸고 포인터에 따라 조금씩 움직임. */
.ax-rings { position:absolute; inset:0; overflow:hidden; pointer-events:none; --u:1vw; }
.ax-rings-stage { position:absolute; top:50%; right:0; width:calc(61 * var(--u)); aspect-ratio:1; translate:14% -50%; }
.ax-ring { position:absolute; left:var(--x); top:var(--y); width:var(--d,74%); aspect-ratio:1; border:1px solid rgba(255,255,255,.9); border-radius:50%; translate:calc(-50% + var(--mx,0px)) calc(-50% + var(--my,0px)); }
.ax-ring-1 { --x:43.6%; --y:17.7%; --lx:50%; --ly:75.3%; }
.ax-ring-2 { --x:82.6%; --y:55.9%; --lx:25.2%; --ly:47.8%; }
.ax-ring-3 { --x:37.1%; --y:86.8%; --lx:42.4%; --ly:24.7%; }
/* 이름은 다른 원과 겹치지 않는 구역에 배치. */
.ax-ring a { position:absolute; left:var(--lx); top:var(--ly); translate:-50% -50%; white-space:nowrap; text-align:center; color:#fff; pointer-events:auto; }
.ax-ring .ax-t { font-size:22px; font-weight:700; line-height:1.4; }

/* 11-2. 제목의 순환 문구: 글자마다 정육면체처럼 아래 면이 앞으로 굴러 올라오며 다음 문구로 바뀜.
   문구마다 글자 수가 달라도 옆으로 밀리지 않도록, 나가는 글자와 들어오는 글자를 각자의 자리에 따로 배치함. */
.ax-glow.ax-roll { display:inline-block; white-space:nowrap; perspective:1000px; background:none; color:inherit; -webkit-text-fill-color:currentColor; filter:none; animation:none; }
/* 무대 안의 보이지 않는 기준 글자가 줄 높이와 기준선을 일반 글자와 같게 유지함. */
.ax-roll-stage { position:relative; display:inline-block; line-height:1.2; transform-style:preserve-3d; }
.ax-roll-measure { position:absolute; visibility:hidden; white-space:pre; pointer-events:none; }
/* 칸은 무대 전체를 덮고 가로축으로만 회전함. 앞면(현재 글자)과 아랫면(다음 글자)은 각자의 가로 위치에 둠. */
.ax-roll-char { position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; }
.ax-roll-face { position:absolute; top:0; bottom:0; white-space:pre; backface-visibility:hidden; background:linear-gradient(180deg,#fff 18%,#C9D1FF 58%,#8C9CFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 18px rgba(157,170,255,.7)); }
/* 칸 높이 1.2em의 절반(0.6em)만큼 앞으로 내어 정육면체의 면으로 둠. */
.ax-roll-now { transform:translateZ(.6em); }
.ax-roll-next { opacity:0; transform:rotateX(-90deg) translateZ(.6em); }
.ax-roll-stage.is-rolling .ax-roll-char { animation:ax-roll .55s ease var(--d,0s) both; }
.ax-roll-stage.is-rolling .ax-roll-now { animation:ax-roll-hide .55s ease var(--d,0s) both; }
.ax-roll-stage.is-rolling .ax-roll-next { animation:ax-roll-show .55s ease var(--d,0s) both; }
@keyframes ax-roll { to { transform:rotateX(90deg); } }
@keyframes ax-roll-hide { to { opacity:0; } }
@keyframes ax-roll-show { to { opacity:1; } }

/* 11-3. 실적 띠: 페이지 맨 아래, 푸터 바로 위에 출력. */
.ax-band { background:#111; color:#fff; }
.ax-band ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); list-style:none; margin:0; padding:0; }
.ax-band li { display:flex; align-items:center; gap:10px; padding:22px 24px; border-left:1px solid #333; font-size:16px; font-weight:500; line-height:1.5; }
.ax-band li:first-child { padding-left:0; border-left:0; }
.ax-band svg { flex-shrink:0; width:18px; height:18px; color:var(--primary-light-color,#637BFF); }

/* 12. 자가진단 */
.ax-check { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); border:1px solid #111; }
.ax-dark .ax-check { border-color:var(--line); }
.ax-check .ax-cl { padding:48px 40px; background:#111; color:var(--gray-lighten-color,#bbb); --ink:#fff; --muted:var(--gray-light-color,#999); --accent:var(--primary-light-color,#637BFF); }
.ax-check .ax-title { font-size:2.6rem; } /* 상자 안 제목이라 장 제목(32px)보다 한 단계 작게 */
/* 검정 칸: 점무늬 캔버스 → 왼쪽부터 어두운 그라디언트(::after) → 글(.ax-cl-copy) 순으로 쌓임. */
.ax-check .ax-cl { position:relative; overflow:hidden; }
.ax-check .ax-cl::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,rgba(17,17,17,.94) 0,rgba(17,17,17,.72) 45%,rgba(17,17,17,.2) 100%); pointer-events:none; }
.ax-check .ax-cl-copy { position:relative; z-index:1; }
.ax-check .ax-cr { position:relative; padding:48px 40px; background:#fff; color:var(--body); --ink:#111; --body:#333; --muted:#666; --line:#ddd; --accent:var(--blue); }
/* 자가진단 블록: 블록 전체 바탕에 회색 디더링, 상자 안은 흰색. */
.ax-diagnosis.ax-sec { position:relative; overflow:hidden; }
.ax-proof.ax-sec { border-top:1px solid #e5e5e5; } /* 자가진단과 WHY SADARI 사이 옅은 회색 선(사용자 요청으로 되살림) */
.ax-diagnosis.ax-sec > .l_container { position:relative; z-index:1; }
.ax-qprog { margin-bottom:8px; font-size:14px; font-weight:700; color:var(--accent); }
.ax-qt { margin-bottom:24px; font-size:20px; font-weight:700; line-height:1.6; }
.ax-qopts { display:grid; gap:10px; }
.ax-qopts button { padding:14px 18px; border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--ink); font-size:16px; line-height:1.7; text-align:left; cursor:pointer; transition:background-color .15s ease,border-color .15s ease; }
.ax-qopts button:hover { border-color:#bbb; background:#f3f3f3; } /* 사용자 요청으로 넣은 hover 배경(밝은 회색) */
.ax-qopts button.is-picked { border-color:var(--blue); background:var(--blue-soft); animation:ax-blink .5s ease; }
.ax-qopts button:disabled:not(.is-picked) { opacity:.6; cursor:default; }
@keyframes ax-blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.ax-qopts + .ax-btn { margin-top:20px; }
.ax-qres .ax-rk { font-size:14px; color:var(--muted); }
.ax-qres h3 { margin:4px 0 14px; font-size:22px; font-weight:700; color:var(--accent); }
.ax-qres .ax-row { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }

/* 13. 실적 및 강사. 실적은 AI VIDEO 성과 영역과 같이 선으로 나눈 칸. */
/* WHY SADARI: 원본 목업 그대로. 머리글(제목 아래 설명) → 수치 4칸(테두리·구분선) → 대표 강사(사진 320px + 글). */
.ax-nums { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; border:1px solid var(--line); background:var(--line); }
.ax-nums .ax-tile { padding:32px 26px; border:0; background:var(--surface); }
.ax-nums .ax-v { font-size:40px; font-weight:700; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums; }
.ax-nums .ax-v small { margin-left:4px; font-size:22px; font-weight:500; color:var(--muted); }
.ax-nums .ax-k { margin-top:8px; font-size:15px; font-weight:700; color:var(--ink); }
.ax-nums p { margin-top:4px; font-size:14px; color:var(--muted); }
/* 대표 강사: 화면 너비의 띠. 바탕은 강의 사진(사람이 오른쪽) 그대로(그라디언트 없음), 글은 왼쪽 600px. 이름 묶음은 서명 + (직함 굵게 / 이름). 블록 끝 띠라 아래 여백을 상쇄해 블록 끝까지. */
.ax-team-band { position:relative; display:flex; align-items:center; min-height:clamp(480px,44vw,1120px); /* 사진(1590×720)이 큰 화면에서도 거의 다 보이는 높이. 840px 상한은 2560px 화면에서 너무 낮았음 */ margin:0 0 calc(-1 * clamp(72px,9vw,128px)); padding:clamp(64px,7vw,96px) 0; background:#1c1c1c url(../images/ax/cover-online.jpg) right center / cover no-repeat; }
.ax-team-copy { position:relative; z-index:1; width:100%; }
/* 등장: 화면에 들어오면(is-on) 사진·이름·소개·이력이 0.12초 간격으로 아래에서 떠오름. */
.ax-team-copy.is-ready > *,.ax-team-copy.is-ready .ax-team-career-k,.ax-team-copy.is-ready .ax-team-career li { opacity:0; translate:0 18px; transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1); }
.ax-team-copy.is-ready > .ax-team-career { opacity:1; translate:0 0; transition:none; } /* 이력 묶음 자체는 그대로 두고 안의 항목이 하나씩 */
.ax-team-copy.is-ready > :nth-child(2) { transition-delay:.1s; }   /* 서명·이름 */
.ax-team-copy.is-ready > :nth-child(3) { transition-delay:.3s; }   /* 소개 */
.ax-team-copy.is-ready .ax-team-career-k { transition-delay:.5s; }
.ax-team-copy.is-ready .ax-team-career li:nth-child(1) { transition-delay:.65s; }
.ax-team-copy.is-ready .ax-team-career li:nth-child(2) { transition-delay:.8s; }
.ax-team-copy.is-ready .ax-team-career li:nth-child(3) { transition-delay:.95s; }
.ax-team-copy.is-ready .ax-team-career li:nth-child(n+4) { transition-delay:1.1s; }
.ax-team-copy.is-on > *,.ax-team-copy.is-on .ax-team-career-k,.ax-team-copy.is-on .ax-team-career li { opacity:1; translate:0 0; }
/* AI 교육 장 머리 + 비교표: 번호·제목·설명이 차례로, 이어서 표 머리글과 줄이 위에서부터 하나씩 떠오름. */
.ax-chapter-intro.is-ready :is(.ax-chapter-mark,.ax-title,.ax-desc),.ax-chapter-intro.is-ready .ax-vs :is(thead th,tbody th,tbody td) { opacity:0; translate:0 16px; transition:none; } /* 숨길 때는 전환·지연 없이 바로(지연이 있으면 0초 전환도 지연만큼 미뤄짐) */
.ax-chapter-intro.is-on :is(.ax-chapter-mark,.ax-title,.ax-desc) { opacity:1; translate:0 0; transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1); }
.ax-chapter-intro.is-on .ax-vs :is(thead th,tbody th,tbody td) { opacity:1; translate:0 0; transition:opacity .5s ease,translate .5s cubic-bezier(.2,.7,.2,1); } /* 칸별 지연은 아래 규칙(특이도 높음)이 덮어씀 */
.ax-chapter-intro.is-on .ax-title { transition-delay:.1s; }
.ax-chapter-intro.is-on .ax-desc { transition-delay:.22s; }
/* 표는 칸마다 하나씩: 머리글 세 칸(.3초부터 .08초 간격) → 줄마다 왼쪽에서 오른쪽으로(줄 간격 .24초, 칸 간격 .08초). */
.ax-chapter-intro.is-on .ax-vs thead th:nth-child(1) { transition-delay:.3s; }
.ax-chapter-intro.is-on .ax-vs thead th:nth-child(2) { transition-delay:.38s; }
.ax-chapter-intro.is-on .ax-vs thead th:nth-child(3) { transition-delay:.46s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(1) > :nth-child(1) { transition-delay:.58s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(1) > :nth-child(2) { transition-delay:.66s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(1) > :nth-child(3) { transition-delay:.74s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(2) > :nth-child(1) { transition-delay:.82s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(2) > :nth-child(2) { transition-delay:.9s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(2) > :nth-child(3) { transition-delay:.98s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(3) > :nth-child(1) { transition-delay:1.06s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(3) > :nth-child(2) { transition-delay:1.14s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(3) > :nth-child(3) { transition-delay:1.22s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(4) > :nth-child(1) { transition-delay:1.3s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(4) > :nth-child(2) { transition-delay:1.38s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(4) > :nth-child(3) { transition-delay:1.46s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(n+5) > :nth-child(1) { transition-delay:1.54s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(n+5) > :nth-child(2) { transition-delay:1.62s; }
.ax-chapter-intro.is-on .ax-vs tbody tr:nth-child(n+5) > :nth-child(3) { transition-delay:1.7s; }
/* WHY SADARI 머리글·수치: 제목 → 설명 → 수치 칸 넷이 0.15초 간격으로 떠오름(수치 숫자의 슬롯 굴림은 그대로). */
.ax-proof-cover > .is-ready .ax-title,.ax-proof-cover > .is-ready .ax-desc,.ax-proof-cover > .is-ready .ax-nums .ax-tile { opacity:0; translate:0 18px; transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1); }
.ax-proof-cover > .is-ready .ax-desc { transition-delay:.15s; }
.ax-proof-cover > .is-ready .ax-nums .ax-tile:nth-child(1) { transition-delay:.35s; }
.ax-proof-cover > .is-ready .ax-nums .ax-tile:nth-child(2) { transition-delay:.5s; }
.ax-proof-cover > .is-ready .ax-nums .ax-tile:nth-child(3) { transition-delay:.65s; }
.ax-proof-cover > .is-ready .ax-nums .ax-tile:nth-child(4) { transition-delay:.8s; }
.ax-proof-cover > .is-on .ax-title,.ax-proof-cover > .is-on .ax-desc,.ax-proof-cover > .is-on .ax-nums .ax-tile { opacity:1; translate:0 0; }
.ax-team-photo { display:none; }
.ax-team-copy > * { max-width:600px; }
.ax-team-name { display:flex; align-items:center; gap:24px; }
.ax-team-sign { display:block; width:auto; height:64px; opacity:.9; }
.ax-team-name-text .ax-role { display:block; font-size:16px; font-weight:700; color:#fff; }
.ax-team-name-text h3 { margin-top:4px; font-size:22px; font-weight:400; line-height:1.3; color:#ddd; }
.ax-team-copy > p { margin-top:28px; font-size:17px; line-height:1.9; color:#ddd; }
.ax-team-career { max-width:440px; margin-top:28px; }
.ax-team-career-k { display:block; padding-bottom:12px; border-bottom:1px solid #555; font-size:14px; font-weight:700; color:#aaa; }
.ax-team-career ul { list-style:none; margin:0; padding:0; }
.ax-team-career li { padding:13px 0; border-bottom:1px solid #3a3a3a; font-size:15px; line-height:1.6; color:#ddd; }

/* 14. 도입 문의. 입력창은 CONTACT 페이지 입력창과 같은 형태. */
/* CONTACT: 원본 목업 그대로. 왼쪽 글(약속 목록) 1 : 오른쪽 흰 폼 1.4(사이트 공통 그림자), 폼은 3단계 탭. 블록 바탕에는 회색 디더링. */
.ax-contact.ax-sec { position:relative; overflow:hidden; }
.ax-contact.ax-sec > .l_container { position:relative; z-index:1; }
.ax-contact-g { display:grid; grid-template-columns:340px minmax(0,1fr); gap:80px; align-items:start; } /* 위 FAQ 격자(340px + 80px 간격)와 세로선을 맞춤 */
.ax-promise { margin-top:32px; border-top:1px solid var(--line); }
.ax-promise div { padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--body); }
.ax-promise b { margin-right:8px; color:var(--ink); }
.ax-promise a { color:inherit; }
.ax-form { padding:36px; border:0; background:#fff; box-shadow:var(--shadow,4px 4px 6px rgba(0,0,0,.1)); color:var(--body); --ink:#111; --body:#333; --muted:#666; --line:#ddd; --accent:var(--blue); }
.ax-form fieldset { min-width:0; margin:0; padding:0; border:0; }
.ax-fsteps { display:flex; margin:0 0 28px; padding:0; border:1px solid var(--line); list-style:none; }
.ax-fsteps li { flex:1; padding:10px 4px; color:var(--muted); font-size:14px; font-weight:500; text-align:center; }
.ax-fsteps li + li { border-left:1px solid var(--line); }
.ax-fsteps [aria-current="step"] { background:#111; color:#fff; font-weight:700; }
.ax-fpane > legend { padding:0; font-size:18px; font-weight:700; line-height:1.6; color:var(--ink); }
.ax-fpane .ax-h4s { margin-bottom:20px; font-size:14px; color:var(--muted); }
.ax-opts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ax-opt { display:flex; align-items:flex-start; gap:10px; min-width:0; padding:14px; font-size:17px; font-weight:700; border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--ink); cursor:pointer; } /* 항목 이름은 17px 굵게(고르기 쉽게) */
.ax-opt > span:first-of-type { min-width:0; }
.ax-opt small { display:block; margin-top:2px; font-size:14px; font-weight:400; color:var(--muted); }
.ax-opt-ic { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-left:auto; }
.ax-opt-ic lord-icon { display:block; }
/* 체크 상자: 브라우저 기본 대신 목업과 같은 네모(1px 테두리, 고르면 파랑 채움에 흰 안쪽 테두리). */
.ax-opt input,.ax-agree input { flex-shrink:0; width:18px; height:18px; margin:0; border:1px solid #bbb; border-radius:2px; background:#fff; appearance:none; -webkit-appearance:none; cursor:pointer; }
.ax-opt input:checked,.ax-agree input:checked { border-color:var(--blue); background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } /* 파란 바탕에 흰 체크 선 */
.ax-opt input { margin-top:4px; } /* 17px 글줄의 가운데에 맞춤 */
.ax-opt:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); }
.ax-opt:has(input:focus-visible),.ax-pill:has(input:focus-visible) { outline:3px solid var(--blue); outline-offset:3px; }
.ax-form .ax-option-group + .ax-option-group { margin-top:28px; } /* 조건 묶음 사이 간격(.ax-form fieldset의 margin:0보다 우선) */
.ax-flabel { display:block; margin:18px 0 8px; font-size:14px; font-weight:700; color:var(--ink); }
.ax-option-group > .ax-flabel { float:none; margin:0 0 10px; padding:0; }
.ax-pills { display:flex; flex-wrap:wrap; gap:8px; }
.ax-pill { display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--body); font-size:15px; cursor:pointer; }
.ax-pill input { flex-shrink:0; width:16px; height:16px; margin:0; border:1px solid #bbb; border-radius:50%; background:#fff; appearance:none; -webkit-appearance:none; cursor:pointer; }
.ax-pill input:checked { background:var(--blue); border-color:var(--blue); box-shadow:inset 0 0 0 3px #fff; }
/* 고른 조건: 검정 대신 옅은 파랑 바탕에 파란 테두리·글자. */
.ax-pill:has(input:checked) { background:var(--blue-soft); border-color:var(--blue); color:var(--blue); } /* 굵기는 그대로(굵어지면 칸 너비가 바뀌어 옆 칸이 밀림) */
.ax-row2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.ax-form .ax-inp { display:block; width:100%; min-height:46px; padding:12px 14px; border:1px solid var(--line); border-radius:2px; background:#fff; color:#333; font:inherit; font-size:16px; line-height:1.5; }
.ax-form .ax-inp[aria-invalid="true"] { border-color:#BC2828; }
.ax-form .ax-inp:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.ax-form textarea.ax-inp { min-height:96px; resize:vertical; }
.ax-agree { display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; line-height:1.8; color:var(--muted); }
.ax-err { display:block; margin-top:10px; font-size:14px; color:#BC2828; }
.ax-fnav { display:flex; justify-content:space-between; gap:10px; margin-top:28px; }
.ax-form-unavailable { margin-bottom:20px; padding:16px 20px; background:var(--white-gray-color,#f6f6f6); font-size:14px; color:var(--body); }
.ax-done { padding:40px 10px; text-align:center; }
.ax-done .ax-ck { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:16px; background:var(--blue); color:#fff; }
.ax-done .ax-ck svg { width:24px; height:24px; }
.ax-done h3 { font-size:22px; font-weight:700; }
.ax-done p { margin-top:6px; color:var(--muted); }
/* 접수 완료 레이어: 어두운 흐림 배경 위 흰 상자(AI 영상 문의의 완료 레이어와 같은 구성). */
.ax-done-modal { position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:24px; border:0; background:transparent; color:var(--body); }
.ax-done-modal[open] { display:flex; align-items:center; justify-content:center; }
.ax-done-modal::backdrop { background:rgba(0,0,0,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
/* 상자는 AI 영상 문의의 완료 레이어(.inq-done-modal-box)와 같은 구성: 480px, 모서리 2px, 오른쪽 위 닫기(테두리 36px), 옅은 파란 원 안의 파란 체크, 제목 22px, 안내 15px. 따로 버튼은 두지 않음(닫기·바깥 누름·Esc). */
.ax-done-box { position:relative; width:min(480px,100%); padding:56px 40px 44px; border-radius:2px; background:#fff; text-align:center; animation:ax-done-in .4s ease-out; }
@keyframes ax-done-in { from { opacity:0; translate:0 20px; } to { opacity:1; translate:0 0; } }
.ax-done-close { position:absolute; top:16px; right:16px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid var(--gray-white-color,#ddd); border-radius:2px; background:none; color:var(--gray-color,#666); cursor:pointer; }
.ax-done-close svg { width:16px; height:16px; }
.ax-done-icon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 20px; border-radius:50%; background:rgba(44,77,255,.1); color:var(--blue); }
.ax-done-icon svg { width:26px; height:26px; }
.ax-done-box h3 { font-size:22px; font-weight:700; color:var(--gray-black-color,#111); }
.ax-done-box p { margin-top:12px; font-size:15px; line-height:1.7; color:var(--gray-color,#666); }

/* 15. 하단 문의 바 */
.ax-stick { position:fixed; left:0; right:0; bottom:0; z-index:1000; padding-bottom:env(safe-area-inset-bottom); border-top:1px solid #ddd; background:#fff; }
.ax-stick .ax-wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:68px; padding-top:10px; padding-bottom:10px; }
.ax-stick p { font-size:15px; font-weight:500; color:#111; }
.ax-stick .ax-btn { height:44px; font-size:15px; box-shadow:none; }

/* 16. 사례 상세. 상자 안쪽이 아닌 창 전체가 스크롤됨. */
.ax-modal { position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; border:0; background:transparent; color:var(--body); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; font-family:var(--font-ko); font-size:16px; line-height:1.76; --ink:#111; --body:#333; --muted:#666; --line:#ddd; --tile:#f6f6f6; --accent:var(--blue); }
.ax-modal::backdrop { background:rgba(0,0,0,.74); }
/* 닫기 버튼의 고정 위치가 창 상단 기준이 되도록 여백은 상자의 margin으로 처리. */
.ax-mbox { position:relative; width:calc(100% - 80px); max-width:960px; margin:48px auto; border-radius:12px 12px 0 0; background:#fff; } /* 위쪽 모서리는 브라우저 틀과 같은 반지름 */ /* 1120 → 960: 화면 이미지가 작게 보여 해상도 부족이 덜 드러남 */
/* 닫기 버튼: 상자 밖, 화면 오른쪽 위에 고정. */
.ax-modal .ax-x { position:fixed; top:24px; right:24px; z-index:3; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid #555; background:#111; color:#fff; cursor:pointer; }
/* 상세 화면이 맨 위에 상자 너비(960px)로 크게 놓임. 그 아래 검정 띠에 제목 묶음(왼쪽)과 세로 썸네일 열(오른쪽, 96px). 좁은 화면(≤820px)은 썸네일이 제목 아래 가로줄. */
.ax-mgal { display:block; padding:0; }
/* 브라우저 창 모양: 위쪽 46px 바에 창 단추 점 셋(빨강·노랑·초록), 앞뒤 화살표, 자물쇠 + 사례 제목이 든 주소 칸(각진 사각형), 오른쪽 메뉴 점 셋. 화면 이미지는 그 아래. */
.ax-mframe { overflow:hidden; border-radius:12px 12px 0 0; background:#f4f4f4; } /* 브라우저 창처럼 위쪽 두 모서리만 둥글게(사용자 요청) */
.ax-mframe-bar { display:flex; align-items:center; gap:14px; height:46px; padding:0 16px; background:linear-gradient(#f4f4f4,#e9e9e9); border-bottom:1px solid #d0d0d0; color:#8a8a8a; }
.ax-mframe-dots { display:flex; gap:7px; }
.ax-mframe-dots i { width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.ax-mframe-dots i:nth-child(1) { background:#ec6a5e; } .ax-mframe-dots i:nth-child(2) { background:#f4bf4f; } .ax-mframe-dots i:nth-child(3) { background:#61c554; }
.ax-mframe-nav { display:flex; gap:6px; }
.ax-mframe-nav svg { width:16px; height:16px; }
.ax-mframe-nav svg:first-child { color:#555; } /* 뒤로는 진하게, 앞으로는 옅게(흔한 브라우저 모양) */
.ax-mframe-url { flex:0 1 480px; display:flex; align-items:center; gap:8px; min-width:0; height:28px; padding:0 12px; border:1px solid #d2d2d2; background:#fff; font-size:13px; line-height:1; color:#666; }
.ax-mframe-url svg { flex:0 0 auto; width:13px; height:13px; color:#888; }
.ax-mframe-url span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ax-mframe-menu { display:flex; gap:3px; margin-left:auto; }
.ax-mframe-menu i { width:4px; height:4px; border-radius:50%; background:#9a9a9a; }
.ax-mgal-main { width:100%; min-width:0; margin:0; overflow:hidden; background:#f4f4f4; } /* Swiper 기본 margin:auto는 격자 칸에서 내용 크기로 커져(슬라이드 너비 ↔ 칸 너비 되먹임) 막음 */
/* 상세 화면은 모두 16:9 틀(960×540)에 위쪽 기준(object-position 가운데 위)으로 채움. 브라우저 캡처라 위가 기준이고, 세로가 긴 이미지는 아래쪽이, 더 넓은 이미지는 양옆이 잘림. 회색 여백은 생기지 않음. */
.ax-mgal-main .swiper-slide { display:block; aspect-ratio:16 / 9; overflow:hidden; }
.ax-mgal-main img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.ax-mhero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 32px; align-items:start; padding:32px; background:#111; --ink:#fff; --muted:var(--gray-light-color,#999); --accent:var(--primary-light-color,#637BFF); }
/* 검정 제목 띠에 점무늬(디더링) 캔버스. 모달을 열 때 스크립트가 그림. 글과 썸네일은 그 위에. */
.ax-mhero { position:relative; overflow:hidden; }
.ax-mhero > :not(.ax-dither) { position:relative; z-index:1; }
.ax-mhero-text { min-width:0; }
.ax-mhero h3 { margin:10px 0 6px; font-size:26px; font-weight:700; line-height:1.4; color:var(--ink); }
.ax-mhero .ax-cl { font-size:14px; color:var(--muted); }
.ax-mgal-thumbs { display:flex; flex-direction:row; gap:8px; align-self:start; } /* 썸네일은 검정 띠 오른쪽 위에 가로 한 줄 */
.ax-mgal-thumb { flex:0 0 auto; width:96px; height:54px; padding:0; border:0; background:#eee; opacity:.45; cursor:pointer; } /* 고른 것은 또렷하게, 나머지는 옅게. 파란 테두리는 뺌(사용자 요청) */
.ax-mgal-thumb.is-on { opacity:1; }
.ax-mgal-thumb:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.ax-mgal-thumb img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.ax-mimgs-note { font-size:14px; color:var(--muted); }
.ax-mimgs-note:empty { display:none; }
/* 본문 네 부분은 각각 테두리 상자에 담아 정돈. */
.ax-mbody { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:32px; } /* 네 칸을 2×2로. 바깥 여백은 제목 띠와 같은 32px, 상하좌우 같게 */
.ax-mbody > div { padding:20px; border:1px solid var(--line); background:#fafafa; } /* 칸 안쪽 여백도 사방 같게 */
.ax-mbody h4 { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:16px; font-weight:700; color:var(--accent); } /* 칸 제목 16px(18px에서 살짝 줄임), 본문은 15px */
.ax-mbody h4 lord-icon { flex:0 0 auto; }
.ax-mbody :is(p,li) { font-size:15px; line-height:1.8; }
.ax-mbody ul { padding-left:0; }
.ax-mbody li { margin-left:18px; list-style:disc; }
.ax-mfoot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding:24px 32px; border-top:1px solid var(--line); background:var(--tile); }
.ax-mfoot-notes { flex:1; min-width:180px; display:grid; gap:4px; }
.ax-mfoot-notes p { font-size:14px; font-weight:500; line-height:1.6; color:var(--ink); }
.ax-mfoot-notes .ax-mimgs-note { font-weight:400; color:var(--muted); } /* 대외비 재구성 안내는 단추 왼쪽에 옅게 */
.ax-mfoot > .ax-btn { margin-left:auto; }

/* 17. 공통 팩토리 블록: AX 페이지의 로고 비율 및 한글 표기 기준. */
body:has(.ax-block) :is(.bl_factory-clients,.bl_factory-faq) { scroll-margin-top:calc(var(--header-height,96px) + 16px); }
body:has(.ax-block) :is(.bl_factory-clients,.bl_factory-faq) * { letter-spacing:normal; font-style:normal; }
body:has(.ax-block) .bl_factory-clients .client-item { border-color:var(--gray-white-color); box-shadow:none; transition:none; text-decoration:none; }
body:has(.ax-block) .bl_factory-clients .ci-logo img { box-sizing:border-box; object-fit:contain; padding:44px; } /* AX 페이지에서는 로고를 조금 더 작게(안쪽 여백 28→44px) */
body:has(.ax-block) .bl_factory-clients .ci-name { font-size:14px; line-height:1.7; white-space:normal; }
body:has(.ax-block) .bl_factory-clients .ci-tag { font-size:14px; line-height:1.6; }
body:has(.ax-block) .bl_factory-faq .faq-q { line-height:1.7; color:var(--gray-lighten-color); transition:none; }
body:has(.ax-block) .bl_factory-faq .faq-sidebar-title { text-wrap:balance; }
body:has(.ax-block) :is(.bl_factory-clients,.bl_factory-faq) :is(a,button):focus-visible { outline:3px solid #9DAAFF; outline-offset:4px; }

/* 18. AX 전용 고객사·FAQ 블록 (추가 목록에 유지) */
.ax-section-layout { display:grid; grid-template-columns:minmax(240px,min(32%,400px)) minmax(0,1fr); gap:var(--gap-2x); align-items:start; }
.ax-section-layout > .ax-head { position:sticky; top:calc(var(--header-height,96px) + 24px); margin-bottom:0; }
.ax-section-layout > * { min-width:0; }
.ax-logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid var(--line); background:var(--line); list-style:none; }
.ax-logos > li { display:flex; align-items:center; justify-content:center; min-height:140px; padding:24px 16px; background:#fff; }
.ax-logos a { display:flex; align-items:center; justify-content:center; width:100%; height:86px; }
.ax-logos .ax-client-logo { display:block; width:220px; max-width:100%; height:auto; max-height:68px; object-fit:contain; }
.ax-faq-list { border-top:4px solid var(--rule); }
.ax-faq details { border-bottom:1px solid var(--line); }
.ax-faq summary { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:26px 0; list-style:none; font-size:18px; font-weight:500; line-height:1.7; color:var(--ink); cursor:pointer; }
.ax-faq summary::-webkit-details-marker { display:none; }
.ax-faq summary::after { content:'+'; font-size:22px; font-weight:300; line-height:1; color:var(--muted); }
.ax-faq details[open] summary::after { content:'−'; }
.ax-faq .ax-a { max-width:880px; padding:0 40px 28px 0; color:var(--muted); }

/* 20. 서비스 구성: 왼쪽에 섹션 제목과 가운데 원(기반), 오른쪽에 서비스별 상자. 원 둘레 이름표의 이름이 상자의 서비스와 대응. */
.ax-core { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--gap-2x); align-items:start; }
.ax-core-plain { grid-template-columns:1fr; }
/* 기본은 제목 아래에 원을 두고, 화면이 넓으면 제목 오른쪽에 원을 둠(아래 1560px 이상 규칙). */
.ax-core-figure { display:flex; flex-direction:column; align-items:flex-start; gap:36px; }
.ax-core-ring { position:relative; flex-shrink:0; width:400px; aspect-ratio:1; }
/* 원 옆에 놓이는 제목은 다른 섹션 제목보다 조금 작게 함. 좁은 화면에서는 다른 섹션과 같은 크기. */
/* 오른쪽 구간 표시: 블록 이름과 점이 세로로 놓이고 현재 구간은 파란 점과 진한 글자. 어두운 바탕 위(is-dark)에서는 밝은 색. 1600px 미만은 이름 없이 점만, 1100px 이하는 숨김. */
.ax-dots { position:fixed; right:20px; top:50%; z-index:900; display:flex; flex-direction:column; align-items:flex-end; translate:0 -50%; }
.ax-dots a { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:6px 0; font-size:14px; font-weight:700; line-height:1; color:#111; text-decoration:none; }
.ax-dots a::after { content:''; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:#c8c8c8; transition:background-color .3s ease,scale .3s ease; }
.ax-dots a[aria-current="true"]::after { background:var(--primary-color,#2C4DFF); scale:1.5; } /* 표시는 .ax-block 밖이라 --blue 대신 사이트 공통 변수 */
/* 본문 폭이 화면에 맞춰 늘어나는 구조라 이름을 모두 보이면 오른쪽 내용과 겹침. 현재 구간 이름만 보이고 나머지는 스크린 리더용. */
.ax-dots a:not([aria-current="true"]) span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ax-dots a:focus-visible { outline:2px solid var(--primary-color,#2C4DFF); outline-offset:4px; }
.ax-dots.is-dark a { color:#fff; }
.ax-dots.is-dark a::after { background:rgba(255,255,255,.45); } /* 검정·파란 바탕 모두에서 보이게 반투명 흰색 */
.ax-dots.is-dark a[aria-current="true"]::after { background:#fff; }
body:has(.ax-block) .bl_factory-clients,body:has(.ax-block) .bl_factory-faq { scroll-margin-top:calc(var(--header-height,96px) + 16px); } /* 구간 표시로 이동할 때 머리글에 가리지 않게 */
/* AX 페이지의 FAQ·클라이언트 장 제목은 AX 장 제목과 같은 크기·강조(32px, 둘째 줄 700). */
body:has(.ax-block) .bl_factory-faq .faq-sidebar-title { font-size:3.2rem; line-height:1.46; }
body:has(.ax-block) :is(.bl_factory-faq .faq-sidebar-title,.bl_factory-clients .sec-title) b { font-weight:700; }
@media(max-width:1100px) { .ax-dots { display:none; } }
/* 둘레의 호와 이름표는 대관람차처럼 천천히 돌고, 이름표는 반대로 돌아 글자가 바로 서 있음. */
.ax-core-wheel { --turn:0deg; position:absolute; inset:0; rotate:var(--turn); animation:ax-wheel 44s linear infinite; }
.ax-core-wheel > svg { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--ink); stroke-width:2; }
.ax-core-tag { position:absolute; display:grid; place-items:center; width:60px; height:60px; border:2px solid var(--ink); border-radius:50%; background:var(--surface); font-size:15px; font-weight:700; line-height:1.2; color:var(--ink); white-space:nowrap; translate:-50% -50%; rotate:calc(var(--turn) * -1); animation:ax-wheel-back 44s linear infinite; }
@keyframes ax-wheel { from { rotate:var(--turn); } to { rotate:calc(var(--turn) + 360deg); } }
@keyframes ax-wheel-back { from { rotate:calc(var(--turn) * -1); } to { rotate:calc(var(--turn) * -1 - 360deg); } }
.ax-core-center { position:absolute; inset:20%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 20px; border-radius:50%; background:var(--blue); color:#fff; text-align:center; }
.ax-core-symbol .common_logo { width:30px; }
.ax-core-symbol svg { display:block; height:auto; }
.ax-core-center strong { margin:8px 0 8px; font-size:18px; font-weight:700; }
.ax-core-center ul { list-style:none; font-size:14px; line-height:1.7; }
.ax-core-center li b { font-weight:700; }
/* 서비스별 상자: 번호·이름·소개·제공 항목·링크. 상자가 넓으면 제공 항목을 오른쪽 칸으로 옮김. */
.ax-core-services { container-type:inline-size; }
.ax-core-list { display:grid; gap:var(--ax-gap,20px); list-style:none; margin:0; padding:0; }
/* 주소가 있는 상자는 전체가 링크. 포인터를 올리면 화살표만 오른쪽으로 움직임(사용자 요청). */
.ax-core-card { display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-areas:"no main" ". points" ". more"; gap:0 8px; padding:28px 32px; border:1px solid var(--tile-line); background:var(--tile); color:inherit; }
a.ax-core-card:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.ax-core-card .ax-more svg { transition:transform .25s ease; }
a.ax-core-card:hover .ax-more svg { transform:translateX(4px); }
.ax-core-list .ax-no { grid-area:no; padding-top:5px; font-family:var(--font-en); font-size:16px; font-weight:700; line-height:1.4; color:var(--accent); font-variant-numeric:tabular-nums; }
.ax-core-main { grid-area:main; }
.ax-core-list h3 { font-size:22px; font-weight:700; }
.ax-core-list .ax-keep { margin-top:6px; font-weight:500; line-height:1.7; color:var(--ink); }
.ax-core-points { grid-area:points; display:flex; flex-wrap:wrap; gap:2px 18px; list-style:none; margin-top:10px; font-size:15px; color:var(--muted); }
.ax-core-points li { position:relative; padding-left:12px; }
.ax-core-points li::before { content:''; position:absolute; left:0; top:.8em; width:4px; height:4px; background:var(--accent); }
.ax-core-list .ax-more { grid-area:more; margin-top:14px; padding-top:0; }
@container (min-width:680px) {
 .ax-core-card { grid-template-columns:44px minmax(0,1fr) minmax(0,1fr); grid-template-areas:"no main points" "no more points"; grid-template-rows:auto 1fr; gap:0 8px; }
 .ax-core-points { flex-direction:column; flex-wrap:nowrap; gap:4px; margin-top:4px; padding-left:var(--gap); }
 .ax-core-list .ax-more { align-self:end; }
}
@media(min-width:1560px) {
 /* 큰 화면: 문의 왼쪽 열과 FAQ 왼쪽 열을 같이 넓혀(너비의 28%) 제목이 어절마다 꺾이지 않게. 두 격자의 세로선은 계속 같음. */
 .ax-contact-g,body:has(.ax-block) .bl_factory-faq .faq-layout { grid-template-columns:minmax(340px,36%) minmax(0,1fr); }
 /* 큰 화면(설명 20px)에서 장 설명의 두 문장이 각각 한 줄에 들어가도록 폭을 넓힘(640 → 760px). */
 .ax-chapter-head.ax-chapter-stack > .ax-desc { max-width:760px; } /* 뒤에 오는 기본 규칙(700px)보다 우선하도록 특이도 올림 */
 /* 교육 우선 블록의 원 두 개: 큰 화면에서는 오른쪽 끝에 붙지 않도록 안쪽으로 당김(너비의 7%, 최대 160px). */
 .ax-creed > .ax-creed-cases { margin-right:clamp(40px,7vw,160px); } /* 뒤의 기본 규칙(margin:0)보다 우선하도록 특이도 올림 */
 .ax-core { align-items:center; }
 .ax-core-figure { flex-direction:row; align-items:center; gap:32px; }
 .ax-core-title { flex-shrink:0; }
}

/* 20-1. 교육 형식: 왼쪽에 제목(장 제목과 같은 크기, 바탕 위에 그대로), 오른쪽에 흰 상자 안의 형식 칸. */
/* 왼쪽 칸 너비는 위 비교표 배치(.ax-chapter-intro)와 같게 두어 흰 상자의 왼쪽 선이 표와 맞음. */
.ax-formats { display:grid; grid-template-columns:minmax(260px,min(34%,420px)) minmax(0,1fr); gap:var(--gap-2x); align-items:start; }
/* 왼쪽 제목은 오른쪽 상자의 안쪽 여백과 줄이 맞도록 위에 여백을 둠. */
.ax-formats-head { padding-top:40px; }
.ax-formats-head h3 { font-size:2.6rem; font-weight:400; line-height:1.4; text-wrap:balance; } /* 장 안의 큰 묶음 제목(교육 형식·도구 유형): 26px */
.ax-formats-head h3 b { font-weight:700; }
.ax-formats-head p { margin-top:20px; font-size:16px; line-height:1.8; color:var(--muted); } /* 큰 묶음 제목 아래 설명: 16px(장 설명 18px보다 한 단계 아래) */
.ax-formats-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; margin:0; padding:0; border:1px solid var(--tile-line); background:#fff; } /* 점무늬 띠 위에서도 칸은 흰색 */
.ax-formats-list li { display:flex; flex-direction:column; padding:40px 32px; }
.ax-formats-list li + li { border-left:1px solid var(--line); }
/* 네 칸은 2×2로 놓고 세로선·가로선으로 나눔. */
.ax-formats-list.ax-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ax-formats-list.ax-cols-2 li + li { border-left:0; }
.ax-formats-list.ax-cols-2 li:nth-child(2n) { border-left:1px solid var(--line); }
.ax-formats-list.ax-cols-2 li:nth-child(n+3) { border-top:1px solid var(--line); }
.ax-formats-list .ax-fi { display:block; margin:-4px 0 16px -4px; line-height:0; }
.ax-formats-list h4 { font-size:20px; font-weight:700; }
.ax-formats-list p { margin:12px 0 24px; color:var(--muted); }
/* 운영 기준은 두 줄 높이를 기본으로 확보해 세 칸의 선 위치가 맞음. <br>로 줄을 나눌 수 있음. */
.ax-formats-list .ax-meta { margin-top:auto; min-height:calc(1.65em * 2 + 16px); padding-top:16px; border-top:1px solid var(--line); font-size:14px; font-weight:500; line-height:1.65; color:var(--ink); }

/* 20-2. 전문 과정: 흰 띠 안에 과정 책 세 권. 사이트의 흰 타일과 1px 선, 장 번호와 같은 큰 숫자 표기를 쓰고, 겉표지 안쪽의 테두리 선으로 제본 느낌만 더함. */
/* 띠 배경: 화면 너비의 흰 바탕에 회색 디더링 점무늬(스크립트)와 오른쪽 바깥을 중심으로 한 가는 동심원 실선. 제목과 책은 본문 너비. */
.ax-shelf { position:relative; overflow:hidden; margin-top:var(--ax-space); padding:clamp(56px,6vw,88px) 0 clamp(48px,5vw,80px); border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; background-color:#fff; background-image:none; --ax-shelf-rings:repeating-radial-gradient(circle at var(--ax-cx,calc(100% + 140px)) var(--ax-cy,50%),transparent 0 118px,rgba(0,0,0,.07) 118px 119px); }
.ax-shelf > .ax-wrap { position:relative; z-index:1; }
.ax-shelf-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 28px; margin-bottom:36px; }
.ax-shelf-head h3 { font-size:2.6rem; font-weight:700; line-height:1.4; } /* 큰 묶음 제목(전문 과정): 26px */
.ax-shelf-head p { max-width:560px; font-size:16px; line-height:1.8; color:var(--muted); }
/* 책은 A4 비율이며, 포인터를 올리면 포인터 쪽으로 조금 기울어짐(사용자 요청). */
.ax-books { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; align-items:stretch; list-style:none; margin:0; padding:0; perspective:1400px; }
.ax-book { display:flex; border:1px solid #bdbdbd; background:#fff; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--rz,0px)); transition:transform .3s ease-out,box-shadow .3s ease-out; } /* 높이는 내용만큼(A4 비율 강제 해제) */
/* 포인터가 올라간 책은 앞으로 조금 나오고 아래에 그림자가 생겨 기울기가 더 드러남(사용자 요청). */
.ax-book.is-tilt { box-shadow:0 24px 48px rgba(0,0,0,.14); }
.ax-book-cover { position:relative; display:flex; flex-direction:column; flex:1; min-width:0; padding:36px 32px 32px; outline:1px solid #e6e6e6; outline-offset:-12px; }
.ax-book-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:28px; }
.ax-book-no { font-family:var(--font-en); font-size:48px; font-weight:400; line-height:1; color:var(--numeral); font-variant-numeric:tabular-nums; }
/* 왼쪽 위: 검정 바탕의 핵심 낱말 뒤에 파란 바탕의 분류 표시. */
.ax-book-tags { display:flex; align-items:center; gap:6px; }
.ax-book-key,.ax-book-kind { padding:0 10px; font-size:14px; font-weight:700; line-height:26px; color:#fff; }
.ax-book-key { background:#111; }
.ax-book-kind { background:var(--blue); }
.ax-book h4 { font-size:2.4rem; font-weight:700; line-height:1.4; color:var(--ink); text-wrap:balance; } /* 책 제목 24px, 한 줄 */
.ax-book-cover > p { margin-top:12px; color:var(--muted); text-wrap:balance; }
.ax-book dl { display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px 12px; margin-top:auto; padding-top:24px; font-size:15px; line-height:1.6; } /* 설명과 목록 사이 선 없이 여백만 */
.ax-book dt { color:var(--muted); }
.ax-book dd { color:var(--ink); }

/* 20-3. 블록 안의 흰 띠: 연회색·검정 블록 안에서 뒤쪽 묶음을 흰 바탕으로 두고 블록 바닥까지 이어 붙임. 색 값은 흰 배경 기준으로 되돌림. */
.ax-band-white { --surface:#fff; --ink:var(--gray-black-color,#111); --body:var(--gray-dark-color,#333); --muted:var(--gray-color,#666); --line:var(--gray-white-color,#ddd); --rule:var(--gray-dark-color,#333); --tile:#fff; --tile-line:var(--gray-white-color,#ddd); --tag:var(--white-gray-color,#f6f6f6); --numeral:var(--gray-white-color,#ddd); margin-top:var(--ax-space); margin-bottom:calc(-1 * clamp(72px,9vw,128px)); padding:clamp(56px,6vw,88px) 0 clamp(72px,9vw,128px); background:#fff; color:var(--body); }
/* 마무리 문구가 띠 안에 있으면 블록 아래 여백이 0이므로 띠도 그에 맞춤. */
.ax-band-white:has(> .ax-bridge) { margin-bottom:0; padding-bottom:0; }
/* 흰 띠 바로 뒤에 다리 문구가 오면 띠를 가격 띠에서 끝내고, 다리 문구와 세로선은 회색 바탕에 둠. */
.ax-band-white:has(+ .ax-bridge) { margin-bottom:0; padding-bottom:0; }
/* 파란 띠: 흰 띠와 같은 구조에 파란 바탕·흰 글자. 흰 띠 바로 뒤에 오면 사이 여백 없이 붙음. 시간선의 원은 흰 바탕에 파란 아이콘, 마지막 원은 흰 테두리. */
.ax-band-white.ax-band-blue { --surface:var(--blue); --ink:#fff; --body:rgba(255,255,255,.88); --muted:rgba(255,255,255,.72); --line:rgba(255,255,255,.35); --accent:#fff; background:var(--blue); color:var(--body); }
.ax-band-blue .ax-group-title,.ax-band-blue .ax-timeline h4 { color:#fff; }
.ax-band-blue .ax-timeline-mark { background:#fff; }
.ax-band-blue .ax-timeline-step:last-child .ax-timeline-mark { background:var(--blue); outline-color:#fff; } /* 안쪽도 파란 바탕이라 가로선이 비치지 않음 */
/* 첫 단계(무료 상담)만 노란 바탕 + 흰 테두리가 퍼져 나가는 펄스로 더 강조. 동작 줄이기에서는 펄스 없음. */
.ax-band-blue .ax-timeline-step:first-child .ax-timeline-mark { background:var(--yellow); }
.ax-band-blue .ax-timeline-step:first-child .ax-timeline-mark::after { content:''; position:absolute; inset:-2px; border:2px solid rgba(255,255,255,.9); border-radius:50%; animation:ax-pulse 2.2s cubic-bezier(.2,.6,.3,1) infinite; pointer-events:none; }
@keyframes ax-pulse { 0% { transform:scale(1); opacity:.9; } 70% { transform:scale(1.9); opacity:0; } 100% { transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .ax-band-blue .ax-timeline-step:first-child .ax-timeline-mark::after { animation:none; display:none; } }
.ax-band-white + .ax-band-white { margin-top:0; }
/* WHY SADARI 흰 띠: 글과 수치 아래에 사다리스쿨 단체 사진 띠(.ax-proof-photo)가 깔림. 수치 칸이 사진 위쪽에 70px 겹침. 블록 첫 띠라 위 여백 없이 블록 맨 위부터.
   사진(cover-people.jpg, 1376×768)은 아래쪽을 기준으로 맞추고, 띠의 가로세로 비율을 1376:518로 고정해 화면 너비와 무관하게 사진의 같은 부분(위에서 250px 아래)만 보이게 함. 250px은 들어 올린 봉지·손이 시작되는 269px보다 위라 사람은 모두 수치 칸 아래에 들어옴(머리 윗선은 364px). 좁은 화면(637px 미만)은 최소 240px 높이로 가로를 잘라 보여 줌. */
.ax-band-white.ax-band-mid.ax-proof-cover { --blue-text:var(--blue); padding-bottom:0; background:#fff; }
.ax-proof-cover > .l_wrapper { position:relative; z-index:1; }
.ax-proof-photo { position:relative; z-index:0; overflow:hidden; aspect-ratio:1376 / 518; min-height:240px; margin-top:-70px; background:#fff; }
/* 사진은 ::before에 두고, 화면에 들어오면(is-on) 아래 가운데를 기준으로 10초 동안 원본 크기에서 6% 커짐. ::after는 흰색 반투명 덮개(톤 다운)이고 위쪽 120px은 흰색으로 풀어 흰 띠와 이음새가 안 보이게 함. */
.ax-proof-photo::before { content:''; position:absolute; inset:0; background:url(../images/ax/cover-people.jpg) center bottom / cover no-repeat; transform-origin:50% 100%; transform:scale(1); transition:transform 10s cubic-bezier(.2,.6,.2,1); }
.ax-proof-photo.is-on::before { transform:scale(1.06); }
.ax-proof-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(#fff,rgba(255,255,255,.4) 120px); }
@media (prefers-reduced-motion: reduce) { .ax-proof-photo::before { transition:none; } .ax-proof-photo.is-on::before { transform:none; } }
/* 수치 칸: 흰색 반투명 + 뒷배경 흐림(사진 위에서 읽히게). */
.ax-proof-cover .ax-nums { background:rgba(255,255,255,.35); }
.ax-proof-cover .ax-nums .ax-tile { background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.ax-band-white.ax-band-first { margin-top:calc(-1 * var(--ax-sec-pad,clamp(72px,9vw,128px))); }
/* 옅은 회색 띠(AI 교육 장 머리 + 비교표): 블록 맨 위부터 화면 너비로 깔리고, 바로 뒤의 흰 띠는 여백 없이 붙음. */
.ax-band-gray { background:var(--white-gray-color,#f6f6f6); padding-bottom:clamp(56px,6vw,88px); }
.ax-band-gray.ax-band-first { margin-top:calc(-1 * var(--ax-sec-pad,clamp(72px,9vw,128px))); padding-top:var(--ax-sec-pad,clamp(72px,9vw,128px)); }
.ax-band-gray + .ax-band-white { margin-top:0; }
/* 블록 중간의 흰 띠: 아래로 이어지는 내용이 있으므로 음수 아래 여백 없이 위아래 같은 여백. */
.ax-band-white.ax-band-mid { margin-bottom:0; padding-bottom:clamp(56px,6vw,88px); }
.ax-band-white.ax-band-dither.ax-band-lined { border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; background-image:none; } /* 교육 형식 띠 위아래 옅은 회색 선. 동심원 실선은 없음(점무늬만) */
/* 디더링 흰 띠: 전문 과정 띠와 같은 회색 점무늬 캔버스와 동심원 실선. 내용은 캔버스 위에 둠. */
.ax-band-white.ax-band-dither { position:relative; overflow:hidden; background-image:repeating-radial-gradient(circle at var(--ax-cx,calc(100% + 140px)) var(--ax-cy,50%),transparent 0 118px,rgba(0,0,0,.07) 118px 119px); }
.ax-band-white.ax-band-dither > .l_container { position:relative; }
/* 전문 과정 띠 바로 뒤의 흰 띠: 둘 다 흰색이라 사이의 회색 여백을 없애고 위 여백만 조금 둠. */
.ax-shelf + .ax-band-white { margin-top:0; padding-top:clamp(32px,3.5vw,48px); }
/* 검정 장의 제목 강조 부분은 파란색. */
/* 검정 배경의 밝은 파랑(#637BFF)은 보랏빛이 돌아, 개발 장의 글자 파랑(제목 강조·사례 제목)은 붉은 기를 뺀 파랑으로 통일. */
.ax-development,.ax-proof { --blue-text:#4D8DFF; }
.ax-proof .ax-title b { color:var(--blue-text); }
.ax-development .ax-case-title { color:#fff; } /* 사례 제목은 흰색(파랑은 검정 바탕에서 탁해 보임) */
.ax-title .ax-point { color:var(--blue-text); } /* 제목 안 포인트 줄(예: AI 도구 개발 장의 `필요한 AI 도구,`) */

/* 20-4. 장 제목 아래에 설명을 두는 머리글, 그리고 디더링 배경을 까는 블록. */
.ax-chapter-stack { display:block; }
.ax-chapter-stack > .ax-desc { max-width:700px; margin-top:20px; } /* 장 설명 두 문장이 각각 한 줄에(18px 기준) */
/* 진행 과정 시간선: 원 안의 아이콘을 한 줄 선으로 잇고, 마지막 단계의 원은 흰 바탕에 파란 선. */
/* 진행 과정 묶음: 제목 위 4px 선 없음(회색 띠 안이라 선으로 나누지 않음). */
.ax-timeline-group { padding-left:24px; padding-right:24px; } /* 띠 안에서 제목과 단계가 좌우로 살짝 들어오게 */
.ax-timeline-group > .ax-group-title { padding:0 0 52px; font-size:2.6rem; font-weight:700; line-height:1.4; } /* 큰 묶음 제목(진행 과정): 26px */
.ax-timeline-group > .ax-group-title::before { display:none; }
.ax-timeline { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px; list-style:none; margin:0; padding:0; }
.ax-timeline::before { content:''; position:absolute; top:28px; left:28px; right:calc((100% - 4 * 32px) / 5 - 28px); height:1px; background:var(--line); } /* 첫 원 가운데에서 마지막 원 가운데까지만(마지막 원 오른쪽 선 없음) */
.ax-timeline-step { position:relative; }
.ax-timeline-link { position:absolute; inset:-12px; z-index:1; } /* 첫 단계(무료 상담) 전체를 덮는 링크: 누르면 문의로 */
.ax-timeline-link:focus-visible { outline:2px solid #fff; outline-offset:0; }
.ax-timeline-step:has(> .ax-timeline-link) { cursor:pointer; }
.ax-timeline-mark { position:relative; display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:24px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 8px var(--surface); }
.ax-timeline-mark lord-icon { display:block; }
.ax-timeline-step:last-child .ax-timeline-mark { background:#fff; outline:2px solid var(--blue); outline-offset:-2px; }
.ax-timeline .ax-step-no { color:var(--accent); font-weight:700; }
.ax-timeline h4 { font-size:20px; font-weight:700; }
.ax-timeline p { margin-top:8px; font-size:15px; color:var(--muted); text-wrap:balance; }

/* 20-5. 산출물 문서 보기: 왼쪽 목록(탭)과 오른쪽 큰 화면. 고른 항목은 번호·제목이 파랗고, 자동 넘김 중에는 아래 선이 차오름. */
.ax-docs { display:grid; grid-template-columns:minmax(280px,36%) minmax(0,1fr); gap:var(--gap-2x); align-items:start; }
.ax-docs-list { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.ax-docs-tab { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:0 8px; width:100%; padding:24px 0; border:0; border-bottom:1px solid var(--line); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.ax-docs-tab:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.ax-docs-no { padding-top:3px; font-family:var(--font-en); font-size:16px; font-weight:400; line-height:1.6; color:var(--numeral); font-variant-numeric:tabular-nums; }
.ax-docs-title { display:block; font-size:18px; font-weight:700; line-height:1.4; color:var(--ink); } /* 묶음 제목(20px)보다 한 단계 작게 */
.ax-docs-desc { display:block; margin-top:6px; font-size:15px; line-height:1.7; color:var(--muted); }
.ax-docs-tab.is-on .ax-docs-no,.ax-docs-tab.is-on .ax-docs-title { color:var(--accent); }
.ax-docs-bar { position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; }
.ax-docs-caption { display:none; margin:14px 0 0; font-size:15px; line-height:1.7; color:var(--muted); text-align:center; text-wrap:balance; } /* 좁은 화면에서만 보이는 고른 문서 설명 */
.ax-docs.is-timing .ax-docs-tab.is-on .ax-docs-bar { transform:scaleX(1); transition:transform var(--ax-dwell,6s) linear; }
.ax-docs-stage { position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--blue); }
/* 보이지 않는 패널은 visibility로 숨겨 포인터를 받지 않게 함(겹친 패널이 종이 기울기 이벤트를 가로채지 않도록). */
.ax-docs-panel { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease,visibility 0s linear .5s; }
.ax-docs-panel.is-on { opacity:1; visibility:visible; transition-delay:0s; }
.ax-docs-img { display:block; width:100%; height:100%; object-fit:cover; }

/* 20-6. 문서 데모: 440px 기준으로 그린 종이를 스크립트가 상자에 맞춰 축소함. 보일 때(.is-live) 도넛·막대·행·도장이 차례로 나타남. */
/* 상자 안에서 종이는 포인터 쪽으로 기울고(최대 6도), 누르면 처음부터 다시 움직임. 보일 때 종이가 아래에서 떠오르고 뒷장이 조금 늦게 따라옴. */
.ax-docs-panel-demo { display:flex; align-items:center; justify-content:center; background:transparent; }
/* 세 문서 공통 가로 종이 620×438px(A4 가로 비율). 파란 무대 위에 상하좌우 같은 여백으로 놓임(스크립트가 맞춤). */
.ax-paper { position:absolute; left:50%; top:50%; width:620px; transform:translate(-50%,-50%); transform-origin:center; font-size:14px; line-height:1.5; color:#111; cursor:pointer; }
.ax-paper:focus-visible { outline:2px solid var(--blue); outline-offset:8px; }
.ax-paper.is-reset,.ax-paper.is-reset *,.ax-paper.is-reset *::before,.ax-paper.is-reset *::after { transition:none !important; } /* 다시 보기 직전 처음 상태로 즉시 되돌림 */
/* 뒷장: --k(1~3)만큼 오른쪽 아래로 밀리고 살짝 돌아가 여러 장이 겹친 것처럼 보임. 뒤로 갈수록 옅음. 종이가 보일 때 장마다 조금씩 늦게 따라옴. */
.ax-paper-sheet { --k:1; position:absolute; inset:calc(var(--k) * 7px) calc(var(--k) * -7px) calc(var(--k) * -7px) calc(var(--k) * 7px); background:rgba(255,255,255,calc(.26 - (var(--k) - 1) * .08)); rotate:calc(var(--k) * .45deg); transform-origin:bottom left; translate:0 32px; opacity:0; transition:translate .7s cubic-bezier(.2,.7,.2,1) calc(var(--k) * .08s),opacity .5s ease calc(var(--k) * .08s); }
.ax-paper-page { position:relative; display:flex; flex-direction:column; height:438px; overflow:hidden; padding:32px 40px 24px; background:#fff; box-shadow:0 24px 48px rgba(0,10,80,.35); translate:0 40px; opacity:0; transition:translate .7s cubic-bezier(.2,.7,.2,1),opacity .5s ease; }
.ax-paper.is-live .ax-paper-sheet,.ax-paper.is-live .ax-paper-page { translate:0 0; opacity:1; }
/* 막대에 포인터를 올리면 그 항목이 파랗게 바뀌고 도넛이 그 비율로 잠깐 바뀜. */
.ax-paper-bars li.is-peek span,.ax-paper-bars li.is-peek b { color:var(--blue); font-weight:700; }
.ax-paper.is-peek .ax-paper-arc { transition-duration:.5s; transition-delay:0s; }
/* 내용이 차근차근 등장: data-ax-step 요소는 --i 순서로 0.16초 간격으로 나타남. */
.ax-paper [data-ax-step] { opacity:0; translate:0 8px; transition:opacity .4s ease calc(.35s + var(--i,0) * .16s),translate .4s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i,0) * .16s); }
.ax-paper.is-live [data-ax-step] { opacity:1; translate:0 0; }
.ax-paper-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.ax-paper-head .ax-paper-sub { margin:0 0 4px; text-align:right; }
.ax-paper-cols { flex:1; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:28px 32px; align-items:center; }
.ax-paper-kicker { font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.16em; color:var(--blue); }
.ax-paper-title { margin-top:8px; font-size:26px; font-weight:700; line-height:1.3; color:#111; }
.ax-paper-sub { margin-top:6px; font-size:14px; color:#666; }
.ax-paper-rule { height:3px; margin:16px 0 20px; background:#111; }
.ax-paper-chart { display:grid; grid-template-columns:128px minmax(0,1fr); gap:14px; align-items:center; }
.ax-paper-donut { position:relative; width:128px; height:128px; }
.ax-paper-donut svg { width:100%; height:100%; transform:rotate(-90deg); }
.ax-paper-track { fill:none; stroke:#e4e6ee; stroke-width:16; }
.ax-paper-arc { fill:none; stroke:var(--blue); stroke-width:16; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .8s; }
.ax-paper.is-live .ax-paper-arc { stroke-dashoffset:calc(326.7 * (1 - var(--ax-ratio,0))); }
.ax-paper-donut-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.ax-paper-donut-label b { font-size:28px; font-weight:700; line-height:1.1; color:var(--blue); font-variant-numeric:tabular-nums; }
.ax-paper-donut-label > span { margin-top:4px; font-size:12px; color:#666; }
.ax-paper-bars { list-style:none; margin:0; padding:0; }
.ax-paper-bars li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; align-items:baseline; }
.ax-paper-bars li + li { margin-top:14px; }
.ax-paper-bars span { font-size:14px; color:#333; white-space:nowrap; }
.ax-paper-bars b { font-size:14px; font-weight:500; color:#333; font-variant-numeric:tabular-nums; }
.ax-paper-bars i { grid-column:1 / -1; display:block; height:10px; background:linear-gradient(var(--blue),var(--blue)) left / 0% 100% no-repeat,#e4e6ee; transition:background-size 1s cubic-bezier(.2,.7,.2,1) calc(.9s + var(--i,0) * .15s); }
.ax-paper.is-live .ax-paper-bars i { background-size:calc(var(--ax-ratio,0) * 100%) 100%,auto; }
.ax-paper-rows { list-style:none; margin:0; padding:0; border-top:2px solid #111; }
.ax-paper-rows li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #e4e6ee; font-size:14px; opacity:0; translate:0 6px; transition:opacity .4s ease calc(1.1s + var(--i,0) * .18s),translate .4s ease calc(1.1s + var(--i,0) * .18s); }
.ax-paper.is-live .ax-paper-rows li { opacity:1; translate:0 0; }
.ax-paper-tag { padding:0 8px; background:var(--blue); font-size:12px; font-weight:700; font-style:normal; line-height:22px; color:#fff; }
.ax-paper-tag-ink { background:#111; }
.ax-paper-tag-soft { background:var(--blue-soft); color:var(--blue); }
.ax-paper-foot { display:flex; justify-content:space-between; margin-top:auto; padding-top:16px; font-size:12px; color:#999; }
/* 교육 계획표: 결재란은 제목 위 오른쪽에 따로 두어 겹치지 않음. */
.ax-paper-sign { flex:0 0 auto; margin:0; border-collapse:collapse; font-size:12px; text-align:center; }
.ax-paper-sign th,.ax-paper-sign td { width:56px; border:1px solid #bbb; }
.ax-paper-sign th { height:22px; background:#f3f4f8; font-weight:700; color:#333; }
.ax-paper-sign td { height:34px; color:var(--blue); }
.ax-paper-sign svg { width:18px; height:18px; vertical-align:middle; }
.ax-paper-check { stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .5s ease .7s; }
.ax-paper.is-live .ax-paper-check { stroke-dashoffset:0; }
.ax-paper-plan .ax-paper-title { margin-top:0; font-size:24px; }
/* 도장은 오른쪽 아래, 주석은 왼쪽 아래. */
.ax-paper-plan .ax-paper-page { padding-bottom:30px; }
/* AI 도입 로드맵: 가로 종이. 분기 4칸 위에 막대(--s~--e, 분기 단위)와 마일스톤(--p). 보일 때 줄 순서대로 막대가 왼쪽에서 자라고 마일스톤이 떠오름. */
.ax-gantt { --label:88px; margin-top:4px; }
.ax-gantt-q { display:grid; grid-template-columns:var(--label) repeat(4,minmax(0,1fr)); padding:8px 0 8px; font-size:14px; color:#999; text-align:center; }
.ax-gantt-row { display:grid; grid-template-columns:var(--label) minmax(0,1fr); min-height:72px; border-top:1px solid #e6e6e6; }
.ax-gantt-label { padding:11px 8px 0 0; line-height:1.4; }
.ax-gantt-label b { display:block; font-size:15px; font-weight:700; color:#111; }
.ax-gantt-label span { display:block; margin-top:2px; font-size:14px; color:#999; }
.ax-gantt-track { position:relative; overflow:hidden; background-image:repeating-linear-gradient(to bottom,#ddd 0 4px,transparent 4px 8px),repeating-linear-gradient(to bottom,#ddd 0 4px,transparent 4px 8px),repeating-linear-gradient(to bottom,#ddd 0 4px,transparent 4px 8px),repeating-linear-gradient(to bottom,#ddd 0 4px,transparent 4px 8px); background-size:1px 100%; background-repeat:no-repeat; background-position:0 0,25% 0,50% 0,75% 0; }
.ax-gantt-bar { position:absolute; top:9px; left:calc(var(--s) / 4 * 100%); width:calc((var(--e) - var(--s)) / 4 * 100%); height:36px; padding:0 12px; border-radius:18px; font-size:14px; font-weight:700; line-height:36px; white-space:nowrap; transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(.8s + var(--i,0) * .45s); }
.ax-gantt-edu { background:var(--blue); color:#fff; }
.ax-gantt-dev { background:#eef0ff; box-shadow:inset 0 0 0 1px #c9cfff; color:var(--blue); }
.ax-gantt-all { background:#111; color:#fff; }
.ax-gantt-ms { position:absolute; top:49px; left:calc(var(--p) / 4 * 100%); padding-left:18px; font-size:14px; font-weight:700; line-height:1.3; color:var(--blue); white-space:nowrap; opacity:0; translate:0 6px; transition:opacity .35s ease calc(1.5s + var(--i,0) * .45s),translate .35s ease calc(1.5s + var(--i,0) * .45s); }
.ax-gantt-ms::before { content:''; position:absolute; left:0; top:50%; width:9px; height:9px; background:var(--blue); transform:translateY(-50%) rotate(45deg); }
/* 끝 쪽 마일스톤: 글자가 오른쪽 끝에서 잘리지 않게 마름모 왼쪽에 둠. */
.ax-gantt-ms-end { left:auto; right:calc((4 - var(--p)) / 4 * 100%); padding:0 18px 0 0; }
.ax-gantt-ms-end::before { left:auto; right:0; }
.ax-gantt-label,.ax-paper-legend { opacity:0; transition:opacity .4s ease calc(.7s + var(--i,0) * .45s); }
.ax-paper-legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:auto; padding-top:14px; border-top:1px solid #e6e6e6; font-size:14px; color:#666; transition-delay:2.8s; }
.ax-paper-legend span { display:inline-flex; align-items:center; gap:8px; }
.ax-paper-legend i { width:14px; height:14px; border-radius:4px; }
.ax-paper-legend-ms { margin-left:auto; }
.ax-paper-legend-ms i { width:9px; height:9px; border-radius:0; background:#555; transform:rotate(45deg); }
.ax-paper.is-live .ax-gantt-bar { transform:scaleX(1); }
.ax-paper.is-live .ax-gantt-ms,.ax-paper.is-live .ax-gantt-label,.ax-paper.is-live .ax-paper-legend { opacity:1; translate:0 0; }
.ax-paper-table { width:100%; border-collapse:collapse; font-size:14px; }
.ax-paper-table th,.ax-paper-table td { padding:8px; border:1px solid #d8dbe4; text-align:center; }
.ax-paper-table th { background:#f3f4f8; font-weight:700; color:#333; }
.ax-paper-table tbody tr { opacity:0; transition:opacity .35s ease calc(.9s + var(--i,0) * .16s),background-color .4s ease 1.8s,color .4s ease 1.8s; }
.ax-paper.is-live .ax-paper-table tbody tr { opacity:1; }
.ax-paper.is-live .ax-paper-hi { background:var(--blue-soft); color:var(--blue); font-weight:700; }
.ax-paper-note { margin-top:auto; padding-top:18px; font-size:12px; color:#999; }
.ax-paper-stamp { position:absolute; right:40px; bottom:22px; display:grid; place-items:center; width:72px; height:72px; border:2px solid var(--blue); border-radius:50%; font-size:12px; font-weight:700; line-height:1.3; text-align:center; color:var(--blue); rotate:-12deg; opacity:0; scale:1.4; transition:opacity .35s ease 1.6s,scale .35s cubic-bezier(.2,.9,.3,1.4) 1.6s; }
.ax-paper.is-live .ax-paper-stamp { opacity:1; scale:1; }

/* 21. 장 제목을 왼쪽에, 첫 내용을 오른쪽에 두는 배치. */
.ax-chapter-intro { display:grid; grid-template-columns:minmax(260px,min(34%,420px)) minmax(0,1fr); gap:var(--gap-2x); align-items:start; }
.ax-chapter-intro > .ax-chapter-side { display:block; margin-bottom:0; }
.ax-chapter-intro > .ax-chapter-side > .ax-desc { margin-top:20px; }
.ax-chapter-intro > .ax-group { margin-top:0; }

/* 22. 출강 과정 카드와 기관 로고. 로고는 스크립트가 여백을 잘라 내고 면적을 맞춤. */
.ax-course.ax-tile { padding:0; --tag:var(--white-gray-color,#f6f6f6); }
.ax-course .ax-shot-cap { max-width:none; padding:22px 24px 26px; }
.ax-org { min-height:40px; }
.ax-org-mark { display:block; overflow:hidden; flex-shrink:0; }
.ax-org-logo { height:26px; max-width:130px; }
.ax-org-mark.ax-fit .ax-org-logo { max-width:none; object-fit:fill; }

/* 23. 교육 우선 원칙: 한 문장의 주장과 원 두 개로 요약한 낮은 블록. 반쪽 원은 도구만 도입한 경우, 채운 원은 교육과 함께 도입한 경우. */
/* 배경: "지속가능한 AX" 원을 중심으로 퍼지는 가는 동심원 실선 위에, 스크립트가 그린 디더링 점무늬(같은 중심의 띠)를 겹침. 중심은 스크립트가 --ax-cx·--ax-cy로 넘김. */
.ax-studio.ax-sec { position:relative; overflow:hidden; padding:clamp(56px,6.5vw,96px) 0; background-image:repeating-radial-gradient(circle at var(--ax-cx,calc(100% + 140px)) var(--ax-cy,50%),transparent 0 176px,rgba(255,255,255,.16) 176px 177px); }
.ax-studio.ax-sec > .ax-wrap { position:relative; z-index:1; }
/* 왼쪽부터 깔리는 어두운 그라디언트: 점무늬·동심원 위, 글 아래. 글이 있는 왼쪽을 살짝 가라앉혀 읽기 쉽게. */
.ax-studio.ax-sec::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,rgba(17,17,17,.78) 0,rgba(17,17,17,.42) 32%,rgba(17,17,17,0) 62%); pointer-events:none; }
/* AI 도구 개발 블록: 검정 바탕 전체에 흰 점무늬 디더링. 장 머리(제목·설명) 뒤에는 블록 왼쪽 끝부터 어두운 그라디언트를 깔아 점무늬 위에서도 글이 또렷하게. 안의 흰 띠·파란 띠는 캔버스 위에 놓임. */
.ax-development.ax-sec { position:relative; overflow:hidden; }
.ax-development.ax-sec > :not(.ax-dither):not(dialog) { position:relative; z-index:1; } /* dialog(사례 모달)는 fixed를 유지해야 하므로 제외 */
.ax-development .ax-chapter-head { position:relative; }
/* 장 머리 뒤 어두운 덮개: 오른쪽으로 옅어지는 그라디언트에 더해, 아래쪽 200px은 마스크로 서서히 사라지게 해 점무늬와 경계가 지지 않게 함. */
.ax-development .ax-chapter-head::before { content:''; position:absolute; z-index:-1; left:calc(50% - 50vw); right:-18vw; top:calc(-1 * clamp(72px,9vw,128px)); bottom:-220px; background:linear-gradient(to right,rgba(17,17,17,.94) 0,rgba(17,17,17,.8) 36%,rgba(17,17,17,.35) 70%,rgba(17,17,17,0) 100%); -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 200px),transparent 100%); mask-image:linear-gradient(to bottom,#000 calc(100% - 200px),transparent 100%); pointer-events:none; }
.ax-dither { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.ax-creed { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--gap-2x); align-items:center; }
.ax-creed-copy .ax-desc { max-width:640px; text-wrap:balance; }
.ax-creed-copy .ax-desc b { font-weight:700; color:var(--ink); }
.ax-creed-cases { display:grid; grid-template-columns:repeat(2,216px); gap:56px; list-style:none; margin:0; padding:0; }
/* 비교 항목은 원·이름·설명을 가운데 정렬. */
.ax-creed-case { text-align:center; }
.ax-creed-disc { display:flex; width:148px; aspect-ratio:1; margin:0 auto 24px; border-radius:50%; overflow:hidden; }
.ax-creed-disc > span { display:grid; place-items:center; flex:1; font-size:18px; font-weight:700; line-height:1.2; }
/* 글자는 반원의 무게 중심에 맞춰 원의 가운데 쪽으로 조금 당김. */
.ax-creed-first { padding-left:12px; background:var(--blue); color:#fff; }
.ax-creed-second { padding-right:12px; background:#fff; color:#111; }
.ax-creed-half .ax-creed-first { background:#262626; }
/* 화면에 들어오면 비어 있던 반쪽이 파란색으로 채워짐. */
.ax-creed.is-ready .ax-creed-whole .ax-creed-first { background:#262626; color:transparent; transition:background-color .9s ease .4s,color .5s ease 1s; }
.ax-creed.is-ready.is-on .ax-creed-whole .ax-creed-first { background:var(--blue); color:#fff; }
.ax-creed-case b { display:block; font-size:20px; font-weight:700; color:var(--ink); }
.ax-creed-case p { margin-top:8px; font-size:15px; line-height:1.7; color:var(--muted); text-wrap:balance; }

/* 19. 화면 너비별 조정 */
/* 업무 분해: 1300px 이하에서는 움직이는 릴 대신 표(문단열 말풍선 유지). 릴은 1100~1300px에서도 말풍선·처방 칸이 겹쳐 일찍 바꿈. */
@media(max-width:1300px) {
 .ax-reel { display:none; }
 .ax-reel-static { display:block; }
}
@media(max-width:1100px) {
 .ax-chapter-head,.ax-split-head { grid-template-columns:1fr; }
 .ax-cflow { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ax-cflow-step::after { display:none; }
 .ax-chapter-head > .ax-desc,.ax-split-head > .ax-desc { margin-top:20px; }
 .ax-rail--lg { --ax-slide:60%; }
 .ax-rail--md { --ax-slide:48%; }
 .ax-rail--tiles { --ax-slide:min(320px,80%); }
 /* 좁은 화면: 원 도식은 자리가 충분할 때(1101px 이상)만 보이고, 여기서는 숨김. */
 .ax-rings { display:none; }
 .ax-hero-cover { padding-bottom:80px; }
 .ax-core { grid-template-columns:1fr; gap:48px; }
 /* 태블릿: 제목은 왼쪽, 원 도식은 오른쪽에 나란히(한 칸 격자 안에서 가로 배치). */
 .ax-core-figure { flex-direction:row; align-items:center; justify-content:space-between; gap:32px; }
 .ax-core-title { flex:1 1 auto; min-width:0; }
 .ax-docs { grid-template-columns:1fr; gap:24px; }
 .ax-docs-stage { order:-1; }
 /* 문서 탭: 세 칸 버튼(번호 + 이름)으로, 설명은 아래 별도 문단(.ax-docs-caption, 스크립트가 채움). */
 .ax-docs-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; border-top:0; }
 .ax-docs-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:72px; padding:12px 8px; border:1px solid var(--line); text-align:center; }
 .ax-docs-tab.is-on { border-color:var(--blue); background:var(--blue-soft); }
 .ax-docs-no { padding:0; font-size:14px; }
 .ax-docs-title { font-size:16px; }
 .ax-docs-desc { display:none; }
 .ax-docs-bar { left:-1px; right:-1px; }
 .ax-docs-caption { display:block; }
 /* 교육 현장 묶음 머리: 보조 문구(그 외 출강)는 제목 아래 줄로. */
 .ax-group-head > .ax-etc { flex-basis:100%; max-width:none; }
 /* 업무 분해 묶음 머리: 제목과 `업무 분해 분석 예시`를 한 줄로 이어 씀(공간이 모자라면 글처럼 이어서 꺾임). */
 .ax-consulting .ax-group-head { display:block; }
 .ax-consulting .ax-group-head > .ax-group-title,.ax-consulting .ax-group-head > .ax-etc { display:inline; }
 .ax-consulting .ax-group-head > .ax-etc { margin-left:10px; }
 /* 대표 강사 띠: 사진 인물이 글 영역까지 들어오므로 어둡게 덮고 인물을 오른쪽으로. */
 .ax-team-band { background-position:70% center; }
 .ax-team-band::before { content:''; position:absolute; inset:0; background:rgba(17,17,17,.78); }
 .ax-timeline { grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 24px; }
 .ax-timeline::before { display:none; }
 /* 세 칸 격자에서도 단계 사이 선: 각 단계의 원 오른쪽에서 다음 원까지(행의 마지막 칸과 맨 마지막 단계는 선 없음). */
 .ax-timeline-step::before { content:''; position:absolute; top:28px; left:56px; width:calc(100% - 56px + 24px); height:1px; background:var(--line); }
 .ax-timeline-step:nth-child(3n)::before,.ax-timeline-step:last-child::before { display:none; }
 .ax-creed { grid-template-columns:1fr; gap:48px; justify-items:center; text-align:center; } /* 태블릿부터 가운데 정렬 */
 .ax-creed-copy .ax-desc { margin-left:auto; margin-right:auto; }
 .ax-creed-cases { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; width:100%; max-width:560px; }
 .ax-core-ring { flex:0 0 auto; width:min(46%,400px); }
 .ax-chapter-intro { grid-template-columns:1fr; gap:40px; }
 .ax-formats { grid-template-columns:1fr; gap:40px; }
 .ax-formats-head { padding-top:0; }
 .ax-books { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ax-chapter-intro > .ax-chapter-side { position:static; }
 .ax-nums { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ax-contact-g,.ax-section-layout { grid-template-columns:1fr; gap:40px; }
 .ax-contact-g > :first-child,.ax-section-layout > .ax-head { position:static; }
 /* 사례 모달 본문 네 칸은 태블릿부터 두 칸씩(칸이 좁아 글이 어절마다 꺾였음). */
 /* 릴: 16:7 비율이면 내용이 잘리므로 내용 높이에 맞추고, 첫 장면의 큰 질문은 머리 아래 고정 위치에. */
 .ax-reel-screen { aspect-ratio:auto; min-height:460px; }
 .ax-reel-screen > .ax-reel-ask { top:104px; font-size:clamp(22px,2.6vw,28px); }
 /* 레일 보조 문구는 점 옆에 두면 두 줄로 꺾이므로 아래 줄로. */
 .ax-rail-note { flex-basis:100%; max-width:none; margin:12px 0 0; line-height:1.6; }
}
@media(max-width:820px) {
 .ax-check { grid-template-columns:1fr; }
 .ax-team-sign { height:48px; }
 .ax-sum { grid-template-columns:1fr; }
 .ax-sum > div + div { border-left:0; border-top:1px solid var(--line); }
 .ax-cflow { grid-template-columns:1fr; }
 .ax-reel-screen { padding:28px 20px 84px; }
 .ax-reel-talk { right:20px; left:auto; bottom:16px; width:44px; height:44px; }
 .ax-reel-face-s { width:44px; height:44px; }
 /* 표 디자인 유지(세 칸): 단계 이름 | 시간 막대 | 처방. 칸을 비율로 두고 글자를 줄이며, 판정 꼬리표는 막대 아래 조각 시작점에. */
 .ax-reel-row,.ax-reel-sum-row,.ax-reel-scale { grid-template-columns:minmax(96px,.95fr) minmax(0,1.3fr) minmax(92px,.95fr); column-gap:12px; align-items:start; }
 .ax-reel-row .ax-reel-track::before,.ax-reel-row .ax-reel-track::after { top:-12px; bottom:-70px; } /* 줄 높이(최대 104px)만큼 */
 .ax-reel-ticks i { font-size:12px; }
 .ax-reel-screen.from-1 .ax-reel-row { max-height:104px; }
 .ax-reel-lab { padding:4px 0; }
 .ax-reel-lab b { font-size:14px; }
 .ax-reel-lab small { white-space:normal; }
 .ax-reel-track { height:16px; margin-top:8px; }
 .ax-reel-tag,.ax-reel-row[data-tag="left"] .ax-reel-tag { top:calc(100% + 6px); left:calc(var(--x,0) * 100%); right:auto; translate:0 0; padding:0 6px; font-size:14px; line-height:20px; }
 .ax-reel-screen.is-4 .ax-reel-tag,.ax-reel-screen.is-4 .ax-reel-row[data-tag="left"] .ax-reel-tag { left:calc(var(--xa,0) * 100%); right:auto; transition:left 2.8s cubic-bezier(.2,.85,.25,1.04) .8s; }
 .ax-reel-rx { padding-top:4px; font-size:14px; }
 .ax-reel-sum-row { align-items:center; }
 .ax-reel-sum .ax-reel-track { height:20px; margin-top:0; }
 .ax-reel-sum-row { padding-bottom:22px; } /* 아래 두 줄 꼬리표 자리 */
 .ax-reel-screen > .ax-reel-ask { left:20px; right:20px; top:124px; font-size:22px; } /* 머리 아래 */
 .ax-reel-screen > .ax-reel-ask-after { top:auto; right:74px; left:auto; max-width:calc(100% - 94px); padding:10px 14px; font-size:18px; } /* 문단열 말풍선 자리(위 규칙보다 뒤에 두어 우선) */
 /* 결과 카드는 화면 흐름 안에 전체 너비로(절대 배치 규칙보다 우선하도록 같은 선택자). 결과 장면 전에는 높이 0으로 자리도 차지하지 않고, 결과 장면에서 4.6초 뒤 펼쳐지며 나타남. relative라 어두운 덮개(z-index 2) 위에 놓임. */
 .ax-reel-screen > .ax-reel-result { position:relative; left:auto; top:auto; width:auto; max-height:0; margin-top:0; padding-top:0; padding-bottom:0; overflow:hidden; translate:none !important; transition:opacity 1s ease 4.6s,max-height .8s ease 4.6s,margin-top .8s ease 4.6s,padding .8s ease 4.6s; }
 .ax-reel-screen.is-4 > .ax-reel-result { max-height:720px; margin-top:16px; padding:4px 0 0; }
 .ax-reel-result { gap:14px; }
 .ax-reel-face { width:72px; height:72px; box-shadow:0 0 0 6px rgba(99,123,255,.28),0 12px 30px rgba(0,0,0,.5); }
 .ax-reel-name b { font-size:15px; }
 .ax-reel-bubble { margin-top:0; padding:16px 18px 16px; border-radius:18px; }
 .ax-reel-bubble::before { top:26px; }
 .ax-reel-headline { font-size:18px; }
 .ax-reel-say { font-size:15px; }
 .ax-reel-screen.is-4 .ax-reel-rows { display:none; } /* 좁은 화면의 결과 장면: 단계 줄은 접고 합계(전후 비교)와 카드만 */
 /* 합계는 화면 아래쪽에 붙여 첫 장면의 큰 질문(머리 아래)과 겹치지 않게. */
 .ax-reel-screen > .ax-reel-grid { justify-content:flex-end; }
 .ax-reel-caption { right:74px; left:auto; bottom:18px; max-width:calc(100% - 94px); padding:8px 12px 9px; font-size:15px; }
 .ax-reel-chapter { height:14px; padding:0; font-size:0; } .ax-reel-chapter::before,.ax-reel-chapter::after { top:auto; bottom:0; }
 .ax-reel-time { display:none; }
 /* 사례 상세: 닫기 버튼을 위쪽에 두고 상자는 그 아래에서 시작(버튼이 화면 이미지를 가리지 않게). 버튼 오른쪽 끝은 상자 오른쪽 끝과 맞춤. */
 .ax-mbox { width:calc(100% - 24px); margin:72px auto 12px; }
 .ax-modal .ax-x { top:12px; right:12px; }
 .ax-mhero { grid-template-columns:1fr; gap:18px; }
 .ax-mgal-thumbs { overflow-x:auto; }
}
@media(max-width:700px) {
 .ax-band li { padding:14px 0; border-left:0; }
 .ax-band ul { padding:8px 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
 .ax-core-figure { flex-direction:column; align-items:center; } /* 모바일: 제목 아래 원 */
 .ax-core-ring { width:min(100%,340px); }
 .ax-core-card { padding:24px; }
 .ax-timeline { grid-template-columns:1fr; gap:28px; }
 .ax-timeline::before { display:block; top:0; bottom:0; left:28px; right:auto; width:1px; height:auto; } /* 한 칸 세로 배치: 원들을 잇는 세로선(≤1100 규칙이 숨긴 것을 되살림) */
 .ax-timeline-step::before { display:none; }
 .ax-timeline-step { padding-left:76px; }
 .ax-timeline-mark { position:absolute; left:0; top:0; margin:0; }
 .ax-core-center strong { margin:6px 0; font-size:16px; }
 .ax-core-symbol .common_logo { width:26px; }
 .ax-core-tag { width:56px; height:56px; }
 .ax-form,.ax-check .ax-cl,.ax-check .ax-cr { padding:28px 20px; }
 .ax-mhero { padding:24px; }
 .ax-mhero h3 { font-size:22px; }
 .ax-mbody { grid-template-columns:1fr; gap:12px; }
 .ax-mbody > div { padding:16px; }
 .ax-mbody { padding:24px; }
 .ax-mfoot { padding:20px 24px; }
 .ax-mgal-thumb { width:80px; height:45px; }
}
@media(max-width:640px) {
 .ax-block { --ax-gap:12px; }
 .ax-head { margin-bottom:40px; }
 .ax-hero-cover { padding-top:calc(var(--header-height,96px) + 48px); padding-bottom:20px; } /* 아래 여백은 좌우 여백(20px)과 같게 */
 .ax-ring .ax-t { font-size:16px; }
 .ax-band li { font-size:14px; }
 .ax-creed-cases { gap:24px; }
 .ax-creed-disc { width:104px; margin-bottom:18px; }
 .ax-creed-disc > span { font-size:15px; }
 .ax-creed-first { padding-left:8px; }
 .ax-creed-second { padding-right:8px; }
 .ax-creed-case b { font-size:18px; }
 .ax-brand { width:36px; margin-bottom:18px; }
 /* 대표 강사 띠: 배경 사진 대신 위쪽에 프로필 사진(인물 쪽을 보이게 자름), 바탕은 어두운 회색 그대로. */
 .ax-team-band { min-height:0; padding-top:0; background-image:none; }
 .ax-team-band::before { display:none; }
 /* 사진은 띠의 좌우·위 끝까지 채우고(띠 여백 20px만큼 밖으로), 아래쪽은 바탕색으로 어두워지게 함. */
 .ax-team-photo { display:block; width:calc(100% + 40px); max-width:none; aspect-ratio:4 / 3; margin:0 -20px 28px; object-fit:cover; object-position:72% 30%; -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent); mask-image:linear-gradient(to bottom,#000 55%,transparent); }
 .ax-team-copy.is-ready > .ax-team-photo { translate:none; } /* 떠오를 때 위 끝이 벌어지지 않게 사진은 나타나기만 */
 .ax-team-copy > p br:not(:first-of-type) { display:none; } /* 소개는 첫 줄(직함)만 따로 두고 나머지는 이어서 */
 .ax-hero .ax-title { font-size:28px; }
 /* 좁은 화면에서는 설명의 지정 줄바꿈을 풀어 어절 단위로 자연스럽게 넘어가게 함. */
 .ax-hero .ax-desc { font-size:16px; text-wrap:pretty; }
 .ax-hero .ax-desc br { display:none; }
 .ax-hero .ax-btns { display:grid; grid-template-columns:1fr; }
 .ax-hero .ax-btn { justify-content:space-between; }
 .ax-chapter-no { font-size:48px; }
 /* 모바일 글자 위계: 장 제목 26 → 큰 묶음 제목 22 → 작은 묶음 제목 18 → 카드 제목 18(책 20) → 설명 16. */
 .ax-block:not(.ax-hero) .ax-title,body:has(.ax-block) :is(.bl_factory-faq .faq-sidebar-title,.bl_factory-clients .sec-title) { font-size:26px; line-height:1.46; } /* 히어로 제목(28px)은 제외 */
 .ax-block .ax-check .ax-title { font-size:22px; } /* 위 장 제목 규칙(특이도 0,3,0)보다 우선 */
 .ax-block .ax-desc { font-size:16px; }
 .ax-development .ax-desc,.ax-consulting .ax-desc { text-wrap:pretty; }
 .ax-development .ax-desc br,.ax-consulting .ax-desc br { display:none; } /* 개발·컨설팅 장 설명은 지정 줄바꿈 없이 이어서 */
 .ax-chapter-name { font-size:20px; }
 .ax-group-title { padding:24px 0 28px; font-size:18px; }
 .ax-timeline-group { padding-left:0; padding-right:0; } /* 띠 안 좌우 들여쓰기를 없애 설명 칸을 넓힘 */
 .ax-timeline-group > .ax-group-title { padding-bottom:36px; font-size:22px; text-align:center; text-wrap:balance; } /* 진행 과정 제목은 가운데 */
 .ax-timeline-step { padding-left:72px; }
 .ax-formats-list h4,.ax-cflow h4,.ax-core-cards h3 { font-size:18px; }
 .ax-group-head { padding:24px 0 28px; }
 .ax-group-head > .ax-etc { flex-basis:100%; max-width:none; }
 .ax-group-title-lg,.ax-shelf-head h3,.ax-formats-head h3 { font-size:22px; }
 /* 형식·유형 칸: 한 상자를 선으로 나누던 것을 칸마다 떨어진 흰 상자로(사이로 점무늬 띠가 보임). */
 .ax-formats-list,.ax-formats-list.ax-cols-2 { grid-template-columns:1fr; gap:12px; border:0; background:none; }
 .ax-formats-list li,.ax-formats-list li + li,.ax-formats-list.ax-cols-2 li:nth-child(n) { padding:24px; border:1px solid var(--tile-line); background:#fff; }
 .ax-formats-list .ax-meta { min-height:0; } /* 칸이 한 줄로 쌓이면 옆 칸과 선 높이를 맞출 필요가 없음 */
 .ax-cflow { gap:12px; } /* 컨설팅 단계 칸도 형식·유형 칸과 같은 간격 */
 .ax-shelf-head { margin-bottom:24px; }
 .ax-books { grid-template-columns:1fr; gap:20px; }
 .ax-book-cover { padding:28px 24px 24px; }
 .ax-book-no { font-size:40px; }
 .ax-book h4 { font-size:20px; }
 .ax-rail--lg { --ax-slide:86%; }
 .ax-rail--md { --ax-slide:86%; } /* 출강 카드는 조금 넓게 */
 .ax-rail--tiles { --ax-slide:80%; }
 .ax-tile { padding:24px; }
 .ax-vs :is(th,td) { padding:16px 14px; }
 .ax-vs thead th { padding-top:18px; padding-bottom:18px; font-size:15px; }
 .ax-vs thead .ax-n .ax-vs-mark { display:none; } /* 좁은 칸에서는 제목과 겹쳐 숨김 */
 .ax-vs tbody :is(th,td) { font-size:14px; }
 .ax-vs tbody td { padding-right:10px; }
 .ax-vs tbody td.ax-n { padding-left:30px; }
 .ax-vs tbody td.ax-n::before { left:10px; top:21px; width:14px; height:14px; background-size:14px; }
 .ax-vs tbody th { width:23%; padding-right:8px; white-space:nowrap; }
 .ax-vs td.ax-o { width:33%; } .ax-vs td.ax-n { width:44%; } /* 사다리 교육 칸을 넓혀 줄바꿈을 줄임, 일반 칸은 390px 폭에서 한 줄 유지 */
 .ax-price-bar { padding:36px 24px; }
 .ax-price-bar .ax-p2 { font-size:32px; }
 .ax-price-bar .ax-p1 { font-size:22px; }
 /* 좁은 화면에서는 원 선이 글자 위를 지나가므로 옅게 둠. */
 .ax-price-rings { opacity:.5; }
 .ax-bridge { padding-top:56px; font-size:20px; }
 .ax-bridge-line { height:96px; }
 .ax-nums .ax-tile { padding:24px 20px; }
 .ax-nums .ax-v { font-size:32px; }
 .ax-opts,.ax-row2 { grid-template-columns:1fr; }
 /* 문의 폼: 상자를 화면 끝까지 넓히고(바깥 여백 20px만큼 밖으로) 그림자를 뺌. 누르는 칸과 버튼은 손가락으로 누르기 쉽게 크게. */
 .ax-form { margin:0 -20px; padding:28px 20px 32px; box-shadow:none; }
 .ax-opt { padding:16px; }
 .ax-pill { flex:1 1 auto; min-height:48px; padding:10px 14px; } /* 줄마다 칸이 늘어나 폭을 채움(긴 금액도 꺾이지 않음) */
 .ax-fnav > span:empty { display:none; }
 .ax-fnav .ax-btn { height:52px; }
 .ax-fnav .ax-btn.ax-blue { flex:1; justify-content:space-between; }
 .ax-mfoot > .ax-btn { flex:1 1 100%; margin-left:0; justify-content:space-between; } /* 사례 상세 아래 문의 버튼은 가로 전체 */
 .ax-stick p { max-width:55%; font-size:14px; }
 /* 릴 합계: 글자를 줄이고 막대를 짧게 해 `0.5일 소요 예상 75% 단축`이 화면 안에 들어오게. 결과 카드는 머리글을 줄바꿈. */
 .ax-reel-total { font-size:13px; translate:8px -50%; }
 .ax-reel-total b { font-size:18px; }
 .ax-reel-ticks i:nth-child(2),.ax-reel-ticks i:nth-child(3),.ax-reel-ticks i:nth-child(4) { display:none; } /* 좁은 막대 칸에서는 양 끝 눈금만 */
 /* 표: 머리글 없이 단계마다 한 묶음(제목 + 판정 꼬리표 / 현재 방식 / 처방). */
 .ax-reel-static-talk { gap:12px; } .ax-reel-static-talk img { width:52px; height:52px; } .ax-reel-static-talk .ax-bub { padding:14px 16px; } .ax-reel-static-talk .ax-hl { font-size:17px; } .ax-reel-static-talk .ax-say { font-size:14px; }
 .ax-reel-tbl thead { display:none; }
 .ax-reel-tbl tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
 .ax-reel-tbl :is(th,td) { display:block; padding:0; border:0; }
 .ax-reel-tbl tbody th { grid-column:1; grid-row:1; font-size:15px; }
 .ax-reel-tbl tbody td:nth-child(3) { grid-column:2; grid-row:1; }
 .ax-reel-tbl tbody td:nth-child(2) { grid-column:1 / -1; font-size:14px; color:#666; }
 .ax-reel-tbl tbody td:nth-child(4) { grid-column:1 / -1; font-size:14px; color:var(--blue); }
 .ax-reel-tbl tbody td:nth-child(4)::before { content:'처방 '; margin-right:4px; color:#999; }

 .ax-reel-total { translate:8px -12px; }
 .ax-reel-total em { display:block; width:max-content; margin:4px 0 0; padding:1px 6px; font-size:13px; } /* `75% 단축`은 둘째 줄로 */
 .ax-reel-screen.is-4 > .ax-reel-result { padding:4px 0 0; }
 .ax-reel-face { width:56px; height:56px; outline-width:3px; }
 .ax-reel-name small { display:none; }
 .ax-reel-say { font-size:14px; }
 .ax-reel-edu em { padding:4px 8px; }
 .ax-logos { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ax-logos > li { min-height:112px; padding:16px 10px; }
 .ax-faq summary { padding:22px 0; font-size:16px; }
 .ax-faq .ax-a { padding-right:20px; }
 body:has(.ax-block) .bl_factory-clients .client-item { width:220px; }
}
@media(max-width:380px) { .ax-vs td.ax-o { width:36%; } .ax-vs td.ax-n { width:41%; } } /* 360·375px 폭에서는 일반 칸 머리가 두 줄로 꺾이지 않게 일반 칸을 조금 더 남김 */
@media(prefers-reduced-motion:reduce) { .ax-block * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }