/* Axiomiy(액시오미) 공통 스타일. ko(/index.html) 와 en(/en/index.html) 이 같이 쓴다.
   경로를 /assets/style.css 로 절대 지정했기 때문에 /en/ 하위에서도 그대로 붙는다.

   [디자인 근거] 미국 딥테크 기업 사이트를 조사해서 세운 규칙이다.
   - Anduril 은 body 가 순흑(#000) + Helvetica 뿐이고, SSI(ssi.inc) 는 이미지가
     아예 없는 단일 화면 선언문이며, Thinking Machines 도 흑백 텍스트가 전부다.
     이 층위의 회사들은 장식이 아니라 '장식 없음'으로 신뢰를 만든다. 그래서
     여기도 그라디언트/글로우를 쓰지 않고 시그널 컬러 한 개(--acc)만 둔다.
     그라디언트가 남아 있는 곳은 로고 마크 하나뿐이다.
   - 대신 타이포가 일을 해야 하므로 히어로 자간을 -.045em 까지 조이고 크기를
     크게 가져간다. 색을 줄인 만큼 대비는 크기와 여백에서 나온다.
   색을 바꾸려면 --acc 한 줄만 고치면 사이트 전체가 따라온다. */
:root{
  --bg:#030304; --bg-2:#08080a; --panel:#0c0c0f;
  --ink:#f5f6f8; --body:#9a9ca6; --dim:#6a6d78;
  --acc:#3de3ff;               /* 어두운 형광 시안. 로고 추론선과 같은 값 */
  --acc-dim:rgba(61,227,255,.38);
  --acc-glow:0 0 14px rgba(61,227,255,.55);
  --warn:#e8b169;              /* 배포 전 채워야 할 자리 표시 전용 */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --max:1180px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Helvetica Neue",
              Helvetica,Arial,"Noto Sans KR",sans-serif;
  background:var(--bg); color:var(--body); line-height:1.8;
  font-size:16px; -webkit-font-smoothing:antialiased; word-break:keep-all;
}
/* 영문 페이지는 어절 단위 줄바꿈(keep-all)이 오히려 우측 여백을 들쭉날쭉하게
   만든다. lang 속성으로 갈라 둔다 -- 페이지마다 CSS 를 나누지 않으려는 것. */
html[lang="en"] body{word-break:normal}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
section{padding:120px 0;position:relative}
section.alt{background:var(--bg-2)}
section + section{border-top:1px solid var(--line)}
@media(max-width:720px){section{padding:78px 0}.wrap{padding:0 20px}}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(3,3,4,.78);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:flex;align-items:center;flex:none}
/* 로고는 SVG 락업 한 장이다. 높이만 고정하고 폭은 비율에 맡긴다 --
   width/height 를 둘 다 박아 두면 나중에 락업 비율을 바꿨을 때 찌그러진다. */
.logo-img{height:26px;width:auto;display:block}
@media(max-width:420px){.logo-img{height:23px}}
.nav ul{display:flex;gap:30px;list-style:none;font-size:14px;font-weight:500;margin-left:auto}
.nav ul a{color:var(--body);transition:color .18s}
.nav ul a:hover{color:var(--ink)}
/* 언어 전환. Applied Intuition 이 English/日本語/한국어 를 두는 자리와 같은
   위치(우측 끝)에 둔다 -- 이 자리를 찾는 사용자의 습관이 이미 만들어져 있다. */
.lang{display:flex;align-items:center;gap:0;font-family:var(--mono);font-size:11.5px;
  border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:none}
.lang a{padding:6px 11px;color:var(--dim);letter-spacing:.06em;transition:.18s}
.lang a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.lang a[aria-current="true"]{background:rgba(255,255,255,.10);color:var(--ink)}
@media(max-width:900px){.nav ul{display:none}}

/* ---------- eyebrow / section label ---------- */
/* Applied Intuition 의 ■ 마커 프리픽스와 같은 역할. 섹션마다 번호를 붙이는 것은
   Physical Intelligence 가 모델을 π0/π0.5 로 번호 매기는 것과 같은 의도다 --
   회사가 순서와 체계를 갖고 일한다는 신호. */
.label{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:11px;margin-bottom:26px;
}
.label::before{content:"";width:22px;height:1px;background:var(--acc);flex:none;
  box-shadow:var(--acc-glow)}
.label .n{color:var(--acc);text-shadow:var(--acc-glow);text-transform:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
/* 유일한 배경 장식. 격자를 아주 흐리게 깔고 위쪽만 마스크로 남긴다.
   글로우를 뺀 자리를 이것 하나로 대신한다 -- 더 얹으면 위 규칙이 깨진다. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(#000,transparent 78%);
  -webkit-mask-image:linear-gradient(#000,transparent 78%);
}
.hero .wrap{position:relative;z-index:1;padding:126px 28px 112px}
@media(max-width:720px){.hero .wrap{padding:76px 20px 68px}}
.hero .label{margin-bottom:38px}
.hero h1{
  font-size:clamp(44px,9vw,104px);line-height:1;letter-spacing:-.045em;
  font-weight:800;color:var(--ink);margin-bottom:30px;
}
.hero .kr{
  font-size:clamp(18px,3vw,28px);font-weight:600;color:var(--ink);
  letter-spacing:-.025em;line-height:1.45;margin-bottom:30px;
}
/* 히어로 본문. PI/TML/SSI 가 모두 '회사가 무엇인지' 를 한 문장으로 못 박는
   자리다. 슬로건만 두고 비워 두면 딥테크 사이트로 읽히지 않는다. */
.hero .thesis{font-size:clamp(16px,2.1vw,19px);max-width:720px;color:var(--body)}
.hero .thesis b{color:var(--ink);font-weight:600}
.cta{margin-top:46px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:8px;font-weight:600;font-size:14.5px;transition:.18s}
.btn-p{background:var(--ink);color:#030304}
.btn-p:hover{background:#fff}
.btn-s{border:1px solid var(--line-2);color:var(--ink)}
.btn-s:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.34)}

/* ---------- 히어로 도판 ---------- */
/* 평면 격자가 오른쪽으로 갈수록 휘는 그림. '당연하다고 두었던 전제가 더 이상
   성립하지 않는다'는 본문 주장을 그대로 그린 것이라 장식이 아니라 논지다.
   그림 자체가 격자이므로, 이 클래스가 붙은 히어로에서는 CSS 격자(::before)를
   끈다 -- 두 격자가 겹치면 간격이 달라 무아레가 생긴다. */
.hero--figure::before{display:none}
.hero-figure{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center;opacity:.95;pointer-events:none;user-select:none;z-index:0;
}
/* 글자 뒤 검은 막. 그림을 마스크로 지우면 형광까지 같이 죽는다 -- 그림은 그대로
   두고 왼쪽 위에 검정을 덮는 쪽이 대비도 살고 가독성도 산다. 도판(img)보다
   뒤에 생성되므로 자연히 그 위에 얹히고, .wrap(z-index:1)보다는 아래다. */
.hero--figure::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,#030304 4%,rgba(3,3,4,.94) 30%,
             rgba(3,3,4,.62) 54%,rgba(3,3,4,.15) 70%,transparent 80%);
}
@media(max-width:900px){
  /* 좁은 화면에서는 글이 그림 위로 온다. 막을 세로 방향으로 바꾼다. */
  .hero-figure{opacity:.8;object-position:right bottom}
  .hero--figure::after{background:linear-gradient(#030304 8%,rgba(3,3,4,.88) 42%,
    rgba(3,3,4,.3) 78%,transparent 100%)}
}

/* ---------- 본문 도판 ---------- */
figure.figure{margin:0 0 56px}
figure.figure img{
  display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;
}
figure.figure figcaption{
  margin-top:14px;box-shadow:-2px 0 14px -4px rgba(61,227,255,.5);font-size:14px;color:var(--dim);line-height:1.7;
  padding-left:16px;border-left:2px solid var(--acc);
}

/* ---------- 연구영역 카드 도판 ---------- */
/* 카드 안쪽 여백을 음수 마진으로 상쇄해 셀 가장자리까지 꽉 채운다.
   여백만큼 정확히 빼야 하므로 .cell 패딩을 바꾸면 여기도 같이 바꾼다. */
.cell-fig{
  display:block;width:calc(100% + 68px);height:auto;aspect-ratio:3/2;object-fit:cover;
  margin:-38px -34px 28px;
}
@media(max-width:720px){.cell-fig{width:calc(100% + 48px);margin:-30px -24px 24px}}

/* ---------- 히어로 표어 이미지 ---------- */
/* 표어를 이미지로 굽는 대신 h1 을 없애지는 않았다 -- h1 안의 img alt 로 문구가
   남아야 검색엔진과 스크린리더가 'Intelligence Beyond AI' 를 읽는다.
   이미지 폭은 .wrap 을 그대로 채우고, 문구는 이미지 안에서 x=0 에 붙어 있어
   위(라벨)/아래(국문 표어) 텍스트와 좌측선이 정확히 맞는다. */
.hero-title{margin:0 0 30px;font-size:0;line-height:0}
.hero-title img{
  display:block;width:100%;height:auto;
  /* 표어 이미지는 배경이 투명한 '글자판' 이다. 그래프는 뒤의 .hero-figure 가
     전면으로 깔기 때문에 여기에 마스크를 걸 상자가 없다.
     글자는 발광이 잘리지 않게 캔버스 안에서 2.5% 들여 그려 두었고, 여기서
     같은 만큼 당겨 위아래 라벨/본문과 좌측선을 맞춘다(make-hero.py PAD_PCT). */
  margin-left:-2.5%;
}
@media(max-width:900px){.hero-title{margin-bottom:22px}}

/* ---------- section head ---------- */
.shead{max-width:820px;margin-bottom:64px}
.shead h2{
  font-size:clamp(28px,4.4vw,46px);line-height:1.24;letter-spacing:-.035em;
  font-weight:700;color:var(--ink);
}
.shead p{margin-top:22px;font-size:17px;max-width:680px}
.lede{font-size:19px;color:var(--ink);font-weight:500;line-height:1.7;letter-spacing:-.015em}

/* ---------- 공리(원칙) : 산문 블록 ---------- */
/* Thinking Machines 의 원칙 섹션 방식. 아이콘 3칸 카드가 아니라 제목 + 실제
   문단이다. 카드로 줄이면 할 말이 한 줄로 눌려서 아무 회사에나 붙는 말이 된다. */
.axioms{display:grid;gap:0;border-top:1px solid var(--line)}
.axiom{
  display:grid;grid-template-columns:96px minmax(0,300px) minmax(0,1fr);gap:36px;
  padding:44px 0;border-bottom:1px solid var(--line);
}
.axiom .no{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--acc);
  padding-top:8px;text-shadow:var(--acc-glow)}
.axiom h3{font-size:23px;font-weight:700;color:var(--ink);letter-spacing:-.028em;line-height:1.35}
.axiom .en{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:9px}
.axiom p{font-size:16px}
.axiom p + p{margin-top:14px}
@media(max-width:900px){
  .axiom{grid-template-columns:1fr;gap:14px;padding:34px 0}
  .axiom .no{padding-top:0}
}

/* ---------- 연구 영역 카드 ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.g2{grid-template-columns:1fr}}
.cell{background:var(--bg);padding:38px 34px;transition:background .2s}
section.alt .cell{background:var(--bg-2)}
.cell:hover,section.alt .cell:hover{background:var(--panel)}
.cell .no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--acc);
  display:block;margin-bottom:20px;text-shadow:var(--acc-glow)}
.cell h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.025em}
.cell .en{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);display:block;margin:8px 0 16px}
.cell p{font-size:15.5px}
@media(max-width:720px){.cell{padding:30px 24px}}

/* ---------- 사업영역 rows ---------- */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:96px minmax(0,300px) minmax(0,1fr);gap:36px;
  padding:38px 0;border-bottom:1px solid var(--line);transition:background .18s;
}
.row:hover{background:rgba(255,255,255,.018)}
.row .no{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--acc);
  padding-top:7px;text-shadow:var(--acc-glow)}
.row h3{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.025em}
.row .en{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:8px}
.row p{font-size:16px}
@media(max-width:900px){.row{grid-template-columns:1fr;gap:12px;padding:30px 0}.row .no{padding-top:0}}

/* ---------- 회사 개요 / 문의 ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:44px}}
.facts{border-top:1px solid var(--line)}
.facts > div{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;
  padding:15px 2px;border-bottom:1px solid var(--line);font-size:15px;
}
.facts dt{color:var(--dim);font-weight:500}
.facts dd{color:var(--ink)}
/* 아직 확정되지 않은 항목. 배포 전 반드시 채워야 하므로 일부러 눈에 띄게 둔다.
   회색으로 흘려 두면 그대로 공개될 위험이 있다. */
.tbd{color:var(--warn);font-family:var(--mono);font-size:13px}
.contact h3{font-size:22px;color:var(--ink);font-weight:700;margin-bottom:12px;letter-spacing:-.028em}
.contact .mail{
  display:inline-block;margin-top:22px;font-family:var(--mono);font-size:16px;color:var(--acc);
  border-bottom:1px solid var(--acc-dim);padding-bottom:3px;transition:.18s;
}
.contact .mail:hover{border-bottom-color:var(--acc)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:52px 0;font-size:13.5px;color:var(--dim)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .slogan{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--body);text-transform:uppercase}

/* 국문/영문 병기. 법인명·대표자처럼 두 언어를 같은 줄에 놓아야 하는 항목에만 쓴다. */
.facts .sub{color:var(--dim);font-size:13px;margin-left:7px;font-weight:400}

/* 푸터 사업자 정보. 한국 회사 소개 사이트의 관례대로 상호/대표/주소를 한 줄에 둔다. */
.foot-co{color:var(--body);margin-bottom:7px;line-height:1.7}
@media(max-width:720px){.foot{display:block}.foot .slogan{margin-top:18px;display:block}}

/* ---------- 하위 페이지용 축약 히어로 ---------- */
/* 회사소개처럼 본문이 주인공인 페이지는 히어로가 화면을 다 먹으면 안 된다.
   메인의 .hero 를 그대로 쓰되 위아래 여백과 글자 크기만 줄인다. */
.hero.compact .wrap{padding:84px 28px 72px}
.hero.compact h1{font-size:clamp(34px,6vw,64px);margin-bottom:22px}
@media(max-width:720px){.hero.compact .wrap{padding:56px 20px 48px}}

/* 현재 보고 있는 페이지의 내비게이션 항목 */
.nav ul a[aria-current="page"]{color:var(--ink)}

/* ---------- 대표 인사말 ---------- */
.message{max-width:760px}
.message p + p{margin-top:18px}
.sign{
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
/* 서명은 본문과 같은 크기·굵기로 둔다. 이름만 22px 볼드로 키웠더니 인사말
   본문보다 커져서 그 줄만 따로 떠 보였다. 이름과 직함은 색으로만 구분한다. */
.sign .role{font-size:16px;color:var(--dim);font-weight:400}
.sign .name{font-size:16px;font-weight:400;color:var(--ink)}

/* ---------- 오시는 길 ---------- */
.addr{font-size:19px;color:var(--ink);font-weight:500;line-height:1.65;letter-spacing:-.015em}
.map-link{
  display:inline-block;margin-top:22px;font-family:var(--mono);font-size:13px;
  letter-spacing:.06em;color:var(--acc);border:1px solid var(--line-2);
  border-radius:8px;padding:11px 18px;transition:.18s;
}
.map-link:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.34)}

/* 어두운 배경에서는 브라우저 기본 포커스 링이 거의 보이지 않는다. */
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}