.ap-page{
  /* --- color --- 키 아트에서 뽑았다.
     바닥이 세 페이지 중 가장 어둡다. 이 키 아트는 화면의 팔 할이 빈 우주라,
     지면을 조금이라도 들면 그림의 검정과 지면의 검정이 어긋나 그림에 네모난
     테두리가 생긴다. */
  --ap-void:    #030407;   /* 가장 깊은 바닥 */
  --ap-void-2:  #080A10;
  --ap-void-3:  #10141C;   /* 어두운 구간 위에 얹는 판 */
  --ap-glow:    #35B6F5;   /* 소행성 균열에서 새어 나오는 시안 */
  --ap-glow-2:  #1E86C4;
  --ap-glow-d:  #0F5C8C;   /* 밝은 바닥에 이 색을 쓸 때 */
  --ap-amber:   #E8823A;   /* 정거장 선체의 주황 표식 */
  --ap-steel:   #AEB6C2;   /* 구조물 금속 */
  --ap-paper:   #F2F5F8;   /* 밝은 구간 바닥 */
  --ap-paper-2: #E2E8EF;
  --ap-ink:     #0E1116;
  --ap-gray:    #5C646F;

  --ap-font-data: ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* --- typography --- */
  --ap-fs-hero: clamp(2rem,5.2vw,4rem);
  --ap-fs-sect: clamp(1.5rem,3.1vw,2.6rem);
  --ap-fs-lead: clamp(1.05rem,1.5vw,1.3rem);
  --ap-fs-body: clamp(.95rem,1.1vw,1.0625rem);
  --ap-fs-cap:  .8125rem;

  /* --- structure --- */
  --ap-r:    3px;      /* 도면이라 모서리를 거의 깎지 않는다 */
  --ap-wrap: 1280px;
  --ap-sp-4: 2.75rem;

  font-size:var(--ap-fs-body);
  line-height:1.75;
  color:var(--ap-ink);
  background:var(--ap-paper);
  overflow-x:hidden;
}

:where(.ap-page) img{max-width:100%;display:block}
:where(.ap-page) a{color:inherit}
:where(.ap-page) :focus-visible{outline:3px solid var(--ap-glow-2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .ap-page *{transition:none!important;animation:none!important}
}

.ap-wrap{width:min(100% - 2.5rem,var(--ap-wrap));margin-inline:auto}

/* 등장 애니메이션 (공통 .reveal 과 별개로 이 페이지 안에서만) */
.ap-page .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ap-page .reveal.is-in{opacity:1;transform:none}


/* ============================================================
   공통 조형
   ============================================================ */

/* 바닥 무늬 — 광물 스캔.
   성긴 점 격자 위에 갈라진 광맥 몇 줄이 지나고, 한 곳에 스캔 표적이 놓인다.
   키 아트의 주인공이 균열마다 푸르게 빛나는 소행성이라 그 결을 옮긴 셈이다.

   [왜 격자를 성기게 두는가]
   스페이스 콜로니는 모눈이 촘촘히 깔린 설계도다. 이 페이지도 격자를 그렇게
   깔면 두 작품이 같은 도면 위에 놓인 것처럼 보인다. 여기서는 점만 띄엄띄엄
   찍어 격자를 겨우 암시한다 — 도면 위가 아니라 관측 장비 화면 위다.

   [왜 광맥인가]
   직선이 아니라 꺾이며 갈라지는 선이라야 광물의 결로 읽힌다. 곧은 선은
   구조물이 되고 곡선은 신호(뉴포머의 동심원)가 된다. 셋을 가르는 것이
   선의 성질이다.

   [진하기]
   점 격자는 .05 로 거의 안 보이게 둔다. 이 정도를 넘기면 본문 뒤에서 글자를
   갉아먹는다. 광맥은 .14 로 세 배 가까이 진하게 두어 무늬의 주인공이 되게
   하고, 표적과 교차점은 한 눈금 더 올려 시선이 맺히는 곳을 만든다.

   [이어 붙는 자리]
   광맥과 표적을 모두 타일 안에 온전히 넣었다. 선이 가장자리를 넘으면 그
   자리에서 꺾임이 잘려 이음매가 눈에 보인다. 점 간격(120)과 타일 크기(480)가
   나누어떨어져 격자도 이음매 없이 이어진다.

   진하기는 SVG 안 <g> 마다 정한다 — 구간에서 opacity 를 덧걸지 않는다.
   밝은 구간용(기본)과 어두운 구간용(--dark) 두 벌. */
.ap-u-grid{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='%230F5C8C' fill-opacity='.09'%3E%3Ccircle cx='60' cy='60' r='1'/%3E%3Ccircle cx='180' cy='60' r='1'/%3E%3Ccircle cx='300' cy='60' r='1'/%3E%3Ccircle cx='420' cy='60' r='1'/%3E%3Ccircle cx='60' cy='180' r='1'/%3E%3Ccircle cx='180' cy='180' r='1'/%3E%3Ccircle cx='300' cy='180' r='1'/%3E%3Ccircle cx='420' cy='180' r='1'/%3E%3Ccircle cx='60' cy='300' r='1'/%3E%3Ccircle cx='180' cy='300' r='1'/%3E%3Ccircle cx='300' cy='300' r='1'/%3E%3Ccircle cx='420' cy='300' r='1'/%3E%3Ccircle cx='60' cy='420' r='1'/%3E%3Ccircle cx='180' cy='420' r='1'/%3E%3Ccircle cx='300' cy='420' r='1'/%3E%3Ccircle cx='420' cy='420' r='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%230F5C8C' stroke-opacity='.16' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M96 128 150 176 138 232 196 268'/%3E%3Cpath d='M150 176 214 158'/%3E%3Cpath d='M138 232 92 262'/%3E%3Cpath d='M318 330 366 296 358 240 414 208'/%3E%3Cpath d='M366 296 424 318'/%3E%3Cpath d='M358 240 306 222'/%3E%3C/g%3E%3Cg fill='none' stroke='%230F5C8C' stroke-opacity='.26' stroke-width='1'%3E%3Cpath d='M300 96h30v30M414 96h-30v30M300 174h30v-30M414 174h-30v-30'/%3E%3C/g%3E%3Cg fill='%230F5C8C' fill-opacity='.26'%3E%3Ccircle cx='150' cy='176' r='2'/%3E%3Ccircle cx='366' cy='296' r='1.8'/%3E%3Ccircle cx='357' cy='135' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:480px 480px;
}
.ap-u-grid--dark{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='%2335B6F5' fill-opacity='.05'%3E%3Ccircle cx='60' cy='60' r='1'/%3E%3Ccircle cx='180' cy='60' r='1'/%3E%3Ccircle cx='300' cy='60' r='1'/%3E%3Ccircle cx='420' cy='60' r='1'/%3E%3Ccircle cx='60' cy='180' r='1'/%3E%3Ccircle cx='180' cy='180' r='1'/%3E%3Ccircle cx='300' cy='180' r='1'/%3E%3Ccircle cx='420' cy='180' r='1'/%3E%3Ccircle cx='60' cy='300' r='1'/%3E%3Ccircle cx='180' cy='300' r='1'/%3E%3Ccircle cx='300' cy='300' r='1'/%3E%3Ccircle cx='420' cy='300' r='1'/%3E%3Ccircle cx='60' cy='420' r='1'/%3E%3Ccircle cx='180' cy='420' r='1'/%3E%3Ccircle cx='300' cy='420' r='1'/%3E%3Ccircle cx='420' cy='420' r='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%2335B6F5' stroke-opacity='.14' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M96 128 150 176 138 232 196 268'/%3E%3Cpath d='M150 176 214 158'/%3E%3Cpath d='M138 232 92 262'/%3E%3Cpath d='M318 330 366 296 358 240 414 208'/%3E%3Cpath d='M366 296 424 318'/%3E%3Cpath d='M358 240 306 222'/%3E%3C/g%3E%3Cg fill='none' stroke='%2335B6F5' stroke-opacity='.30' stroke-width='1'%3E%3Cpath d='M300 96h30v30M414 96h-30v30M300 174h30v-30M414 174h-30v-30'/%3E%3C/g%3E%3Cg fill='%2335B6F5' fill-opacity='.30'%3E%3Ccircle cx='150' cy='176' r='2'/%3E%3Ccircle cx='366' cy='296' r='1.8'/%3E%3Ccircle cx='357' cy='135' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:480px 480px;
}

/* 눈썹 — 도면 위의 항목 이름. 이 페이지의 데이터 글꼴을 쓰는 자리다. */
.ap-eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--ap-font-data);
  font-size:var(--ap-fs-cap);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ap-glow-d);
}
.ap-eyebrow::before{
  content:'';
  width:26px;height:1px;
  background:currentColor;
  flex:none;
}
.ap-eyebrow--onDark{color:var(--ap-glow)}

/* 칩 — 모서리를 깎지 않은 납작한 라벨. 도면의 항목 표시에 가깝다. */
.ap-chip{
  display:inline-flex;align-items:center;
  padding:.42em 1em .46em;
  font-family:var(--ap-font-data);
  font-size:var(--ap-fs-cap);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ap-glow);
  border:1px solid rgba(53,182,245,.38);
  border-radius:var(--ap-r);
  background:rgba(53,182,245,.08);
}
/* 밝은 바닥용 칩(--onLight)은 두지 않았다. 이 페이지의 칩은 히어로 한 곳,
   어두운 바닥에만 있다. 쓰지 않는 짝을 미리 만들어 두면 나중에 읽는 사람이
   "밝은 구간에도 칩이 있나" 하고 찾게 된다. 필요해지면 그때 세운다. */

/* 섹션 머리 */
.ap-head{margin-bottom:var(--ap-sp-4)}
.ap-head__title{
  margin-top:.55em;
  font-size:var(--ap-fs-sect);
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.02em;
}
.ap-head__lead{
  margin-top:.9em;
  max-width:46em;
  font-size:var(--ap-fs-lead);
  color:var(--ap-gray);
}
.ap-head__lead strong{font-weight:600;color:var(--ap-ink)}
.ap-head--center{text-align:center}
.ap-head--center .ap-head__lead{margin-inline:auto}
.ap-head--center .ap-eyebrow::before{display:none}

/* 미확정 정보 표시(.ap-tbd)는 걷어냈다. 공식 소개 페이지의 본문 · 프롤로그 ·
   미션 · 교육 목표가 모두 들어오고 발주처(광주 미래채움센터)도 확인되면서
   이 페이지에서 "확인 필요"로 남은 자리가 없어졌다. 다시 필요해지면
   work-newformer.css 에 같은 성격의 표시가 없으므로 여기에 새로 세운다. */


/* ============================================================
   HERO
   ============================================================ */
.ap-hero{
  position:relative;
  isolation:isolate;
  padding:clamp(46px,5.6vw,88px) 0 0;
  /* 오른쪽 위의 옅은 빛은 키 아트의 콜로니가 놓인 자리와 맞춘다 —
     그림이 시작되기 전부터 시선이 그쪽을 향하게 둔다. */
  background:
    radial-gradient(120% 90% at 76% 6%, rgba(76,130,216,.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--ap-void-2) 0%, var(--ap-void) 100%);
  color:var(--ap-paper);
  overflow:hidden;
}
.ap-hero__grid{position:absolute;inset:0;z-index:-1}
.ap-hero__inner{position:relative;text-align:center}

.ap-hero__title{
  margin:.5em 0 0;
  font-size:var(--ap-fs-hero);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.03em;
  color:var(--ap-paper);
}
/* 영문 이름은 제목과 같은 크기로 두면 어느 쪽이 작품 이름인지 읽히지 않는다.
   한 단 내리고 데이터 글꼴로 성격을 갈라 둔다. */
.ap-hero__en{
  margin:.9em 0 0;
  font-family:var(--ap-font-data);
  font-size:clamp(.95rem,1.5vw,1.2rem);
  letter-spacing:.14em;
  color:var(--ap-glow);
}
.ap-hero__sub{
  margin:clamp(20px,2.4vw,30px) auto 0;
  max-width:44em;
  font-size:var(--ap-fs-lead);
  color:#C4CAD3;
}
.ap-hero__chips{
  margin-top:clamp(22px,2.6vw,32px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
}

/* 키 아트 — 히어로를 닫는 자리. 원본이 1672x941 이라 그 이상 늘리지 않는다.
   이미지 안에 이미 "스페이스 콜로니" 글자가 박혀 있어 위쪽 제목과 겹쳐
   읽힌다. 그래도 자르지 않는 이유는 뉴포머와 같다 — 그 글자가 왼쪽 끝에
   있어서, 잘라내면 구도의 중심인 콜로니가 오른쪽으로 쏠린다. */
.ap-hero__art{
  margin-top:clamp(30px,3.6vw,52px);
  width:min(100%,1672px);
  margin-inline:auto;
  position:relative;
}
/* picture 는 그릇일 뿐이라 크기는 안의 img 가 정한다 — 그래도 display:block
   은 줘야 한다. 인라인으로 두면 글자 밑줄 자리만큼 틈이 생기고, 아래
   ::after 그라데이션이 그 틈만큼 밀려 그림 끝에 검은 선이 남는다. */
.ap-hero__art picture{display:block}
.ap-hero__art img{width:100%;height:auto}
/* 아래쪽을 바닥색으로 녹여 다음 구간과 이어 붙인다 —
   이미지가 칼로 자른 듯 끝나면 액자처럼 보인다. */
.ap-hero__art::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;
  height:22%;
  background:linear-gradient(180deg,transparent,var(--ap-void));
  pointer-events:none;
}


/* ============================================================
   OVERVIEW — 공식 소개문과 조종실 배너
   히어로 바로 뒤라 바닥을 같은 암흑으로 이어 붙인다. 색을 바꾸면 히어로가
   두 번 끝난 것처럼 보인다. 대신 왼쪽 위에서 옅은 푸른빛이 번지게 해
   구간이 새로 시작하는 것만 알린다.

   두 칸으로 나눈 이유 — 그림이 3:2 로 세로가 있는 편이다. 한 칸으로 쌓으면
   조종실 사진이 화면 하나를 통째로 먹고, 정작 읽어야 할 소개문이 그 아래로
   밀려 내려간다. 옆에 세우면 그림과 글이 한 화면에 함께 들어온다.
   ============================================================ */
.ap-brief{
  position:relative;
  isolation:isolate;
  padding:clamp(52px,6vw,92px) 0;
  background:
    radial-gradient(100% 80% at 12% 0%, rgba(53,182,245,.16) 0%, transparent 60%),
    var(--ap-void);
  color:var(--ap-paper);
  overflow:hidden;
}
.ap-brief__grid{position:absolute;inset:0;z-index:-1}
.ap-brief__inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(26px,3.6vw,60px);
}

/* 그림 틀 — 제원표 카드(.ap-spec__card)와 같은 문법이다. 얇은 시안 선에
   왼쪽 위 귀퉁이만 밝힌다. 사진을 액자에 넣지 않고 "관측 화면에 띄운 자료"
   처럼 보이게 하려는 것이다. */
.ap-brief__art{
  position:relative;
  margin:0;
  border:1px solid rgba(53,182,245,.18);
  border-radius:var(--ap-r);
  overflow:hidden;
}
.ap-brief__art::after{
  content:'';
  position:absolute;top:0;left:0;
  width:18px;height:18px;
  border:1px solid var(--ap-glow-2);
  border-right:0;border-bottom:0;
  pointer-events:none;
}
.ap-brief__art img{width:100%;height:auto}

.ap-brief__title{
  margin:.55em 0 0;
  font-size:clamp(1.3rem,2.4vw,1.95rem);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--ap-paper);
}
.ap-brief__text{
  margin:1.05em 0 0;
  max-width:34em;
  font-size:var(--ap-fs-body);
  line-height:1.85;
  color:#C4CAD3;
}


/* ============================================================
   VIDEO — 체험 기록 영상
   소개와 이야기 사이에 낀 구간이라 바닥을 같은 암흑으로 둔다. 여기서 색을
   바꾸면 한 덩어리로 읽혀야 할 세 구간(소개 · 영상 · 이야기)이 갈린다.
   ============================================================ */
.ap-video{padding:clamp(56px,6.4vw,96px) 0;background:var(--ap-void)}
.ap-video .ap-head__title{color:var(--ap-paper)}
.ap-video .ap-head__lead{color:#C4CAD3}

/* 칸의 화면비(536/360)는 영상 파일의 화면비 그대로다. 원본은 좌우가 검게
   비어 있는 640x360 인데 그 띠를 잘라 낸 뒤의 값이다.
   폭을 720px 로 묶은 이유는 영상이 360p 이기 때문이다 — 다른 페이지처럼
   1000px 로 벌리면 늘어난 만큼 뭉갠 자국이 눈에 띈다. */
.ap-video__frame{
  width:min(100%,720px);
  margin-inline:auto;
  aspect-ratio:536/360;
  overflow:hidden;
  border:1px solid rgba(53,182,245,.22);
  border-radius:var(--ap-r);
  background:#000;
}
/* contain 을 쓰는 이유는 재생 막대다 — cover 로 칸을 넘겨 자르면 컨트롤이
   프레임 밖으로 밀려난다(다른 페이지의 영상 칸과 같은 처리다). */
.ap-video__frame video{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
  background:#000;
}
.ap-video__note{
  margin-top:1rem;
  text-align:center;
  font-family:var(--ap-font-data);
  font-size:var(--ap-fs-cap);
  letter-spacing:.04em;
  color:var(--ap-glow);
}


/* ============================================================
   STORY — 프롤로그와 미션
   위 구간과 같은 암흑을 이어 쓴다. 우주 이야기를 하는 두 구간을 색으로도
   한 덩어리로 묶는다.
   ============================================================ */
.ap-story{
  position:relative;
  isolation:isolate;
  padding:clamp(56px,6.4vw,96px) 0 clamp(64px,7vw,104px);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(53,182,245,.18) 0%, transparent 62%),
    var(--ap-void);
  color:var(--ap-paper);
  overflow:hidden;
}
.ap-story__grid{position:absolute;inset:0;z-index:-1}
.ap-story .ap-head__title{color:var(--ap-paper)}
.ap-story .ap-head__lead{color:#C4CAD3}

/* 프롤로그는 머리 · 그림 · 글 세 토막으로 나뉜다. 머리 아래 여백(--ap-sp-4)은
   글이 바로 따라올 때의 값이라, 사이에 그림이 들어오면 너무 벌어진다.
   그림이 오는 자리에서만 여백을 줄인다. */
.ap-head--tight{margin-bottom:clamp(20px,2.4vw,30px)}

/* 프롤로그 장면 두 장. 어두운 우주 그림이라 테두리를 두르지 않으면 어디까지가
   그림이고 어디부터가 구간 바닥인지 경계가 사라진다. 위쪽 조종실 그림
   (.ap-brief__art)과 같은 문법으로 얇은 시안 선만 두른다.
   원본 화면비가 서로 달라(1.50 · 1.67) 16:10 으로 잘라 높이를 맞춘다 —
   맞추지 않으면 나란한 두 칸의 아래 끝이 어긋난다. */
.ap-story__shots{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
  width:min(100%,1100px);
  margin-inline:auto;
}
.ap-shot{
  position:relative;
  margin:0;
  border:1px solid rgba(53,182,245,.18);
  border-radius:var(--ap-r);
  overflow:hidden;
}
.ap-shot::after{
  content:'';
  position:absolute;top:0;left:0;
  width:18px;height:18px;
  border:1px solid var(--ap-glow-2);
  border-right:0;border-bottom:0;
  pointer-events:none;
}
/* height:auto 가 반드시 먼저다. <img> 의 height 속성은 표현 힌트로 들어오는데,
   그 값이 살아 있으면 두 변이 모두 정해진 셈이라 aspect-ratio 가 무시된다.
   속성 자체는 지우지 않는다 — 그림이 내려오기 전에 자리를 잡아 주는 값이라
   지우면 화면이 덜컹거린다. */
.ap-shot__img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#000;
}

/* 그림 아래로 오는 프롤로그 본문. 가운데 정렬과 최대 폭은 .ap-head__lead 가
   이미 갖고 있으므로 여기서는 위 여백과 문단 사이 간격만 정한다. */
.ap-story__text{
  margin-top:clamp(22px,2.6vw,34px);
  text-align:center;
}
.ap-story__text .ap-head__lead{margin-inline:auto}
.ap-story__text .ap-head__lead + .ap-head__lead{margin-top:.9em}

/* 미션 머리 — 프롤로그와 미션 셋 사이에 놓이는 작은 표제.
   .ap-head 를 다시 쓰지 않는다. 저쪽은 아래 여백이 --ap-sp-4(2.75rem)라
   구간 머리에는 맞지만, 여기서는 표제와 미션 칸이 한 덩어리로 붙어 보여야
   한다 — 사이가 벌어지면 "손상된 우주선 복구"가 어느 목록의 제목인지
   모르게 된다. 위쪽 여백만 크게, 아래쪽은 좁게 둔 이유다. */
.ap-story__mid{
  margin-top:clamp(44px,5vw,72px);
  text-align:center;
}
.ap-story__midTitle{
  margin:.55em 0 0;
  font-size:clamp(1.25rem,2.1vw,1.7rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ap-paper);
}
.ap-story__mid .ap-eyebrow::before{display:none}
/* 표제와 미션 칸 사이에 끼는 한 줄이라 본문 색보다 한 단 낮춰,
   목록의 안내문으로 읽히게 한다. */
.ap-story__midLead{
  margin:.85em auto 0;
  max-width:38em;
  font-size:var(--ap-fs-cap);
  line-height:1.8;
  color:#9AA3AF;
}

.ap-story__devices{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}

/* 미션 칸 — 관측 화면의 항목 표시다. 왼쪽에 시안 세로선을 세워 "판독 중인
   항목"처럼 보이게 한다. 밝은 구간의 .ap-step 이 위쪽에 선을 긋는 것과
   짝을 이루되, 어두운 바닥에서는 가로선보다 세로선이 목록으로 읽힌다 —
   번호가 왼쪽에 있기 때문이다.

   그림이 카드 폭을 꽉 채워야 하므로 바깥 칸에는 padding 을 두지 않는다.
   안쪽 여백은 글 칸(.ap-device__body)이 갖는다. */
.ap-device{
  margin:0;
  background:var(--ap-void-3);
  border:1px solid rgba(53,182,245,.16);
  border-left:2px solid var(--ap-glow-2);
  border-radius:var(--ap-r);
  overflow:hidden;
}
/* 원본 화면비가 셋 다 달라(1.48 · 1.43 · 1.56) 16:10 으로 잘라 맞춘다.
   셋 다 가로가 16:10 보다 좁아 위아래만 잘린다 — 오른쪽 위의 MISSION
   안내창이 잘려 나가지 않는다. cover 를 쓰는 이유는, contain 이면 좌우에
   검은 띠가 남아 가뜩이나 배경이 검은 이 구간에서 카드가 반쯤 빈 것처럼
   보이기 때문이다. */
.ap-device__shot{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#000;
  border-bottom:1px solid rgba(53,182,245,.16);
}
.ap-device__body{
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px) clamp(20px,2.4vw,28px);
}
.ap-device__num{
  font-family:var(--ap-font-data);
  font-size:var(--ap-fs-cap);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ap-glow);
}
.ap-device__name{
  margin:.5em 0 0;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ap-paper);
}
.ap-device__role{
  margin:.4em 0 0;
  font-size:var(--ap-fs-cap);
  line-height:1.7;
  color:#9AA3AF;
}

/* 닫는 한 줄 — 공식 소개문의 마지막 문장이다. 느낌표로 끝나는 안내 방송
   투라 본문 색으로 두면 튄다. 시안으로 올리고 가운데에 세워, 문단이 아니라
   미션 브리핑의 마지막 줄로 읽히게 한다. */
.ap-story__close{
  margin:clamp(30px,3.4vw,46px) auto 0;
  max-width:34em;
  text-align:center;
  font-size:var(--ap-fs-lead);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ap-glow);
}


/* ============================================================
   WHAT — 무엇을 하는 콘텐츠인가
   ============================================================ */
.ap-what{
  position:relative;
  isolation:isolate;
  padding:clamp(60px,6.8vw,104px) 0;
  background:var(--ap-paper);
  overflow:hidden;
}
.ap-what__grid{position:absolute;inset:0;z-index:-1}
.ap-what__steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);
}
.ap-step{
  padding:clamp(22px,2.6vw,32px);
  background:#FFFFFF;
  border:1px solid var(--ap-paper-2);
  border-top:2px solid var(--ap-glow-2);
  border-radius:var(--ap-r);
}
.ap-step__num{
  font-family:var(--ap-font-data);
  font-size:var(--ap-fs-cap);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ap-glow-d);
}
.ap-step__title{
  margin:.9em 0 0;
  font-size:clamp(1.1rem,1.6vw,1.32rem);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.32;
}
.ap-step__desc{margin:.6em 0 0;font-size:var(--ap-fs-cap);color:var(--ap-gray);line-height:1.8}

/* 교육 목표 — 세 칸 아래에 붙는 마무리 판.
   (예전에는 "준비 중인 자료" 안내가 이 자리에 있었다. 공식 소개문이 들어와
   빈 곳이 없어졌으므로, 뉴포머 페이지와 같은 성격의 판으로 바꿔 세웠다.)

   카드로 만들지 않고 판 하나에 얹는 이유는 같다 — 바로 위가 카드 세 장이라
   여기까지 카드면 네 장이 되고, 그러면 목표가 콘텐츠 성격의 네 번째
   항목처럼 읽힌다. 배경을 한 단 눌러 "위 세 칸을 받는 자리"로 낮춰 둔다. */
.ap-goal{
  margin-top:clamp(22px,2.6vw,34px);
  padding:clamp(26px,3vw,40px) clamp(22px,2.8vw,44px) clamp(28px,3.2vw,44px);
  background:var(--ap-paper-2);
  border:1px solid #D6DCCC;
  border-radius:var(--ap-r);
}
.ap-goal__title{
  margin:.5em 0 0;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  font-weight:800;
  letter-spacing:-.02em;
}
/* 항목 앞 표식은 눈금 하나다 — 이 페이지의 다른 목록(제원표)도 라임 짧은
   선으로 시작하므로 여기서만 점을 쓰면 결이 어긋난다.
   list-style 을 지우고 ::before 로 직접 그린다. */
.ap-goal__list{
  margin:1.1em 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.7em;
}
.ap-goal__list li{
  position:relative;
  padding-left:1.6em;
  font-size:var(--ap-fs-body);
  line-height:1.7;
}
.ap-goal__list li::before{
  content:'';
  position:absolute;
  left:0;top:.78em;
  width:14px;height:2px;
  background:var(--ap-glow-2);
}
/* 발주처 한 줄 — 목표 둘과 성격이 달라 선 하나로 갈라 둔다. */
.ap-goal__note{
  margin:1.3em 0 0;
  padding-top:1.1em;
  border-top:1px solid #D6DCCC;
  font-size:var(--ap-fs-cap);
  color:var(--ap-gray);
}


/* ============================================================
   SPEC — 프로젝트 정보
   ============================================================ */
.ap-spec{padding:clamp(56px,6.4vw,96px) 0;background:var(--ap-void);color:var(--ap-paper)}
.ap-spec__card{
  position:relative;
  padding:clamp(26px,3.2vw,46px);
  background:var(--ap-void-3);
  border:1px solid rgba(53,182,245,.18);
  border-radius:var(--ap-r);
}
/* 네 귀퉁이의 짧은 라임 표시 — 도면의 재단 표시에서 가져왔다.
   테두리를 굵히는 대신 귀퉁이만 밝혀서 판이 무거워지지 않게 한다. */
.ap-spec__card::before,
.ap-spec__card::after{
  content:'';
  position:absolute;width:18px;height:18px;
  border:1px solid var(--ap-glow-2);
  pointer-events:none;
}
.ap-spec__card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ap-spec__card::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.ap-spec__title{
  margin:.5em 0 0;
  font-size:var(--ap-fs-sect);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.22;
}
.ap-spec__title span{
  display:block;
  margin-top:.35em;
  font-family:var(--ap-font-data);
  font-size:.42em;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--ap-glow);
}
.ap-spec__rows{
  margin-top:clamp(24px,2.8vw,36px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,3vw,56px);
}
.ap-spec__row{
  display:grid;
  grid-template-columns:7.5em minmax(0,1fr);
  gap:1em;
  padding:.72em 0;
  border-bottom:1px solid rgba(53,182,245,.14);
}
.ap-spec__key{
  font-family:var(--ap-font-data);
  font-size:var(--ap-fs-cap);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ap-glow);
}
.ap-spec__val{font-weight:600;color:var(--ap-paper)}


/* ============================================================
   SIBLING — 같은 갈래의 XR 콘텐츠
   ============================================================ */
.ap-more{padding:clamp(56px,6.4vw,96px) 0;background:var(--ap-paper-2)}
.ap-more__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,28px);
}
.ap-more__item{
  display:block;
  padding:clamp(20px,2.4vw,28px);
  background:var(--ap-paper);
  border:1px solid #D6DCCC;
  border-radius:var(--ap-r);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.ap-more__item:hover{border-color:var(--ap-glow-2);transform:translateY(-3px)}
.ap-more__name{margin:.5em 0 0;font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.ap-more__desc{margin:.45em 0 0;font-size:var(--ap-fs-cap);color:var(--ap-gray)}


/* ============================================================
   CTA
   ============================================================ */
.ap-cta{
  position:relative;
  isolation:isolate;
  padding:clamp(64px,7vw,110px) 0;
  text-align:center;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(76,130,216,.20) 0%, transparent 60%),
    var(--ap-void);
  color:var(--ap-paper);
  overflow:hidden;
}
.ap-cta__grid{position:absolute;inset:0;z-index:-1}
.ap-cta__title{
  font-size:var(--ap-fs-sect);
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.02em;
}
.ap-cta__desc{margin:1em auto 0;max-width:40em;color:#C4CAD3}
.ap-cta__btns{
  margin-top:clamp(24px,2.8vw,38px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;
}
.ap-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85em 1.9em .9em;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ap-void);
  background:var(--ap-glow);
  border:1px solid var(--ap-glow);
  border-radius:var(--ap-r);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.ap-btn:hover{background:#D8E477;border-color:#D8E477}
.ap-btn--ghost{
  color:var(--ap-glow);
  background:transparent;
  border-color:rgba(53,182,245,.45);
}
.ap-btn--ghost:hover{background:rgba(53,182,245,.12);color:var(--ap-glow);border-color:var(--ap-glow)}


/* ============================================================
   반응형
   ============================================================ */
@media (max-width:960px){
  .ap-spec__rows{grid-template-columns:1fr}
  /* 소개 구간은 두 칸을 풀되 글을 먼저 세운다 — 좁은 화면에서 그림이 위에
     오면 첫 화면이 키 아트 · 조종실 사진 두 장으로 이어져, 이 구간이
     무슨 이야기를 하는지 한참 내려가야 나온다. */
  .ap-brief__inner{grid-template-columns:1fr}
  .ap-brief__art{order:2}
  .ap-brief__body{order:1}
  .ap-brief__text{max-width:none}
}
@media (max-width:780px){
  .ap-what__steps{grid-template-columns:1fr}
  .ap-more__grid{grid-template-columns:1fr}
  .ap-story__devices{grid-template-columns:1fr}
  /* 프롤로그 그림 두 장은 폭이 반으로 줄면 화성 지표의 차량도 태양 폭풍의
     행성도 알아볼 수 없다. 한 줄에 하나씩 세운다. */
  .ap-story__shots{grid-template-columns:1fr}
}