@charset "UTF-8";
/* 젠스타메이트(GENSTARMATE) 포트폴리오
 * 2026-11-07
 *
 * 지면 구성과 문체는 제안 컨셉서(젠스타메이트_컨셉서, 2025.06)를 따른다.
 * Overview · Design Strategy · Color System · Typography · Design Concept ·
 * Main Visual · Mobile 순서이고, 영문 섹션 라벨 아래에 국문 본문을 둔다.
 *
 * 화면 캡쳐를 쓰지 않는다. 구축된 화면은 .screen 틀 안에서 실제 이미지와
 * 서체로 재구성한다. 틀을 container 로 두고 글자 크기를 cqw 로 적으면,
 * 고객사 사이트가 쓰는 vw 비례(1600px 기준)를 틀 폭이 얼마든 그대로 지킨다.
 * cqw 를 모르는 브라우저를 위해 같은 속성을 px 로 먼저 적어 둔다.
 *
 * 🔴 지면 폭을 1792px 로 묶는다. 묶지 않으면 2560px 화면에서 틀이 2368px 까지
 *    늘어나 원본보다 큰 크기로 그려지고 이미지가 뭉개진다. 1792 로 묶으면
 *    좌우 여백 96 을 빼고 내용이 정확히 1600px, 곧 설계 기준 폭이 된다.
 *
 * 모션 값의 출처는 inspireloop Motion Lab 이다. 패턴 이름은 JS 주석에 적었다.
 */

/* ── 값 한 벌 ─────────────────────────────────────── */
.gsm{
  --ink:#000;
  --paper:#fff;
  --navy:#000346;            /* Blue genstarmate. 시그니처로만 쓴다 */
  --t70:rgba(0,0,0,.7);
  --t50:rgba(0,0,0,.5);
  --t30:rgba(0,0,0,.3);
  --line:rgba(0,0,0,.12);
  --hair:rgba(0,0,0,.08);
  --soft:#f5f5f5;

  --en:"Red Hat Display","Helvetica Neue",Arial,sans-serif;
  --ko:"Pretendard","Pretendard Variable",system-ui,sans-serif;

  /* 글자 크기 한 벌. 고객사 사이트에서 잰 값에 맞췄다 */
  --fs-hero:clamp(44px,8.6vw,164px);
  --fs-kv:clamp(26px,4.4vw,78px);
  --fs-ko:clamp(24px,3.5vw,54px);
  --fs-lead:clamp(17px,2vw,32px);
  --fs-body:clamp(14px,1.12vw,18px);
  /* 아래 두 값의 하한은 12px 이다. 사이트 전체 규칙(type-floor.css)이
     글자를 12px 아래로 내리지 않는다. 좁은 화면에서도 지키려고 못박는다. */
  --fs-label:clamp(12px,.86vw,14px);
  --fs-small:clamp(12px,.8vw,13px);

  /* 여백 한 벌 */
  --pad:clamp(20px,5vw,96px);
  --gap-s:clamp(12px,1.4vw,22px);
  --gap-m:clamp(28px,3.4vw,56px);
  --gap-l:clamp(64px,9vw,160px);
  --gap-x:clamp(96px,14vw,260px);
  --max:1792px;

  background:var(--paper);
  color:var(--ink);
  font-family:var(--ko);
  /* 기준값을 못박는다. 공용 레이아웃 안에서는 .gsm 이 바깥에서 12px ·
     행간 12px · 자간 -0.448px 를 물려받는다. 아래 :where 규칙이 그 값을
     지면 전체로 흘려보내므로, 출발점을 단독 주소와 같게 맞춰 둔다.
     행간과 자간은 normal 로 두어야 요소마다 제 글자 크기로 다시 계산된다. */
  font-size:16px;
  line-height:normal;
  letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 한글은 낱말 단위로 끊는다 */
  word-break:keep-all;
  overflow-wrap:break-word;
  /* 폭죽 조각이 떨어지는 동안 문서 높이가 늘지 않게 세로도 함께 자른다.
     안쪽에 sticky 나 fixed 가 없으므로 자르는 데 문제가 없다. */
  overflow:clip;
}

/* ── 공용 레이아웃 안에서 상속 되돌리기 ──────────────
 * /projects/genstarmate 는 공용 layout 으로 그려진다. 그 쪽에서 실리는
 * reset.css 의 * { color:#fff; font-family:AlbertSans; … } 가 모든 요소에
 * «직접» 적용되어 상속 고리를 끊는다. 그러면 이 지면은 흰 바탕에 흰 글자가
 * 되고 서체와 자간도 어긋난다. 단독 주소 /genstarmate 에서는 그 CSS 가
 * 실리지 않아 멀쩡하므로, 두 주소가 서로 달라 보이는 원인도 이것이다.
 *
 * projects-override.css 가 :where(main.page) * 로 같은 문제를 이미 푼다.
 * 다만 여기서는 특이도를 한 칸 올려 .gsm * 로 적는다. type-floor.css 가
 * 이 파일보다 «뒤에» 실리면서 * { font-size: max(12px, …) } 로 다시 덮기
 * 때문이다. 특이도가 같으면 순서로 지므로 .gsm * (0,1,0) 이 필요하다.
 * 아래의 개별 규칙(.gsm p 등, 0,1,1 이상)은 그대로 살아남는다.
 * 여백 속성은 물려받게 두지 않는다. 조판이 깨진다.
 *
 * type-floor.css 의 뜻(글자는 12px 아래로 내리지 않는다)은 이 지면의 글자
 * 크기를 직접 12px 이상으로 잡아 지킨다(--fs-small · --fs-label).
 * 다만 .screen 안쪽은 다른 사이트의 화면을 축소해 그린 것이라 하한을 두지
 * 않는다. 읽는 글이 아니라 화면의 모습이다. */
.gsm *{
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  font-style:inherit;
  font-stretch:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  word-break:inherit;
  overflow-wrap:inherit;
  color:inherit;
}

.gsm *,.gsm *::before,.gsm *::after{box-sizing:border-box}
.gsm img{display:block;max-width:100%;height:auto}
.gsm a{color:inherit;text-decoration:none}

.gsm section{max-width:var(--max);margin-left:auto;margin-right:auto;
  padding-top:var(--gap-x);padding-bottom:var(--gap-x)}
.gsm section.tight{padding-top:var(--gap-l);padding-bottom:var(--gap-l)}
.gsm .wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* ── 인트로 ───────────────────────────────────────── */
html.gsm-lock,html.gsm-lock body{overflow:hidden;height:100%}

#gsm-intro{
  position:fixed;inset:0;z-index:9999;background:#fff;
  display:grid;place-items:center;
  transition:transform 1s cubic-bezier(.76,0,.24,1),opacity .6s ease .4s;
}
#gsm-intro.is-out{transform:translateY(-101%);opacity:0;pointer-events:none}
#gsm-intro .gi-word{
  display:flex;font-family:var(--en);font-weight:400;
  font-size:clamp(28px,6.4vw,104px);line-height:1;letter-spacing:-.04em;color:#000;
}
#gsm-intro .gi-l{display:block;overflow:hidden;line-height:1.08}
#gsm-intro .gi-l > span{display:block;transform:translateY(100%);will-change:transform}

/* ── 글자 ─────────────────────────────────────────── */
.gsm .en{font-family:var(--en);font-weight:400;letter-spacing:-.02em}
/* 영문 섹션 라벨. 컨셉서의 Overview · Design Strategy … 와 같은 자리 */
.gsm .eyebrow{
  display:block;font-family:var(--ko);font-weight:700;
  font-size:var(--fs-label);letter-spacing:-.01em;color:var(--ink);
}
.gsm h1,.gsm h2,.gsm h3,.gsm h4{margin:0;font-weight:400}
.gsm h1{font-family:var(--en);font-size:var(--fs-hero);line-height:.94;letter-spacing:-.035em}
/* 컨셉명 (360° Property Intelligence Platform) */
.gsm h2.kv{font-family:var(--ko);font-weight:600;font-size:var(--fs-kv);line-height:1.08;letter-spacing:-.03em}
.gsm h2.ko{font-family:var(--ko);font-weight:600;font-size:var(--fs-ko);line-height:1.28;letter-spacing:-.04em}
.gsm p{margin:0;font-size:var(--fs-body);line-height:1.78;letter-spacing:-.015em;color:var(--t70)}
.gsm .lead{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.03em;color:var(--ink);font-weight:500}
.gsm .small{font-size:var(--fs-small);line-height:1.7;color:var(--t50)}
.gsm strong{font-weight:600;color:var(--ink)}
.gsm .say{max-width:72ch;font-size:clamp(15px,1.3vw,21px);line-height:1.72;letter-spacing:-.025em;color:var(--ink);font-weight:500}

/* ── 표지 ─────────────────────────────────────────── */
.gsm .hero{padding-top:clamp(92px,11vw,180px);padding-bottom:0}
.gsm .hero-head{display:flex;flex-direction:column;gap:var(--gap-s)}
.gsm .hero h1{margin-top:.08em}
.gsm .hero-sub{margin-top:var(--gap-m);max-width:46ch}
.gsm .hero-sub br{content:"";display:block;margin-bottom:.35em}

/* 이미지가 지면 폭까지 넓어진다 (Motion Lab · cover-widen) */
.gsm .widen-wrap{margin-top:var(--gap-l);display:flex;justify-content:center}
.gsm .widen-wrap img{width:62%;border-radius:12px;overflow:hidden;aspect-ratio:16/7;object-fit:cover}
@media (max-width:900px){ .gsm .widen-wrap img{aspect-ratio:4/3} }

/* ── Overview ─────────────────────────────────────── */
.gsm .ov{margin-top:var(--gap-m);display:grid;gap:1.4em;max-width:76ch}

/* 전면 이미지 띠.
   시차로 위아래 10% 를 움직이므로 이미지에 그만큼 여유를 두어야
   가장자리에 빈 띠가 생기지 않는다 */
.gsm .band{
  position:relative;overflow:hidden;margin:0 auto;
  max-width:var(--max);height:clamp(240px,42vw,660px);
}
.gsm .band.tall{height:clamp(300px,56vw,860px)}
/* 시차가 이미지 높이의 ±10% 를 움직인다. 틀 높이를 1 이라 할 때 이미지가
   k 배면 위아래 여유가 (k-1)/2 이고 움직임은 0.1k 이므로, k 가 1.25 보다
   작으면 끝에서 빈 띠가 드러난다. 1.34 로 두어 여유를 남긴다. */
.gsm .band img{position:absolute;left:0;top:-17%;width:100%;height:134%;object-fit:cover}

/* ── 개요 표 ──────────────────────────────────────── */
.gsm .facts{border-top:1px solid var(--ink)}
.gsm .fact{
  display:grid;grid-template-columns:minmax(120px,18%) 1fr;
  gap:var(--gap-s);align-items:baseline;
  padding:clamp(16px,1.9vw,28px) 0;border-bottom:1px solid var(--hair);
}
.gsm .fact dt{font-family:var(--en);font-weight:500;font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;color:var(--t50)}
.gsm .fact dd{margin:0;font-size:var(--fs-body);line-height:1.7;letter-spacing:-.015em}
.gsm .fact dd .ko2{display:block;color:var(--t50);font-size:.88em;margin-top:.25em}

/* ── Design Strategy ──────────────────────────────── */
.gsm .keys{margin-top:var(--gap-l);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-m) var(--gap-l)}
.gsm .key{padding-top:var(--gap-s);border-top:1px solid var(--ink)}
.gsm .key h3{font-family:var(--ko);font-weight:700;font-size:clamp(16px,1.5vw,24px);letter-spacing:-.01em}
.gsm .key h4{margin-top:.9em;font-family:var(--ko);font-weight:700;font-size:clamp(15px,1.3vw,20px);letter-spacing:-.03em}
.gsm .key p{margin-top:.7em}

/* ── Color System ─────────────────────────────────── */
.gsm .pal{margin-top:var(--gap-l);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-m)}
.gsm .sw i{display:block;height:clamp(120px,13vw,220px);border-radius:2px}
.gsm .sw b{display:block;margin-top:1em;font-family:var(--ko);font-weight:700;font-size:clamp(14px,1.2vw,19px);letter-spacing:-.02em}
.gsm .sw span{display:block;margin-top:.35em;font-family:var(--en);font-size:var(--fs-small);letter-spacing:.06em;color:var(--t70)}
.gsm .sw em{display:block;margin-top:.2em;font-style:normal;font-family:var(--en);font-size:var(--fs-small);letter-spacing:.04em;color:var(--t30)}

.gsm .opa{margin-top:var(--gap-l);display:grid;gap:var(--gap-s)}
.gsm .chips{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.gsm .chip{aspect-ratio:1/1.6;background:var(--ink)}
.gsm .chips.on-dark{background:var(--ink);padding:2px}
.gsm .chips.on-dark .chip{background:#fff}
.gsm .chip-note{display:flex;justify-content:space-between;margin-top:-6px}

/* ── Typography ───────────────────────────────────── */
.gsm .spec{margin-top:var(--gap-l);display:grid;grid-template-columns:minmax(120px,18%) 1fr;gap:var(--gap-m) var(--gap-l);
  align-items:start;padding-top:var(--gap-s);border-top:1px solid var(--ink)}
.gsm .spec .aa{font-family:var(--en);font-weight:400;font-size:clamp(44px,6vw,104px);line-height:.9;letter-spacing:-.04em}
.gsm .spec:nth-of-type(2) .aa{font-family:var(--ko);font-weight:500}
.gsm .spec .name{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:.6em}
.gsm .spec .name b{font-family:var(--en);font-weight:500;font-size:clamp(13px,1vw,16px);letter-spacing:-.01em}
.gsm .spec .sample-en{font-family:var(--en);font-weight:400;font-size:clamp(26px,4vw,64px);line-height:1.05;letter-spacing:-.035em}
.gsm .spec .sample-ko{font-family:var(--ko);font-weight:500;font-size:clamp(20px,2.8vw,46px);line-height:1.25;letter-spacing:-.03em}
.gsm .spec .weights{margin-top:.9em;display:flex;flex-wrap:wrap;gap:0 14px}
.gsm .spec .weights span{font-size:var(--fs-small);color:var(--t30);font-family:var(--en);letter-spacing:.04em}

/* ── Design Concept · 시안 전체가 틀 안에서 흐른다 ──── */
.gsm .reel{
  position:relative;overflow:hidden;aspect-ratio:1600/980;
  background:#fff;border:1px solid var(--hair);
}
.gsm .reel img{
  position:absolute;left:50%;top:0;width:86%;max-width:none;height:auto;
  transform:translateX(-50%);will-change:transform;
}

/* ══════════════════════════════════════════════════
   재구성 틀
   ══════════════════════════════════════════════════ */
.gsm .screen-fig{margin:var(--gap-l) 0 0}
.gsm .screen-fig > figcaption{display:flex;gap:10px;align-items:baseline;margin-top:14px}
/* 컨셉서의 콜아웃 라벨과 같은 조판이다 */
.gsm .screen-fig > figcaption b{font-family:var(--ko);font-weight:700;font-size:clamp(12px,.95vw,15px);letter-spacing:-.01em;color:var(--ink);flex:none;white-space:nowrap}
.gsm .screen-fig > figcaption span{font-size:clamp(12px,.92vw,15px);line-height:1.65;color:var(--t70);letter-spacing:-.015em}
.gsm .screen-fig + .small{margin-top:14px}

.gsm .screen{
  container-type:inline-size;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  aspect-ratio:1600/1000;
  background:#fff;border:1px solid var(--hair);
  font-family:var(--ko);color:#000;
}
/* 틀 높이는 고객사 구역의 실제 높이를 따른다 */
.gsm .screen.tall{aspect-ratio:1600/1120}
.gsm .screen.who{aspect-ratio:1600/360}
.gsm .screen.svc{aspect-ratio:1600/1180}
.gsm .screen.col{aspect-ratio:1600/1270}
.gsm .screen.net{aspect-ratio:1600/785}
.gsm .screen.acc{aspect-ratio:1600/700}
.gsm .screen.ins{aspect-ratio:1600/900}
.gsm .screen.med{aspect-ratio:1600/630}
.gsm .screen.dark{background:#000;color:#fff;border-color:rgba(0,0,0,.2)}
.gsm .sc-pad{padding-left:2.8cqw;padding-right:2.8cqw;position:relative;z-index:2}

/* 배경 이미지 (시차용). 위아래 여유는 .band 와 같은 이유로 14% 를 둔다 */
.gsm .sc-bg{position:absolute;inset:-14% 0;z-index:0;overflow:hidden}
.gsm .sc-bg img{width:100%;height:100%;object-fit:cover}

/* 머리띠 */
.gsm .sc-bar{
  flex:none;display:flex;align-items:center;gap:2cqw;
  height:3.75cqw;padding:0 2.8cqw;position:relative;z-index:3;
}
.gsm .sc-bar .sc-logo{width:auto;height:1.6cqw;flex:none}
.gsm .sc-gnb{display:flex;align-items:center;gap:.5cqw;margin:0 auto;
  font-size:11px;font-size:.896cqw;font-weight:600;letter-spacing:.01em}
.gsm .sc-gnb i{color:rgba(0,0,0,.3);font-style:normal}
.gsm .sc-lang{display:flex;align-items:center;gap:.45cqw;
  font-size:11px;font-size:.896cqw;font-weight:600;color:rgba(0,0,0,.35)}
.gsm .sc-lang b{color:#000;font-weight:700}
.gsm .sc-lang i{font-style:normal;color:rgba(0,0,0,.25)}
.gsm .sc-burger{margin-left:auto;display:grid;gap:1.4cqw;width:5cqw}
.gsm .sc-burger i{display:block;height:1px;background:#000}

/* 행 단위 가림막 (Motion Lab · line-mask) */
.gsm .ln{display:block;overflow:hidden}
.gsm .ln > span{display:block;will-change:transform}

/* ── Main Visual ──────────────────────────────────── */
.gsm .sc-home{padding-top:3cqw}
.gsm .sc-hero-h{
  font-family:var(--ko);font-weight:400;text-transform:uppercase;
  font-size:48px;font-size:7.84cqw;line-height:.9;letter-spacing:-.01em;margin:0;
}
.gsm .sc-hero-sub{
  margin-top:1.6cqw;font-weight:400;color:#000;
  font-size:16px;font-size:2.24cqw;line-height:1;letter-spacing:-.01em;
}
.gsm .sc-kv{margin-top:8.5cqw;flex:1 1 auto;min-height:0;overflow:hidden;position:relative;z-index:1}
.gsm .sc-kv img{width:100%;height:100%;object-fit:cover}
/* 확대 상태를 CSS 로 먼저 둬야 첫 프레임이 튀지 않는다 (Motion Lab · kv-zoom-out) */
.gsm [data-zoom]{transform:scale(1.1)}

/* ── Who We Are ───────────────────────────────────── */
.gsm .sc-who{padding-top:5cqw;padding-bottom:5cqw;margin:auto 0}
.gsm .sc-lab{
  display:block;font-family:var(--en);font-weight:700;
  font-size:11px;font-size:.896cqw;letter-spacing:.01em;text-transform:uppercase;
}
.gsm .sc-who-t{
  margin-top:1.6cqw;font-weight:500;color:#000;
  font-size:14px;font-size:1.68cqw;line-height:1.53;letter-spacing:-.05em;
}

/* ── 구역 대제목 ──────────────────────────────────── */
.gsm .sc-big{
  font-family:var(--ko);font-weight:400;text-transform:uppercase;
  font-size:40px;font-size:6.72cqw;line-height:1;letter-spacing:-.02em;margin:0;
}
.gsm .sc-big.mid{text-align:center}
.gsm .sc-lead{
  margin-top:1.4cqw;font-weight:500;color:#000;
  font-size:13px;font-size:1.456cqw;line-height:1.35;letter-spacing:-.01em;max-width:62cqw;
}

/* ── Our Services ─────────────────────────────────── */
.gsm .sc-svc-head{padding-top:4.5cqw}
.gsm .sc-grid{
  margin-top:3.6cqw;padding:0 1.125cqw;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.54cqw;
  position:relative;z-index:2;
}
.gsm .sc-grid figure{margin:0;position:relative;overflow:hidden;aspect-ratio:381/412}
.gsm .sc-grid img{width:100%;height:100%;object-fit:cover}
.gsm .sc-grid figcaption{
  position:absolute;left:1.1cqw;right:1.1cqw;bottom:1cqw;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.gsm .sc-grid figcaption b{display:block;font-weight:600;font-size:10px;font-size:.95cqw;letter-spacing:-.02em}
.gsm .sc-grid figcaption span{display:block;margin-top:.15cqw;font-weight:700;font-size:11px;font-size:1.06cqw;letter-spacing:0}

/* ── Service 콜라주 ───────────────────────────────── */
.gsm .sc-tabs{
  list-style:none;margin:2.4cqw 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 2cqw;
  font-size:11px;font-size:1.232cqw;color:rgba(0,0,0,.35);letter-spacing:-.01em;
}
.gsm .sc-tabs .on{color:#000;font-weight:500}
.gsm .sc-col{position:relative;margin:3.4cqw 2.8cqw 0;aspect-ratio:1495/888;z-index:2}
.gsm .sc-col .p{position:absolute;margin:0}
.gsm .sc-col .p img{width:100%;height:100%;object-fit:cover}
.gsm .sc-col .p figcaption{margin-top:.9cqw;font-weight:600;font-size:10px;font-size:.896cqw;letter-spacing:0}
/* 라이브에서 잰 좌표를 백분율로 옮긴 것이다 */
.gsm .sc-col .a{left:0;       top:0;      width:37.79%;height:35.47%}
.gsm .sc-col .b{left:62.27%;  top:0;      width:16.05%;height:34.01%}
.gsm .sc-col .c{left:83.95%;  top:0;      width:16.05%;height:34.01%}
.gsm .sc-col .d{left:41.67%;  top:20.16%; width:16.72%;height:35.36%}
.gsm .sc-col .e{left:0;       top:44.59%; width:16.05%;height:34.01%}
.gsm .sc-col .f{left:21.67%;  top:44.59%; width:16.05%;height:34.01%}
.gsm .sc-col .g{left:62.27%;  top:43.13%; width:37.79%;height:35.47%}
.gsm .sc-col .h{left:41.67%;  top:64.64%; width:16.72%;height:35.36%}

/* ── Our Networks ─────────────────────────────────── */
.gsm .sc-net{margin:auto 0;padding-top:6cqw;padding-bottom:6cqw;text-align:center}
.gsm .screen.dark .sc-lab{color:#fff}
.gsm .sc-net .sc-lab{margin-top:1.2cqw;letter-spacing:.06em}
.gsm .sc-net-t{
  margin:2.2cqw auto 0;max-width:52cqw;color:rgba(255,255,255,.85);font-weight:500;
  font-size:12px;font-size:1.12cqw;line-height:1.75;letter-spacing:-.02em;
}

/* ── Affiliates · 접이식 ──────────────────────────── */
/* 고객사와 같은 배치다. 왼쪽에 이미지 칸(29.75%), 오른쪽에 글.
   선택한 줄만 세로로 펼쳐진다. 이미지를 지면 폭까지 늘리지 않으므로
   원본 734px 이 그대로 또렷하게 나온다. */
.gsm .sc-acc{display:flex;flex-direction:column;height:100%;gap:1px;background:var(--hair)}
.gsm .sc-acc .ac{
  display:flex;background:#fff;overflow:hidden;
  flex:1 1 0;min-height:3.6cqw;
  transition:flex-grow .7s cubic-bezier(.16,1,.3,1);
}
.gsm .sc-acc .ac-im{flex:none;width:29.75cqw;overflow:hidden;background:var(--soft)}
.gsm .sc-acc .ac-im img{width:100%;height:100%;object-fit:cover}
.gsm .sc-acc .ac-t{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:2cqw;padding:0 2.8cqw;
}
.gsm .sc-acc .ac-t b{
  flex:none;width:13cqw;font-family:var(--en);font-weight:600;
  font-size:12px;font-size:1.3cqw;letter-spacing:.02em;
}
.gsm .sc-acc .ac-t span{
  font-weight:500;color:var(--t70);max-width:44cqw;
  font-size:11px;font-size:1.12cqw;line-height:1.65;letter-spacing:-.02em;
  opacity:0;transition:opacity .5s ease;
}
.gsm .sc-acc .ac.on{flex-grow:7}
.gsm .sc-acc .ac.on .ac-t span{opacity:1}
/* 가리키는 줄이 있으면 그 줄이 펼쳐지고, 원래 펼쳐져 있던 줄은 접힌다 */
.gsm .sc-acc:hover .ac.on{flex-grow:1}
.gsm .sc-acc:hover .ac.on .ac-t span{opacity:0}
.gsm .sc-acc .ac:hover{flex-grow:7}
.gsm .sc-acc .ac:hover .ac-t span{opacity:1}

/* ── Track Record ─────────────────────────────────── */
.gsm .sc-rec{display:flex;flex-direction:column;height:100%;padding-top:7cqw;padding-bottom:3.4cqw}
.gsm .sc-rec-sub{
  margin-top:1.4cqw;text-align:center;color:#fff;font-weight:700;
  font-size:11px;font-size:1.12cqw;line-height:1.1;letter-spacing:-.01em;
}
.gsm .sc-nums{margin-top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4cqw}
.gsm .sc-nums .scn{border-left:1px solid rgba(255,255,255,.45);padding-left:1.6cqw}
.gsm .sc-nums .en-t{font-weight:600;font-size:11px;font-size:1.12cqw;letter-spacing:0;color:#fff}
.gsm .sc-nums .ko-t{margin-top:.8cqw;font-weight:600;font-size:11px;font-size:1.12cqw;letter-spacing:-.036em;color:rgba(255,255,255,.75)}
.gsm .sc-nums .v{
  margin-top:1cqw;font-weight:400;color:#fff;
  font-size:22px;font-size:3.125cqw;line-height:1.09;letter-spacing:-.0215em;
}

/* 숫자가 가림막 안에서 상승한다. JS 가 .cnt 와 .rise 를 넣는다 */
.gsm .cnt{display:block;overflow:hidden;padding-bottom:.1em}
.gsm .cnt > .rise{
  display:inline-block;white-space:nowrap;transform:translateY(110%);
  transition:transform 1s cubic-bezier(.16,1,.3,1);will-change:transform;
}
.gsm .is-in .cnt > .rise{transform:translateY(0)}

/* ── Insight & Report · 적층 ──────────────────────── */
.gsm .sc-ins{height:100%;display:flex;align-items:center;justify-content:center;gap:1.5cqw;padding:0 2.8cqw}
.gsm .sc-word{
  flex:none;font-family:var(--ko);font-weight:400;text-transform:uppercase;
  font-size:36px;font-size:6.25cqw;line-height:.84;letter-spacing:-.011em;
}
.gsm .sc-stack{position:relative;flex:1 1 auto;height:100%;perspective:1400px}
/* 바깥은 가운데 맞추기, 안쪽 .cd 는 모션. 한 요소에 두 가지 transform 을
   겹치면 서로를 덮어쓴다 */
.gsm .sc-card{position:absolute;left:50%;top:50%;width:26cqw;transform:translate(-50%,-50%);transform-style:preserve-3d}
.gsm .sc-card > .cd{transform-origin:50% 50%}
.gsm .sc-card img{width:100%;height:auto;box-shadow:0 1cqw 3cqw rgba(0,0,0,.14)}

/* ── News · 순환 띠 ───────────────────────────────── */
.gsm .sc-med-head{padding-top:4.5cqw}
.gsm .sc-mq{margin-top:3.4cqw;display:flex;gap:1.4cqw;overflow:hidden;position:relative;z-index:2}
.gsm .sc-mq .mq{display:flex;gap:1.4cqw;flex:none;will-change:transform}
.gsm .sc-mq figure{margin:0;flex:none;width:23cqw}
.gsm .sc-mq img{width:100%;height:auto}

/* ── Mobile ───────────────────────────────────────── */
.gsm .mo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-m);align-items:start}
.gsm .screen.mo-s{aspect-ratio:375/812;border:1px solid var(--line);border-radius:10px}

/* 틀이 좁아지면 고객사의 좁은 화면 값으로 바꾼다
   (390px 화면에서 잰 값: 제목 46 · 설명 26 · 라벨 13) */
@container (max-width:520px){
  .gsm .sc-bar{height:11cqw;padding:0 4cqw}
  .gsm .sc-bar .sc-logo{height:5.2cqw}
  .gsm .sc-pad{padding-left:4cqw;padding-right:4cqw}
  .gsm .sc-home{padding-top:4cqw}
  .gsm .sc-hero-h{font-size:11.8cqw;line-height:1.02}
  .gsm .sc-hero-sub{margin-top:4cqw;font-size:6.67cqw;line-height:1.3}
  .gsm .sc-kv{margin-top:12cqw}
  .gsm .sc-svc-head{padding-top:10cqw}
  .gsm .sc-big{font-size:11.3cqw}
  .gsm .sc-lead{margin-top:4cqw;font-size:3.6cqw;line-height:1.5;max-width:none}
  .gsm .sc-grid{margin-top:6cqw;padding:0 4cqw;grid-template-columns:repeat(2,minmax(0,1fr));gap:2cqw}
  .gsm .sc-grid figcaption{left:3cqw;right:3cqw;bottom:3cqw}
  .gsm .sc-grid figcaption b{font-size:2.8cqw}
  .gsm .sc-grid figcaption span{font-size:2.9cqw;margin-top:.6cqw;letter-spacing:-.01em}
  .gsm .sc-rec{padding-top:18cqw;padding-bottom:8cqw}
  .gsm .sc-rec-sub{margin-top:4cqw;font-size:3.4cqw;line-height:1.5}
  .gsm .sc-nums{grid-template-columns:minmax(0,1fr);gap:7cqw}
  .gsm .sc-nums .scn{padding-left:4cqw}
  .gsm .sc-nums .en-t,.gsm .sc-nums .ko-t{font-size:3.2cqw}
  .gsm .sc-nums .v{margin-top:2.4cqw;font-size:9cqw}
}

/* ── Footer ───────────────────────────────────────── */
.gsm .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--gap-m) var(--gap-l);align-items:start}
.gsm .outro{border-top:1px solid var(--ink);padding-top:var(--gap-l)}
.gsm .visit{
  display:inline-flex;align-items:center;gap:.7em;margin-top:var(--gap-m);
  font-family:var(--en);font-weight:500;font-size:clamp(15px,1.5vw,22px);letter-spacing:-.01em;
  padding-bottom:.28em;border-bottom:1px solid var(--ink);
  transition:gap .3s cubic-bezier(.16,1,.3,1)
}
.gsm .visit:hover{gap:1.3em}
.gsm .mark{color:var(--navy)}
.gsm .outro-logo{width:auto;height:clamp(18px,1.6vw,24px)}

/* ══════════════════════════════════════════════════
   마무리 인사
   어두운 띠를 지면 끝까지 깔고, 그 위에서 도형이 터진다.
   data-bg-dark 를 걸어 두어 이 자리에서는 공용 머리글이 흰 글자가 된다.
   ══════════════════════════════════════════════════ */
/* 앞 구역이 이미 아래 여백을 갖고 있어 위로는 더 띄우지 않는다 */
.gsm .thanks{
  background:var(--ink);color:var(--paper);
  padding-top:var(--gap-l);padding-bottom:var(--gap-l);
}
/* 제목 칸을 넓게 둔다. 좁으면 FOR WATCHING 이 접혀 행 가림막이 한 덩어리로 움직인다 */
.gsm .th-in{
  max-width:var(--max);margin-left:auto;margin-right:auto;
  display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.8fr) minmax(0,.7fr);
  gap:var(--gap-m) var(--gap-l);align-items:start;
}
/* 조각이 이 상자를 기준으로 날아간다 */
.gsm .th-head{position:relative}
.gsm .th-t{
  font-family:var(--ko);font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,84px);line-height:1.02;letter-spacing:-.035em;margin:0;
}
.gsm .th-btn{
  position:relative;z-index:3;margin-top:var(--gap-m);
  display:inline-flex;align-items:center;gap:.6em;
  padding:.85em 1.4em;border:0;border-radius:100px;cursor:pointer;
  background:var(--paper);color:var(--ink);
  font-family:var(--ko);font-weight:600;font-size:clamp(13px,1.05vw,16px);letter-spacing:-.02em;
  transition:gap .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);
}
.gsm .th-btn svg{width:1.05em;height:1.05em;flex:none}
.gsm .th-btn:hover{gap:1em;transform:translateY(-2px)}
.gsm .th-btn:focus-visible{outline:2px solid var(--paper);outline-offset:4px}

/* 조각 자리는 스크립트가 프레임마다 직접 넣는다. CSS 전환을 걸지 않는다 */
.gsm .burst{
  list-style:none;margin:0;padding:0;
  position:absolute;left:0;top:0;width:0;height:0;z-index:2;pointer-events:none;
}
.gsm .burst li{
  position:absolute;left:0;top:0;color:var(--paper);
  width:clamp(18px,2vw,30px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.2);
  will-change:transform,opacity;
}
.gsm .burst svg{width:100%;height:100%;display:block}

.gsm .th-ov h3{
  font-family:var(--ko);font-weight:700;font-size:var(--fs-label);
  letter-spacing:-.01em;color:var(--paper);
}
.gsm .th-ov p{margin-top:1em;color:rgba(255,255,255,.72);font-size:var(--fs-body);line-height:1.7}
.gsm .th-ov .th-pow{margin-top:.5em;color:var(--paper);font-weight:600;letter-spacing:-.01em}
.gsm .th-copy{
  font-family:var(--en);font-weight:400;color:rgba(255,255,255,.55);
  font-size:var(--fs-small);line-height:1.7;letter-spacing:-.005em;
}

/* ── 모션 ─────────────────────────────────────────── */
.gsm [data-rise]{opacity:0}
.gsm [data-rise].is-in{opacity:1}
.gsm [data-blur]{opacity:0}
.gsm [data-blur].is-in{opacity:1}
.gsm .gw{display:inline-block;will-change:filter,opacity}

/* 읽어 나가는 글 (Motion Lab · mask-read) */
@property --mask-position{syntax:"<number>";inherits:false;initial-value:-40}
.gsm [data-read]{
  --mask-position:-40;
  -webkit-mask-image:linear-gradient(100deg,
    rgba(0,0,0,1) calc(var(--mask-position) * 1%),
    rgba(0,0,0,.16) calc(var(--mask-position) * 1% + 26%));
  mask-image:linear-gradient(100deg,
    rgba(0,0,0,1) calc(var(--mask-position) * 1%),
    rgba(0,0,0,.16) calc(var(--mask-position) * 1% + 26%));
}

@media (prefers-reduced-motion:reduce){
  .gsm [data-rise],.gsm [data-blur]{opacity:1}
  .gsm .gw{filter:none !important;opacity:1 !important}
  .gsm [data-read]{-webkit-mask-image:none;mask-image:none}
  .gsm .cnt > .rise{transform:none;transition:none}
  .gsm [data-zoom]{transform:none}
  .gsm .visit{transition:none}
  .gsm .sc-acc .ac,.gsm .sc-acc .ac-t span{transition:none}
  .gsm .th-btn{transition:none}
  /* 움직임을 줄여 달라고 한 사람에게는 터뜨리지 않고 한 줄로 보여 준다 */
  .gsm .burst{
    position:static;width:auto;height:auto;margin-top:var(--gap-m);
    display:grid;grid-template-columns:repeat(6,max-content);gap:var(--gap-s);
  }
  .gsm .burst li{position:static;transform:none;opacity:1}
  #gsm-intro{display:none}
  .gsm .widen-wrap img{width:100%;border-radius:0}
}

/* ── 좁은 화면 ────────────────────────────────────── */
@media (max-width:1100px){
  .gsm .keys{grid-template-columns:minmax(0,1fr);gap:var(--gap-m)}
  .gsm .pal{grid-template-columns:minmax(0,1fr)}
  .gsm .sw i{height:clamp(96px,22vw,180px)}
}
@media (max-width:1100px){
  .gsm .th-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gsm .th-head{grid-column:1 / -1}
}
@media (max-width:900px){
  .gsm .cols{grid-template-columns:minmax(0,1fr)}
  .gsm .spec{grid-template-columns:minmax(0,1fr)}
  .gsm .th-in{grid-template-columns:minmax(0,1fr)}
  .gsm .widen-wrap img{width:84%}
  .gsm .mo{grid-template-columns:minmax(0,1fr);gap:var(--gap-m);max-width:380px}
  .gsm .reel{aspect-ratio:1600/1200}
  .gsm .reel img{width:94%}
}
@media (max-width:620px){
  .gsm .fact{grid-template-columns:minmax(0,1fr);gap:6px}
  .gsm .chips{grid-template-columns:repeat(5,1fr)}
  .gsm .widen-wrap img{width:100%;border-radius:8px}
}