/* perscera.ai — brainxen.com 브랜드 스토어 문법을 그대로 가져온 회사 페이지.
   brand.css · clear.css 는 ai-study-agent(origin/main da6544d) frontend/components/brand/ 의 바이트 동일 사본이다.
   두 파일은 손대지 않는다(D-PS-1). 여기에는 (1) Next.js 가 주던 것(폰트 변수·preflight)과
   (2) 이 페이지에만 있는 절(구조 도식·흐름·원칙 상자)의 최소 오버레이만 둔다. 접두사 `ps-`. */

@font-face{font-family:'Pretendard Variable';src:url('/fonts/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--font-bx-ko:'Pretendard Variable'}

/* Tailwind preflight 가 하던 만큼만 초기화한다 — brand.css 는 그 위에서 그려졌다. */
*,*::before,*::after{box-sizing:border-box;border:0 solid}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0;background:#fff}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
dialog:not([open]){display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 상단바: 회사 페이지에는 계정이 없다 — 오른쪽은 `문의` 하나. */
.bx-nav .ps-contact{font-size:14px;display:inline-flex;min-height:44px;align-items:center;font-weight:600}
@media(max-width:1199px){.bx-nav .ps-contact{display:none}}

/* 히어로 오른쪽 도식(구조 트리). .bx-learning-visual 의 figure 문법을 그대로 쓴다. */
.ps-hero-figure{width:100%}
.bx-vision-hero .bx-learning-visual{max-height:none}
.ps-en{font-size:15px;line-height:1.7;color:#414141;margin-top:28px;max-width:34em;letter-spacing:-.005em}

/* 세로 흐름(Student → … → Student Agent). 브랜드의 등급표(.bx-layer-list)와 같은 선·번호 리듬. */
.ps-flow{display:grid;gap:0}
.ps-flow li{display:grid;grid-template-columns:30px 1fr;gap:10px 12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--bx-line)}
.ps-flow li>span{font-size:12px;color:#1759ff}
.ps-flow li>b{font-weight:550;font-size:16px}
.ps-flow li>small{grid-column:2;font-size:13px;color:#414141;line-height:1.7}
.ps-flow li:last-child{border-bottom:1px solid var(--bx-line)}
.ps-flow--ink li>span{color:#111}

/* 두 표면 나란히 — 브랜드 .bx-readable-faq(2열·윗선) 리듬. */
.ps-surfaces{display:grid;grid-template-columns:1fr 1fr;gap:36px 48px}
.ps-surfaces article{border-top:1px solid var(--bx-line);padding-top:22px}
.ps-surfaces article>.bx-meta{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}
.bx-store .ps-surfaces h3{font-size:24px;margin-bottom:8px}
.ps-surfaces .ps-domain{font-size:13px;color:#414141;margin-bottom:22px}
.ps-status{font-size:12px;letter-spacing:.02em;color:#414141;font-weight:500}
.ps-status--live{color:#1759ff}

/* 다섯 층 사다리(Student → … → Education Organization Brain) — .bx-dimension-map 을 5열로. */
.ps-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.ps-ladder>div{padding:20px 0;border-top:1px solid #1759ff}
.ps-ladder span{font-size:12px;color:#1759ff;display:block;margin-bottom:24px}
.bx-store .ps-ladder h3{font-size:18px}
.bx-store .ps-ladder p{font-size:13px;margin-top:10px;color:#414141}

/* 위·아래 두 흐름. */
.ps-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px}
.ps-two>div{border-top:1px solid var(--bx-line);padding-top:22px}
.ps-two .bx-meta{display:block;margin-bottom:18px}

/* 파이프라인 상자 셋(입력 → Overedge → Organization Brain → Agents) — .bx-workspace-diagram 의 파란 상자 문법. */
.ps-pipeline{display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;gap:16px;align-items:stretch;margin-top:8px}
.ps-pipeline>div{border:1px solid #1759ff;padding:24px;display:flex;flex-direction:column;min-height:300px}
.ps-pipeline>div>span{font-size:12px;color:#1759ff}
.ps-pipeline>div>ul{margin-top:18px;display:grid;gap:8px;font-size:14px;line-height:1.6}
.ps-pipeline>div>b{font-size:13px;font-weight:500;margin-top:auto;padding-top:24px}
.ps-pipeline>.ps-pipeline-center{border-color:#111;background:#111;color:#fff}
.ps-pipeline>.ps-pipeline-center>span{color:#cfcfcf}
.ps-pipeline>i{display:flex;align-items:center;font-style:normal;font-size:22px;color:#999}

/* 하루의 시간표(09:00 Claude …) — .bx-recall-timeline 의 큰 파란 숫자 문법을 6칸으로. */
.ps-day{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.ps-day li>span{font-size:clamp(24px,2.4vw,36px);line-height:1.2;display:block;font-weight:400;color:#1759ff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ps-day li>span i{display:block;position:relative;height:2px;background:#1759ff;margin:16px 0 18px}
.ps-day li>span i:before{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#1759ff;top:-4px;left:0}
.bx-store .ps-day h3{font-size:17px}

/* Work State 상자 + 아래로 갈라지는 계정들. */
.ps-state{margin-top:48px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.ps-state-box{border:1px solid #111;padding:28px}
.ps-state-box>span{font-size:12px;letter-spacing:.07em}
.ps-state-box ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin-top:22px;font-size:15px}
.ps-state-box li{border-top:1px solid var(--bx-line);padding-top:10px}
.ps-state-clients{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ps-state-clients span{border:1px solid var(--bx-line);padding:8px 12px;font-size:13px}

/* 전·후 두 열(온보딩) — 왼쪽은 물러나고(muted) 오른쪽만 잉크. */
.ps-before-after{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.ps-before-after>div{border-top:1px solid var(--bx-line);padding-top:22px}
.ps-before-after>div:first-child{color:#414141}
.ps-before-after>div:first-child .ps-flow li>span{color:#999}
.ps-before-after .bx-meta{display:block;margin-bottom:18px}

/* Customer Zero 깔때기 + 질문 세 개. */
.ps-zero{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.ps-zero-in{display:flex;flex-wrap:wrap;gap:8px}
.ps-zero-in span{border:1px solid var(--bx-line);padding:8px 12px;font-size:13px}
.ps-zero-arrow{font-size:22px;color:#999;margin:16px 0}
.ps-quotes{display:grid;gap:0}
.ps-quotes blockquote{margin:0;border-top:1px solid var(--bx-line);padding:20px 0;font-size:19px;line-height:1.6;letter-spacing:-.02em}
.ps-quotes blockquote:last-child{border-bottom:1px solid var(--bx-line)}
.ps-quotes blockquote::before{content:'"';color:#1759ff;margin-right:6px}
.ps-quotes blockquote::after{content:'"';color:#1759ff;margin-left:6px}

/* 원칙 상자 셋 — .bx-check-three 그대로, 두 번째 열만 문장 예시. */
.ps-example{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px}
.ps-example>div{border-top:1px solid var(--bx-line);padding-top:22px}
.ps-example .ps-x{color:#f04416}
.ps-example .ps-o{color:#1759ff}
.ps-example p.ps-big{font-size:22px;line-height:1.5;margin-top:14px;letter-spacing:-.02em}

/* 영역 표(교육·기업·연구·병원) — .bx-subject-comparison 의 윗선 표 리듬을 4열로. */
.ps-domains{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.ps-domains>div{border-top:1px solid var(--bx-line);padding-top:20px}
.bx-store .ps-domains h3{font-size:16px;margin-bottom:14px}
.ps-domains ol li{font-size:14px;line-height:1.7;padding-left:18px;position:relative}
.ps-domains ol li+li::before{content:'↓';position:absolute;left:0;color:#999}
.ps-domains ol li:first-child::before{content:'';position:absolute;left:0}
.ps-abstract{margin-top:48px;border:1px solid #1759ff;padding:28px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.ps-abstract>span{font-size:12px;color:#1759ff;width:100%}
.ps-abstract>b{font-size:clamp(20px,2.2vw,30px);font-weight:500;letter-spacing:-.03em}
.ps-abstract>i{font-style:normal;color:#999;font-size:22px}

/* Core 15 항목 — .bx-dimension-map 의 파란 윗선 + 번호. */
.ps-core{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.ps-core>div{padding:18px 0;border-top:1px solid #1759ff}
.ps-core span{font-size:12px;color:#1759ff;display:block;margin-bottom:18px}
.bx-store .ps-core h3{font-size:17px}

/* 로드맵 dl — 브랜드 .bx-journey 문법에 '검증 경계선' 한 줄만 추가. */
.ps-divider{display:flex;align-items:center;gap:20px;padding:28px 0;color:#1759ff;font-size:12px;letter-spacing:.07em}
.ps-divider::before,.ps-divider::after{content:'';flex:1;height:1px;background:#1759ff}
.ps-journey dl>div{grid-template-columns:38% 62%}
.ps-journey dt{font-size:32px}

/* 세 이름 — .bx-inline-three 그대로. */
.ps-names blockquote{margin:14px 0 0;font-size:17px;line-height:1.6;letter-spacing:-.015em}

/* 도식 공통 */
.ps-figure text{font-family:inherit}
.ps-figure .ps-t{font-size:20px;font-weight:500;letter-spacing:-.025em;fill:#111}
.ps-figure .ps-s{font-size:13px;fill:#414141;letter-spacing:.02em}
.ps-figure .ps-m{font-size:11px;fill:#414141;letter-spacing:.08em}
.ps-figure .ps-b{fill:#1759ff}
.ps-figure .ps-line{fill:none;stroke:#151515;stroke-width:2}
.ps-figure .ps-thin{fill:none;stroke:#151515;stroke-width:1}
.ps-figure .ps-blue{fill:none;stroke:#1759ff;stroke-width:2}
.ps-figure .ps-box{fill:#fff;stroke:#151515;stroke-width:1.5}
.ps-figure .ps-box-ink{fill:#111;stroke:#111}
.ps-figure .ps-w{fill:#fff}

@media(max-width:1100px){.ps-pipeline{grid-template-columns:1fr;gap:12px}.ps-pipeline>i{transform:rotate(90deg);justify-content:center}.ps-pipeline>div{min-height:0}.ps-core{grid-template-columns:repeat(3,1fr)}.ps-ladder{grid-template-columns:repeat(3,1fr)}.ps-day{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.ps-surfaces,.ps-two,.ps-state,.ps-before-after,.ps-zero,.ps-example{grid-template-columns:1fr;gap:32px}.ps-ladder,.ps-core,.ps-domains{grid-template-columns:1fr 1fr;gap:20px}.ps-day{grid-template-columns:1fr 1fr;gap:24px 20px}.ps-state-box ul{grid-template-columns:1fr}.ps-journey dl>div{grid-template-columns:1fr;gap:24px}.ps-journey dt{font-size:28px}.ps-en{font-size:14px}.ps-quotes blockquote{font-size:17px}.ps-example p.ps-big{font-size:19px}}

/* 도식 보조·앵커 여백 */
.ps-figure .ps-box-blue{stroke:#1759ff;stroke-width:2}
.bx-learning-chapter,.bx-learning-close{scroll-margin-top:calc(var(--bx-nav) + 16px)}
/* 아래 두 규칙은 brainxen funnel.css 의 것을 그대로 옮겼다(전체 메뉴 하위 링크). */
.bx-store .bx-menu-note{padding-top:40px}
.bx-store .bx-menu-subnav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:28px}
.bx-store .bx-menu-subnav a{font-size:14px;display:block;padding-block:14px;border-bottom:1px solid var(--bx-line)}

/* 히어로 h1 — 390px 에서 "집단의 지능으로." 가 두 줄로 꺾여 고아 줄이 생긴다(실측). 카피가 정한 두 줄을 지키는 최소 크기. */
@media(max-width:599px){.bx-vision-hero h1{font-size:44px}}
/* 원칙 절의 ✕/✓ — 흐름 번호색(코발트)보다 우선. ✕ 는 브랜드의 대비색(#f04416). */
.ps-flow li>span.ps-x{color:#f04416}
.ps-flow li>span.ps-o{color:#1759ff}
/* 13절 리드 — brainxen `.bx-manifesto p br{display:none}` 와 같은 규칙. 좁은 폭에서는 강제 줄바꿈을 풀어 자연 줄바꿈만 남긴다. */
@media(max-width:599px){#market .bx-short-story h3 br{display:none}}