/* 생성물 — projects/genax/site/tokens/genax.tokens.json 에서 scripts/build.mjs 가 뽑았다 */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-md: 17px;
  --font-size-lg: 21px;
  --font-size-xl: 28px;
  --font-size-2xl: 38px;
  --font-size-3xl: 54px;
  --font-size-4xl: 72px;
  --duration-short: 150ms;
  --duration-base: 260ms;
  --duration-long: 480ms;
  --duration-reveal: 900ms;
  --cubicBezier-standard: cubic-bezier(0.2, 0, 0, 1);
  --cubicBezier-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --cubicBezier-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --fontFamily-sans: "GENAX Sans", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fontFamily-mono: D2Coding, Consolas, ui-monospace, monospace;
  --color-bg-canvas: #070b14;
  --color-bg-surface: #0c1322;
  --color-bg-raised: #172136;
  --color-bg-sunken: #111a2c;
  --color-text-primary: #eef2f9;
  --color-text-secondary: #b4bfd4;
  --color-text-muted: #8e9bb6;
  --color-text-on-human: #070b14;
  --color-border-subtle: #23304b;
  --color-border-control: #8e9bb6;
  --color-ai-strong: #8fb6ff;
  --color-ai-glow: #5f97f6;
  --color-ai-deep: #2f6fd0;
  --color-ai-alt: #79e0d6;
  --color-human-strong: #ffcf85;
  --color-human-fill: #f6ae45;
  --color-human-soft: #ffe2b0;
  --color-human-deep: #c47a12;
  --color-focus: #ffcf85;
  --color-error: #ff9c8f;
  --color-impersonate-bg: #34446a;
  --color-impersonate-fg: #eef2f9;
  --color-knowledge-strong: #ffe2b0;
  --color-paper-bg: #fbfaf7;
  --color-paper-band: #f1eee6;
  --color-paper-rule: #d9d4c7;
  --color-paper-ink: #070b14;
  --color-paper-ink-2: #34446a;
  --color-paper-ai: #2f6fd0;
  --color-paper-ai-ink: #245fbf;
  --color-paper-human: #8a5207;
  --color-paper-on-ai: #fbfaf7;
  --color-paper-focus: #2f6fd0;
  --color-theme-ax-bg: #fbfaf7;
  --color-theme-ax-card: #ffffff;
  --color-theme-ax-band: #f1eee6;
  --color-theme-ax-rule: #d9d4c7;
  --color-theme-ax-ink: #070b14;
  --color-theme-ax-ink-2: #34446a;
  --color-theme-ax-ink-3: #56627f;
  --color-theme-ax-accent: #0f7a6e;
  --color-theme-ax-alert: #b5401f;
  --color-theme-ax-ai: #245fbf;
  --color-theme-ax-human: #8a5207;
  --color-theme-ax-focus: #2f6fd0;
  --color-theme-ax-grad-a: #2f6fd0;
  --color-theme-ax-grad-b: #0f7a6e;
  --color-theme-ax-grad-c: #c47a12;
  --color-theme-ax-dark-bg: #0c1322;
  --color-theme-ax-dark-deep: #070b14;
  --color-theme-ax-dark-raised: #172136;
  --color-theme-ax-dark-rule: #23304b;
  --color-theme-ax-dark-ink: #eef2f9;
  --color-theme-ax-dark-ink-2: #b4bfd4;
  --color-theme-ax-dark-ink-3: #8e9bb6;
  --color-theme-ax-dark-accent: #79e0d6;
  --color-theme-ax-dark-focus: #8fb6ff;
  --color-theme-ax-dark-grad-a: #5f97f6;
  --color-theme-ax-dark-grad-b: #79e0d6;
  --color-theme-ax-dark-grad-c: #f6ae45;
}
/* www2 AX 판 — 값은 토큰 변수만 쓴다(tokens.css 는 scripts/build.mjs 가 projects/genax/site/tokens/genax.tokens.json 에서 짓는다). hex 0. */
@font-face {
  font-family: "GENAX Sans";
  font-weight: 400 900;
  font-display: swap;
  src: url("./genax-sans-ax.a6fe6c4421.woff2") format("woff2-variations"), url("./genax-sans-ax.a6fe6c4421.woff2") format("woff2");
}

:root {
  --ax-bg: var(--color-theme-ax-bg);
  --ax-card: var(--color-theme-ax-card);
  --ax-band: var(--color-theme-ax-band);
  --ax-rule: var(--color-theme-ax-rule);
  --ax-ink: var(--color-theme-ax-ink);
  --ax-ink-2: var(--color-theme-ax-ink-2);
  --ax-ink-3: var(--color-theme-ax-ink-3);
  --ax-accent: var(--color-theme-ax-accent);
  --ax-alert: var(--color-theme-ax-alert);
  --ax-ai: var(--color-theme-ax-ai);
  --ax-human: var(--color-theme-ax-human);
  --ax-focus: var(--color-theme-ax-focus);
  --ax-grad: linear-gradient(100deg, var(--color-theme-ax-grad-a), var(--color-theme-ax-grad-b) 55%, var(--color-theme-ax-grad-c));
  --ax-raised: var(--color-theme-ax-card);
  --ax-ease: var(--cubicBezier-decelerate);
  --ax-wrap: 1200px;
  --ax-gutter: 28px;
  --ax-sec: 120px;
  color-scheme: light;
}

/* 깊은 면: 같은 이름의 변수를 어두운 토큰으로 갈아 끼운다 — 부품은 한 벌 */
.sec--dark, .card--ink, .foot {
  --ax-bg: var(--color-theme-ax-dark-bg);
  --ax-card: var(--color-theme-ax-dark-raised);
  --ax-raised: var(--color-theme-ax-dark-raised);
  --ax-rule: var(--color-theme-ax-dark-rule);
  --ax-ink: var(--color-theme-ax-dark-ink);
  --ax-ink-2: var(--color-theme-ax-dark-ink-2);
  --ax-ink-3: var(--color-theme-ax-dark-ink-3);
  --ax-accent: var(--color-theme-ax-dark-accent);
  --ax-focus: var(--color-theme-ax-dark-focus);
  --ax-grad: linear-gradient(100deg, var(--color-theme-ax-dark-grad-a), var(--color-theme-ax-dark-grad-b) 55%, var(--color-theme-ax-dark-grad-c));
}
.card--ink { --ax-card: var(--color-theme-ax-dark-deep); --ax-raised: var(--color-theme-ax-dark-raised); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  font-family: "GENAX Sans", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--ax-bg);
  color: var(--ax-ink);
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ax-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 50; padding: var(--space-3) var(--space-4); background: var(--ax-ink); color: var(--ax-card); border-radius: var(--radius-md); font-weight: 800; }
.skip:focus { top: var(--space-4); }

.wrap { max-width: var(--ax-wrap); margin: 0 auto; padding: 0 var(--ax-gutter); }
.wrap--narrow { max-width: 900px; }

/* ── 글 ───────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.12em; color: var(--ax-accent); }
.eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--ax-grad); }
.eyebrow--alert { color: var(--ax-alert); }
h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 900; line-height: 1.22; letter-spacing: -0.035em; margin-top: var(--space-4); text-wrap: balance; }
h3 { font-size: 20px; font-weight: 900; line-height: 1.4; }
h4 { font-size: 18px; font-weight: 900; line-height: 1.4; }
.grad { font-style: normal; background: var(--ax-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ax-ink-2); margin-top: 18px; max-width: 760px; }
.src { font-size: 12.5px; color: var(--ax-ink-3); margin-top: 10px; }
.tag { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--ax-accent); }
.tag--mute { color: var(--ax-ink-3); }
.sub-h { font-size: 22px; margin-top: var(--space-8); }
.sub-h--lg { font-size: clamp(20px, 2.2vw, 26px); }

/* ── 단추 ───────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill); font-weight: 800; font-size: 16px; border: 1.5px solid transparent; transition: transform var(--duration-short) var(--ax-ease), background-color var(--duration-base) var(--ax-ease), border-color var(--duration-base) var(--ax-ease); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--pri { background: var(--color-theme-ax-ink); color: var(--color-theme-ax-card); }
.btn--pri:hover { background: var(--color-theme-ax-ink-2); }
.btn--sec { background: var(--color-theme-ax-card); color: var(--color-theme-ax-ink); border-color: var(--color-theme-ax-rule); }
.btn--sec:hover { border-color: var(--color-theme-ax-ink-2); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn--light { background: var(--color-theme-ax-card); color: var(--color-theme-ax-ink); }
.btn--light:hover { background: var(--color-theme-ax-band); }
.btn--ghost { color: var(--ax-ink); border-color: var(--ax-rule); }
.btn--ghost:hover { border-color: var(--ax-ink-2); }

/* ── 머리띠 ───────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--color-theme-ax-bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ax-rule); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 68px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.08em; font-size: 17px; }
.mark__sq { display: block; width: 26px; height: 26px; border-radius: var(--radius-sm); background: conic-gradient(from 210deg, var(--color-theme-ax-dark-grad-a), var(--color-theme-ax-dark-grad-b), var(--color-theme-ax-dark-grad-c), var(--color-theme-ax-dark-grad-a)); }
.mark--foot { color: var(--ax-ink); }
.nav__links { display: flex; gap: 26px; font-size: 15px; font-weight: 700; color: var(--ax-ink-2); }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--ax-grad); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ax-ease); }
.nav__links a:hover, .nav__links a[aria-current="page"], .nav__links a.is-here { color: var(--ax-ink); }
.nav__links a[aria-current="page"]::after, .nav__links a.is-here::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { font-weight: 800; }
.nav__end { display: flex; align-items: center; gap: var(--space-2); }
.nav__menu { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); font-weight: 800; font-size: 14px; border: 1.5px solid var(--ax-rule); }
.nav__menu-bars, .nav__menu-bars::before, .nav__menu-bars::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--duration-base) var(--ax-ease), opacity var(--duration-short); }
.nav__menu-bars { position: relative; }
.nav__menu-bars::before, .nav__menu-bars::after { content: ""; position: absolute; left: 0; }
.nav__menu-bars::before { top: -5px; }
.nav__menu-bars::after { top: 5px; }
.nav__menu[aria-expanded="true"] .nav__menu-bars { background: transparent; }
.nav__menu[aria-expanded="true"] .nav__menu-bars::before { transform: translateY(5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-bars::after { transform: translateY(-5px) rotate(-45deg); }

/* ── 첫 화면 ───────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 96px 0 84px; }
.hero__glow { position: absolute; right: -200px; top: -180px; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-theme-ax-dark-grad-a) 24%, transparent), color-mix(in srgb, var(--color-theme-ax-dark-grad-b) 15%, transparent) 45%, color-mix(in srgb, var(--color-theme-ax-dark-grad-c) 10%, transparent) 65%, transparent 72%); }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); align-items: center; }
.hero__title { font-size: clamp(40px, 6.4vw, 88px); font-weight: 900; line-height: 1.08; letter-spacing: -0.05em; margin-top: 22px; }
.hero__lead { font-size: clamp(18px, 1.8vw, 22px); }
.hero__cta { display: flex; gap: var(--space-3); margin-top: 36px; flex-wrap: wrap; }
.hero__term { margin-top: 22px; font-size: 14px; color: var(--ax-ink-3); }
.stat3 { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ax-rule); position: relative; }
.stat3 li { padding: 22px 22px 0 0; }
.stat3 b { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -0.03em; }
.stat3 span { display: block; font-size: 14.5px; color: var(--ax-ink-2); }

/* 첫 화면 그림: 전담 매니저 + AI 팀 일곱 */
.orbit { width: 100%; max-width: 480px; justify-self: end; }
.orbit svg { display: block; width: 100%; height: auto; overflow: visible; }
.stop-a { stop-color: var(--color-theme-ax-dark-grad-a); }
.stop-b { stop-color: var(--color-theme-ax-dark-grad-b); }
.stop-c { stop-color: var(--color-theme-ax-dark-grad-c); }
.orbit__ring { fill: none; stroke: var(--ax-rule); stroke-width: 1.5; stroke-dasharray: 4 8; }
.orbit__ring--in { stroke-dasharray: none; opacity: 0.6; }
.orbit__spokes line { stroke: color-mix(in srgb, var(--color-theme-ax-grad-a) 45%, transparent); stroke-width: 2; stroke-dasharray: 6 10; }
.orbit__core-k { font-size: 17px; font-weight: 800; fill: var(--color-theme-ax-ink); }
.orbit__core-n { font-size: 26px; font-weight: 900; fill: var(--color-theme-ax-ink); }
.orbit__nodes rect { fill: var(--color-theme-ax-card); stroke: var(--ax-rule); stroke-width: 1.5; }
.orbit__nodes text { font-size: 16px; font-weight: 800; fill: var(--color-theme-ax-ink); }

/* ── 절 ───────────────────────────────────── */
.sec { padding: var(--ax-sec) 0; position: relative; }
.sec--tight { padding-top: 0; }
.sec--card { background: var(--color-theme-ax-card); }
.sec--dark { background: var(--ax-bg); color: var(--ax-ink); }
.grid { display: grid; gap: 18px; margin-top: 44px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--ax-card); color: var(--ax-ink); border: 1px solid var(--ax-rule); border-radius: var(--radius-lg); padding: 26px; }
.sec--card .card:not(.card--ink) { background: var(--color-theme-ax-bg); }
.card--ink { border-color: transparent; }
.card h3, .card h4 { margin-top: 10px; }
.card__p { color: var(--ax-ink-2); font-size: 15.5px; margin-top: 8px; }
.ic { width: 34px; height: 34px; color: var(--ax-accent); display: block; }

/* 걱정 넷 */
.quotes .card { display: flex; flex-direction: column; }
.quote { font-size: 21px; font-weight: 800; line-height: 1.45; }
.quote::before { content: "“"; display: block; font-size: 44px; line-height: 0.6; margin-bottom: 6px; color: var(--color-theme-ax-dark-grad-c); }
.reassure { margin-top: 34px; padding: 22px 26px; border-radius: var(--radius-lg); font-size: 19px; font-weight: 800; background: linear-gradient(100deg, color-mix(in srgb, var(--color-theme-ax-dark-grad-a) 18%, transparent), color-mix(in srgb, var(--color-theme-ax-dark-grad-b) 18%, transparent)); border: 1px solid var(--ax-rule); }

/* 숫자 */
.stat__n { font-size: 64px; margin-top: 10px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.stat__n small, .hire__n small { font-size: 0.42em; letter-spacing: -0.01em; }
.stat h3 { margin-top: 14px; }

/* 실패 사례 */
.fail .card { border-color: color-mix(in srgb, var(--color-theme-ax-alert) 22%, var(--color-theme-ax-card)); background: color-mix(in srgb, var(--color-theme-ax-alert) 3%, var(--color-theme-ax-card)); }
.fail .tag { color: var(--ax-alert); }
.why { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.why li { padding: 12px 18px; border-radius: var(--radius-md); background: var(--color-theme-ax-ink); color: var(--color-theme-ax-dark-ink); font-weight: 700; font-size: 15px; }
.why b { color: var(--color-theme-ax-dark-accent); }

/* 채용 */
.hire__n { margin-top: 8px; font-size: 46px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.pains { counter-reset: pain; margin-top: 18px; }
.pain { display: grid; grid-template-columns: 44px 1fr; gap: 14px; counter-increment: pain; }
.pain::before { content: counter(pain); width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--ax-alert); background: color-mix(in srgb, var(--color-theme-ax-alert) 10%, var(--color-theme-ax-card)); }
.pain h3 { margin-top: 0; }

/* 흐름 */
.flow { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 18px; align-items: stretch; margin-top: 44px; }
.say { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-theme-ax-ai) 8%, var(--color-theme-ax-card)); font-weight: 700; font-size: 15.5px; }
.steps { margin-top: 16px; display: grid; gap: 8px; counter-reset: step; }
.steps li { counter-increment: step; display: flex; gap: 10px; align-items: baseline; background: var(--ax-raised); border: 1px solid var(--ax-rule); border-radius: var(--radius-md); padding: 10px 14px; font-size: 15px; }
.steps li::before { content: counter(step); font-weight: 900; color: var(--ax-accent); min-width: 1ch; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-pill); color: var(--color-theme-ax-accent); background: color-mix(in srgb, var(--color-theme-ax-accent) 10%, var(--color-theme-ax-card)); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--dev { color: var(--color-theme-ax-ai); background: color-mix(in srgb, var(--color-theme-ax-ai) 10%, var(--color-theme-ax-card)); }
.chip--ex { color: var(--color-theme-ax-human); background: color-mix(in srgb, var(--color-theme-ax-human) 10%, var(--color-theme-ax-card)); }
.chip--plan { color: var(--color-theme-ax-ink-3); background: var(--color-theme-ax-band); }
.chip--plan::before { background: transparent; border: 1.5px solid currentColor; }

/* 팀 */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.team__mgr { display: flex; flex-direction: column; justify-content: center; } /* 매니저 한 칸 + 팀 일곱 = 여덟 칸 · 넷 · 둘 · 하나 열에 남는 칸 0 */
.team__mgr h3 { font-size: 22px; }
.team__mgr .ic { width: 40px; height: 40px; }

/* 지식 HUB */
.hub { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-top: 44px; }
.hub__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub__lines line { stroke: color-mix(in srgb, var(--color-theme-ax-dark-grad-a) 70%, transparent); stroke-width: 2.5; }
.hub__nodes rect { fill: var(--color-theme-ax-dark-raised); stroke: var(--ax-rule); stroke-width: 1.5; }
.hub__nodes text { font-size: 17px; font-weight: 800; fill: var(--ax-ink); text-anchor: middle; }
.hub__pulse { fill: none; stroke: var(--color-theme-ax-dark-grad-b); stroke-width: 2; opacity: 0; transform-origin: 300px 210px; }
.hub__core-k { font-size: 15px; font-weight: 800; fill: var(--color-theme-ax-ink); }
.hub__core-n { font-size: 28px; font-weight: 900; fill: var(--color-theme-ax-ink); }
.hub__list li { padding: 18px 0; border-top: 1px solid var(--ax-rule); }
.hub__list b { font-size: 19px; display: block; }
.hub__list span { color: var(--ax-ink-2); font-size: 15px; }

/* 툴팁(용어 풀이) — hover · 키보드 focus 둘 다 · Esc 로 닫힘 · 좁은 화면은 누르면 열림(site.js) */
.term { position: relative; display: inline-block; }
.term__btn { font-weight: 800; color: inherit; border-bottom: 1.5px dashed currentColor; line-height: 1.2; padding: 0; }
.hero__term .term__btn { color: var(--ax-ink); }
.term--inline .term__btn { font-weight: inherit; border-bottom-width: 2px; color: inherit; -webkit-text-fill-color: currentColor; }
.grad .term--inline .term__btn { color: var(--color-theme-ax-dark-grad-a); }
/* 닫힌 툴팁은 그리지 않는다(display none) — 숨은 상자가 좁은 화면의 폭을 밀지 않게. 열 때 site.js 가 화면 안으로 당긴다(--tip-dx) */
.tip { display: none; position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 20; width: max-content; max-width: min(320px, calc(100vw - 2 * var(--ax-gutter))); padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-theme-ax-ink); color: var(--color-theme-ax-dark-ink); font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; -webkit-text-fill-color: currentColor; white-space: normal; text-align: left;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-theme-ax-ink) 24%, transparent); translate: var(--tip-dx, 0px) 0; pointer-events: none; }
.sec--dark .tip { background: var(--color-theme-ax-card); color: var(--color-theme-ax-ink); }
h2 .tip { font-size: 15px; }
.term:hover .tip, .term:focus-within .tip, .term.is-open .tip { display: block; }
.term.is-dismissed .tip { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .term:hover .tip, .term:focus-within .tip, .term.is-open .tip { animation: tipin var(--duration-short) var(--ax-ease); }
}
@keyframes tipin { from { opacity: 0; transform: translateY(4px); } }

/* 비교 표 */
.table-wrap { margin-top: 40px; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--ax-rule); background: var(--color-theme-ax-card); }
.vs { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; }
.vs th, .vs td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--ax-rule); vertical-align: top; }
.vs thead th, .vs thead td { background: var(--color-theme-ax-band); font-size: 15px; }
.vs thead .vs__us { background: var(--color-theme-ax-ink); color: var(--color-theme-ax-card); }
.vs tbody th { font-weight: 800; width: 150px; }
.vs tbody td { color: var(--ax-ink-2); }
.vs tbody .vs__us { background: color-mix(in srgb, var(--color-theme-ax-ai) 5%, var(--color-theme-ax-card)); color: var(--ax-ink); font-weight: 700; }
.vs small { display: block; font-size: 12px; color: var(--ax-ink-3); font-weight: 500; margin-top: 2px; }
.vs tbody tr:last-child > * { border-bottom: 0; }
.ab { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ab__card h3 { font-size: 24px; }
.ab__card dl { margin-top: 14px; }
.ab__card dl div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 11px 0; border-top: 1px solid var(--ax-rule); font-size: 15.5px; }
.ab__card dt { font-weight: 800; color: var(--ax-ink-3); }
.card--ink.ab__card dt { color: var(--ax-accent); }

/* 시간 절감 */
.ef { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-5); margin-top: 40px; align-items: start; }
.ef__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ef__head h3 { margin-top: 0; font-size: 18px; }
.ef__head .chip { flex: none; }
.ef__total { margin-top: 12px; color: var(--ax-ink-2); }
.ef__total b { font-size: 52px; font-weight: 900; color: var(--ax-ink); letter-spacing: -0.04em; margin-right: 4px; }
.bar { display: flex; height: 52px; border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-4); font-weight: 800; font-size: 15px; background: var(--color-theme-ax-band); }
.bar > div { display: flex; align-items: center; padding: 0 16px; white-space: nowrap; overflow: hidden; }
.bar__ai { flex: 0 0 70%; background-color: var(--color-theme-ax-ai); background-image: linear-gradient(90deg, var(--color-theme-ax-ai), var(--color-theme-ax-accent)); color: var(--color-theme-ax-card); }
.bar__hu { flex: 0 0 30%; background: var(--color-theme-ax-dark-grad-c); color: var(--color-theme-ax-ink); }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.kv div { background: var(--color-theme-ax-band); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13.5px; color: var(--ax-ink-2); display: flex; flex-direction: column-reverse; }
.kv dd { font-size: 22px; font-weight: 900; color: var(--ax-ink); }
.roles h3 { font-size: 18px; }
.roles ul { margin-top: 12px; }
.roles li { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 13px 0; border-top: 1px solid var(--ax-rule); font-size: 15.5px; }
.roles span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.roles s { color: var(--ax-ink-3); }
.roles i { font-style: normal; color: var(--ax-ink-3); }
.roles em { font-style: normal; font-weight: 800; color: var(--ax-accent); }

/* 떠 있는 바로가기(site.js 가 채움 · 쪽 오른쪽 아래 · 좁은 화면은 아래 가운데) */
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 35; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; max-width: min(720px, calc(100vw - 48px)); }
.fab[hidden] { display: none; }
/* 채널톡 단추(오른쪽 아래 · 약 60px)와 겹치지 않게 떠 있는 바로가기를 왼쪽으로 민다 */
@media (min-width: 901px) { .has-channel .fab { right: 100px; max-width: min(720px, calc(100vw - 124px)); } }
/* 좁은 화면(≤900)은 바로가기 줄을 그대로 두고, 그것이 보일 때 채팅 단추를 그 위로 올린다(site.js 가 --fab-lift 를 잰다) */
@media (max-width: 900px) { .has-channel .chat-btn { bottom: calc(16px + var(--fab-lift, 0px)); transition: bottom 160ms ease; } }
/* 채팅 상담 단추(채널톡 메신저를 연다) — 글은 화면 읽기용으로만, 보이는 것은 말풍선 */
.chat-btn { position: fixed; right: 24px; bottom: 24px; z-index: 36; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--color-theme-ax-ink); color: var(--color-theme-ax-card); box-shadow: 0 14px 34px color-mix(in srgb, var(--color-theme-ax-ink) 35%, transparent); transition: transform 160ms ease; }
.chat-btn:hover { transform: translateY(-2px); }
.chat-btn:focus-visible { outline: 3px solid var(--color-theme-ax-focus); outline-offset: 3px; }
.chat-btn svg { width: 28px; height: 28px; }
.chat-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) { .chat-btn { right: 16px; width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { .chat-btn { transition: none; } }
.fab a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--radius-pill); font-weight: 800; font-size: 15px; background: var(--color-theme-ax-card); color: var(--color-theme-ax-ink); border: 1px solid var(--color-theme-ax-rule); box-shadow: 0 10px 30px color-mix(in srgb, var(--color-theme-ax-ink) 26%, transparent); }
.fab a::after { content: "→"; margin-left: 8px; }
.fab a:first-child { background: var(--color-theme-ax-ink); color: var(--color-theme-ax-card); border-color: transparent; }
.fab a:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: no-preference) {
  .fab.is-on { animation: fabin var(--duration-base) var(--ax-ease); }
}
@keyframes fabin { from { opacity: 0; transform: translateY(12px); } }
.foot { padding-bottom: 120px; }

/* 첫 쪽 업종 카드 → 업종 쪽(카드 전체가 눌림 · 링크는 제목 하나) */
.card--go { position: relative; transition: border-color var(--duration-base) var(--ax-ease), transform var(--duration-base) var(--ax-ease); }
.card--go:hover { border-color: var(--ax-accent); transform: translateY(-2px); }
.card__link { color: inherit; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link:focus-visible { outline: none; }
.card--go:has(.card__link:focus-visible) { outline: 3px solid var(--ax-focus); outline-offset: 3px; }
.card__more { margin-top: auto; padding-top: 14px; font-weight: 800; font-size: 14.5px; color: var(--ax-accent); }
.more-link { display: inline-flex; margin-top: 28px; font-weight: 800; font-size: 16px; color: var(--ax-accent); }
.more-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 업종 */
.ind .card { display: flex; flex-direction: column; }
.ind h3 { font-size: 22px; }
.ind ul { margin-top: 16px; }
.ind li { padding: 10px 0; border-top: 1px solid var(--ax-rule); font-size: 15.5px; font-weight: 700; }
.ind li::before { content: "→"; color: var(--ax-accent); margin-right: 8px; }
.ind__go { justify-content: center; }
.ind__go .btn { align-self: flex-start; margin-top: 22px; }

/* 시나리오 */
.scn ul { margin-top: 14px; }
.scn li { padding: 12px 0; border-top: 1px solid var(--ax-rule); }
.scn b { display: block; font-size: 16px; }
.scn span { display: block; font-size: 14px; color: var(--ax-ink-2); margin-top: 4px; }
.scn span i { font-style: normal; color: var(--ax-accent); font-weight: 800; }

/* 요금 */
.price .card { display: flex; flex-direction: column; }
.price__amt { font-size: 52px; font-weight: 900; letter-spacing: -0.04em; margin-top: 10px; line-height: 1.15; }
.price__amt small { font-size: 18px; color: var(--ax-ink-2); letter-spacing: -0.01em; margin-left: 4px; }
.price__amt--word { font-size: 36px; }
.price__hl { box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--color-theme-ax-ink) 60%, transparent); }
.inc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.inc li { padding: 9px 14px; border-radius: var(--radius-pill); background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); font-size: 14px; font-weight: 700; }
.start { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; counter-reset: s; }
.start .card::before { counter-increment: s; content: counter(s); display: flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; background: var(--color-theme-ax-ink); color: var(--color-theme-ax-card); font-weight: 900; }

/* 사례 */
.case-main { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; margin-top: 40px; }
.case-main__name { font-size: 28px; }
.road li { display: grid; grid-template-columns: 86px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ax-rule); }
.road li:first-child { border-top: 0; padding-top: 0; }
.road i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--ax-accent); }
.road b { display: block; }
.road span:not(.chip) { display: block; font-size: 14px; color: var(--ax-ink-2); }
.road__next i { color: var(--ax-ink-3); }
.case-more { margin-top: 18px; }
.inh { margin-top: 18px; }
.inh h4 { font-size: 17px; margin-top: 12px; }
.more { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.more b { margin-right: 6px; }
.more ul { display: flex; gap: 8px; flex-wrap: wrap; }
.more li { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-theme-ax-bg); border: 1px solid var(--ax-rule); font-size: 14px; font-weight: 700; }

/* 자주 묻는 질문 */
.faq { margin-top: 34px; }
.faq details { border-top: 1px solid var(--ax-rule); }
.faq details:last-child { border-bottom: 1px solid var(--ax-rule); }
.faq summary { cursor: pointer; font-size: 18px; font-weight: 800; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 20px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; color: var(--ax-accent); transition: transform var(--duration-base) var(--ax-ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ax-ink-2); padding-bottom: 20px; margin-top: -6px; }

/* 회사 */
.co__b { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; margin-top: 6px; line-height: 1.2; }
.co__b small { font-size: 16px; letter-spacing: -0.01em; }
.dev h3 { font-size: 18px; }
.dev .card__p { font-size: 14.5px; }

/* 상담 */
.cta-sec { text-align: center; overflow: hidden; }
.cta-sec h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
.cta-sec .lead { margin-left: auto; margin-right: auto; }
.cta-sec .wrap { position: relative; }
.cta-sec__glow { position: absolute; left: 50%; top: 40%; width: 900px; height: 900px; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--color-theme-ax-dark-grad-a) 20%, transparent), color-mix(in srgb, var(--color-theme-ax-dark-grad-b) 10%, transparent) 50%, transparent 70%); }
.cta-sec__btns { display: flex; justify-content: center; gap: var(--space-3); margin-top: 34px; flex-wrap: wrap; }

.foot { padding: 40px 0 60px; background: var(--color-theme-ax-dark-deep); color: var(--ax-ink-3); font-size: 14px; border-top: 1px solid var(--ax-rule); }
.foot__grid { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot__co { margin-top: 10px; }
.foot__end { text-align: right; }
.foot b { color: var(--ax-ink); }
.foot a { text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--ax-ink); }

/* ── 움직임(site.js 가 html 에 .motion 을 붙일 때만 · 움직임 줄임이면 붙지 않음) ── */
@media (prefers-reduced-motion: no-preference) {
  .motion .hero__glow { animation: drift 18s var(--ax-ease) infinite alternate; }
  .motion .orbit__spokes line { animation: flowdash 2.4s linear infinite; }
  .motion .orbit__ring { animation: spin 90s linear infinite; transform-origin: 260px 260px; }
  .motion .orbit__nodes g { animation: bob 6s ease-in-out infinite; }
  .motion .orbit__nodes g:nth-child(2) { animation-delay: -0.9s; }
  .motion .orbit__nodes g:nth-child(3) { animation-delay: -1.8s; }
  .motion .orbit__nodes g:nth-child(4) { animation-delay: -2.7s; }
  .motion .orbit__nodes g:nth-child(5) { animation-delay: -3.6s; }
  .motion .orbit__nodes g:nth-child(6) { animation-delay: -4.5s; }
  .motion .orbit__nodes g:nth-child(7) { animation-delay: -5.4s; }
  .motion .orbit__core { animation: breathe 5s ease-in-out infinite; transform-origin: 260px 260px; }

  .motion [data-reveal].is-pending { opacity: 0; transform: translateY(18px); }
  .motion [data-reveal] { transition: opacity var(--duration-long) var(--ax-ease), transform var(--duration-long) var(--ax-ease); transition-delay: calc(var(--rv, 0) * 70ms); }

  .motion [data-hub] .hub__lines line { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.1s var(--ax-ease) 0.2s; }
  .motion [data-hub].is-in .hub__lines line { stroke-dashoffset: 0; }
  .motion [data-hub].is-in .hub__pulse { animation: pulse 3.2s var(--ax-ease) 1.2s infinite; }
  .motion [data-bar] .bar__ai, .motion [data-bar] .bar__hu { transition: flex-basis 1s var(--ax-ease) 0.3s; }
  .motion [data-bar].is-pending .bar__ai, .motion [data-bar].is-pending .bar__hu { flex-basis: 0%; }
  .motion [data-flow].is-in .steps li { animation: stepin var(--duration-long) var(--ax-ease) both; }
  .motion [data-flow].is-in .steps li:nth-child(2) { animation-delay: 0.25s; }
  .motion [data-flow].is-in .steps li:nth-child(3) { animation-delay: 0.5s; }
  .motion [data-flow].is-in .steps li:nth-child(4) { animation-delay: 0.75s; }
}
@keyframes drift { to { transform: translate(-60px, 40px) scale(1.06); } }
@keyframes flowdash { to { stroke-dashoffset: -32; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes breathe { 50% { transform: scale(1.035); } }
@keyframes pulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes stepin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ── 좁은 화면 ───────────────────────────────────── */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .orbit { justify-self: center; max-width: 420px; }
}
/* 좁은 화면(≤760): 머리띠 길잡이는 둘째 줄에서 가로로 미는 한 줄(docs v2 · 메뉴 단추 없음) */
@media (max-width: 760px) {
  .nav__bar { flex-wrap: wrap; height: auto; padding-top: 10px; row-gap: 0; }
  .nav__nav { order: 3; width: 100%; }
  .nav__links { overflow-x: auto; gap: 20px; padding: 8px 0 10px; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { display: inline-block; padding: 6px 0; }
  html { scroll-padding-top: 116px; }
}
@media (max-width: 900px) {
  :root { --ax-gutter: 18px; --ax-sec: 80px; }
  .hero { padding: 64px 0 64px; }
  .hero__glow { right: -420px; }
  .g3, .g4, .team, .start { grid-template-columns: repeat(2, 1fr); }
  .flow, .hub, .ab, .ef, .case-main, .stat3 { grid-template-columns: 1fr; }
  /* 비교 표: 줄마다 항목 이름 아래 두 칸을 쌓는다 — 옆으로 밀려 GENAX 칸이 숨지 않게 */
  .table-wrap { overflow: visible; }
  .vs { min-width: 0; font-size: 15px; }
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vs tbody, .vs tr, .vs th, .vs td { display: block; }
  .vs tbody tr { border-bottom: 1px solid var(--ax-rule); }
  .vs tbody tr:last-child { border-bottom: 0; }
  .vs tbody th { width: auto; padding: 16px 18px 6px; border: 0; }
  .vs tbody td { padding: 6px 18px; border: 0; display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
  .vs tbody td:last-child { padding-bottom: 16px; }
  .vs tbody td::before { content: attr(data-label); font-size: 13px; font-weight: 800; color: var(--ax-ink-3); padding-top: 1px; }
  .vs tbody .vs__us { background: none; }
  .vs tbody .vs__us::before { color: var(--ax-accent); }
  .vs small { grid-column: 2; }
  .stat3 li { padding: 18px 0 0; }
  .stat__n { font-size: 54px; }
}
@media (max-width: 900px) {
  .fab { left: 16px; right: 16px; bottom: 16px; max-width: none; justify-content: center; }
  .fab a { min-height: 44px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 560px) {
  .g3, .g4, .team, .start { grid-template-columns: 1fr; }
  .btn--sm { padding: 0 14px; }
  .nav__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero__cta .btn { flex: 1 1 100%; }
  .orbit { max-width: 340px; }
  .road li { grid-template-columns: 1fr auto; }
  .road i { grid-column: 1 / -1; }
  .ab__card dl div, .roles li { grid-template-columns: 82px 1fr; }
  .kv { grid-template-columns: 1fr 1fr 1fr; }
  .kv dd { font-size: 18px; }
  .foot__end { text-align: left; }
  .price__amt { font-size: 44px; }
}
@media (forced-colors: active) {
  .grad { color: CanvasText; background: none; }
  .mark__sq { background: CanvasText; }
}

/* ── 옮긴 쪽(업종 · 시나리오 · 적용사례) — 지금 www 의 본문을 글 그대로 담고 새 테마로만 칠한다(scripts/capture-www.mjs) ── */
.port { max-width: var(--ax-wrap); margin: 0 auto; padding: 40px var(--ax-gutter) 96px; color: var(--ax-ink); }
.port section, .port article, .port header, .port nav, .port div, .port figure { min-width: 0; }
.port > section, .port > div > section, .port .ip-sec, .port .sd-sec, .port .section { padding: 44px 0; border-top: 1px solid var(--ax-rule); }
.port > section:first-child, .port .ip-hero, .port .sd-hero, .port .pg-hero, .port .cx-hero { border-top: 0; padding-top: 24px; }
.port h1 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 900; line-height: 1.2; letter-spacing: -0.04em; margin-top: 12px; max-width: 26ch; text-wrap: balance; }
.port h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; line-height: 1.3; letter-spacing: -0.03em; margin-bottom: 18px; }
.port h3 { font-size: 19px; font-weight: 900; line-height: 1.4; margin: 18px 0 8px; }
.port h4 { font-size: 16.5px; font-weight: 800; margin: 12px 0 6px; }
.port p { color: var(--ax-ink-2); margin-top: 8px; }
.port strong, .port b { color: var(--ax-ink); }
.port a:not([class]) { color: var(--ax-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* 옮긴 쪽 본문 목록. 첫 쪽에서 떼어 온 글(.ax-page · /cases/ 고객 사례) 안의 목록은 첫 쪽 스타일 그대로 두려고 뺀다(11-11) */
.port ul:not([class]):not(.ax-page ul) > li, .port ol:not([class]):not(.ax-page ol) > li { position: relative; padding-left: 18px; margin-top: 6px; color: var(--ax-ink-2); }
.port ul:not([class]):not(.ax-page ul) > li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ax-accent); }
.port ol:not([class]):not(.ax-page ol) { counter-reset: po; }
.port ol:not([class]):not(.ax-page ol) > li { counter-increment: po; padding-left: 26px; }
.port ol:not([class]):not(.ax-page ol) > li::before { content: counter(po) "."; position: absolute; left: 0; font-weight: 800; color: var(--ax-accent); }
.port img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--ax-rule); }
.port figure { margin-top: 18px; }
.port figcaption { font-size: 12.5px; color: var(--ax-ink-3); margin-top: 8px; }
.port table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; background: var(--color-theme-ax-card); }
.port th, .port td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ax-rule); }
.port th { background: var(--color-theme-ax-band); font-weight: 800; }
.port .scroll-shadow-x { overflow-x: auto; border: 1px solid var(--ax-rule); border-radius: var(--radius-lg); }
.port dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ax-rule); }
.port dt { font-weight: 800; color: var(--ax-ink-3); }
.port details { border-top: 1px solid var(--ax-rule); padding: 4px 0; }
.port details:last-of-type { border-bottom: 1px solid var(--ax-rule); }
.port summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 800; color: var(--ax-ink); }
.port summary::-webkit-details-marker { display: none; }
.port summary::after { content: "+"; color: var(--ax-accent); font-size: 20px; line-height: 1; }
.port details[open] summary::after { content: "−"; }
/* 빵 부스러기 · 눈썹 · 쪽 머리 */
.port .crumb { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--ax-ink-3); }
.port .crumb a { color: var(--ax-ink-3); }
.port .crumb a:hover { color: var(--ax-ink); }
.port .eyebrow, .port .ip-kicker { margin-bottom: 4px; }
.port .pg-hero__lead, .port .ip-hero__copy p, .port .cx-hero__lead, .port .section-lead { font-size: clamp(16px, 1.5vw, 19px); max-width: 760px; }
.port .ip-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; }
.port .ip-hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* 카드 */
.port .ip-card, .port .sc-card, .port .sd-team__card, .port .cause, .port .scn, .port .ip-case, .port .how__item, .port .stat, .port .ladder__step, .port .ip-step, .port .ip-ba__col, .port .ip-common__col, .port .ip-why__item {
  position: relative; display: block; background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); border-radius: var(--radius-lg); padding: 22px; color: var(--ax-ink);
}
.port .sc-card:hover, .port a.sc-card:hover, .port .ip-case:hover { border-color: var(--ax-accent); }
.port .sc-card a, .port .sd-team__card a, .port .ip-case a.ip-case__link { color: inherit; text-decoration: none; }
.port .sc-card a:hover .sc-card__title, .port .sc-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.port .sc-card__title, .port .ip-card__title, .port .sd-team__name, .port .cause__title, .port .scn__title { display: block; font-size: 17px; font-weight: 900; line-height: 1.45; color: var(--ax-ink); margin-top: 8px; }
.port .sc-card__team, .port .ip-card__body, .port .cause__meaning, .port .sd-team__act { color: var(--ax-ink-2); font-size: 15px; margin-top: 6px; }
.port .sc-card__top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 격자 */
.port .sc-grid, .port .scn-grid, .port .cx-stats, .port .ip-pains, .port .ip-cases, .port .ip-flows, .port .how, .port .ip-teams, .port .ladder, .port .ip-ba, .port .ip-common, .port .ip-why, .port .ip-steps, .port .sd-team {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; /* auto-fit: 카드 셋이면 세 칸을 채운다(빈 넷째 칸 0 · designer 11-10) */
}
.port .sc-grid--small { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* 시나리오 거르기(낱말 + 갈래 단추) — 11-10 되살림 */
.port .lib__tools { display: grid; grid-template-columns: minmax(220px, 340px) 1fr auto; gap: 14px 18px; align-items: center; margin: 8px 0 24px; }
.port .lib__q input { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; font: inherit; font-size: 15px; color: var(--color-theme-ax-ink); background: var(--color-theme-ax-card); border: 1.5px solid var(--color-theme-ax-rule); }
.port .lib__q input:focus-visible { outline: 3px solid var(--color-theme-ax-focus); outline-offset: 2px; }
.port .lib__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.port .lib__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.port .lib__cat { min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--color-theme-ax-ink); background: var(--color-theme-ax-card); border: 1.5px solid var(--color-theme-ax-rule); cursor: pointer; }
.port .lib__cat span { margin-left: 4px; font-weight: 700; color: var(--color-theme-ax-ink-3); }
.port .lib__cat:hover { border-color: var(--color-theme-ax-ink); }
.port .lib__cat[aria-pressed="true"] { background: var(--color-theme-ax-ink); color: var(--color-theme-ax-card); border-color: var(--color-theme-ax-ink); }
.port .lib__cat[aria-pressed="true"] span { color: inherit; opacity: 0.8; }
.port .lib__cat:focus-visible { outline: 3px solid var(--color-theme-ax-focus); outline-offset: 2px; }
.port .lib__count { font-weight: 800; color: var(--color-theme-ax-ink-2); }
.port .lib__empty { padding: 28px 0; color: var(--color-theme-ax-ink-2); }
.port .sc-card[hidden] { display: none; }
/* 첫 쪽 패키지 판(scripts/packages-lib.mjs · 11-11 brief MSG-99aa1e9b B) — 판 색(skin)은 판이 정하고 여기서는 자리만 */
.pk-fit { margin-top: 6px; color: var(--ax-ink); font-weight: 700; line-height: 1.55; }
.pk-fit + .ax-tag { margin-top: 18px; }
.ax-pkg__grid .ax-list + .pk-facts, .ax-effect + .pk-facts { margin-top: 18px; }
.pk-facts .ax-tag + * { margin-top: 6px; }
.pk-facts > * + .ax-tag { margin-top: 14px; }
.pk-cases { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-cases li { list-style: none; }
.pk-cases a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ax-ink) 20%, transparent); color: var(--ax-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.pk-cases a:hover { border-color: var(--ax-ink); }
.pk-cases a:focus-visible, .pk-start a:focus-visible { outline: 3px solid var(--ax-teal); outline-offset: 2px; }
.pk-human { color: var(--ax-ink-2); }
.pk-start { margin-top: 14px; font-weight: 800; color: var(--ax-ink); }
.pk-start a { color: inherit; text-decoration: underline; text-decoration-color: var(--ax-teal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pk-common__t { margin-bottom: 18px; }
.pk-common__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
@media (max-width: 900px) { .pk-common__grid { grid-template-columns: 1fr; } }
.pk-common__cta { margin-top: 24px; }
/* 업종 상세(/industries/<id>/ · scripts/industries-lib.mjs · 11-11) */
.port--ind .ind-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center; padding: 24px 0 44px; }
.port--ind .ind-hero--plain { grid-template-columns: 1fr; }
.port--ind .ind-hero__title { font-size: clamp(30px, 4.2vw, 52px); }
.port--ind .ind-hero__art { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.port--ind .ind-hero__art img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.port--ind .ind-hero__art .img-tag { position: absolute; right: 10px; bottom: 10px; }
.port--ind .ind-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.port--ind .ind-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); font-weight: 800; font-size: 15.5px; text-decoration: none; color: var(--color-theme-ax-card); background: var(--color-theme-ax-ink); border: 1px solid var(--color-theme-ax-ink); }
.port--ind .ind-btn--ghost { color: var(--color-theme-ax-ink); background: var(--color-theme-ax-card); border-color: var(--ax-rule); }
.port--ind .ind-btn:focus-visible, .port--ind .ind-more:focus-visible, .port--ind .ind-pkg:focus-visible { outline: 3px solid var(--color-theme-ax-focus); outline-offset: 2px; }
@media (max-width: 900px) { .port--ind .ind-hero { grid-template-columns: 1fr; } }
.port--ind .ind-sec { padding: 44px 0; border-top: 1px solid var(--ax-rule); scroll-margin-top: 120px; }
.port--ind .ind-sec--band { background: var(--color-theme-ax-band); border-radius: var(--radius-md); padding: 36px 28px; border-top: 0; margin: 12px 0; }
.port--ind .ind-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 900; color: var(--color-theme-ax-card); background: var(--color-theme-ax-ink); }
.port--ind .ind-pains, .port--ind .ind-flow { display: grid; gap: 12px; }
.port--ind .ind-pains > li, .port--ind .ind-flow > li { list-style: none; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-md); background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); }
.port--ind .ind-pains__t, .port--ind .ind-flow__t { margin: 2px 0 0; font-size: 17px; font-weight: 800; color: var(--ax-ink); }
.port--ind .ind-pains__d, .port--ind .ind-flow__d { margin-top: 4px; font-size: 15px; }
.port--ind .ind-src { margin-top: 6px; font-size: 13px; color: var(--color-theme-ax-ink-3); }
.port--ind .ind-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.port--ind .ind-task { list-style: none; padding: 18px 20px; border-radius: var(--radius-md); background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); }
.port--ind .ind-task h3 { margin-top: 10px; font-size: 18px; font-weight: 900; line-height: 1.4; }
.port--ind .ind-task h3 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.port--ind .ind-task p { font-size: 15px; }
.port--ind .ind-task__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.port--ind .ind-pkg, .port--ind .ind-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 800; text-decoration: none; color: var(--color-theme-ax-accent); background: color-mix(in srgb, var(--color-theme-ax-accent) 10%, var(--color-theme-ax-card)); }
.port--ind .ind-chip { color: var(--color-theme-ax-human); background: color-mix(in srgb, var(--color-theme-ax-human) 10%, var(--color-theme-ax-card)); }
.port--ind .ind-chip--state { margin-right: 8px; color: var(--color-theme-ax-accent); background: color-mix(in srgb, var(--color-theme-ax-accent) 10%, var(--color-theme-ax-card)); }
.port--ind .ind-note { margin-top: 14px; font-size: 14.5px; color: var(--color-theme-ax-ink-2); }
.port--ind .ind-note--top { margin: 0 0 12px; }
.port--ind .ind-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.port--ind .ind-money > li { list-style: none; padding: 20px; border-radius: var(--radius-md); background: var(--color-theme-ax-card); }
.port--ind .ind-money__who { margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--ax-accent); }
.port--ind .ind-money__t { margin-top: 4px; font-size: 18px; font-weight: 900; color: var(--ax-ink); }
.port--ind .ind-money__d { font-size: 15px; }
@media (max-width: 760px) { .port--ind .ind-money { grid-template-columns: 1fr; } }
.port--ind .ind-list > li { list-style: none; position: relative; padding-left: 18px; margin-top: 8px; color: var(--ax-ink-2); }
.port--ind .ind-list > li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ax-accent); }
.port--ind .ind-list--big > li { font-size: 18px; font-weight: 800; color: var(--ax-ink); }
.port--ind .ind-lead { font-size: 18px; font-weight: 800; color: var(--ax-ink); }
.port--ind .ind-effects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.port--ind .ind-effects > li { list-style: none; padding: 18px 20px; border-radius: var(--radius-md); background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); }
.port--ind .ind-effects__k { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--ax-ink-2); display: flex; gap: 8px; align-items: center; }
.port--ind .ind-effects__n { margin-top: 8px; font-size: 22px; font-weight: 900; color: var(--ax-ink); }
.port--ind .ind-effects__how { font-size: 14px; }
.port--ind .ind-more { font-weight: 800; color: var(--ax-ink); text-decoration: underline; text-decoration-color: var(--ax-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.port--ind .ind-sub { margin-top: 26px; font-size: 17px; font-weight: 900; }
.port--ind .ind-custs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.port--ind .ind-cust { list-style: none; padding: 18px 20px; border-radius: var(--radius-md); background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); }
.port--ind .ind-cust__name { margin: 0 0 6px; font-size: 18px; font-weight: 900; color: var(--ax-ink); }
.port--ind .ind-cust ul > li { list-style: none; margin-top: 4px; font-size: 15px; color: var(--ax-ink-2); }
.port--ind .ind-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.port--ind .ind-cards > li { list-style: none; }
.port--ind .ind-cards a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: var(--radius-pill); border: 1px solid var(--ax-rule); background: var(--color-theme-ax-card); color: var(--ax-ink); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.port--ind .ind-cards a:hover { border-color: var(--ax-ink); }
.port--ind .ind-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.port--ind .ind-others > li { list-style: none; }
.port--ind .ind-others a { display: grid; gap: 4px; min-height: 44px; padding: 16px 18px; border-radius: var(--radius-md); border: 1px solid var(--ax-rule); background: var(--color-theme-ax-card); color: var(--ax-ink); text-decoration: none; }
.port--ind .ind-others a span { font-size: 14px; color: var(--ax-ink-2); }
.port--ind .ind-others a:hover { border-color: var(--ax-ink); }
.ax-ind2__tasks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ax-ind2__tasks i { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, transparent); }
/* 그림 없는 카드(프랜차이즈 본사 · 파란 그라데이션 바탕 · 흰 글): 칩 바탕을 짙게 깔아 흰 글 대비를 올린다(3.90 → AA) */
.ax-ind2 a.is-plain .ax-ind2__tasks i { color: var(--color-theme-ax-dark-ink); background: color-mix(in srgb, var(--color-theme-ax-ink) 45%, transparent); }
/* 실적용 사례(/cases/ · scripts/cases-lib.mjs · 11-11) */
.port .inh-sec { padding: 40px 0 8px; border-top: 1px solid var(--ax-rule); }
.port .inh-sec__title { font-size: clamp(24px, 3vw, 34px); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 20px; }
.port .inh-sec__title span { margin-left: 4px; color: var(--color-theme-ax-ink-3); }
.port .inh-ax { background: none; }
.port .inh-ax .ax-case5 + .ax-case5 { margin-top: 40px; }
.port .inh-jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
/* 바로가기 알약 앞에 본문 목록 점(.port ul:not([class]):not(.ax-page ul) > li::before)이 찍히지 않게 같은 꼴로 덮는다(11-11 공개 쪽 390 잼) */
.port .inh-jump ul:not([class]):not(.ax-page ul) > li { list-style: none; padding-left: 0; margin-top: 0; }
.port .inh-jump ul:not([class]):not(.ax-page ul) > li::before { content: none; }
.port .inh-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--ax-rule); background: var(--color-theme-ax-card); color: var(--color-theme-ax-ink); font-size: 14.5px; font-weight: 800; text-decoration: none; }
.port .inh-jump a span { margin-left: 6px; color: var(--color-theme-ax-ink-3); font-weight: 700; }
.port .inh-jump a:hover { border-color: var(--color-theme-ax-ink); }
.port .inh-jump a:focus-visible { outline: 3px solid var(--color-theme-ax-focus); outline-offset: 2px; }
.port .inh-group { padding: 28px 0 8px; scroll-margin-top: 130px; }
.port .inh-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.port .inh-group__title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 900; letter-spacing: -0.02em; }
.port .inh-group__title span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--ax-accent); }
.port .inh-group__back { font-size: 14px; font-weight: 800; color: var(--ax-accent); text-decoration: underline; text-underline-offset: 3px; }
.port .inh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.port .inh-card { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; border-radius: var(--radius-md); border: 1px solid var(--ax-rule); background: var(--color-theme-ax-card); }
.port .inh-card__shot { margin: -4px -6px 4px; border-radius: 10px; overflow: hidden; }
.port .inh-card__shot[hidden] { display: none; }
.port .inh-card__shot img { display: block; width: 100%; height: auto; }
.port .inh-card__meta { display: flex; align-items: center; gap: 10px; margin: 0; }
.port .inh-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 800; color: var(--color-theme-ax-accent); background: color-mix(in srgb, var(--color-theme-ax-accent) 10%, var(--color-theme-ax-card)); }
.port .inh-chip--done { color: var(--color-theme-ax-ink-2); background: var(--color-theme-ax-band); }
.port .inh-card__since { font-size: 13px; font-weight: 700; color: var(--color-theme-ax-ink-3); }
.port .inh-card__title { font-size: 17px; font-weight: 900; line-height: 1.4; color: var(--ax-ink); }
.port .inh-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ax-ink-2); }
.ax-pkg__cases { margin: 6px 0 18px; }
.ax-pkg__cases .ax-more-link { margin-top: 0; color: var(--ax-ink); text-decoration: underline; text-decoration-color: var(--ax-teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* 문서 쪽(개인정보 처리방침 · 지금 www 에서 글 그대로 · scripts/capture-privacy.mjs · 11-11) */
.port--doc .doc { max-width: 860px; padding: 8px 0 48px; }
.port--doc .doc-toc { margin: 8px 0 28px; padding: 18px 22px; border-radius: var(--radius-md); background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); }
.port--doc .doc-toc ol { columns: 2; column-gap: 28px; list-style: decimal; padding-left: 20px; }
.port--doc .doc-toc li { break-inside: avoid; margin: 4px 0; color: var(--ax-ink-2); }
@media (max-width: 760px) { .port--doc .doc-toc ol { columns: 1; } }
.port--doc .doc h2 { margin: 40px 0 12px; font-size: clamp(20px, 2.2vw, 26px); scroll-margin-top: 140px; }
.port--doc .doc h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 800; }
.port--doc .doc-table { overflow-x: auto; margin-top: 12px; }
.port--doc .doc-table table { min-width: 560px; margin-top: 0; }
.port--doc .doc blockquote { margin: 14px 0; padding: 12px 16px; border-left: 3px solid var(--ax-accent); background: var(--color-theme-ax-card); color: var(--ax-ink-2); }
.port--doc .doc code { font-size: 0.92em; padding: 1px 6px; border-radius: 6px; background: var(--color-theme-ax-band); }
/* 첫 쪽 협력사 띠 — 이름이 안 읽히는 로고(정사각 마크 · 작은 글자)는 옆에 회사 이름, 로고 파일이 없는 곳은 이름만(사용자 11-11) */
.ax-marquee__track .ax-partner { gap: 10px; }
.ax-partner__name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; color: var(--ax-ink); }
.ax-partner--text .ax-partner__name { font-size: 22px; font-weight: 900; }
@media (max-width: 760px) { .ax-partner__name { font-size: 16px; } .ax-partner--text .ax-partner__name { font-size: 17px; } }
/* 시나리오 라이브러리 — 업무 갈래 절(scripts/scenarios-lib.mjs · 11-11) */
.port .lib--scn > .scn-sec { padding: 36px 0 8px; border-top: 1px solid var(--ax-rule); }
.port .lib--scn > .scn-sec[hidden] { display: none; }
.port .scn-sec__title { margin-bottom: 16px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; letter-spacing: -0.03em; scroll-margin-top: 140px; }
.port .scn-sec__title span { margin-left: 4px; color: var(--color-theme-ax-ink-3); }
.port .scn-sec__more { margin-top: 16px; }
.port .scn-sec__more[hidden] { display: none; }
.port .scn-more { min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); font: inherit; font-size: 14.5px; font-weight: 800; color: var(--color-theme-ax-ink); background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); cursor: pointer; }
.port .scn-more:hover { border-color: var(--color-theme-ax-ink); }
.port .scn-more:focus-visible { outline: 3px solid var(--color-theme-ax-focus); outline-offset: 2px; }
.port .scn-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.port .scn-tools > li { list-style: none; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; color: var(--color-theme-ax-ink-2); background: var(--color-theme-ax-band); }
@media (max-width: 900px) { .port .lib__tools { grid-template-columns: 1fr; } }
.port .sc-grid > li, .port .how > li, .port .ip-teams > li { list-style: none; }
/* 칩 · 번호표 */
.port .sc-chip, .port .chip, .port .ip-chip, .port .sc-id, .port .sc-flag, .port .ip-id { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-pill); color: var(--color-theme-ax-accent); background: color-mix(in srgb, var(--color-theme-ax-accent) 10%, var(--color-theme-ax-card)); text-decoration: none; }
.port .sc-id, .port .ip-id { color: var(--color-theme-ax-ai); background: color-mix(in srgb, var(--color-theme-ax-ai) 10%, var(--color-theme-ax-card)); }
.port .sc-flag, .port .chip--exec { color: var(--color-theme-ax-human); background: color-mix(in srgb, var(--color-theme-ax-human) 10%, var(--color-theme-ax-card)); }
.port .chip--plan { color: var(--color-theme-ax-ink-3); background: var(--color-theme-ax-band); }
/* 흐름 단계 */
.port .sd-flow { counter-reset: none; display: grid; gap: 10px; margin-top: 14px; }
.port .sd-step { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: start; background: var(--color-theme-ax-card); border: 1px solid var(--ax-rule); border-radius: var(--radius-md); padding: 14px 16px; color: var(--ax-ink); }
.port .sd-step__n { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: var(--color-theme-ax-card); background: var(--color-theme-ax-ink); }
.port .sd-step__who { font-size: 13px; font-weight: 800; color: var(--ax-accent); }
.port .sd-step--human { border-color: color-mix(in srgb, var(--color-theme-ax-human) 45%, var(--color-theme-ax-card)); background: color-mix(in srgb, var(--color-theme-ax-human) 5%, var(--color-theme-ax-card)); }
.port .sd-step--human .sd-step__n { background: var(--color-theme-ax-human); }
.port .sd-step--human .sd-step__who { color: var(--color-theme-ax-human); }
.port .sd-note, .port .ip-note, .port .ip-weeks__note { font-size: 13.5px; color: var(--ax-ink-3); }
/* 출처 */
.port .ip-src { display: block; font-size: 12.5px; color: var(--ax-ink-3); margin-top: 6px; }
.port .ip-src__item { display: inline; }
.port .ip-src a { color: var(--ax-ink-3); }
.port .cx-cite { font-size: 12.5px; color: var(--ax-ink-3); }
/* 옛 단추 → 새 단추 */
.port .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); font-weight: 800; font-size: 15px; margin: 10px 8px 0 0; border: 1.5px solid var(--ax-rule); color: var(--ax-ink); background: var(--color-theme-ax-card); text-decoration: none; }
.port .btn--primary { background: var(--color-theme-ax-ink); color: var(--color-theme-ax-card); border-color: transparent; }
.port .link-arrow, .port .chip--link { color: var(--ax-accent); font-weight: 800; }
.port .stat__num { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; color: var(--ax-ink); }
.port .ladder__name { font-weight: 900; color: var(--ax-ink); }
.port .ladder__weeks { font-size: 13px; font-weight: 800; color: var(--ax-accent); }
.port .ip-h2__no { color: var(--ax-accent); margin-right: 6px; }
@media (max-width: 900px) {
  .port .ip-hero { grid-template-columns: 1fr; }
  .port dl > div { grid-template-columns: 1fr; gap: 2px; }
}

@font-face { font-family: "GENAX Sans"; font-weight: 400 900; font-display: swap; src: url("./genax-sans-port.168d181321.woff2") format("woff2-variations"), url("./genax-sans-port.168d181321.woff2") format("woff2"); unicode-range: U+2014, U+203A, U+2194, U+2460-2468, U+25CB, U+300C-300D, U+AC08, U+AC12, U+AC14-AC16, U+AC1B, U+AC20, U+AC31, U+AC71, U+AC77, U+ACA0, U+ACAA, U+ACB9, U+ACBC, U+ACE4, U+ACE7, U+AD11, U+AD1C, U+AD70, U+AD73-AD74, U+AD81, U+ADE0, U+AE0B, U+AE0D, U+AE50, U+AE54, U+AE5D, U+AE65, U+AE68, U+AEBC, U+AF08, U+AF2D, U+AF34, U+AF3D, U+AF43, U+AFBC, U+AFC0, U+AFC8-AFC9, U+AFE8, U+B010, U+B014, U+B044, U+B04A, U+B04C, U+B054, U+B057, U+B080, U+B08C, U+B099, U+B0A1, U+B0AC-B0AD, U+B0B1, U+B0C5, U+B0C8-B0C9, U+B0E5, U+B109, U+B125, U+B128, U+B150, U+B17C, U+B180, U+B18D, U+B20C, U+B220, U+B2A0, U+B2CC, U+B2D9, U+B2E5, U+B2EB, U+B2ED-B2EE, U+B2FF, U+B308, U+B313, U+B355, U+B35C, U+B367, U+B369, U+B378, U+B3D5, U+B420, U+B454, U+B460-B461, U+B4C8, U+B4DD, U+B4EF, U+B527, U+B529-B52A, U+B538, U+B5A1, U+B5A8, U+B5BC, U+B69C, U+B6B1, U+B6F0, U+B6F4, U+B700, U+B728, U+B72C, U+B72F, U+B738, U+B73B, U+B744, U+B77D, U+B790-B791, U+B799, U+B7B5, U+B7F4, U+B7FD, U+B7FF, U+B807, U+B82C, U+B837-B839, U+B860, U+B864, U+B86C-B86D, U+B8B0, U+B8EC, U+B8F0, U+B8F8-B8F9, U+B904, U+B960, U+B9AD, U+B9BF, U+B9E5, U+B9E8, U+B9F5, U+BA38-BA39, U+BA40, U+BA58, U+BA64, U+BA78, U+BAAB, U+BB35, U+BB45, U+BBA4, U+BBC0, U+BBFF-BC00, U+BC08, U+BC0B, U+BC0F, U+BC11, U+BC1D, U+BC2D, U+BC31, U+BC45, U+BC97, U+BCA0, U+BCA4, U+BCA8, U+BCBC-BCBD, U+BCD1, U+BD07, U+BD09, U+BD10, U+BD81, U+BD89, U+BE45, U+BE48, U+BE4C, U+BE59, U+BE60, U+BE68, U+BE75, U+BE7C, U+BE80, U+BE84, U+BE90, U+BF08, U+BFCC, U+BFD0, U+C058, U+C05C, U+C068, U+C0AD, U+C0BC, U+C0C9, U+C11E, U+C12C, U+C13C, U+C149, U+C14B, U+C15C, U+C168, U+C228, U+C26C, U+C27D, U+C288, U+C2A8, U+C2AC, U+C2B7, U+C2EC, U+C2F1, U+C2F6, U+C2F8, U+C2FC, U+C30D, U+C378, U+C37C, U+C3DF-C3E0, U+C465, U+C4F4, U+C528, U+C545, U+C554, U+C558-C559, U+C564, U+C568, U+C587, U+C5B8, U+C5C4, U+C5C9, U+C5CC, U+C5D4, U+C5E0, U+C5E3, U+C5EE, U+C5F4, U+C600, U+C606, U+C61B, U+C634, U+C653, U+C65C, U+C6C0, U+C717, U+C721, U+C724, U+C735, U+C74D, U+C783, U+C789-C78A, U+C7A0, U+C7A3, U+C7B0, U+C7B4, U+C7BC-C7BD, U+C7C1, U+C838, U+C84C, U+C881, U+C88B-C88C, U+C8FD, U+C90D, U+C918, U+C950, U+C989, U+C98C, U+C998, U+C9D0, U+C9D3, U+C9DC-C9DD, U+C9E0, U+CA61, U+CABC, U+CACC, U+CB49, U+CBE4, U+CC0D, U+CC2C, U+CC2E, U+CC30, U+CC38, U+CC45, U+CC48, U+CC4C, U+CC54, U+CC57, U+CC59, U+CC99, U+CCD0, U+CCE4, U+CD0C, U+CD18, U+CD1D, U+CD2C, U+CDA5, U+CDA9, U+CDC4, U+CDE8, U+CE21, U+CE6D, U+CE7C, U+CE90, U+CE94, U+CE98, U+CEA0-CEA1, U+CEE4, U+CEE8, U+CEEC, U+CEF4, U+CF13, U+CF20, U+CF30, U+CF54, U+CF5C, U+CFE0, U+CFE8, U+CFFC, U+D018, U+D034, U+D050, U+D074, U+D07C, U+D0A8, U+D0AC, U+D0B4, U+D0B7, U+D0B9, U+D0C1, U+D0D0, U+D0D5, U+D0DD, U+D0ED, U+D134, U+D140, U+D14D, U+D154, U+D1A4, U+D1F4, U+D230, U+D23C, U+D2BC, U+D2C0, U+D2C8, U+D2F0-D2F1, U+D2F8, U+D30C, U+D30E, U+D314, U+D31C, U+D31F, U+D329, U+D338, U+D37C, U+D380, U+D38C, U+D39C, U+D3AB, U+D3BC, U+D3ED, U+D3F4, U+D478, U+D47C, U+D48D, U+D4E8, U+D508, U+D53D, U+D540, U+D575, U+D588, U+D5C8, U+D5CC, U+D5E4, U+D5EC, U+D5F7, U+D601, U+D614-D615, U+D61C, U+D65C, U+D69F, U+D6C5, U+D6D1, U+D754, U+D758-D759, U+D76C, U+D770, U+D790; }

/* 생성물 — scripts/import-landing.mjs 가 C:/repo/higgs/genax/hf-genax-ax-film/app/src/components/ax/ax.css 에서 옮겼다(@font-face 뺌) */
/*
 * GENAX AX 판 — Higgsfield 사이트 두 벌이 같이 쓰는 스타일.
 * 색 값은 GENAX 브랜드 토큰 정본(sterk-agent-designer projects/genax/site/tokens/genax.tokens.json · theme.ax 어두운 면)과 같은 값이고,
 * 이 파일 맨 위 :root 한 자리에만 적는다. 아래 부품은 변수만 쓴다.
 * 서체: GENAX Sans = Pretendard Variable 1.3.9 부분 집합(SIL OFL 1.1 · 이름 바꿈 · /fonts/OFL.txt).
 */
/* 밝은 종이 면(기본) — theme.ax 밝은 면 값. 11-10 사용자 「쫌더 편안한 느낌으로」 → 아침 햇살 영상에 맞춰 밝게 */
.ax-page {
  --ax-deep: #fbfaf7;      /* paper.50 · 쪽 바탕 */
  --ax-bg: #f1eee6;        /* paper.100 · 띠 */
  --ax-raised: #ffffff;    /* snow.0 */
  --ax-card: #ffffff;      /* snow.0 */
  --ax-ink: #070b14;       /* ink.950 */
  --ax-ink-2: #34446a;     /* ink.600 */
  --ax-ink-3: #56627f;     /* ink.500 */
  --ax-azure: #2f6fd0;     /* azure.600 */
  --ax-azure-2: #245fbf;   /* azure-deep.700 */
  --ax-teal: #0f7a6e;      /* teal.700 */
  --ax-amber: #c47a12;     /* amber.600 */
  --ax-amber-2: #8a5207;   /* amber.800 */
  --ax-amber-fill: #f6ae45;/* amber.400 · 면 채움 */
  --ax-coral: #b5401f;     /* coral.700 */
  --ax-white: #ffffff;     /* snow.0 */
  --ax-grad: linear-gradient(100deg, var(--ax-azure), var(--ax-teal) 55%, var(--ax-amber));
  --ax-ease: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ax-wrap: 1200px;
  --ax-gutter: 28px;
  --ax-sec: 128px;
}

/* 깊은 면(상담 절) — 같은 이름의 변수를 theme.ax 어두운 면 값으로 갈아 끼운다 */
.ax-dark {
  --ax-deep: #070b14;      /* ink.950 */
  --ax-bg: #0c1322;        /* ink.900 */
  --ax-raised: #111a2c;    /* ink.850 */
  --ax-card: #172136;      /* ink.800 */
  --ax-ink: #eef2f9;       /* mist.100 */
  --ax-ink-2: #b4bfd4;     /* mist.300 */
  --ax-ink-3: #8e9bb6;     /* mist.400 */
  --ax-azure: #5f97f6;     /* azure.400 */
  --ax-azure-2: #8fb6ff;   /* azure.300 */
  --ax-teal: #79e0d6;      /* teal.300 */
  --ax-amber: #f6ae45;     /* amber.400 */
  --ax-amber-2: #ffcf85;   /* amber.300 */
  --ax-coral: #ff9c8f;     /* coral.300 */
  background: var(--ax-deep);
  color: var(--ax-ink);
}

.ax-page {
  font-family: "GENAX Sans", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--ax-deep);
  color: var(--ax-ink);
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
:where(.ax-page) a { color: inherit; text-decoration: none; } /* 우선순위 0 — 단추 색(.ax-btn--*)을 이기지 않게 */
/* 초기화는 우선순위 0 — 클래스 하나짜리 규칙의 margin(.ax-hero__def 등)을 죽이지 않게(docs 2차 3에서 드러남) */
:where(.ax-page) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.ax-page) :where(h1, h2, h3, h4, p, dl, dd, figure) { margin: 0; }
.ax-page :focus-visible { outline: 3px solid var(--ax-azure-2); outline-offset: 3px; border-radius: 8px; }
.ax-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ax-wrap { max-width: var(--ax-wrap); margin: 0 auto; padding: 0 var(--ax-gutter); position: relative; }

/* 글 */
.ax-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.12em; color: var(--ax-teal); }
.ax-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--ax-grad); }
.ax-h2 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 900; line-height: 1.2; letter-spacing: -0.035em; margin-top: 16px; text-wrap: balance; }
.ax-h3 { font-size: 20px; font-weight: 900; line-height: 1.4; margin-top: 10px; }
.ax-h3--lg { font-size: 24px; }
.ax-h3--xl { font-size: 30px; }
.ax-h4 { font-size: 17px; font-weight: 900; line-height: 1.4; }
.ax-grad { font-style: normal; background: var(--ax-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ax-ink-2); margin-top: 18px; max-width: 760px; }
.ax-src { font-size: 12.5px; color: var(--ax-ink-3); margin-top: 10px; }
.ax-tag { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--ax-teal); }
.ax-tag--alert { color: var(--ax-coral); }
.ax-tag--mute { color: var(--ax-ink-3); }
.ax-subh { font-size: 22px; font-weight: 900; margin-top: 64px; }
.ax-subh--lg { font-size: clamp(20px, 2.2vw, 26px); }
.ax-mt-s { margin-top: 18px !important; }

/* 단추 */
.ax-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 800; font-size: 16px; border: 1.5px solid transparent; transition: transform 150ms var(--ax-ease), background-color 260ms var(--ax-ease), border-color 260ms var(--ax-ease), box-shadow 260ms var(--ax-ease); }
.ax-btn:active { transform: translateY(1px) scale(0.98); }
.ax-btn--pri { background: var(--ax-ink); color: var(--ax-deep); }
.ax-btn--pri:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ax-azure) 25%, transparent); }
.ax-btn--sec, .ax-btn--ghost { color: var(--ax-ink); border-color: color-mix(in srgb, var(--ax-ink) 28%, transparent); background: color-mix(in srgb, var(--ax-deep) 30%, transparent); backdrop-filter: blur(8px); }
.ax-btn--sec:hover, .ax-btn--ghost:hover { border-color: var(--ax-ink); }
.ax-btn--light { background: var(--ax-white); color: var(--ax-deep); }
.ax-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }

/* 마크 · 머리띠 */
.ax-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.08em; font-size: 17px; color: var(--ax-ink); }
.ax-mark__sq { display: block; width: 26px; height: 26px; border-radius: 8px; background: conic-gradient(from 210deg, var(--ax-azure), var(--ax-teal), var(--ax-amber), var(--ax-azure)); }
.ax-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: color-mix(in srgb, var(--ax-deep) 62%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.ax-nav__links { display: flex; gap: 26px; font-size: 15px; font-weight: 700; color: var(--ax-ink-2); }
.ax-nav__links a:hover { color: var(--ax-ink); }
.ax-nav__end { display: flex; align-items: center; gap: 8px; }
.ax-nav__menu { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ax-ink) 22%, transparent); background: none; color: var(--ax-ink); cursor: pointer; }
.ax-nav__bars, .ax-nav__bars::before, .ax-nav__bars::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 260ms var(--ax-ease); }
.ax-nav__bars { position: relative; }
.ax-nav__bars::before, .ax-nav__bars::after { content: ""; position: absolute; left: 0; }
.ax-nav__bars::before { top: -5px; }
.ax-nav__bars::after { top: 5px; }
.ax-nav__menu[aria-expanded="true"] .ax-nav__bars { background: transparent; }
.ax-nav__menu[aria-expanded="true"] .ax-nav__bars::before { transform: translateY(5px) rotate(45deg); }
.ax-nav__menu[aria-expanded="true"] .ax-nav__bars::after { transform: translateY(-5px) rotate(-45deg); }

/* 절 */
.ax-sec { padding: var(--ax-sec) 0; position: relative; }
.ax-sec--base { background: var(--ax-deep); }
.ax-sec--raised { background: var(--ax-bg); }
.ax-sec--deep { background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--ax-azure) 10%, var(--ax-bg)), var(--ax-deep) 60%); }
.ax-grid { display: grid; gap: 18px; margin-top: 44px; }
.ax-g3 { grid-template-columns: repeat(3, 1fr); }
.ax-g4 { grid-template-columns: repeat(4, 1fr); }
.ax-card { position: relative; background: color-mix(in srgb, var(--ax-card) 72%, transparent); border: 1px solid color-mix(in srgb, var(--ax-ink) 9%, transparent); border-radius: 22px; padding: 26px; backdrop-filter: blur(6px); transition: border-color 260ms var(--ax-ease), transform 260ms var(--ax-ease); }
.ax-card:hover { border-color: color-mix(in srgb, var(--ax-azure) 40%, transparent); }
.ax-card--glow { background: linear-gradient(160deg, color-mix(in srgb, var(--ax-azure) 22%, var(--ax-card)), color-mix(in srgb, var(--ax-teal) 10%, var(--ax-raised)) 60%, var(--ax-raised)); border-color: color-mix(in srgb, var(--ax-teal) 35%, transparent); }
.ax-card__p { color: var(--ax-ink-2); font-size: 15.5px; margin-top: 8px; }

/* 숫자 */
.ax-stat3 { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid color-mix(in srgb, var(--ax-ink) 18%, transparent); }
.ax-stat3 li { padding: 22px 22px 0 0; }
.ax-stat3 b { display: block; font-size: clamp(20px, 2.3vw, 28px); font-weight: 900; letter-spacing: -0.03em; }
.ax-stat3 span { display: block; font-size: 14.5px; color: var(--ax-ink-2); }
.ax-num { font-size: 64px; margin-top: 10px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.ax-num small, .ax-hire small { font-size: 0.42em; letter-spacing: -0.01em; }
.ax-hire { margin-top: 8px; font-size: 46px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }

/* 걱정 */
.ax-quote { display: flex; flex-direction: column; }
.ax-quote__q { font-size: 21px; font-weight: 800; line-height: 1.45; }
.ax-quote__q::before { content: "“"; display: block; font-size: 44px; line-height: 0.6; margin-bottom: 6px; color: var(--ax-amber); }
.ax-reassure { margin-top: 34px; padding: 22px 26px; border-radius: 22px; font-size: 19px; font-weight: 800; background: linear-gradient(100deg, color-mix(in srgb, var(--ax-azure) 18%, transparent), color-mix(in srgb, var(--ax-teal) 16%, transparent)); border: 1px solid color-mix(in srgb, var(--ax-teal) 30%, transparent); }

/* 실패 · 어려움 */
.ax-fail .ax-card { border-color: color-mix(in srgb, var(--ax-coral) 22%, transparent); }
.ax-why { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ax-why li { padding: 12px 18px; border-radius: 14px; background: var(--ax-ink); color: var(--ax-deep); font-weight: 700; font-size: 15px; }
.ax-pains { counter-reset: pain; margin-top: 18px; }
.ax-pain { display: grid; grid-template-columns: 44px 1fr; gap: 14px; counter-increment: pain; }
.ax-pain::before { content: counter(pain); width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--ax-coral); background: color-mix(in srgb, var(--ax-coral) 14%, transparent); }
.ax-pain .ax-h3 { margin-top: 0; }

/* 흐름 · 팀 */
.ax-flow { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 18px; margin-top: 44px; }
.ax-say { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ax-azure) 14%, transparent); font-weight: 700; font-size: 15.5px; }
.ax-steps { margin-top: 16px; display: grid; gap: 8px; counter-reset: step; }
.ax-steps li { counter-increment: step; display: flex; gap: 10px; align-items: baseline; background: color-mix(in srgb, var(--ax-deep) 45%, transparent); border: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); border-radius: 14px; padding: 10px 14px; font-size: 15px; }
.ax-steps li::before { content: counter(step); font-weight: 900; color: var(--ax-teal); }
.ax-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.ax-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: var(--ax-teal); background: color-mix(in srgb, var(--ax-teal) 14%, transparent); }
.ax-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ax-chip--dev { color: var(--ax-azure-2); background: color-mix(in srgb, var(--ax-azure) 18%, transparent); }
.ax-chip--ex { color: var(--ax-amber-2); background: color-mix(in srgb, var(--ax-amber) 16%, transparent); }
.ax-chip--plan { color: var(--ax-ink-3); background: color-mix(in srgb, var(--ax-ink) 8%, transparent); }
.ax-chip--plan::before { background: transparent; border: 1.5px solid currentColor; }
.ax-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.ax-team__mgr { display: flex; flex-direction: column; justify-content: center; }

/* 지식 HUB */
.ax-hub { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; margin-top: 44px; }
.ax-hub:not(:has(.ax-hub__fig)) { grid-template-columns: 1fr; max-width: 760px; }
.ax-hub__fig img { display: block; width: 100%; height: auto; border-radius: 26px; border: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ax-azure) 55%, transparent); }
.ax-hub__list li { padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 12%, transparent); }
.ax-hub__list b { font-size: 19px; display: block; }
.ax-hub__list span { color: var(--ax-ink-2); font-size: 15px; }

/* 툴팁(용어 풀이) — hover · focus · Esc 로 닫힘 · 누르면 열림. 닫힌 것은 그리지 않는다(좁은 화면 폭을 밀지 않게) */
.ax-term { position: relative; display: inline-block; }
.ax-term__btn { font: inherit; font-weight: 800; color: var(--ax-ink); background: none; border: 0; padding: 0; cursor: help; border-bottom: 1.5px dashed currentColor; line-height: 1.2; -webkit-text-fill-color: currentColor; }
.ax-grad .ax-term__btn { color: var(--ax-azure-2); border-bottom-width: 2px; }
.ax-tip { display: none; position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; width: max-content; max-width: min(300px, calc(100vw - 56px)); padding: 10px 14px; border-radius: 14px; background: var(--ax-ink); color: var(--ax-deep); -webkit-text-fill-color: currentColor; font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; text-align: left; white-space: normal; box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); pointer-events: none; }
.ax-term:hover .ax-tip, .ax-term:focus-within .ax-tip, .ax-term.is-open .ax-tip { display: block; }
.ax-term.is-gone .ax-tip { display: none; }

/* 비교 표 */
.ax-table { margin-top: 40px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ax-ink) 12%, transparent); overflow: hidden; background: color-mix(in srgb, var(--ax-card) 60%, transparent); }
.ax-vs { width: 100%; border-collapse: collapse; font-size: 16px; }
.ax-vs th, .ax-vs td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-vs thead th, .ax-vs thead td { font-size: 15px; background: color-mix(in srgb, var(--ax-ink) 5%, transparent); }
.ax-vs thead .ax-vs__us { background: var(--ax-ink); color: var(--ax-deep); }
.ax-vs tbody th { font-weight: 800; width: 150px; }
.ax-vs tbody td { color: var(--ax-ink-2); }
.ax-vs tbody .ax-vs__us { color: var(--ax-ink); font-weight: 700; background: color-mix(in srgb, var(--ax-azure) 9%, transparent); }
.ax-vs small { display: block; font-size: 12px; color: var(--ax-ink-3); font-weight: 500; margin-top: 2px; }
.ax-vs tbody tr:last-child > * { border-bottom: 0; }
.ax-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ax-ab dl { margin-top: 14px; }
.ax-ab dl div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); font-size: 15.5px; }
.ax-ab dt { font-weight: 800; color: var(--ax-ink-3); }
.ax-card--glow.ax-card dt { color: var(--ax-teal); }

/* 시간 절감 */
.ax-ef { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; margin-top: 40px; align-items: start; }
.ax-ef__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ax-ef__head .ax-h3 { margin: 0; font-size: 18px; }
.ax-ef__total { margin-top: 12px; color: var(--ax-ink-2); }
.ax-ef__total b { font-size: 52px; font-weight: 900; color: var(--ax-ink); letter-spacing: -0.04em; margin-right: 4px; }
.ax-bar { display: flex; height: 52px; border-radius: 14px; overflow: hidden; margin-top: 16px; font-weight: 800; font-size: 15px; }
.ax-bar > div { display: flex; align-items: center; padding: 0 16px; white-space: nowrap; overflow: hidden; color: var(--ax-deep); }
.ax-bar__ai { flex: 0 0 70%; background-color: var(--ax-azure); background-image: linear-gradient(90deg, var(--ax-azure), var(--ax-teal)); }
.ax-bar__hu { flex: 0 0 30%; background: var(--ax-amber-fill); color: var(--ax-ink) !important; }
.ax-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.ax-kv div { background: color-mix(in srgb, var(--ax-ink) 6%, transparent); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; color: var(--ax-ink-2); display: flex; flex-direction: column-reverse; }
.ax-kv dd { font-size: 22px; font-weight: 900; color: var(--ax-ink); }
.ax-roles ul { margin-top: 12px; }
.ax-roles li { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 13px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); font-size: 15.5px; }
.ax-roles span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ax-roles s { color: var(--ax-ink-3); }
.ax-roles i { font-style: normal; color: var(--ax-ink-3); }
.ax-roles em { font-style: normal; font-weight: 800; color: var(--ax-teal); }

/* 업종 · 시나리오 */
.ax-ind .ax-card { display: flex; flex-direction: column; }
.ax-ind ul, .ax-scn ul { margin-top: 16px; }
.ax-ind li { padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); font-size: 15.5px; font-weight: 700; }
.ax-ind li::before { content: "→"; color: var(--ax-teal); margin-right: 8px; }
.ax-ind__go { justify-content: center; }
.ax-ind__go .ax-btn { align-self: flex-start; margin-top: 22px; }
.ax-scn li { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-scn b { display: block; font-size: 16px; }
.ax-scn span { display: block; font-size: 14px; color: var(--ax-ink-2); margin-top: 4px; }
.ax-scn span i { font-style: normal; color: var(--ax-teal); font-weight: 800; }

/* 요금 */
.ax-price .ax-card { display: flex; flex-direction: column; }
.ax-amt { font-size: 52px; font-weight: 900; letter-spacing: -0.04em; margin-top: 10px; line-height: 1.15; }
.ax-amt small { font-size: 18px; color: var(--ax-ink-2); letter-spacing: -0.01em; margin-left: 4px; }
.ax-amt--word { font-size: 36px; }
.ax-price__hl { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ax-teal) 50%, transparent); }
.ax-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ax-pills li { padding: 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ax-ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ax-ink) 12%, transparent); font-size: 14px; font-weight: 700; }
.ax-start { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; counter-reset: s; }
.ax-start .ax-card::before { counter-increment: s; content: counter(s); display: flex; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; align-items: center; justify-content: center; background: var(--ax-ink); color: var(--ax-deep); font-weight: 900; }

/* 사례 */
.ax-case-main { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; margin-top: 40px; }
.ax-road li { display: grid; grid-template-columns: 86px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-road li:first-child { border-top: 0; padding-top: 0; }
.ax-road i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--ax-teal); }
.ax-road b { display: block; }
.ax-road span:not(.ax-chip) { display: block; font-size: 14px; color: var(--ax-ink-2); }
.ax-road .is-next i { color: var(--ax-ink-3); }
.ax-more { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.ax-more .ax-pills { margin-top: 0; }

/* 자주 묻는 질문 */
.ax-faq .ax-wrap { max-width: 900px; }
.ax-faq__list { margin-top: 34px; }
.ax-faq__list details { border-top: 1px solid color-mix(in srgb, var(--ax-ink) 12%, transparent); }
.ax-faq__list details:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ax-ink) 12%, transparent); }
.ax-faq__list summary { cursor: pointer; font-size: 18px; font-weight: 800; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; }
.ax-faq__list summary::-webkit-details-marker { display: none; }
.ax-faq__list summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--ax-teal); background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; transition: transform 260ms var(--ax-ease); }
.ax-faq__list details[open] summary::after { transform: rotate(45deg); }
.ax-faq__list details p { color: var(--ax-ink-2); padding-bottom: 20px; margin-top: -6px; }

/* 회사 */
.ax-co { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; margin-top: 6px; line-height: 1.2; }
.ax-co small { font-size: 16px; letter-spacing: -0.01em; }

/* 상담 */
.ax-cta { text-align: center; overflow: hidden; }
.ax-cta .ax-h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
.ax-cta .ax-lead { margin-left: auto; margin-right: auto; }
.ax-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.9; }
.ax-cta__glow { position: absolute; left: 50%; top: 45%; width: 900px; height: 900px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ax-azure) 22%, transparent), color-mix(in srgb, var(--ax-teal) 10%, transparent) 50%, transparent 70%); }
.ax-cta__btns { display: flex; justify-content: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.ax-foot { padding: 40px 0 60px; background: var(--ax-deep); color: var(--ax-ink-3); font-size: 14px; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-foot__grid { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ax-foot__co { margin-top: 10px; }
.ax-foot__end { text-align: right; }
.ax-foot b { color: var(--ax-ink); }
.ax-foot a { text-decoration: underline; text-underline-offset: 3px; }

/* 나타남(useAxReveal 이 html 에 .ax-motion 을 붙일 때만) */
@media (prefers-reduced-motion: no-preference) {
  .ax-motion [data-ax-reveal] { transition: opacity 520ms var(--ax-ease), transform 520ms var(--ax-ease); transition-delay: calc(var(--rv, 0) * 60ms); }
  .ax-motion [data-ax-reveal].is-pending { opacity: 0; transform: translateY(18px); }
}

/* 좁은 화면 */
/* 일반형 첫 화면 — 그림 한 장(아침 햇살 사무 공간) 위에 왼쪽부터 밝아지는 막 */
.ax-hero { position: relative; min-height: min(100svh, 920px); display: flex; flex-direction: column; justify-content: center; padding: 120px 0 64px; overflow: hidden; }
.ax-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.ax-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ax-deep) 94%, transparent) 0%, color-mix(in srgb, var(--ax-deep) 84%, transparent) 45%, color-mix(in srgb, var(--ax-deep) 40%, transparent) 75%, transparent 100%); }
.ax-hero__copy { position: relative; width: 100%; } /* flex 세로 배치 안의 margin auto 가 폭을 줄이지 않게 */
.ax-hero-cta + .ax-hero__term { margin-top: 18px; }
.ax-hero__title { font-size: clamp(40px, 6.2vw, 84px); font-weight: 900; line-height: 1.08; letter-spacing: -0.05em; margin-top: 20px; max-width: 760px; }
.ax-hero__lead { max-width: 600px; }
.ax-hero__term { margin-top: 20px; font-size: 14px; }
.ax-hero .ax-stat3 { max-width: 900px; }
@media (max-width: 900px) {
  .ax-hero__img { object-position: 72% 50%; }
  .ax-hero__veil { background: linear-gradient(180deg, color-mix(in srgb, var(--ax-deep) 55%, transparent) 0%, color-mix(in srgb, var(--ax-deep) 88%, transparent) 45%, var(--ax-deep) 85%); }
}

/* 영상 첫 화면 — 멈춤 단추(오른쪽 아래 · 키보드로 닿음) */
.ax-hero--video video.ax-hero__img { background: var(--ax-bg); }
.ax-hero__toggle { position: absolute; right: var(--ax-gutter); bottom: 20px; z-index: 2; min-height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: var(--ax-ink); background: color-mix(in srgb, var(--ax-deep) 80%, transparent); border: 1px solid color-mix(in srgb, var(--ax-ink) 20%, transparent); backdrop-filter: blur(8px); cursor: pointer; }
.ax-hero__toggle:hover { border-color: var(--ax-ink); }

/* 첫 장(영상 여정) 단추 줄 */
.ax-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ── v3 A안 판(11-10 · docs MSG-ff9e9617) ── 색 · 굵기는 이 사이트 그대로(사용자 정정) */

.ax-sec { padding: 96px 0; } /* 절 위 빈 띠 줄임(docs 10) */
/* 메뉴로 절에 닿으면 위 여백 절반을 머리띠 밑으로 넘겨 빈 띠를 48px 로(docs 10 · 2판) */
.ax-sec[id] { scroll-margin-top: -48px; }
.ax-sec--tint { background: color-mix(in srgb, var(--ax-azure) 6%, var(--ax-deep)); }
.ax-sec--slim { padding: 56px 0; }
.ax-sec--dark { background: var(--ax-deep); }
.ax-h2--sm { font-size: clamp(24px, 2.8vw, 32px); }
.ax-nowrap { white-space: nowrap; }
.ax-nav__links a[aria-current="page"] { color: var(--ax-ink); box-shadow: inset 0 -2px 0 var(--ax-teal); }
/* 첫 화면: 글 + 제품 화면 */
.ax-hero__grid { position: relative; display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 40px; align-items: center; }
.ax-hero__grid .ax-hero__title { font-size: clamp(34px, 4.7vw, 68px); max-width: none; }
.ax-hero__lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ax-ink-2); margin-top: 18px; max-width: 560px; }
.ax-hero__def { margin-top: 16px; margin-bottom: 0; font-size: 15px; color: var(--ax-ink-2); }
.ax-hero__def b { color: var(--ax-ink); }
.ax-hero__pkgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ax-hero__pkgs a { display: inline-flex; padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ax-ink); background: color-mix(in srgb, var(--ax-card) 80%, transparent); border: 1px solid color-mix(in srgb, var(--ax-ink) 12%, transparent); backdrop-filter: blur(6px); }
.ax-hero__pkgs a:hover { border-color: var(--ax-teal); }
.ax-hero__shot { justify-self: end; width: min(100%, 470px); }
.ax-hero > .ax-hero__grid { width: 100%; }
/* 화면 목업 */
.ax-mock { margin: 0; background: var(--ax-card); border: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); border-radius: 20px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ax-ink) 45%, transparent); overflow: hidden; text-align: left; }
.ax-mock__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--ax-ink) 8%, transparent); font-size: 13px; font-weight: 800; color: var(--ax-ink-2); }
.ax-mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ax-ink) 14%, transparent); }
.ax-mock__bar span { margin-left: 8px; }
.ax-mock__body { padding: 16px; display: grid; gap: 10px; font-size: 14px; }
.ax-bub { max-width: 86%; padding: 10px 12px; border-radius: 14px; line-height: 1.5; }
.ax-bub--in { background: color-mix(in srgb, var(--ax-ink) 6%, var(--ax-card)); }
.ax-bub--ai { justify-self: end; background: color-mix(in srgb, var(--ax-azure) 12%, var(--ax-card)); }
.ax-flag { justify-self: end; font-size: 12px; font-weight: 800; color: var(--ax-coral); }
.ax-push, .ax-alarm { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ax-coral) 35%, var(--ax-card)); background: color-mix(in srgb, var(--ax-coral) 6%, var(--ax-card)); }
.ax-push b, .ax-alarm b { color: var(--ax-coral); }
.ax-push span, .ax-alarm span { font-size: 13px; color: var(--ax-ink-2); }
.ax-rows li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 8%, transparent); }
.ax-rows b { display: block; font-size: 14px; }
.ax-rows span { display: block; font-size: 12.5px; color: var(--ax-ink-2); }
.ax-pill { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: var(--ax-ink-2); background: color-mix(in srgb, var(--ax-ink) 7%, var(--ax-card)); white-space: nowrap; }
.ax-pill--hi { color: var(--ax-coral); background: color-mix(in srgb, var(--ax-coral) 10%, var(--ax-card)); }
.ax-pill--ok { color: var(--ax-teal); background: color-mix(in srgb, var(--ax-teal) 10%, var(--ax-card)); }
.ax-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.ax-kpi div { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ax-ink) 5%, var(--ax-card)); display: flex; flex-direction: column-reverse; }
.ax-kpi dt { font-size: 12px; color: var(--ax-ink-2); }
.ax-kpi dd { margin: 0; font-size: 20px; font-weight: 900; }
.ax-in { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ax-ink) 5%, var(--ax-card)); font-weight: 700; }
.ax-outs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ax-outs div { border: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); border-radius: 12px; padding: 12px; }
.ax-outs b { display: block; font-size: 13.5px; color: var(--ax-azure-2); }
.ax-outs span { display: block; font-size: 12.5px; margin-top: 4px; color: var(--ax-ink-2); }
.ax-outs i { display: block; height: 34px; border-radius: 8px; margin-top: 8px; background: color-mix(in srgb, var(--ax-azure) 10%, var(--ax-card)); }
/* 카드 · 문장 */
.ax-num-cards .ax-card__n { font-size: 15px; font-weight: 900; color: var(--ax-teal); }
.ax-num-cards .ax-h3 { margin-top: 12px; }
.ax-punch { margin-top: 28px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; color: var(--ax-ink-2); }
.ax-punch b { color: var(--ax-ink); }
.ax-what__grid { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 24px; margin-top: 40px; align-items: stretch; }
.ax-card--navy { background: var(--ax-bg); border-color: transparent; }
.ax-what__grid .ax-table { margin-top: 0; }
.ax-teamchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ax-teamchips li { padding: 7px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; background: color-mix(in srgb, var(--ax-ink) 8%, transparent); }
.ax-base { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 40px; align-items: stretch; }
.ax-flowline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.ax-src4 { display: grid; gap: 10px; }
.ax-src4 li { padding: 12px 14px; border-radius: 12px; background: var(--ax-card); border: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); font-size: 14.5px; font-weight: 700; }
.ax-arrow { color: var(--ax-teal); font-size: 22px; font-weight: 900; }
.ax-node { display: grid; gap: 8px; place-content: center; text-align: center; min-height: 220px; padding: 18px; border-radius: 20px; background: color-mix(in srgb, var(--ax-azure) 8%, var(--ax-card)); }
.ax-node b { font-size: 19px; line-height: 1.35; }
.ax-node span { font-size: 13.5px; color: var(--ax-ink-2); }
.ax-node--navy { background: var(--ax-ink); color: var(--ax-deep); }
.ax-node--navy span { color: color-mix(in srgb, var(--ax-deep) 78%, transparent); }
.ax-node--navy .ax-term__btn { color: var(--ax-deep); }
.ax-list { margin-top: 12px; display: grid; gap: 10px; }
.ax-list li { position: relative; padding-left: 18px; color: var(--ax-ink-2); }
.ax-list li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-teal); }
.ax-list b { color: var(--ax-ink); }
.ax-g5 { grid-template-columns: repeat(5, 1fr); }
.ax-card--go { display: flex; flex-direction: column; }
.ax-card__link { color: inherit; }
.ax-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ax-card__foot { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--ax-ink-3); border-top: 1px solid color-mix(in srgb, var(--ax-ink) 8%, transparent); }
.ax-basebar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 16px; padding: 16px 22px; border-radius: 16px; background: var(--ax-ink); color: var(--ax-deep); }
.ax-basebar span { color: color-mix(in srgb, var(--ax-deep) 78%, transparent); }
/* 패키지 블록 */
.ax-pkg__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: center; margin-top: 32px; }
.ax-effect { margin-top: 24px; padding: 20px 22px; border-radius: 18px; background: color-mix(in srgb, var(--ax-teal) 7%, var(--ax-card)); border: 1px solid color-mix(in srgb, var(--ax-teal) 20%, transparent); }
.ax-effect__k { font-size: 14px; font-weight: 800; color: var(--ax-ink-2); display: flex; gap: 8px; align-items: center; }
.ax-effect__n { margin-top: 6px; font-weight: 900; }
.ax-effect__n b { font-size: 48px; letter-spacing: -0.03em; }
.ax-effect__n small { font-size: 18px; color: var(--ax-ink-2); }
.ax-effect__how { margin-top: 6px; font-size: 14px; color: var(--ax-ink-2); }
.ax-road5 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; counter-reset: none; }
.ax-road5 li { padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; background: color-mix(in srgb, var(--ax-ink) 6%, var(--ax-card)); color: var(--ax-ink-2); }
.ax-road5 li.is-on { background: var(--ax-ink); color: var(--ax-deep); }
.ax-road5 li + li::before { content: "→ "; color: var(--ax-teal); }
/* 업종 줄 */
.ax-indlinks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 24px; }
.ax-indlinks a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 16px; background: var(--ax-card); border: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-indlinks a:hover { border-color: var(--ax-teal); }
.ax-indlinks b::after { content: " →"; color: var(--ax-teal); }
.ax-indlinks span { font-size: 13.5px; color: var(--ax-ink-2); }
/* 가격 */
.ax-price { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; margin-top: 40px; align-items: stretch; }
.ax-price .ax-card { display: flex; flex-direction: column; }
.ax-price__main { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ax-ink) 60%, transparent); }
/* 가격 «여기서 시작» 배지 — 글자 폭만큼(docs 2차 4 · 시작 단계 격자 .ax-start 와 이름이 겹쳐 늘어났었음) */
.ax-startbadge { display: inline-flex; width: fit-content; align-self: flex-start; padding: 4px 12px; border-radius: 8px; font-size: 13px; font-weight: 800; background: var(--ax-teal); color: var(--ax-deep); }
.ax-inc { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.ax-inc .ax-pills { margin-top: 0; }
.ax-price + .ax-punch { margin-top: 32px; }
.ax-inc + .ax-src { margin-top: 18px; }
/* 일하는 방식 */
.ax-steps5 { counter-reset: s5; }
.ax-steps5 .ax-card::before { counter-increment: s5; content: counter(s5); display: flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 900; background: var(--ax-ink); color: var(--ax-deep); margin-bottom: 12px; }
.ax-loop { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ax-loop span { padding: 10px 16px; border-radius: 12px; font-weight: 700; background: color-mix(in srgb, var(--ax-azure) 8%, var(--ax-card)); }
.ax-more-link { display: inline-flex; margin-top: 24px; font-weight: 800; color: var(--ax-teal); }
.ax-next { margin-top: 32px; text-align: left; }
.ax-next .ax-card { background: color-mix(in srgb, var(--ax-ink) 6%, transparent); }
/* 떠 있는 바로가기 */
.ax-fab { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; max-width: min(720px, calc(100vw - 48px)); }
.ax-fab a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 800; font-size: 14.5px; background: var(--ax-card); color: var(--ax-ink); border: 1px solid color-mix(in srgb, var(--ax-ink) 14%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--ax-ink) 22%, transparent); }
.ax-fab a::after { content: " →"; margin-left: 6px; }
.ax-fab a:first-child { background: var(--ax-ink); color: var(--ax-deep); border-color: transparent; }
.ax-foot { padding-bottom: 120px; }
@media (prefers-reduced-motion: no-preference) {
  .ax-fab { animation: axfab 260ms var(--ax-ease); }
}
@keyframes axfab { from { opacity: 0; transform: translateY(12px); } }

/* 머리띠: 좁은 화면(≤760)은 둘째 줄 가로로 미는 한 줄(메뉴 단추 없음 · www2 와 같음) */
@media (max-width: 760px) {
  .ax-nav__bar { flex-wrap: wrap; height: auto; padding-top: 10px; }
  .ax-nav__nav { order: 3; width: 100%; }
  .ax-nav__links { overflow-x: auto; gap: 20px; padding: 8px 0 10px; white-space: nowrap; scrollbar-width: none; }
  .ax-nav__links::-webkit-scrollbar { display: none; }

  .ax-sec[id] { scroll-margin-top: -44px; }
  .ax-hero { padding-top: 140px; }
}
@media (max-width: 1080px) {
  .ax-hero__grid, .ax-what__grid, .ax-base, .ax-pkg__grid { grid-template-columns: 1fr; }
  .ax-hero__shot { justify-self: start; }
  .ax-g5, .ax-indlinks { grid-template-columns: repeat(3, 1fr); }
  .ax-price { grid-template-columns: 1fr 1fr; }
  .ax-price__main { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ax-fab { left: 16px; right: 16px; bottom: 16px; max-width: none; justify-content: center; }
  .ax-fab a { min-height: 42px; padding: 0 14px; font-size: 13.5px; }
  .ax-flowline { grid-template-columns: 1fr; }
  .ax-arrow { transform: rotate(90deg); justify-self: center; }
  .ax-node { min-height: 0; }
}
@media (max-width: 560px) {
  .ax-g5, .ax-indlinks, .ax-price { grid-template-columns: 1fr; }
  .ax-outs, .ax-kpi { grid-template-columns: 1fr 1fr; }
  .ax-hero__grid .ax-hero__title { font-size: clamp(28px, 8.4vw, 40px); }
}
@media (max-width: 900px) {
  :root { --ax-gutter: 18px; --ax-sec: 84px; }
  .ax-g3, .ax-g4, .ax-team, .ax-start { grid-template-columns: repeat(2, 1fr); }
  .ax-flow, .ax-hub, .ax-ab, .ax-ef, .ax-case-main, .ax-stat3 { grid-template-columns: 1fr; }
  .ax-stat3 li { padding: 18px 0 0; }
  .ax-num { font-size: 54px; }
  .ax-vs { font-size: 15px; }
  .ax-vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ax-vs tbody, .ax-vs tr, .ax-vs th, .ax-vs td { display: block; }
  .ax-vs tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
  .ax-vs tbody tr:last-child { border-bottom: 0; }
  .ax-vs tbody th { width: auto; padding: 16px 18px 6px; border: 0; }
  .ax-vs tbody td { padding: 6px 18px; border: 0; display: grid; grid-template-columns: 92px 1fr; gap: 8px; background: none; }
  .ax-vs tbody td:last-child { padding-bottom: 16px; }
  .ax-vs tbody td::before { content: attr(data-label); font-size: 13px; font-weight: 800; color: var(--ax-ink-3); }
  .ax-vs tbody .ax-vs__us { background: none; }
  .ax-vs tbody .ax-vs__us::before { color: var(--ax-teal); }
  .ax-vs small { grid-column: 2; }
}
@media (max-width: 560px) {
  .ax-g3, .ax-g4, .ax-team, .ax-start { grid-template-columns: 1fr; }
  .ax-road li { grid-template-columns: 1fr auto; }
  .ax-road i { grid-column: 1 / -1; }
  .ax-ab dl div, .ax-roles li { grid-template-columns: 82px 1fr; }
  .ax-kv dd { font-size: 18px; }
  .ax-foot__end { text-align: left; }
  .ax-amt { font-size: 44px; }
}

/* 생성물 — scripts/import-landing.mjs 가 C:/repo/higgs/genax/hf-genax-ax-film/app/src/components/ax/ax-v4.css 에서 옮겼다(@font-face 뺌) */
/*
 * GENAX AX 판 v4 배치 — 절마다 꼴이 다르게(사용자 11-10 「너무 단조로운거 같아 섹션별 구성도 다 다르게」).
 * 참고: litmers.com 에서 배운 «원리» 만 — 첫 화면 밑 이름 띠 · 절마다 바탕과 배치를 바꾸는 리듬 · 크기가 다른 격자 · 가로 넘김 · 쌓이는 패널 · 가운데 빛 CTA.
 * 색 · 글꼴은 ax.css 맨 위 GENAX 토큰 변수만 쓴다(새 색 값 0).
 */

.ax-sec--snow { background: var(--ax-raised); }
.ax-head .ax-h2 { margin-top: 16px; }

/* ── 협력사 띠 ── */
.ax-partners { padding: 40px 0 44px; background: var(--ax-raised); border-bottom: 1px solid color-mix(in srgb, var(--ax-ink) 8%, transparent); }
.ax-partners__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ax-partners__t { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; color: var(--ax-ink-3); }
.ax-partners__toggle { min-height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: var(--ax-ink-2); background: none; border: 1px solid color-mix(in srgb, var(--ax-ink) 18%, transparent); cursor: pointer; }
.ax-partners__toggle:hover { border-color: var(--ax-ink); color: var(--ax-ink); }
.ax-marquee { display: flex; overflow: hidden; margin-top: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ax-marquee__track { display: flex; flex: none; align-items: center; gap: 64px; padding-right: 64px; animation: ax-marq 48s linear infinite; }
.ax-marquee__track li { display: flex; align-items: center; height: 56px; }
.ax-marquee__track img { display: block; height: 44px; width: auto; max-width: 200px; object-fit: contain; }
@media (max-width: 760px) { .ax-marquee__track li { height: 44px; } .ax-marquee__track img { height: 32px; max-width: 150px; } }
.ax-marquee:hover .ax-marquee__track, .ax-partners.is-paused .ax-marquee__track { animation-play-state: paused; }
@keyframes ax-marq { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ax-marquee { -webkit-mask-image: none; mask-image: none; }
  .ax-marquee__track { animation: none; flex-wrap: wrap; flex: 1; gap: 14px 40px; padding: 0 var(--ax-gutter); max-width: var(--ax-wrap); margin: 0 auto; justify-content: center; }
  .ax-marquee__dup, .ax-partners__toggle { display: none; }
}

/* ── 개발자를 뽑으면: 왼쪽 제목이 머물고 오른쪽 큰 번호 줄글 ── */
.ax-why2__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.ax-why2__head { position: sticky; top: 120px; }
.ax-why2__list li { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: start; padding: 30px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 14%, transparent); }
.ax-why2__list li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ax-ink) 14%, transparent); }
.ax-why2__n { font-size: 72px; font-weight: 900; line-height: 0.9; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--ax-azure); }
.ax-why2__list .ax-h3 { margin-top: 4px; font-size: 22px; }

/* ── GENAX는: 가로 팀 띠 + GENAX 열이 솟은 표 ── */
.ax-teamstrip { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; margin-top: 40px; padding: 30px 34px; border-radius: 26px; }
.ax-teamstrip .ax-teamchips { margin-top: 0; justify-content: flex-end; }
.ax-vs2 { margin-top: 28px; }
@media (min-width: 901px) {
  .ax-vs2 .ax-vs { border-collapse: separate; border-spacing: 0; font-size: 17px; }
  .ax-vs2 .ax-vs th, .ax-vs2 .ax-vs td { padding: 20px 24px; border-bottom: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
  .ax-vs2 .ax-vs thead th, .ax-vs2 .ax-vs thead td { background: none; font-size: 15px; color: var(--ax-ink-3); }
  .ax-vs2 .ax-vs .ax-vs__us { background: var(--ax-ink); color: var(--ax-deep); border-bottom-color: color-mix(in srgb, var(--ax-deep) 14%, transparent); }
  .ax-vs2 .ax-vs thead .ax-vs__us { border-radius: 22px 22px 0 0; padding-top: 26px; font-size: 17px; color: var(--ax-deep); }
  .ax-vs2 .ax-vs tbody tr:last-child .ax-vs__us { border-radius: 0 0 22px 22px; padding-bottom: 26px; }
  .ax-vs2 .ax-vs tbody .ax-vs__us { font-weight: 700; }
  .ax-vs2 .ax-vs tbody tr:last-child > * { border-bottom: 0; }
  .ax-vs2 .ax-vs tbody td:not(.ax-vs__us) { color: var(--ax-ink-3); }
  .ax-vs2 .ax-vs tbody th { width: 170px; }
  .ax-vs2 .ax-vs th:last-child, .ax-vs2 .ax-vs td:last-child { width: 40%; box-shadow: 0 0 0 0 transparent; }
}

/* ── 데이터 연결 · 보안: 어두운 면 위 큰 흐름 ── */
.ax-base2 { background: radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--ax-azure) 16%, var(--ax-deep)), var(--ax-deep) 70%); }
.ax-pipe { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 72px; align-items: center; margin-top: 56px; }
.ax-pipe__src { display: grid; gap: 10px; }
.ax-pipe__src li { padding: 14px 18px; border-radius: 14px; font-weight: 700; background: var(--ax-card); border: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-pipe__hub, .ax-pipe__out { position: relative; display: grid; gap: 10px; place-content: center; text-align: center; }
.ax-pipe__hub { justify-self: center; width: 280px; aspect-ratio: 1; border-radius: 50%; padding: 30px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ax-azure) 38%, var(--ax-card)), var(--ax-raised) 72%); border: 1px solid color-mix(in srgb, var(--ax-azure-2) 45%, transparent); box-shadow: 0 0 0 14px color-mix(in srgb, var(--ax-azure) 8%, transparent), 0 0 80px color-mix(in srgb, var(--ax-azure) 35%, transparent); }
.ax-pipe__out { min-height: 200px; padding: 26px; border-radius: 24px; background: var(--ax-card); border: 1px solid color-mix(in srgb, var(--ax-teal) 35%, transparent); }
.ax-pipe__hub b, .ax-pipe__out b { font-size: 21px; line-height: 1.35; }
.ax-pipe__hub span, .ax-pipe__out span { font-size: 14px; color: var(--ax-ink-2); }
.ax-pipe__hub::before, .ax-pipe__out::before { content: ""; position: absolute; top: 50%; right: calc(100% + 10px); width: 52px; height: 2px; background: linear-gradient(90deg, transparent, var(--ax-azure)); }
.ax-pipe__hub::after, .ax-pipe__out::after { content: ""; position: absolute; top: calc(50% - 5px); right: calc(100% + 8px); width: 10px; height: 10px; border-top: 2px solid var(--ax-azure); border-right: 2px solid var(--ax-azure); transform: rotate(45deg); }
.ax-pipe__hub .ax-term__btn { color: var(--ax-ink); }
.ax-sec3 { display: grid; grid-template-columns: 0.7fr 2fr; gap: 40px; align-items: start; margin-top: 64px; padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 16%, transparent); }
.ax-sec3 .ax-h3 { margin-top: 6px; }
.ax-sec3__list { display: grid; grid-template-columns: repeat(3, 1fr); }
.ax-sec3__list li { display: grid; gap: 6px; padding: 0 24px; border-left: 1px solid color-mix(in srgb, var(--ax-ink) 16%, transparent); }
.ax-sec3__list b { font-size: 17px; }
.ax-sec3__list span { font-size: 15px; color: var(--ax-ink-2); }

/* ── 패키지 한눈에: 크기와 색이 다른 벤토 ── */
.ax-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 16px; margin-top: 44px; }
.ax-bento__c { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 26px; overflow: hidden; background: var(--ax-card); border: 1px solid color-mix(in srgb, var(--ax-ink) 9%, transparent); transition: transform 260ms var(--ax-ease), box-shadow 260ms var(--ax-ease); }
.ax-bento__c:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--ax-ink) 40%, transparent); }
.ax-bento__n { position: absolute; right: 22px; top: 12px; font-size: 64px; font-weight: 900; letter-spacing: -0.05em; color: color-mix(in srgb, var(--ax-ink) 7%, transparent); }
.ax-bento__c .ax-h3 { font-size: 22px; position: relative; }
.ax-bento__c:not(.ax-bento__c--1) .ax-bento__n { top: auto; bottom: 10px; font-size: 52px; }
.ax-bento__c:not(.ax-bento__c--1) .ax-card__foot { padding-right: 64px; }
.ax-bento__c--1 { grid-column: span 2; grid-row: span 2; justify-content: flex-end; padding: 36px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ax-azure) 40%, var(--ax-deep)), var(--ax-deep) 65%); border-color: transparent; }
.ax-bento__c--1 .ax-h3 { font-size: 34px; }
.ax-bento__c--1 .ax-bento__n { font-size: 160px; color: color-mix(in srgb, var(--ax-ink) 9%, transparent); }
.ax-bento__c--2 { grid-column: span 2; background: color-mix(in srgb, var(--ax-azure) 10%, var(--ax-raised)); }
.ax-bento__c--3 { background: var(--ax-raised); }
.ax-bento__c--4 { background: color-mix(in srgb, var(--ax-teal) 9%, var(--ax-raised)); }
.ax-bento__c--5 { grid-column: span 2; background: var(--ax-bg); }
.ax-bento__base { grid-column: span 2; justify-content: center; gap: 8px; background: var(--ax-ink); color: var(--ax-deep); border-color: transparent; }
.ax-bento__base b { font-size: 19px; }
.ax-bento__base span { color: color-mix(in srgb, var(--ax-deep) 80%, transparent); }
.ax-bento__base:hover { transform: none; box-shadow: none; }

/* ── 패키지 1–5: 쌓이는 패널 ── */
.ax-stack { padding: 40px 0 120px; background: var(--ax-deep); }
.ax-stack__item { padding: 16px 0; }
.ax-stack__panel { position: relative; overflow: hidden; padding: 44px 48px 36px; border-radius: 34px; border: 1px solid color-mix(in srgb, var(--ax-ink) 9%, transparent); box-shadow: 0 -24px 60px -40px color-mix(in srgb, var(--ax-ink) 45%, transparent); }
.ax-stack__n { position: absolute; right: 40px; top: 18px; font-size: 120px; font-weight: 900; line-height: 1; letter-spacing: -0.06em; color: color-mix(in srgb, var(--ax-ink) 7%, transparent); pointer-events: none; }
.ax-stack__h { font-size: clamp(26px, 3.2vw, 40px); max-width: 820px; }
.ax-stack__panel .ax-pkg__grid { margin-top: 26px; }
.ax-stack__panel .ax-src { position: relative; }
.ax-skin--snow { background: var(--ax-raised); }
.ax-skin--azure { background: color-mix(in srgb, var(--ax-azure) 9%, var(--ax-raised)); }
.ax-skin--teal { background: color-mix(in srgb, var(--ax-teal) 8%, var(--ax-raised)); }
.ax-skin--paper { background: var(--ax-bg); }
.ax-skin--dark { border-color: transparent; background: radial-gradient(90% 80% at 85% 10%, color-mix(in srgb, var(--ax-azure) 22%, var(--ax-deep)), var(--ax-deep) 70%); }
@media (min-width: 1081px) and (min-height: 760px) {
  .ax-stack__item { position: sticky; top: calc(76px + var(--i) * 12px); }
}

/* ── 업종: 사진 카드 가로 넘김 ── */
.ax-ind2__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.ax-ind2__nav { display: flex; gap: 10px; }
.ax-arrowbtn { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ax-ink) 22%, transparent); background: var(--ax-raised); cursor: pointer; }
.ax-arrowbtn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-top: 2px solid var(--ax-ink); border-right: 2px solid var(--ax-ink); transform: translate(-65%, -50%) rotate(45deg); }
.ax-arrowbtn--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.ax-arrowbtn:hover { border-color: var(--ax-ink); }
.ax-ind2__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 3 * 18px) / 3.4)); gap: 18px; margin-top: 36px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.ax-ind2__row li { scroll-snap-align: start; }
.ax-ind2__row a { position: relative; display: block; height: 400px; border-radius: 26px; overflow: hidden; background: var(--ax-ink); color: var(--ax-white); }
.ax-ind2__row a.is-plain { background: radial-gradient(120% 90% at 0% 0%, var(--ax-azure), var(--ax-azure-2) 55%, var(--ax-ink)); }
.ax-ind2__row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ax-ease); }
.ax-ind2__row a:hover img { transform: scale(1.04); }
.ax-ind2__row a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--ax-ink) 88%, transparent) 100%); }
.ax-ind2__txt { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 6px; }
.ax-ind2__txt b { font-size: 26px; font-weight: 900; }
.ax-ind2__txt b::after { content: " →"; }
.ax-ind2__txt span { font-size: 15px; color: color-mix(in srgb, var(--ax-white) 88%, transparent); }

/* ── 가격: 500만 원 큰 카드 + 오른쪽 둘 ── */
.ax-price2__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin-top: 44px; }
.ax-price2__main { display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: 40px; background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--ax-azure) 30%, var(--ax-bg)), var(--ax-bg) 60%); box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--ax-ink) 70%, transparent); }
.ax-price2__main .ax-amt { font-size: 96px; letter-spacing: -0.05em; }
.ax-price2__main .ax-amt small { font-size: 22px; }
.ax-price2__main .ax-startbadge { margin-bottom: auto; }
.ax-price2__side { display: grid; gap: 18px; }
.ax-price2__side .ax-card { display: flex; flex-direction: column; justify-content: center; }
.ax-price2__foot { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; margin-top: 36px; }
.ax-price2__foot .ax-punch { margin-top: 0; }
.ax-price2__inc b { display: block; font-size: 14px; letter-spacing: 0.06em; color: var(--ax-ink-3); }
.ax-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin-top: 12px; }
.ax-checks li { position: relative; padding-left: 26px; font-weight: 700; }
.ax-checks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid var(--ax-teal); border-bottom: 2.5px solid var(--ax-teal); transform: rotate(-45deg); }
.ax-price2 .ax-src { margin-top: 24px; }

/* ── 일하는 방식: 가로 시간표 ── */
.ax-tl { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 56px; }
.ax-tl::before { content: ""; position: absolute; left: 24px; right: calc((100% - 4 * 24px) / 5 - 24px); top: 23px; height: 2px; background: linear-gradient(90deg, var(--ax-azure), var(--ax-teal)); }
.ax-tl li { position: relative; }
.ax-tl__dot { position: relative; display: flex; width: 48px; height: 48px; border-radius: 50%; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; background: var(--ax-ink); color: var(--ax-deep); box-shadow: 0 0 0 8px var(--ax-bg); }
.ax-tl .ax-h3 { margin-top: 22px; font-size: 21px; }
.ax-way2 .ax-loop { margin-top: 40px; }

/* ── 적용사례: 상자 없는 4단 ── */
.ax-cases2__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 40px; }
.ax-cases2__list li { padding-top: 20px; border-top: 3px solid var(--ax-ink); }
.ax-cases2__list .ax-h3 { font-size: 21px; }

/* ── 아웃라이어: 큰 숫자 띠 ── */
.ax-statband { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
.ax-statband li { padding: 8px 28px 8px; border-left: 1px solid color-mix(in srgb, var(--ax-ink) 14%, transparent); }
.ax-statband li:first-child { padding-left: 0; border-left: 0; }
.ax-statband__n { font-size: clamp(40px, 4.6vw, 64px); font-weight: 900; letter-spacing: -0.05em; line-height: 1.05; }
.ax-statband__n small { font-size: 18px; letter-spacing: -0.01em; margin-left: 4px; }

/* ── 아웃라이어: 방송 출연 영상 ── */
.ax-tv { margin: 56px 0 0; }
.ax-tv__v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 26px; background-color: var(--ax-ink); box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--ax-ink) 55%, transparent); }
.ax-tv__cap { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 14px; }
.ax-tv__cap b { font-size: 17px; }
.ax-tv__cap span { font-size: 14px; color: var(--ax-ink-2); }

/* ── 상담: 가운데 빛 + 1 → 2 → 3 ── */
.ax-cta .ax-wrap { position: relative; }
.ax-next2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 48px auto 0; max-width: 1000px; text-align: left; }
.ax-next2 li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 0 26px; border-left: 1px solid color-mix(in srgb, var(--ax-ink) 16%, transparent); }
.ax-next2 li:first-child { border-left: 0; }
.ax-next2__n { display: flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 900; color: var(--ax-deep); background: var(--ax-ink); }
.ax-next2 .ax-h3 { margin-top: 8px; }

/* ── 좁은 화면 ── */
@media (max-width: 1080px) {
  .ax-why2__grid { grid-template-columns: 1fr; gap: 24px; }
  .ax-why2__head { position: static; }
  .ax-teamstrip { grid-template-columns: 1fr; }
  .ax-teamstrip .ax-teamchips { justify-content: flex-start; }
  .ax-pipe { grid-template-columns: 1fr; gap: 40px; }
  .ax-pipe__hub, .ax-pipe__out { justify-self: center; width: min(100%, 300px); }
  .ax-pipe__hub::before, .ax-pipe__out::before { top: auto; bottom: calc(100% + 8px); right: auto; left: 50%; width: 2px; height: 28px; background: linear-gradient(180deg, transparent, var(--ax-azure)); }
  .ax-pipe__hub::after, .ax-pipe__out::after { top: auto; bottom: calc(100% + 8px); right: auto; left: calc(50% - 5px); transform: rotate(135deg); }
  .ax-sec3 { grid-template-columns: 1fr; gap: 20px; }
  .ax-bento { grid-template-columns: repeat(2, 1fr); }
  .ax-bento__c--5, .ax-bento__base { grid-column: span 2; }
  .ax-price2__grid, .ax-price2__foot { grid-template-columns: 1fr; }
  .ax-tl { grid-template-columns: 1fr; gap: 0; }
  .ax-tl::before { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, var(--ax-azure), var(--ax-teal)); }
  .ax-tl li { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; padding-bottom: 26px; }
  .ax-tl .ax-h3 { margin-top: 10px; }
  .ax-tl .ax-card__p { grid-column: 2; }
  .ax-cases2__list, .ax-statband { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .ax-statband li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .ax-sec3__list { grid-template-columns: 1fr; gap: 18px; }
  .ax-sec3__list li { padding: 0 0 0 16px; }
  .ax-why2__list li { grid-template-columns: 64px 1fr; gap: 12px; padding: 22px 0; }
  .ax-why2__n { font-size: 44px; }
  .ax-bento { grid-template-columns: 1fr; }
  .ax-bento__c--1, .ax-bento__c--2, .ax-bento__c--5, .ax-bento__base { grid-column: auto; grid-row: auto; }
  .ax-bento__c--1 { min-height: 300px; }
  .ax-bento__c--1 .ax-bento__n { font-size: 110px; }
  .ax-stack__panel { padding: 30px 22px 26px; border-radius: 26px; }
  .ax-stack__n { font-size: 72px; right: 18px; }
  .ax-ind2__top { align-items: flex-start; flex-direction: column; }
  .ax-ind2__row { grid-auto-columns: 78%; }
  .ax-ind2__row a { height: 340px; }
  .ax-price2__main { min-height: 0; padding: 28px; }
  .ax-price2__main .ax-amt { font-size: 64px; }
  .ax-checks { grid-template-columns: 1fr; }
  .ax-cases2__list, .ax-statband { grid-template-columns: 1fr; }
  .ax-statband li { padding: 18px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 14%, transparent); }
  .ax-statband li:first-child { border-top: 0; padding-top: 0; }
  .ax-next2 { grid-template-columns: 1fr; gap: 22px; }
  .ax-next2 li { padding: 0; border-left: 0; }
}

/* ── 적용사례 build 5: 사례 둘(지금 → 다음 계획) ── */
.ax-chip--done { color: var(--ax-deep); background: var(--ax-ink); }
.ax-case5 { margin-top: 64px; }
.ax-case5 + .ax-case5 { margin-top: 96px; padding-top: 64px; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 12%, transparent); }
.ax-case5__h { margin-top: 14px; font-size: clamp(24px, 2.8vw, 34px); font-weight: 900; line-height: 1.3; letter-spacing: -0.03em; }
.ax-case5__grid { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 20px; margin-top: 28px; align-items: stretch; }
.ax-case5--flip .ax-case5__grid { grid-template-columns: 1.4fr 0.85fr; }
.ax-case5--flip .ax-case5__id { order: 2; }
.ax-case5__id { display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 32px; border-radius: 26px; background-color: var(--ax-deep); background-image: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ax-azure) 32%, var(--ax-deep)), var(--ax-deep) 65%); }
.ax-case5__name { margin-top: 8px; font-size: clamp(28px, 3vw, 38px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.2; }
.ax-case5__rows { padding: 8px 28px; border-radius: 26px; background: var(--ax-raised); border: 1px solid color-mix(in srgb, var(--ax-ink) 9%, transparent); }
.ax-case5__rows li { display: grid; grid-template-columns: 78px 1fr auto; gap: 14px; align-items: center; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-case5__rows li:first-child { border-top: 0; }
.ax-case5__rows i { font-style: normal; font-size: 13px; font-weight: 800; color: color-mix(in srgb, var(--ax-teal) 80%, var(--ax-ink)); }
.ax-case5__rows li.is-next i { color: var(--ax-ink-3); }
.ax-case5__rows b { display: block; font-size: 17px; }
.ax-case5__rows span:not(.ax-chip) { display: block; font-size: 14.5px; color: var(--ax-ink-2); }
.ax-plan3 { margin-top: 20px; padding: 26px 28px; border-radius: 26px; background: color-mix(in srgb, var(--ax-azure) 8%, var(--ax-raised)); }
.ax-plan3__k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ax-plan3__k i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--ax-ink-3); }
.ax-plan3__k b { font-size: 18px; }
.ax-plan3 ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; counter-reset: none; }
.ax-plan3 li { position: relative; padding: 16px 22px 4px 0; border-top: 3px solid var(--ax-azure); }
.ax-plan3 li + li { padding-left: 22px; }
.ax-plan3 li + li::before { content: ""; position: absolute; left: -6px; top: -9px; width: 12px; height: 12px; border-top: 3px solid var(--ax-azure); border-right: 3px solid var(--ax-azure); transform: rotate(45deg); background: transparent; }
.ax-plan3 li b { display: block; font-size: 15px; color: var(--ax-azure-2); }
.ax-plan3 li span { display: block; margin-top: 4px; font-weight: 700; }
.ax-review { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.ax-review ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-review li { padding: 7px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; border: 1px dashed color-mix(in srgb, var(--ax-ink) 30%, transparent); color: var(--ax-ink-2); }
.ax-review .ax-src { flex-basis: 100%; margin-top: 0; }
.ax-track { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-top: 20px; padding-top: 20px; }
.ax-track__k { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--ax-ink-3); padding-top: 3px; }
.ax-track ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ax-track li { padding-left: 16px; border-left: 2px solid var(--ax-ink); }
.ax-track b { display: block; }
.ax-track span { display: block; font-size: 14px; color: var(--ax-ink-2); }

/* ── 아웃라이어 사내 운영: 세 단 + 완료 · 개발 중 ── */
.ax-inh__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.ax-inh__g { padding: 26px; border-radius: 24px; background: var(--ax-raised); border: 1px solid color-mix(in srgb, var(--ax-ink) 9%, transparent); }
.ax-inh__g header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid var(--ax-ink); }
.ax-inh__g .ax-h3 { margin-top: 0; }
.ax-inh__g li { padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--ax-ink) 10%, transparent); }
.ax-inh__g li:first-child { border-top: 0; }
.ax-inh__g b { display: block; font-size: 16px; }
.ax-inh__g span { display: block; margin-top: 2px; font-size: 14px; color: var(--ax-ink-2); }
.ax-inh__more { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ax-inh__more > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 22px; border-radius: 18px; background: color-mix(in srgb, var(--ax-ink) 4%, var(--ax-raised)); }
.ax-inh__more ul { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 700; }
.ax-inh__more li + li::before { content: "· "; color: var(--ax-ink-3); }
@media (max-width: 1080px) {
  .ax-case5__grid, .ax-case5--flip .ax-case5__grid { grid-template-columns: 1fr; }
  .ax-case5--flip .ax-case5__id { order: 0; }
  .ax-case5__id { min-height: 0; }
  .ax-inh__cols { grid-template-columns: 1fr; }
  .ax-track { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ax-case5__rows { padding: 4px 18px; }
  .ax-case5__rows li { grid-template-columns: 1fr auto; }
  .ax-case5__rows li > i { grid-column: 1 / -1; }
  .ax-plan3 ol, .ax-track ul, .ax-inh__more { grid-template-columns: 1fr; }
  .ax-plan3 li, .ax-plan3 li + li { padding: 14px 0 6px; }
  .ax-plan3 li + li::before { display: none; }
}

/* 그라데이션 면의 바탕색 —그림이 안 그려져도(인쇄 · 강제 색 · 대비 검사) 글이 같은 어두운 면 위에 있게(www2 check 가 1.08:1 로 잡음) */
.ax-base2, .ax-bento__c--1, .ax-skin--dark { background-color: var(--ax-deep); }
.ax-price2__main { background-color: var(--ax-bg); }
.ax-pipe__hub { background-color: var(--ax-raised); }
.ax-ind2__row a.is-plain { background-color: var(--ax-azure-2); }
/* 종이 띠(paper.100) 위의 청록 눈썹 · 꼬리표는 4.50:1 에 걸려 잉크 쪽으로 조금 진하게(토큰 섞음 · 새 색 값 0) */
.ax-sec--raised :is(.ax-eyebrow, .ax-tag), :is(.ax-bento__c--5, .ax-skin--paper) :is(.ax-eyebrow, .ax-tag) { color: color-mix(in srgb, var(--ax-teal) 80%, var(--ax-ink)); }
/* 상태 칩(개발 중 · 수행 중 · 납품 완료) 글 — 청록 옅은 바탕 위 12.5px 가 4.13~4.25:1 이라 잉크 쪽으로(어두운 면에서는 같은 섞음이 밝은 쪽) */
.ax-chip:not(.ax-chip--ex):not(.ax-chip--plan):not(.ax-chip--done) { color: color-mix(in srgb, var(--ax-teal) 72%, var(--ax-ink)); }
/* 쌓이는 패널 순번 — 인라인 style 없이(www2 CSP style-src 'self') */
.ax-stack__item--1 { --i: 1; }
.ax-stack__item--2 { --i: 2; }
.ax-stack__item--3 { --i: 3; }
.ax-stack__item--4 { --i: 4; }
.ax-stack__item--5 { --i: 5; }