@charset "UTF-8";

/* ============================================================
   뉴포머 탐험 — Space-K 미션 소개 페이지 전용 스타일
   공통 style.css 와 충돌하지 않도록 모든 클래스에 nf- 접두사를 붙인다.
   헤더·푸터는 사이트 공통(.site-header/.site-footer)을 그대로 쓴다.

   이 페이지는 게임이 아니라 XR 체험형 콘텐츠다. 파일 이름을 game- 이 아니라
   work- 로 둔 것도 그래서다 — images/work-newformer.jpg 와 같은 갈래다.

   조형 언어 — 앞선 네 페이지와 겹치지 않게 잡았다.
     렌타히어로 Z  잉크 · 하프톤 코믹
     레전다이노    각진 홀로그램 (네이비 + 시안)
     액션캣        스티커
     캐치블록      장난감 블록
     뉴포머        >> 전파 신호. 가는 금색 동심원이 여러 곳에서 퍼져 나간다.
   레전다이노와 가장 가까워 보이지만 두 가지가 다르다 — 저쪽은 각진 홀로그램
   면이고 이쪽은 둥근 선뿐이다, 저쪽은 찬 시안이고 이쪽은 따뜻한 금색이다.
   키 아트가 이미 그렇게 생겼다: 검붉은 우주에 금색 가는 호가 얹혀 있다.

   [자료 상태] 공식 소개 페이지(thejaemi.com/복제-이전-강남-뉴포머탐험대)의
   본문 — 표제 문구 · 교육 목표 · 프롤로그 · 미션 세 장치 — 을 모두 옮겨 왔다.
   미션 기록 영상과 키 아트도 붙어 있다.

   제원표에 있던 기기 · 대상 연령 · 개발 시점 · 체험 인원 네 줄은 지웠다.
   공식 페이지에도 없는 값이라 확인이 필요한데, 표의 절반이 "확인 필요"면
   제원표가 아니라 미완성 양식으로 읽힌다. 값이 오면 줄을 다시 세운다.

   .nf-tbd 는 아직 본문 세 곳(MR 구현 방식 · 운영 동선 · 아스트로픽스
   소개문)에 남아 있다. 이쪽은 문장 안의 한 조각이라 표시로 두어도
   글이 무너지지 않는다. 자료가 들어오면 그 마크만 지운다.
   ============================================================ */

.nf-page{
  /* --- color --- 키 아트에서 뽑았다. 우주가 파랑이 아니라 검붉은 갈색이다 */
  --nf-void:    #0A0806;   /* 가장 깊은 바닥 */
  --nf-void-2:  #130F0A;
  --nf-void-3:  #1E1811;   /* 어두운 구간 위에 얹는 판 */
  --nf-amber:   #EBCB86;   /* 타이틀 금색 */
  --nf-amber-2: #C8A55C;
  --nf-amber-d: #7C6330;   /* 밝은 바닥에 금색을 쓸 때 */
  --nf-steel:   #A9AEB4;   /* 정거장 금속 */
  --nf-paper:   #F7F4ED;   /* 밝은 구간 바닥 */
  --nf-paper-2: #EBE5D9;
  --nf-ink:     #191510;
  --nf-gray:    #6A6157;

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

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

  /* --- structure --- */
  --nf-r:    4px;      /* 계기판이라 모서리를 거의 깎지 않는다 */
  --nf-wrap: 1280px;
  --nf-sp-4: 2.75rem;

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

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

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

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


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

/* 바닥 무늬 — 전파 신호. 네 곳에서 퍼져 나가는 동심원.
   미션 2번 장치가 통신 안테나다. 지구와 다른 우주선을 향해 신호를 쏘는
   모습이 이 페이지 바닥에 깔린다.

   [왜 이 형태를 골랐나]
   후보 중에 키 아트와 모양이 제일 닮은 것은 궤도(기울어진 타원)였다.
   그런데 타원은 큰 곡선 하나뿐이라, 구간 높이가 낮은 곳(교육 목표 칸)에서는
   무늬가 아니라 "휘어진 선 한 줄"로 보인다. 동심원은 작은 고리와 큰 고리를
   함께 가지므로 구간이 높든 낮든 무늬로 읽힌다.

   [왜 발신점이 넷인가]
   하나면 과녁이 된다. 동심원은 가운데로 갈수록 선이 촘촘해져 시선을 빨아
   당기는데, 그 자리에 제목이 오면 글자와 무늬가 서로를 방해한다.
   크기가 다른 발신점 넷(144 · 100 · 52 · 28)으로 흩어 놓아 어느 한 곳도
   중심이 되지 않게 했다. 사이의 빈자리는 작은 점 열두 개로 메운다 —
   비워 두면 "고리 뭉치 두 개가 되풀이되는 벽지"로 읽힌다.

   [왜 바깥 고리가 더 흐린가]
   같은 진하기로 다 그렸더니 과녁 판이 나란히 늘어선 것처럼 보였다. 신호는
   퍼져 나갈수록 약해지므로, 안쪽 두 고리만 남기고 바깥은 절반 이하로
   낮췄다(.15 → .07). 멀리서 보면 작은 핵만 흩어져 있고 큰 고리는 있는 듯
   없는 듯 깔린다 — 되풀이되는 자리가 눈에 덜 걸린다.

   [이어 붙는 자리]
   모든 원을 타일 안에 온전히 넣었다. 원이 가장자리를 넘으면 그 자리에서
   곡선이 직선으로 뚝 잘려, 타일이 이어 붙는 선이 눈에 보인다.
   그래서 타일이 560 으로 크다 — 원을 다 담으면서 되풀이 주기도 길어진다.

   stroke-width 는 1 로 두고 진하기로만 조절한다. 선을 굵히면 신호가 아니라
   장식 테두리로 읽힌다. 밝은 구간용(기본)과 어두운 구간용(--dark) 두 벌.

   진하기는 SVG 안 <g> 한 곳에서만 정한다 — 구간마다 opacity 를 덧걸면
   무늬가 왜 다르게 보이는지 두 곳을 봐야 알게 된다. */
.nf-u-dial{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%237C6330' stroke-opacity='.14' stroke-width='1'%3E%3Ccircle cx='390' cy='150' r='26'/%3E%3Ccircle cx='390' cy='150' r='50'/%3E%3Ccircle cx='150' cy='400' r='22'/%3E%3Ccircle cx='150' cy='400' r='44'/%3E%3Ccircle cx='470' cy='430' r='16'/%3E%3Ccircle cx='470' cy='430' r='32'/%3E%3Ccircle cx='70' cy='110' r='14'/%3E%3C/g%3E%3Cg fill='none' stroke='%237C6330' stroke-opacity='.06' stroke-width='1'%3E%3Ccircle cx='390' cy='150' r='78'/%3E%3Ccircle cx='390' cy='150' r='110'/%3E%3Ccircle cx='390' cy='150' r='144'/%3E%3Ccircle cx='150' cy='400' r='70'/%3E%3Ccircle cx='150' cy='400' r='100'/%3E%3Ccircle cx='470' cy='430' r='52'/%3E%3Ccircle cx='70' cy='110' r='28'/%3E%3C/g%3E%3Cg fill='%237C6330' fill-opacity='.28'%3E%3Ccircle cx='390' cy='150' r='2'/%3E%3Ccircle cx='150' cy='400' r='1.8'/%3E%3Ccircle cx='470' cy='430' r='1.3'/%3E%3Ccircle cx='70' cy='110' r='1.1'/%3E%3C/g%3E%3Cg fill='%237C6330' fill-opacity='.20'%3E%3Ccircle cx='250' cy='62' r='.9'/%3E%3Ccircle cx='538' cy='244' r='.8'/%3E%3Ccircle cx='296' cy='302' r='1'/%3E%3Ccircle cx='58' cy='250' r='.9'/%3E%3Ccircle cx='520' cy='64' r='1'/%3E%3Ccircle cx='204' cy='182' r='.8'/%3E%3Ccircle cx='338' cy='518' r='.9'/%3E%3Ccircle cx='108' cy='538' r='.8'/%3E%3Ccircle cx='252' cy='468' r='1'/%3E%3Ccircle cx='432' cy='300' r='.9'/%3E%3Ccircle cx='30' cy='320' r='.8'/%3E%3Ccircle cx='540' cy='468' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 560px;
}
.nf-u-dial--dark{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23EBCB86' stroke-opacity='.15' stroke-width='1'%3E%3Ccircle cx='390' cy='150' r='26'/%3E%3Ccircle cx='390' cy='150' r='50'/%3E%3Ccircle cx='150' cy='400' r='22'/%3E%3Ccircle cx='150' cy='400' r='44'/%3E%3Ccircle cx='470' cy='430' r='16'/%3E%3Ccircle cx='470' cy='430' r='32'/%3E%3Ccircle cx='70' cy='110' r='14'/%3E%3C/g%3E%3Cg fill='none' stroke='%23EBCB86' stroke-opacity='.07' stroke-width='1'%3E%3Ccircle cx='390' cy='150' r='78'/%3E%3Ccircle cx='390' cy='150' r='110'/%3E%3Ccircle cx='390' cy='150' r='144'/%3E%3Ccircle cx='150' cy='400' r='70'/%3E%3Ccircle cx='150' cy='400' r='100'/%3E%3Ccircle cx='470' cy='430' r='52'/%3E%3Ccircle cx='70' cy='110' r='28'/%3E%3C/g%3E%3Cg fill='%23EBCB86' fill-opacity='.40'%3E%3Ccircle cx='390' cy='150' r='2'/%3E%3Ccircle cx='150' cy='400' r='1.8'/%3E%3Ccircle cx='470' cy='430' r='1.3'/%3E%3Ccircle cx='70' cy='110' r='1.1'/%3E%3C/g%3E%3Cg fill='%23EBCB86' fill-opacity='.28'%3E%3Ccircle cx='250' cy='62' r='.9'/%3E%3Ccircle cx='538' cy='244' r='.8'/%3E%3Ccircle cx='296' cy='302' r='1'/%3E%3Ccircle cx='58' cy='250' r='.9'/%3E%3Ccircle cx='520' cy='64' r='1'/%3E%3Ccircle cx='204' cy='182' r='.8'/%3E%3Ccircle cx='338' cy='518' r='.9'/%3E%3Ccircle cx='108' cy='538' r='.8'/%3E%3Ccircle cx='252' cy='468' r='1'/%3E%3Ccircle cx='432' cy='300' r='.9'/%3E%3Ccircle cx='30' cy='320' r='.8'/%3E%3Ccircle cx='540' cy='468' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 560px;
}

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

/* 칩 — 모서리를 깎지 않은 납작한 라벨. 계기판의 상태 표시등에 가깝다. */
.nf-chip{
  display:inline-flex;align-items:center;
  padding:.42em 1em .46em;
  font-family:var(--nf-font-data);
  font-size:var(--nf-fs-cap);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--nf-amber);
  border:1px solid rgba(235,203,134,.38);
  border-radius:var(--nf-r);
  background:rgba(235,203,134,.08);
}
/* 밝은 바닥에서는 같은 금색이 흐려진다. 글자만 두 단 내린다. */
.nf-chip--onLight{
  color:var(--nf-amber-d);
  border-color:rgba(124,99,48,.34);
  background:rgba(124,99,48,.07);
}

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

/* 미확정 정보 표시 — 확인되면 이 마크만 지우면 된다.
   이 페이지는 확보된 사실이 넷뿐이라 쓰이는 자리가 많다. */
.nf-tbd{
  font-family:var(--nf-font-data);
  font-size:.85em;
  padding:.1em .5em;
  color:#7A5410;
  background:rgba(235,203,134,.34);
  border-bottom:1px solid var(--nf-amber-2);
}
.nf-hero .nf-tbd,
.nf-cta .nf-tbd{color:#F2DCA8;background:rgba(235,203,134,.14)}


/* ============================================================
   HERO
   ============================================================ */
.nf-hero{
  position:relative;
  isolation:isolate;
  padding:clamp(46px,5.6vw,88px) 0 0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(124,99,48,.24) 0%, transparent 62%),
    linear-gradient(180deg, var(--nf-void-2) 0%, var(--nf-void) 100%);
  color:var(--nf-paper);
  overflow:hidden;
}
.nf-hero__dial{position:absolute;inset:0;z-index:-1}
.nf-hero__inner{position:relative;text-align:center}

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

/* 키 아트 — 히어로를 닫는 자리. 원본이 1600x574 라 그 이상 늘리지 않는다.
   이미지 안에 이미 "뉴포머 탐험대" 글자가 박혀 있어서, 위쪽 제목과 겹쳐
   읽힌다. 그래도 자르지 않은 이유는 그 글자가 왼쪽 끝에 있어 잘라내면
   구도의 중심(정거장)이 오른쪽으로 쏠리기 때문이다. */
.nf-hero__art{
  margin-top:clamp(30px,3.6vw,52px);
  width:min(100%,1600px);
  margin-inline:auto;
  position:relative;
}
.nf-hero__art img{width:100%;height:auto}
/* 아래쪽을 바닥색으로 녹여 다음 구간과 이어 붙인다 —
   이미지가 칼로 자른 듯 끝나면 액자처럼 보인다. */
.nf-hero__art::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;
  height:22%;
  background:linear-gradient(180deg,transparent,var(--nf-void));
  pointer-events:none;
}


/* ============================================================
   OVERVIEW — 공식 소개문과 조종실 배너
   히어로와 영상 사이에 들어가는 구간이다. 양옆이 모두 --nf-void 라
   여기도 같은 바닥을 쓴다 — 색을 바꾸면 히어로가 두 번 끝난 것처럼 보인다.
   대신 왼쪽 위에서 옅은 금빛이 번지게 해서 구간이 새로 시작하는 것만 알린다.

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

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

.nf-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(--nf-paper);
}
.nf-brief__text{
  margin:1.05em 0 0;
  max-width:34em;
  font-size:var(--nf-fs-body);
  line-height:1.85;
  color:#CFC6B6;
}


/* ============================================================
   VIDEO — 미션 기록 영상
   바닥은 히어로와 같은 암흑이다. 히어로 바로 뒤라 색을 바꾸면 두 구간
   사이에 없던 경계가 생긴다 — 여기서는 영상 자체가 경계 역할을 한다.
   ============================================================ */
.nf-video{padding:clamp(56px,6.4vw,96px) 0;background:var(--nf-void)}
.nf-video .nf-head__title{color:var(--nf-paper)}
.nf-video .nf-head__lead{color:#CFC6B6}
.nf-video .nf-eyebrow{color:var(--nf-amber)}

.nf-video__frame{
  width:min(100%,1000px);
  margin-inline:auto;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(235,203,134,.22);
  border-radius:var(--nf-r);
  background:#000;
}
/* 칸과 영상이 같은 16:9 라 contain 이어도 남는 자리가 없다.
   cover 를 쓰지 않는 이유는 재생 막대다 — 칸을 넘겨 잘라내면 컨트롤이
   프레임 밖으로 밀려난다. 다른 페이지(.ld-media video)와 같은 처리다. */
.nf-video__frame video{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
  background:#000;
}
.nf-video__note{
  margin-top:1rem;
  text-align:center;
  font-family:var(--nf-font-data);
  font-size:var(--nf-fs-cap);
  letter-spacing:.04em;
  color:var(--nf-amber-2);
}


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

.nf-spec__title{
  margin:.5em 0 0;
  font-size:var(--nf-fs-sect);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.22;
}
.nf-spec__title span{
  display:block;
  margin-top:.35em;
  font-family:var(--nf-font-data);
  font-size:.42em;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--nf-amber);
}
.nf-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);
}
.nf-spec__row{
  display:grid;
  grid-template-columns:7.5em minmax(0,1fr);
  gap:1em;
  padding:.72em 0;
  border-bottom:1px solid rgba(235,203,134,.14);
}
.nf-spec__key{
  font-family:var(--nf-font-data);
  font-size:var(--nf-fs-cap);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--nf-amber);
}
.nf-spec__val{font-weight:600;color:var(--nf-paper)}


/* ============================================================
   STORY — 프롤로그와 미션
   공식 소개 페이지의 Prologue · Mission 두 토막이 들어오는 구간이다.

   바닥을 영상 구간과 같은 --nf-void 로 둔다. 두 구간 사이에 경계선을 긋지
   않는 이유는 영상 구간 주석과 같다 — 영상 자체가 이미 경계 역할을 한다.
   여기서는 위쪽에 옅은 금빛 번짐 하나만 얹어 구간이 새로 시작하는 것을
   알린다. 선 대신 빛으로 나누는 편이 우주 배경에 맞는다.
   ============================================================ */
.nf-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(124,99,48,.22) 0%, transparent 62%),
    var(--nf-void);
  color:var(--nf-paper);
  overflow:hidden;
}
.nf-story__dial{position:absolute;inset:0;z-index:-1}
.nf-story .nf-head__title{color:var(--nf-paper)}
.nf-story .nf-head__lead{color:#CFC6B6}

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

/* 프롤로그 장면 — 어두운 우주 사진이라 테두리를 두르지 않으면 어디까지가
   그림이고 어디부터가 구간 바닥인지 경계가 사라진다. 위쪽 조종실 그림
   (.nf-brief__art)과 같은 문법으로 얇은 금색 선만 두른다. */
.nf-story__shot{
  position:relative;
  margin:0 auto;
  width:min(100%,1000px);
  border:1px solid rgba(235,203,134,.18);
  border-radius:var(--nf-r);
  overflow:hidden;
}
.nf-story__shot::after{
  content:'';
  position:absolute;top:0;left:0;
  width:18px;height:18px;
  border:1px solid var(--nf-amber-2);
  border-right:0;border-bottom:0;
  pointer-events:none;
}
.nf-story__shot img{width:100%;height:auto}

/* 그림 아래로 오는 프롤로그 본문. 가운데 정렬과 최대 폭은 .nf-head__lead 가
   이미 갖고 있으므로 여기서는 위 여백과 문단 사이 간격만 정한다.
   두 문단은 원문에서 빈 줄 하나로 갈린 자리라 문단 간격도 좁게 둔다. */
.nf-story__text{
  margin-top:clamp(22px,2.6vw,34px);
  text-align:center;
}
.nf-story__text .nf-head__lead{margin-inline:auto}
.nf-story__text .nf-head__lead + .nf-head__lead{margin-top:.9em}

/* 미션 표제 아래 한 줄. 표제(.nf-story__midTitle)와 장치 칸 사이에 끼므로
   본문 색보다 한 단 낮춰, 목록의 안내문으로 읽히게 한다. */
.nf-story__midLead{
  margin:.85em auto 0;
  max-width:38em;
  font-size:var(--nf-fs-cap);
  line-height:1.8;
  color:#A79E90;
}

/* 미션 머리 — 프롤로그와 장치 셋 사이에 놓이는 작은 표제.
   .nf-head 를 다시 쓰지 않는다. 저쪽은 아래 여백이 --nf-sp-4(2.75rem)라
   구간 머리에는 맞지만, 여기서는 표제와 장치 칸이 한 덩어리로 붙어 보여야
   한다 — 사이가 벌어지면 "손상된 주요 장치 복구"가 어느 목록의 제목인지
   모르게 된다. 위쪽 여백만 크게, 아래쪽은 좁게 둔 이유다. */
.nf-story__mid{
  margin-top:clamp(44px,5vw,72px);
  text-align:center;
}
.nf-story__midTitle{
  margin:.55em 0 0;
  font-size:clamp(1.25rem,2.1vw,1.7rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--nf-paper);
}
.nf-story__mid .nf-eyebrow::before{display:none}

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

/* 장치 칸 — 계기판의 상태 표시 칸이다. 왼쪽에 금색 세로선을 세워
   "판독 중인 항목"처럼 보이게 한다. 밝은 구간의 .nf-step 이 위쪽에 선을
   긋는 것과 짝을 이루되, 어두운 바닥에서는 가로선보다 세로선이 목록으로
   읽힌다 — 번호가 왼쪽에 있기 때문이다.

   화면이 얹히면서 칸의 안쪽 여백은 글 칸(.nf-device__body)으로 내려갔다.
   그림은 카드 폭을 꽉 채워야 하므로 바깥 칸에 padding 을 두면 안 된다. */
.nf-device{
  margin:0;
  background:var(--nf-void-3);
  border:1px solid rgba(235,203,134,.16);
  border-left:2px solid var(--nf-amber-2);
  border-radius:var(--nf-r);
  overflow:hidden;
}
/* 원본 화면비가 셋 다 달라(1.32 · 1.59 · 1.70) 16:10 으로 잘라 맞춘다.
   cover 로 자르는 쪽을 골랐다 — contain 이면 좌우에 검은 띠가 남아,
   가뜩이나 배경이 검은 이 구간에서 카드가 반쯤 빈 것처럼 보인다.
   세 장 모두 볼거리가 가운데에 있어 좌우가 잘려도 잃는 것이 없다. */
/* height:auto 가 반드시 먼저다. <img> 의 height 속성은 height:760px 같은
   표현 힌트로 들어오는데, 그 값이 살아 있으면 두 변이 모두 정해진 셈이라
   aspect-ratio 가 무시된다 — 세 카드의 높이가 원본 비율대로 제각각이 되고
   글 시작 줄이 어긋난다. width/height 속성 자체는 지우지 않는다:
   그림이 내려오기 전에 자리를 잡아 주는 값이라 지우면 화면이 덜컹거린다. */
.nf-device__shot{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#000;
  border-bottom:1px solid rgba(235,203,134,.16);
}
.nf-device__body{
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px) clamp(20px,2.4vw,28px);
}
.nf-device__num{
  font-family:var(--nf-font-data);
  font-size:var(--nf-fs-cap);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--nf-amber-2);
}
.nf-device__name{
  margin:.5em 0 0;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--nf-paper);
}
.nf-device__role{
  margin:.4em 0 0;
  font-size:var(--nf-fs-cap);
  line-height:1.7;
  color:#A79E90;
}

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


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

/* 교육 목표 — 세 칸 아래에 붙는 마무리 판.
   카드로 만들지 않고 판 하나에 얹는다. 바로 위가 카드 세 장이라 여기까지
   카드면 네 장이 되고, 그러면 목표가 콘텐츠 성격의 네 번째 항목처럼
   읽힌다. 배경을 한 단 눌러 "위 세 칸을 받는 자리"로 낮춰 둔다. */
.nf-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(--nf-paper-2);
  border:1px solid #DCD4C4;
  border-radius:var(--nf-r);
}
.nf-goal__title{
  margin:.5em 0 0;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  font-weight:800;
  letter-spacing:-.02em;
}
/* 항목 앞 표식은 눈금 하나다 — 이 페이지의 다른 목록(제원표 · 장치 칸)이
   모두 금색 짧은 선으로 시작하므로 여기서만 점을 쓰면 결이 어긋난다.
   list-style 을 지우고 ::before 로 직접 그린다. */
.nf-goal__list{
  margin:1.1em 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.7em;
}
.nf-goal__list li{
  position:relative;
  padding-left:1.6em;
  font-size:var(--nf-fs-body);
  line-height:1.7;
}
.nf-goal__list li::before{
  content:'';
  position:absolute;
  left:0;top:.78em;
  width:14px;height:2px;
  background:var(--nf-amber-2);
}
.nf-goal__note{
  margin:1.3em 0 0;
  padding-top:1.1em;
  border-top:1px solid #DCD4C4;
  font-size:var(--nf-fs-cap);
  color:var(--nf-gray);
}


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


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


/* ============================================================
   반응형
   ============================================================ */
@media (max-width:960px){
  .nf-spec__rows{grid-template-columns:1fr}
  /* 소개 구간은 두 칸을 버티기 어려운 폭부터 위아래로 쌓는다. 글이 먼저
     오도록 순서를 뒤집는다 — 좁은 화면에서 조종실 사진이 위에 오면
     한 화면이 통째로 그림이라 소개문이 접힌 아래로 사라진다. */
  .nf-brief__inner{grid-template-columns:1fr}
  .nf-brief__art{order:2}
  .nf-brief__body{order:1}
  .nf-brief__text{max-width:none}
}
@media (max-width:780px){
  .nf-what__steps{grid-template-columns:1fr}
  .nf-more__grid{grid-template-columns:1fr}
  /* 장치 셋은 좁아지면 한 줄로 내린다. 셋을 억지로 옆에 두면 "지구 및 다른
     우주선과의 교신 장치" 같은 긴 설명이 네 줄로 접혀 칸 높이가 제각각이 된다. */
  .nf-story__grid{grid-template-columns:1fr}
}