@charset "UTF-8";

/* ============================================================
   스페이스 콜로니 — 강남 미래교육센터 XR 콘텐츠 소개 페이지 전용 스타일
   공통 style.css 와 충돌하지 않도록 모든 클래스에 sc- 접두사를 붙인다.
   헤더·푸터는 사이트 공통(.site-header/.site-footer)을 그대로 쓴다.

   게임이 아니라 XR 체험형 콘텐츠라 파일 이름을 game- 이 아니라 work- 로
   둔다 — work-newformer 와 같은 갈래다.

   조형 언어 — 앞선 다섯 페이지와 겹치지 않게 잡았다.
     렌타히어로 Z  잉크 · 하프톤 코믹
     레전다이노    각진 홀로그램 (네이비 + 시안)
     액션캣        스티커
     캐치블록      장난감 블록
     뉴포머        전파 신호 (금색 동심원)
     스페이스 콜로니 >> 구조 도면. 가는 모눈 위에 바큇살 달린 고리가 얹힌다.

   뉴포머와 가장 헷갈릴 자리라 일부러 두 곳을 갈랐다.
   저쪽은 곡선(동심원)뿐이고 이쪽은 모눈이 먼저 깔린다 — 신호가 아니라
   설계도다. 저쪽은 금색이고 이쪽은 거주구의 올리브 라임이다.
   키 아트의 고리 안쪽에 들어찬 연둣빛 경작 구획에서 가져왔다.

   [자료 상태] 한때 확보된 사실이 넷뿐이라(발주처 · MR 시뮬레이션 · 수탁
   개발 · 키 아트 한 장) 뉴포머 페이지에 있는 구간들을 아예 세우지 않았다.
   그 뒤 공식 소개 페이지에서 본문과 그림을 확보해 영상 · 프롤로그 · 미션 ·
   교육 목표를 차례로 세웠고, 지금은 체험 화면 넉 장(.sc-shots)까지 들어와
   있다. 그림은 모두 열넉 장이다 — 체험 화면 4, 미션 브리핑 3, 미션 5,
   미스터M 2.

   남은 빈자리는 둘뿐이다. 사용 기기 이름과 현장 운영 사진. 둘 다 원문에도
   없다. 빈 구간을 만들어 두고 "확인 필요"로 채우면 페이지가 아니라 미완성
   양식으로 읽히므로, .sc-tbd 는 문장 안의 한 조각으로만 쓴다. 구간 전체를
   대신하지 않는다.
   ============================================================ */

.sc-page{
  /* --- color --- 키 아트에서 뽑았다.
     바닥은 뉴포머(검붉은 갈색)보다 한 눈금 차게 잡았다. 같은 성운을 배경으로
     쓰는 두 페이지라, 바닥까지 같으면 서로 구분되지 않는다. */
  --sc-void:    #06070B;   /* 가장 깊은 바닥 */
  --sc-void-2:  #0C0E14;
  --sc-void-3:  #141821;   /* 어두운 구간 위에 얹는 판 */
  --sc-lime:    #C6D64F;   /* 거주구 경작 구획의 연둣빛 */
  --sc-lime-2:  #9EAC3C;
  --sc-lime-d:  #5F6A1E;   /* 밝은 바닥에 라임을 쓸 때 */
  --sc-blue:    #4C82D8;   /* 콜로니 선체의 코발트 */
  --sc-steel:   #9AA2AD;   /* 구조물 금속 */
  --sc-paper:   #F5F7F2;   /* 밝은 구간 바닥 */
  --sc-paper-2: #E7EBE1;
  --sc-ink:     #12151A;
  --sc-gray:    #616872;

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

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

  /* --- structure --- */
  --sc-r:    3px;      /* 도면이라 모서리를 거의 깎지 않는다 */
  --sc-wrap: 1280px;
  /* 그림이 놓이는 안쪽 기둥. 체험 화면 · 브리핑 · 미션 · 인용 네 무리가
     모두 이 폭 안에 선다 — 한때 1000px · 1280px · 56em · 52em 로 넷이
     제각각이라, 페이지를 내려가는 동안 왼쪽 끝이 네 번 움직였다.
     --sc-wrap(1280) 보다 좁게 잡은 이유는 그림이 글보다 앞으로 튀어나오지
     않게 하기 위해서다. 본문 제목은 여전히 --sc-wrap 을 쓴다. */
  --sc-col:  1000px;
  --sc-sp-4: 2.75rem;

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

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

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

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


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

/* 바닥 무늬 — 구조 도면.
   모눈이 먼저 깔리고, 그 위에 바큇살 달린 고리 둘이 앉는다.
   키 아트의 주인공이 회전 거주구(바퀴 모양 콜로니)라 그 단면을 그린 셈이다.

   [왜 모눈을 먼저 까는가]
   고리만 두면 뉴포머의 동심원과 구분되지 않는다. 모눈이 깔리면 같은 고리도
   "신호가 퍼지는 그림"이 아니라 "도면 위에 놓인 부품"으로 읽힌다.
   무늬의 성격을 가르는 것은 고리가 아니라 그 아래 깔린 격자다.

   [왜 바큇살을 넣는가]
   빈 고리는 과녁이나 파문으로 읽힌다. 살이 들어가야 회전체가 된다 —
   이 콘텐츠의 무대인 원심력 거주구가 바로 그 모양이다.

   [진하기]
   모눈은 .055 로 거의 안 보이게 둔다. 이 정도를 넘기면 본문 뒤에서
   글자를 갉아먹는다. 고리는 .16 으로 모눈보다 세 배 진하게 두어,
   무늬 안에서도 고리가 주인공이 되게 했다.

   [이어 붙는 자리]
   고리를 모두 타일 안에 온전히 넣었다. 원이 가장자리를 넘으면 그 자리에서
   곡선이 직선으로 잘려 이음매가 눈에 보인다. 모눈 간격(60)과 타일 크기(480)가
   나누어떨어져 격자도 이음매 없이 이어진다.

   진하기는 SVG 안 <g> 한 곳에서만 정한다 — 구간마다 opacity 를 덧걸면
   무늬가 왜 다르게 보이는지 두 곳을 봐야 알게 된다.
   밝은 구간용(기본)과 어두운 구간용(--dark) 두 벌. */
.sc-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='none' stroke='%235F6A1E' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M0 60h480M0 120h480M0 180h480M0 240h480M0 300h480M0 360h480M0 420h480'/%3E%3Cpath d='M60 0v480M120 0v480M180 0v480M240 0v480M300 0v480M360 0v480M420 0v480'/%3E%3C/g%3E%3Cg fill='none' stroke='%235F6A1E' stroke-opacity='.15' stroke-width='1'%3E%3Ccircle cx='340' cy='140' r='58'/%3E%3Ccircle cx='340' cy='140' r='24'/%3E%3Cpath d='M340 82v116M282 140h116M299 99l82 82M381 99l-82 82'/%3E%3Ccircle cx='120' cy='350' r='38'/%3E%3Ccircle cx='120' cy='350' r='15'/%3E%3Cpath d='M120 312v76M82 350h76M93 323l54 54M147 323l-54 54'/%3E%3C/g%3E%3Cg fill='%235F6A1E' fill-opacity='.26'%3E%3Ccircle cx='340' cy='140' r='2'/%3E%3Ccircle cx='120' cy='350' r='1.6'/%3E%3Ccircle cx='440' cy='300' r='1'/%3E%3Ccircle cx='40' cy='90' r='1'/%3E%3Ccircle cx='250' cy='430' r='.9'/%3E%3Ccircle cx='210' cy='230' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:480px 480px;
}
.sc-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='none' stroke='%23C6D64F' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M0 60h480M0 120h480M0 180h480M0 240h480M0 300h480M0 360h480M0 420h480'/%3E%3Cpath d='M60 0v480M120 0v480M180 0v480M240 0v480M300 0v480M360 0v480M420 0v480'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C6D64F' stroke-opacity='.16' stroke-width='1'%3E%3Ccircle cx='340' cy='140' r='58'/%3E%3Ccircle cx='340' cy='140' r='24'/%3E%3Cpath d='M340 82v116M282 140h116M299 99l82 82M381 99l-82 82'/%3E%3Ccircle cx='120' cy='350' r='38'/%3E%3Ccircle cx='120' cy='350' r='15'/%3E%3Cpath d='M120 312v76M82 350h76M93 323l54 54M147 323l-54 54'/%3E%3C/g%3E%3Cg fill='%23C6D64F' fill-opacity='.34'%3E%3Ccircle cx='340' cy='140' r='2'/%3E%3Ccircle cx='120' cy='350' r='1.6'/%3E%3Ccircle cx='440' cy='300' r='1'/%3E%3Ccircle cx='40' cy='90' r='1'/%3E%3Ccircle cx='250' cy='430' r='.9'/%3E%3Ccircle cx='210' cy='230' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:480px 480px;
}

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

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

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

/* 미확정 정보 표시 — 확인되면 이 마크만 지우면 된다. */
.sc-tbd{
  font-family:var(--sc-font-data);
  font-size:.85em;
  padding:.1em .5em;
  color:#4E5717;
  background:rgba(198,214,79,.34);
  border-bottom:1px solid var(--sc-lime-2);
}
.sc-hero .sc-tbd,
.sc-spec .sc-tbd,
.sc-cta .sc-tbd{color:#DCE79B;background:rgba(198,214,79,.14)}


/* ============================================================
   HERO
   ============================================================ */
.sc-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(--sc-void-2) 0%, var(--sc-void) 100%);
  color:var(--sc-paper);
  overflow:hidden;
}
.sc-hero__grid{position:absolute;inset:0;z-index:-1}
.sc-hero__inner{position:relative;text-align:center}

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

/* 키 아트 — 히어로를 닫는 자리. 원본이 1572x622 이라 그 이상 늘리지 않는다.
   그림 안에 작품 이름이 없는 판으로 바꿨다. 위 h1 이 이미 이름을 말하고
   있어서, 그림에까지 같은 글자가 있으면 같은 말이 두 번 읽힌다. */
.sc-hero__art{
  margin-top:clamp(30px,3.6vw,52px);
  width:min(100%,1572px);
  margin-inline:auto;
  position:relative;
  /* 위에 얹는 로고가 그림 폭을 기준으로 커지고 줄게 하는 갈고리다.
     vw 를 쓰면 그림이 1572px 에서 멈춘 뒤에도 글자만 계속 커진다. */
  container-type:inline-size;
}
.sc-hero__art img{width:100%;height:auto;display:block}

/* 그림 위에 얹는 작품 이름 --------------------------------------------
   자리는 원화의 로고가 있던 곳을 그대로 따랐다 — 왼쪽 행성과 오른쪽
   거주구 사이의 빈 우주다(그림에서 x 130~700, y 155~440 이 비어 있다).
   색은 원화 로고에서 뽑았다: 한글 획 #FDC33C, 영문과 선 #E8B439.
   단위가 cqw 인 이유는 위 container-type 주석에 있다. */
.sc-hero__logo{
  position:absolute;
  /* 자리는 세 물체 사이의 빈 우주다. 이 높이(위에서 15%)에서 재면
     행성 오른끝 8.8%, 거주구 왼끝 52%, 위쪽 달은 y 12% 에서 끝난다.
     높이 올릴수록 행성 단면이 좁아져 오히려 폭이 넉넉해진다.
     폭을 못 박지 않고 글자 폭에 맞춰 줄어들게 둔다 — 못 박으면 두 줄로 접힌다. */
  left:9.8%; top:15%;
  margin:0;
  text-align:center;
  pointer-events:none;   /* 그림 위 장식이라 마우스를 가로채지 않는다 */
  color:#FDC33C;
}
.sc-hero__logo-ko{
  display:block;
  white-space:nowrap;    /* 원화처럼 한 줄로 — 접히면 로고가 아니게 된다 */
  /* 5.6cqw 면 글자 폭이 그림의 약 42% 다. 왼쪽 9.8% 에서 시작하니
     오른끝이 약 51.5% — 거주구가 시작되는 52% 바로 앞에서 멈춘다. */
  font-size:5.6vw;       /* 컨테이너 쿼리를 모르는 브라우저용 */
  font-size:5.6cqw;
  /* 원화의 로고는 획이 가늘고 고르다. 굵게 세우면 같은 글자라도
     다른 물건이 된다. Pretendard Variable 이라 300 이 그대로 나온다. */
  font-weight:300;
  line-height:1.1;
  letter-spacing:.02em;
  /* 네온 글로우 — 원화처럼 노란 심지에 푸른 번짐을 겹친다. */
  text-shadow:
    0 0 .10em rgba(253,195,60,.55),
    0 0 .45em rgba(120,150,255,.35),
    0 0 1.10em rgba(60,90,200,.30);
}
.sc-hero__logo-en{
  display:flex;
  align-items:center;
  gap:.9em;
  margin-top:.85em;
  font-family:var(--sc-font-data);
  font-size:1.6vw;
  font-size:1.6cqw;
  letter-spacing:.42em;
  text-indent:.42em;      /* 자간이 뒤에도 붙어 생기는 쏠림을 되돌린다 */
  text-transform:uppercase;
  white-space:nowrap;
  color:#E8B439;
}
/* 영문 양옆의 가로선. 원화와 같은 자리다. */
.sc-hero__logo-en::before,
.sc-hero__logo-en::after{
  content:'';
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,#E8B439);
}
.sc-hero__logo-en::after{
  background:linear-gradient(90deg,#E8B439,transparent);
}
/* 아래쪽을 바닥색으로 녹여 다음 구간과 이어 붙인다 —
   이미지가 칼로 자른 듯 끝나면 액자처럼 보인다. */
.sc-hero__art::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;
  height:22%;
  background:linear-gradient(180deg,transparent,var(--sc-void));
  pointer-events:none;
}


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

/* 자료 안내 — 구간을 닫는 한 줄.
   한때 제목과 목록을 갖춘 판(회색 종이 + 테두리)이었다. 목록이 한 줄로
   줄면서 판을 걷었다 — 바로 위 '교육 목표'(.sc-goal)와 크기가 비슷해지자,
   확보된 사실과 아직 없는 자료가 같은 무게로 보였다. 이 줄의 일은 밝혀
   두는 것이지 주장하는 것이 아니라, 판 대신 위쪽 가는 선 하나만 남긴다.

   .sc-tbd 와 성격이 같아 색도 그쪽을 따른다 — 이 페이지에서 "아직 없다"는
   말은 어디서든 같은 회색으로 보인다. */
.sc-note{
  margin:clamp(22px,2.6vw,34px) 0 0;
  padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid var(--sc-paper-2);
  font-size:var(--sc-fs-cap);
  line-height:1.8;
  color:var(--sc-gray);
}
/* 앞머리 표식. 대문자 데이터 글꼴이라 본문과 성격이 갈리고, 그 덕에
   한 줄 안에서도 "이건 안내다"가 먼저 읽힌다. */
.sc-note__label{
  margin-right:.7em;
  font-family:var(--sc-font-data);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sc-lime-d);
}
/* .sc-note__list 는 여기 있었다. 목록이 한 줄로 줄고 그 한 줄마저 문장이
   되면서 쓰는 곳이 없어져 걷어냈다 — 같은 모양의 눈금 목록이 필요하면
   바로 위 .sc-goal__list 를 쓴다. */


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

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


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


/* ============================================================
   CTA
   ============================================================ */
.sc-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(--sc-void);
  color:var(--sc-paper);
  overflow:hidden;
}
.sc-cta__grid{position:absolute;inset:0;z-index:-1}
.sc-cta__title{
  font-size:var(--sc-fs-sect);
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.02em;
}
.sc-cta__desc{margin:1em auto 0;max-width:40em;color:#C4CAD3}
.sc-cta__btns{
  margin-top:clamp(24px,2.8vw,38px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;
}
.sc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85em 1.9em .9em;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--sc-void);
  background:var(--sc-lime);
  border:1px solid var(--sc-lime);
  border-radius:var(--sc-r);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.sc-btn:hover{background:#D8E477;border-color:#D8E477}
.sc-btn--ghost{
  color:var(--sc-lime);
  background:transparent;
  border-color:rgba(198,214,79,.45);
}
.sc-btn--ghost:hover{background:rgba(198,214,79,.12);color:var(--sc-lime);border-color:var(--sc-lime)}


/* ============================================================
   VIDEO — 체험 기록 영상
   ============================================================
   히어로와 STORY 사이에 끼는 어두운 구간이다. 셋이 똑같이 어두우면 구간
   경계가 사라지므로, 여기만 한 단계 밝은 바닥(--sc-void-2)을 쓴다.
   깊이가 다른 검정이 겹치는 것이 이 페이지의 어두운 구간 문법이다. */
/* ============================================================
   SHOTS — 체험 화면 넉 장
   ============================================================
   히어로와 영상 사이에 끼는 구간이다. 바닥을 --sc-void 로 두는 이유는
   위쪽 키 아트에 있다 — .sc-hero__art::after 가 그림 아래 22% 를
   --sc-void 로 녹이며 끝난다. 여기가 --sc-void-2 면 그 녹은 끝과 이
   구간 사이에 한 눈금 밝은 띠가 생긴다. */
.sc-shots{
  padding:clamp(56px,6.4vw,96px) 0;
  background:var(--sc-void);
}
.sc-shots .sc-head__title{color:var(--sc-paper)}
.sc-shots .sc-head__lead{color:rgba(245,247,242,.76)}

/* 넉 장을 2×2 로 세운다. 한 줄에 넷을 늘어놓으면 한 장이 300px 안쪽으로
   줄어드는데, 셋째 장의 겹쳐진 홀로그램과 넷째 장의 미션 안내창은 그
   크기에서 무엇인지 읽히지 않는다. 이 구간의 일은 크게 보여주는 것이다.

   그림 칸(.sc-shot__frame)의 생김새는 여기서 정하지 않는다 —
   이 페이지의 그림 칸 넷은 아래 "그림 칸" 항목 한 곳에서 함께 정한다. */
.sc-shots__grid{
  margin:clamp(24px,3vw,40px) auto 0;
  padding:0;
  width:min(100%,var(--sc-col));
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);
}
.sc-shot{display:grid;gap:.9em;align-content:start}
.sc-shot__cap{
  margin:0;
  font-size:var(--sc-fs-body);
  line-height:1.7;
  color:rgba(245,247,242,.82);
}

.sc-video{
  padding:clamp(56px,6.4vw,96px) 0;
  background:var(--sc-void-2);
}
.sc-video .sc-head__title{color:var(--sc-paper)}
.sc-video .sc-head__lead{color:rgba(245,247,242,.76)}
.sc-video .sc-eyebrow{color:var(--sc-lime)}

/* 1000px 로 묶는 이유 — 원본이 720p 라 그 위로 늘리면 뭉갠 화면을 크게
   보여주는 꼴이 된다. 화면비를 미리 잡아 두면 영상이 로드되기 전에도 칸이
   자리를 지켜, 아래 글이 밀려 내려왔다 올라가는 일이 없다.

   16:9 가 아니라 1076:720 인 이유 — 유튜브 원본은 3:2 로 캡처한 화면을
   16:9 판에 넣어 좌우에 102px 씩 검은 띠가 박혀 있었다. 그대로 두면
   칸 양옆이 늘 검게 비고, 없는 그림에 비트레이트까지 나눠 준다.
   인코딩할 때 띠를 잘라 내고 칸도 잘라 낸 비율로 맞춘다. */
.sc-video__frame{
  width:min(100%,1000px);
  margin-inline:auto;
  margin-top:clamp(24px,3vw,40px);
  aspect-ratio:1076/720;
  overflow:hidden;
  border:1px solid rgba(198,214,79,.22);
  border-radius:var(--sc-r);
  background:#000;
}
.sc-video__frame video{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
  background:#000;
}
.sc-video__note{
  margin-top:1rem;
  text-align:center;
  font-family:var(--sc-font-data);
  font-size:var(--sc-fs-cap);
  letter-spacing:.04em;
  color:var(--sc-lime-2);
}


/* ============================================================
   STORY — 프롤로그 · 미스터M · 미션 다섯
   ============================================================
   히어로의 암흑을 그대로 이어받는 어두운 구간이다. 우주 이야기를 하는 두
   구간을 색으로도 한 덩어리로 묶는다. 아래 WHAT 구간이 밝은 판이라,
   여기서 한 번 어두워졌다가 거기서 밝아지는 것이 구간의 경계가 된다. */
.sc-story{
  position:relative;
  isolation:isolate;
  padding:clamp(64px,7vw,110px) 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(76,130,216,.16) 0%, transparent 62%),
    var(--sc-void);
  color:var(--sc-paper);
  overflow:hidden;
}
.sc-story__grid{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sc-story .sc-head__title{color:var(--sc-paper)}
.sc-story .sc-head__lead{color:rgba(245,247,242,.76)}
.sc-story .sc-head__lead strong{color:var(--sc-lime)}

/* ------------------------------------------------------------
   그림 칸 — 이 페이지의 그림 열넉 장이 놓이는 네 자리
   ------------------------------------------------------------
   체험 화면(.sc-shot__frame) · 브리핑(.sc-beat__shot) ·
   미션(.sc-mission__shot) · 인용(.sc-quote__shot) 넷이다.
   한때 앞의 셋이 따로 적혀 있었고 바닥색도 서로 달라(--sc-void 와
   --sc-void-3) 같은 성격의 칸이 자리마다 다르게 보였다. 생김새는 여기
   한 곳에서만 정한다 — 자리마다 흩어 두면 한 곳만 고쳐져 어긋난다.

   [왜 contain 인가]
   모두 게임 화면 캡처라 가장자리에 안내 글자가 있다('모래 폭풍 접근',
   'TIME 03:19:74', 'MISSION — 노바리안 궤도로 이동' 같은 것). 그 글자가
   곧 무슨 장면인지를 말해 주는 정보라, 칸을 채우자고 잘라 낼 수 없다.

   [바닥색]
   구간 바닥보다 한 단계 밝은 --sc-void-3 로 둔다. 테두리와 함께 그림이
   놓인 판이라는 것이 드러나, contain 이 남긴 자리가 '띠'가 아니라
   '여백'으로 읽힌다. 넷 다 같은 색이라 페이지를 내려가는 동안 그림 칸의
   성격이 바뀌지 않는다. */
.sc-shot__frame,
.sc-beat__shot,
.sc-quote__shot,
.sc-mission__shot{
  display:block;
  overflow:hidden;
  background:var(--sc-void-3);
  border:1px solid rgba(198,214,79,.14);
  border-radius:var(--sc-r);
}
.sc-shot__frame img,
.sc-beat__shot img,
.sc-quote__shot img,
.sc-mission__shot img{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
}

/* 비율만 자리마다 다르다. 넷 다 4:3 이던 것을, 그 자리에 실제로 걸리는
   그림들의 화면비를 재어 다시 골랐다 — 검은 띠가 평균 12.6% 에서 7.5% 로
   줄었다. 그림을 갈아 끼울 때는 이 값도 함께 다시 본다.

     체험 화면  1.33 1.38 1.55 1.66  → 3:2  (1.50)
     브리핑     1.33 1.37 1.54       → 4:3  (1.33)
     미션       1.17 1.20 1.25 1.35 1.69 → 5:4 (1.25) — 넷이 1.17~1.35 다
     인용       1.64 1.87            → 16:9 (1.78)

   미션의 넷째 장(1.69)만 26% 로 남는다. 4:3 으로 넓히면 그 한 장은
   21% 로 줄지만 나머지 넷이 모두 나빠져 합이 커진다. 잘라서 맞추지 않는
   이유는 위 [왜 contain 인가] 와 같다 — 그 장은 오른쪽 위에 경고 표시가,
   가운데 왼쪽에 초록 테두리를 두른 가스통이 있어 어느 쪽도 버릴 수 없다. */
.sc-shot__frame  {aspect-ratio:3/2}
.sc-beat__shot   {aspect-ratio:4/3}
.sc-mission__shot{aspect-ratio:5/4}
.sc-quote__shot  {aspect-ratio:16/9}

/* 미션 브리핑 석 장 — 그림이 먼저, 글이 캡션으로 받친다. */
.sc-beats{
  margin:clamp(28px,3.4vw,46px) auto 0;
  padding:0;
  width:min(100%,var(--sc-col));
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);
}
.sc-beat{display:grid;gap:.9em;align-content:start}
.sc-beat__desc{
  margin:0;
  font-size:var(--sc-fs-body);
  line-height:1.7;
  color:rgba(245,247,242,.82);
}

/* 인용 — 미스터M 이 참가자에게 거는 말. 왼쪽 라임 선 하나로만 세운다.
   따옴표 그림이나 상자를 두르면 '꾸민 인용'이 되어, 콘텐츠 안에서 실제로
   들리는 목소리라는 성격이 옅어진다. */
/* 인용 — 미스터M 이 참가자에게 거는 말. 판 전체는 다른 그림 무리와 같은
   기둥(--sc-col)에 세워 라임 선이 위아래 격자의 왼쪽 끝과 맞물리게 한다.
   글줄만 52em 으로 따로 묶는다 — 기둥 폭을 그대로 글에 주면 한 줄이
   너무 길어져 읽는 눈이 다음 줄 첫머리를 놓친다. */
.sc-quote{
  width:min(100%,var(--sc-col));
  margin:clamp(28px,3.4vw,46px) auto 0;
  padding-left:clamp(16px,2vw,26px);
  border-left:2px solid var(--sc-lime-2);
}
/* 인용 그림 — 말보다 먼저 얼굴을 보여준다. 480px 은 위 체험 화면 한 칸
   (기둥 1000px 을 둘로 나눈 값)과 거의 같은 폭이다. 기둥 폭을 그대로 주면
   이 그림만 900px 가까이 되어, 320px 인 브리핑 석 장과 나란히 놓였을 때
   같은 갈래의 그림으로 읽히지 않는다. */
.sc-quote__shot{
  max-width:min(100%,480px);
  margin-bottom:1.1em;
}
/* 글줄은 기둥이 아니라 읽기 폭에 맞춘다. 위 .sc-quote 가 1000px 로
   넓어졌으므로 여기서 다시 묶지 않으면 한 줄이 그만큼 길어진다. */
.sc-quote__who,
.sc-quote__text,
.sc-quote__after{max-width:52em}
.sc-quote__who{
  margin:0;
  font-family:var(--sc-font-data);
  font-size:var(--sc-fs-cap);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sc-lime);
}
.sc-quote__text{
  margin:.7em 0 0;
  font-size:var(--sc-fs-lead);
  line-height:1.75;
  color:var(--sc-paper);
}
.sc-quote__after{
  margin:1em 0 0;
  font-size:var(--sc-fs-body);
  line-height:1.75;
  color:rgba(245,247,242,.72);
}
.sc-quote__after strong{font-weight:600;color:var(--sc-lime)}
.sc-quote--close{margin-top:clamp(34px,4vw,56px)}

/* 이름과 그 뒤에 바로 붙는 조사 · 서술을 한 덩어리로 묶는다.
   한국어는 음절마다 줄을 바꿀 수 있어서, 그냥 두면 ‘스페이스 콜로니’ 는
   줄 끝에 남고 "였습니다." 넉 자만 다음 줄에 홀로 떨어진다. 이름이 문장에서
   가장 눈에 걸려야 하는 자리인데, 그 뒤가 끊기면 이름만 붕 뜬 것처럼 읽힌다.
   묶는 폭이 열 자 남짓이라 좁은 화면에서도 줄이 넘치지 않는다. */
.sc-keep{white-space:nowrap}

.sc-story__mid{
  margin-top:clamp(46px,5.4vw,80px);
  text-align:center;
}
.sc-story__midTitle{
  margin:.5em 0 0;
  font-size:var(--sc-fs-sect);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.24;
  color:var(--sc-paper);
}

/* 미션 다섯 — 목록이 아니라 차례다. 그래서 ol 이고, 번호를 크게 남긴다.
   가로 격자가 아니라 세로 줄로 세운 이유 — 다섯은 3열 격자에 넣으면 3+2 로
   갈려 마지막 줄이 비고, 무엇보다 순서가 왼쪽·오른쪽으로 꺾인다.
   세로로 쌓으면 위에서 아래로 한 방향으로만 읽힌다. */
/* [왜 이 목록만 기둥(--sc-col)을 벗어나는가]
   다른 그림 무리는 그림이 폭을 다 쓴다. 이 목록은 다르다 — 한 칸이
   번호 · 그림 · 글 세 조각인데, 그림이 280px 로 고정이라 남는 자리가
   전부 글 몫으로 간다. 1000px 에서는 글줄이 400px 를 넘게 남아, 한 줄짜리
   설명 뒤로 칸의 절반이 빈 채로 섰다.

   780px 으로 좁히면 글줄이 380px 안팎이 되어 설명이 두 줄로 앉는다.
   칸이 글에 맞춰지는 것이지 글이 칸에 흩어지지 않는다.

   [기둥에서 벗어나는 값을 치른다]
   위아래 브리핑 · 인용과 왼쪽 끝이 어긋난다. 그래도 이쪽을 택한 이유는,
   줄 맞춤은 눈에 잘 안 띄지만 빈 상자는 눈에 먼저 띄기 때문이다.
   가운데 정렬이라 좌우가 같은 만큼 들어와, 어긋남이 한쪽으로 쏠리지 않는다. */
.sc-mission{
  margin:clamp(24px,3vw,40px) auto 0;
  padding:0;
  width:min(100%,780px);
  list-style:none;
  display:grid;
  gap:clamp(10px,1.2vw,14px);
  counter-reset:none;
}
/* [칸 높이는 그림이 정한다]
   설명은 대개 한 줄이라, 이 칸의 높이를 정하는 것은 글이 아니라 그림이다.
   칸 높이 = 그림 높이 + 위아래 여백. 그래서 그림을 그대로 두는 한 칸이
   줄어들 수 있는 폭은 여백뿐이다.

   한때 여백이 20px 이라 280px 짜리 그림(5:4 로 224px) 위에 칸이 264px 로
   섰다. 그림을 220px 로 줄여 칸을 204px 까지 낮춘 적도 있는데, 그러면
   마스터 캠 화면과 경고 표시가 다시 읽히지 않는다 — 그림을 둔 뜻이 없어진다.

   그래서 그림은 280px 로 되돌리고 여백만 끝까지 조였다. 위아래 6px,
   좌우 14px. 칸이 236px 이 되어 그림에 바짝 붙는다. 여기가 그림을 그대로
   두고 갈 수 있는 끝이다 — 더 줄이려면 칸(배경과 테두리)을 없애야 한다.

   좌우를 위아래보다 넓게 둔 이유 — 번호와 글이 테두리에 닿으면 답답하다.
   위아래는 그림이 칸을 꽉 채우므로 같은 값을 쓰면 그림만 갇혀 보인다.

   칸 바닥은 --sc-void-2 다. 한때 그림 칸과 같은 --sc-void-3 였는데, 같은
   색이 맞닿으면 그림 칸의 테두리만 허공에 뜬 선으로 보였다. 이제 구간
   바닥(--sc-void) → 칸(--sc-void-2) → 그림(--sc-void-3) 으로 한 단씩
   밝아져, 그림이 칸 위에 얹힌 것으로 읽힌다. */
.sc-mission__item{
  display:grid;
  grid-template-columns:auto clamp(190px,22vw,280px) minmax(0,1fr);
  align-items:center;
  gap:clamp(12px,1.5vw,20px);
  padding:6px clamp(10px,1.2vw,14px);
  background:var(--sc-void-2);
  border:1px solid rgba(198,214,79,.18);
  border-radius:var(--sc-r);
}
.sc-mission__num{
  font-family:var(--sc-font-data);
  font-size:clamp(1.1rem,1.7vw,1.45rem);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--sc-lime);
}
/* 미션 설명은 본문(--sc-fs-body)이 아니라 리드(--sc-fs-lead) 크기로 둔다.
   이 다섯 줄은 "실제로 무엇을 하는가"를 말하는 자리라 이 구간에서 가장
   먼저 읽혀야 하는 글이다. 썸네일을 280px 로 키우고 나니 본문 크기로는
   그림에 눌려, 한 줄짜리 글이 넓은 칸 안에서 주석처럼 보였다.
   색도 한 단 올려 흰색에 더 가깝게 둔다 — 크기만 키우면 옅은 회색이
   그대로라 커진 만큼 흐려 보인다. */
.sc-mission__desc{
  margin:0;
  font-size:var(--sc-fs-lead);
  line-height:1.6;
  color:rgba(245,247,242,.94);
}

/* 교육 목표 — 확보된 사실을 적는 판. 바로 아래 '준비 중인 자료'(.sc-note)와
   생김새를 나누는 것이 중요하다. 저쪽은 아직 없는 것을 적는 자리라 회색
   종이로 물러서고, 이쪽은 흰 판에 라임 윗선을 얹어 앞으로 나온다 —
   .sc-step 세 칸과 같은 조형이라 한 구간 안에서 따로 놀지 않는다. */
.sc-goal{
  margin-top:clamp(22px,2.6vw,34px);
  padding:clamp(26px,3vw,40px) clamp(22px,2.8vw,44px) clamp(28px,3.2vw,44px);
  background:#FFFFFF;
  border:1px solid var(--sc-paper-2);
  border-top:2px solid var(--sc-lime-2);
  border-radius:var(--sc-r);
}
.sc-goal__title{
  margin:.45em 0 0;
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  font-weight:800;
  letter-spacing:-.01em;
}
.sc-goal__list{
  margin:1.1em 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.7em;
}
.sc-goal__list li{
  position:relative;
  padding-left:1.6em;
  font-size:var(--sc-fs-body);
  line-height:1.7;
}
.sc-goal__list li::before{
  content:'';
  position:absolute;
  left:0;top:.78em;
  width:14px;height:2px;
  background:var(--sc-lime-2);
}


/* ============================================================
   반응형
   ============================================================ */
@media (max-width:960px){
  .sc-spec__rows{grid-template-columns:1fr}
}
@media (max-width:780px){
  .sc-what__steps{grid-template-columns:1fr}
  .sc-more__grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .sc-beats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 두 칸이 각각 300px 아래로 내려가는 지점. 여기서부터는 한 줄에 한 장씩
   세운다 — 나란히 두느니 크게 보는 편이 이 넉 장의 목적에 맞다. */
@media (max-width:640px){
  .sc-shots__grid{grid-template-columns:minmax(0,1fr)}
}
/* 번호 · 그림 · 글 세 칸이 한 줄에 서기에는 좁아지는 지점. 그림을 위로
   올리고 번호와 글을 그 아래 한 줄로 붙인다. */
@media (max-width:700px){
  .sc-mission__item{
    grid-template-columns:auto minmax(0,1fr);
    gap:.8rem clamp(12px,3vw,18px);
  }
  .sc-mission__shot{grid-column:1 / -1}
}
/* 좁은 폭에서는 번호를 글 위로 올린다. 옆에 세워 두면 설명이 서너 글자마다
   끊겨 한 줄짜리 미션이 석 줄이 된다. */
@media (max-width:520px){
  .sc-beats{grid-template-columns:minmax(0,1fr)}
  .sc-mission__item{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .sc-mission__shot{grid-column:auto}
}

/* ============================================================
   좁은 화면 압축 — 지우지 않고 눕힌다
   ============================================================
   모바일에서 이 페이지는 9,900px 을 넘었다. 한 화면(844px)의 열두 배라,
   끝까지 내려가는 사람이 없다.

   길이를 만든 것은 글이 아니라 배자였다. 위의 규칙들이 좁은 폭에서
   그림을 한 줄에 한 장씩 세워 놓는데, 그 결과 SHOTS 넉 장이 1,243px,
   보리핑 석 장이 1,016px, 미션 다섯 칸이 1,844px — 이 셋만 4,100px 이다.
   글은 2,900자뿐이니 글을 줄여서 얻을 것이 없다.

   그래서 사진도 문장도 하나 지우지 않고, 세로로 쌓인 그림들을 다시
   가로로 눕힌다. 잃는 것은 "한 장을 크게 본다"는 값이고, 얻는 것은
   페이지를 끝까지 볼 수 있다는 값이다. 캡션이 그대로 남아 있으므로
   그림이 작아져도 무엇을 보는 자리인지는 글이 받쳐 준다.
   ============================================================ */

/* SHOTS — 위 640px 규칙이 한 줄에 한 장으로 풀어 놓은 것을 되돌린다.
   원래 2×2 가 이 구간의 기본값이었고, 좁은 폭에서만 한 줄로 풀던 것이다. */
@media (max-width:640px){
  .sc-shots__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .sc-shot{gap:.5em}
  .sc-shot__cap{font-size:.82rem;line-height:1.5}
}

/* 압축은 640px 하나로 끊는다 — 위 SHOTS 규칙과 같은 지점이다.
   한때 이 묶음을 520px 에 두었는데, 그러면 560px 짜리 화면에서 SHOTS 만
   2×2 로 접히고 나머지는 그대로 서서 페이지가 9,173px 로 남았다.
   40px 을 넘나드는 사이에 길이가 2,500px 씩 뛰는 것은 창을 조금 넓혔을 뿐인
   사람에게는 사고로 보인다. 휴대폰 구간을 한 지점으로 묶는다. */
@media (max-width:640px){
  /* 보리핑 석 장 — [그림 | 글] 한 줄로 눕힌다. 석 장이 차례로 넘어가는
     장면이라, 눕히면 오히려 세 칸이 한 화면에 들어와 '차례'가 더 잘 읽힌다.
     위 900px 규칙이 두 칸으로 벌려 둔 것을 한 칸으로 되돌린 뒤 눕힌다 —
     두 칸 안에서 또 눕히면 글에 130px 밖에 남지 않아 넉 줄로 끊긴다. */
  .sc-beats{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .sc-beat{
    grid-template-columns:clamp(118px,34vw,150px) minmax(0,1fr);
    align-items:center;
    gap:.85rem;
  }
  .sc-beat__desc{font-size:.9rem;line-height:1.55}

  /* 미션 다섯 칸 — 그림을 글 위로 올리는 대신 왼쪽에 세운다.
     [그림 | 번호 + 글] 두 칸이라 글 쪽에 200px 가까이 남는다.
     그림이 작아진 만큼 설명은 리드 크기에서 본문 크기로 내린다 —
     좁아진 칸에서 리드 크기를 그대로 쓰면 한 줄짜리 미션이 넉 줄이 된다.
     (위 520px 규칙의 1열 배치를 여기서 되돌리므로 순서가 중요하다.) */
  .sc-mission{gap:8px}
  .sc-mission__item{
    grid-template-columns:clamp(104px,30vw,132px) minmax(0,1fr);
    align-items:center;
    gap:.15rem .8rem;
    padding:8px 10px;
  }
  .sc-mission__shot{grid-column:1;grid-row:1 / span 2}
  .sc-mission__num{grid-column:2;grid-row:1;font-size:1rem}
  .sc-mission__desc{grid-column:2;grid-row:2;font-size:.92rem;line-height:1.5}

  /* 미스터M 인용 두 곳은 눕히지 않고 그대로 둔다.
     여기도 [그림 | 대사] 로 눕혀 봤다. 231px 이 줄기는 하는데, 대사가
     일곱 줄인데 그림은 85px 짜리 한 덩이라 그림 아래 왼쪽이 통째로 비었다 —
     빈 자리가 줄어든 길이보다 먼저 눈에 띈다. 3,200px 을 줄이는 일에서
     이 231px 은 그 값을 치를 만한 몫이 아니다. */

  /* 구간 사이 여백 — 여덟 구간이 위아래로 56px 씩 물고 있어 그것만
     900px 다. 44px 로 조이면 구간이 서로 붙지 않으면서 250px 가 준다. */
  .sc-hero,.sc-shots,.sc-video,.sc-story,
  .sc-what,.sc-spec,.sc-more,.sc-cta{
    padding-top:44px;
    padding-bottom:44px;
  }
}