@charset "UTF-8";

/* ============================================================
   THE JAEMI — 공통 스타일
   시안 기준 아트보드: 1920px
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --blue:        #3B79E8;
  --blue-dark:   #2A63CB;
  --blue-light:  #EAF1FD;
  --ink:         #191919;
  --ink-soft:    #333333;
  --gray-900:    #111111;
  --gray-700:    #555555;
  --gray-500:    #888888;
  --gray-300:    #D5D5D0;
  --gray-100:    #F3F4ED;
  --white:       #FFFFFF;

  --brand-red:    #EE3124;
  --brand-yellow: #FDB913;
  --brand-green:  #00A651;

  --header-h: 84px;
  --shell:    1720px;

  /* 타이포 스케일 — 사이트 전체 글자 크기를 이 8단계로 통일한다 */
  --fs-h1:      clamp(30px, 2.9vw, 54px);  /* 페이지 대표 제목 */
  --fs-h2:      clamp(26px, 2.3vw, 42px);  /* 섹션 제목 */
  --fs-h3:      clamp(19px, 1.6vw, 29px);  /* 카드·항목 제목 */
  --fs-h4:      clamp(16px, 1.3vw, 23px);  /* 작은 카드 제목 */
  --fs-lead:    clamp(18px, 1.5vw, 27px);  /* 강조 리드 문장 */
  --fs-body:    clamp(16px, 1.25vw, 22px); /* 본문 */
  --fs-body-sm: clamp(14px, 1.05vw, 19px); /* 카드 본문·보조 설명 */
  --fs-caption: clamp(12px, .9vw, 15px);   /* 라벨·태그·캡션 */

  /* 여백 스케일 — 섹션 사이/제목-콘텐츠 사이 간격을 한곳에서 조절한다 */
  --gap-section:       clamp(88px, 8.8vw, 180px);
  --gap-section-tight: clamp(64px, 6.4vw, 128px);
  --gap-block:         clamp(38px, 3.6vw, 70px);

  --radius:   14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
/* picture 는 WebP 를 앞세우려고 img 를 감싸기만 하는 껍데기다. 인라인 상자로
   남겨 두면 감싸는 것만으로 배치가 달라진다 — 플렉스 칸에서는 img 대신
   picture 가 칸이 되고, 블록 자리에서는 줄상자만큼 여백이 붙는다.
   상자를 없애 img 가 감싸기 전과 똑같은 자리에 놓이게 한다.
   (렌타히어로 페이지는 game-rentahero.css 의 .rh-media picture 가 더
   구체적이라 그쪽 규칙을 그대로 지킨다.) */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.65;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(24px, 7.6vw, 170px);
}
.shell--narrow { max-width: 1200px; }

.section { padding-block: var(--gap-section); }
.section--tight { padding-block: var(--gap-section-tight); }
.section--soft { background: var(--gray-100); }

/* 배경 장식(시안의 회색 화살표/사각/+ 도형)
   도형은 시안에서 추출한 PNG 를 그대로 쓴다. 회전은 이미지에 이미 반영돼 있어
   transform 은 걸지 않는다. */
.deco { position: relative; overflow: hidden; }
.deco > * { position: relative; z-index: 1; }
.deco::before,
.deco::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.deco::before {
  width:  clamp(230px, 30vw, 470px);
  height: min(clamp(230px, 30vw, 470px), 76%);
  top: 6%; right: 4vw;
  background-image: url("../images/홈페이지_디자인-08.png");
}
.deco::after {
  width:  clamp(90px, 11vw, 150px);
  height: min(clamp(90px, 11vw, 150px), 30%);
  bottom: 6%; left: 4vw;
  background-image: url("../images/홈페이지_디자인-09.png");
}
/* 같은 도형·같은 크기가 세로로 반복되지 않도록
   섹션마다 도형과 크기를 함께 돌려 쓴다.
   height 상한(%)도 자리마다 다르게 준다 — 상한이 전부 같으면 섹션이 짧을 때
   큰 도형들이 모두 같은 값으로 깎여 크기 차이가 사라진다. */
.deco:nth-of-type(2n)::before {
  width:  clamp(290px, 36vw, 560px);
  height: min(clamp(290px, 36vw, 560px), 88%);
  top: 5%; right: 2vw;
  background-image: url("../images/홈페이지_디자인-09.png");
}
.deco:nth-of-type(2n)::after {
  width:  clamp(115px, 14vw, 190px);
  height: min(clamp(115px, 14vw, 190px), 38%);
  bottom: 8%; left: 6vw;
  background-image: url("../images/홈페이지_디자인-08.png");
}
.deco:nth-of-type(3n)::before {
  width:  clamp(150px, 18vw, 260px);
  height: min(clamp(150px, 18vw, 260px), 48%);
  top: 8%; right: 6vw;
  background-image: url("../images/홈페이지_디자인-08.png");
}
.deco:nth-of-type(3n)::after {
  width:  clamp(220px, 27vw, 420px);
  height: min(clamp(220px, 27vw, 420px), 68%);
  bottom: 5%; left: 2vw;
  background-image: url("../images/홈페이지_디자인-09.png");
}
/* 회색(--gray-100) 배경 섹션에서는 도형 색이 배경과 거의 같아 묻힌다.
   이미지를 살짝 어둡게 눌러 형태가 보이게 한다. */
.deco--soft::before, .deco--soft::after { filter: brightness(.96); }

/* ---------- Typography ---------- */
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--blue);
  text-transform: uppercase;
}
.h-sec {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.h-lead {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.35;
  color: var(--blue);
  text-align: center;
}
.t-body {
  font-size: var(--fs-body);
  color: var(--gray-700);
  line-height: 1.9;
}
.t-small {
  font-size: var(--fs-caption);
  color: var(--gray-500);
  line-height: 1.8;
}
.center { text-align: center; }
.blue { color: var(--blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 34px;
  border-radius: 999px;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--ghost {
  border: 1.5px solid var(--gray-900);
  color: var(--gray-900);
  background: var(--white);
}
.btn--ghost:hover { background: var(--gray-900); color: var(--white); }

.btn--solid { background: var(--blue); color: var(--white); }
.btn--solid:hover { background: var(--blue-dark); }

.btn--line {
  border: 1.5px solid var(--gray-300);
  color: var(--gray-700);
  background: var(--white);
}
.btn--line:hover { border-color: var(--gray-900); color: var(--gray-900); }

.btn--pill-sm {
  min-height: 40px;
  padding: 0 22px;
  font-size: var(--fs-caption);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--gray-700);
  background: var(--white);
}
.btn--pill-sm:hover { border-color: var(--gray-900); color: var(--gray-900); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 76px);
  height: var(--header-h);
}
.site-logo { flex: 0 0 auto; }
.site-logo img { height: clamp(26px, 2.1vw, 38px); width: auto; }

.gnb { flex: 1 1 auto; }
.gnb__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3.1vw, 58px);
}
.gnb__link {
  display: block;
  padding: 6px 2px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(13px, .95vw, 16px);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.gnb__link:hover { color: var(--white); }
.gnb__link[aria-current="page"] { color: var(--white); }
.gnb__link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 5px;
  background: var(--blue);
  border-radius: 2px;
}

/* ---- GAMES 하위 메뉴 ----
   마우스를 올리거나(:hover) 키보드 포커스가 들어오면(:focus-within) 펼쳐진다.
   JS 를 쓰지 않는 이유는 스크립트가 실패해도 메뉴가 동작해야 하기 때문이다.

   키보드로도 닿는다 — GAMES 링크에 포커스가 가는 순간 부모가 :focus-within 이
   되어 메뉴가 보이고, 그 다음 Tab 부터 하위 링크로 들어간다. 그래서 메뉴를
   숨길 때 display:none 이 아니라 visibility:hidden 을 쓴다. display:none 이면
   하위 링크가 접근성 트리에서 통째로 빠져 Tab 순서에도 오르지 못한다.

   칸 높이를 헤더 높이로 맞춰 둔 것도 이유가 있다. 이 li 가 글자 높이만큼만
   차지하면 top:100% 가 헤더 한가운데가 되어, 메뉴가 헤더 안쪽에 걸쳐 뜨고
   링크와 메뉴 사이에 마우스가 지나갈 틈이 생겨 hover 가 끊긴다. */
.gnb__item--sub {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
}
.gnb__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  min-width: 190px;
  padding: 8px 0;
  translate: -50% 6px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--ease), translate .18s var(--ease), visibility .18s;
}
.gnb__item--sub:hover .gnb__sub,
.gnb__item--sub:focus-within .gnb__sub {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}
.gnb__sub-link {
  display: block;
  padding: 9px 20px;
  color: rgba(255, 255, 255, .76);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.gnb__sub-link:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
.gnb__sub-link[aria-current="page"] { color: var(--white); }
/* "전체 보기" 는 게임 하나가 아니라 목록으로 가는 줄이라, 선 하나로 갈라 둔다 */
.gnb__sub-link--all {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 22px; height: 2px;
  background: var(--white);
  transition: background .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: var(--white);
  transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 언어 전환 KO / EN ----------
   메뉴(.gnb__list) 안에 넣지 않고 그 옆에 따로 세운다. 메뉴는 좁은 화면에서
   햄버거 안으로 접히는데, 언어 단추까지 같이 접히면 영어로 들어온 사람이
   화면을 두 번 눌러야 한국어로 돌아온다. 언어는 늘 보이는 자리에 있어야 한다.

   글자는 KO / EN 대문자 두 자다. 국기 그림을 쓰지 않는 이유는 언어와 나라가
   같지 않아서다 — 영어를 미국 국기로 세우면 영국·싱가포르에서 읽는 사람에게
   틀린 말이 된다.

   <a> 가 아니라 <button> 이다. 주소를 옮기는 것이 아니라 지금 페이지의 글자를
   바꾸는 일이라서다. (주소의 ?lang= 은 js/i18n.js 가 뒤따라 맞춰 둔다.) */
.lang-switch {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.lang-switch__btn {
  padding: 6px 7px;
  color: rgba(255, 255, 255, .55);
  font-size: clamp(12px, .88vw, 14px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.lang-switch__btn:hover { color: rgba(255, 255, 255, .9); }
/* 지금 보고 있는 언어. 색만으로 알리지 않고 굵기까지 함께 올린다 —
   색을 구분하기 어려운 사람에게 흐린 흰색과 밝은 흰색은 같은 글자다.
   읽는 기계에는 aria-pressed 가 같은 말을 한다(js/i18n.js 가 갱신). */
.lang-switch__btn.is-on {
  color: var(--white);
  font-weight: 900;
}
.lang-switch__sep {
  color: rgba(255, 255, 255, .3);
  font-size: 12px;
  user-select: none;
}

/* ============================================================
   Page banner (서브 페이지 상단 파란 띠)
   ============================================================ */
.page-banner { background: var(--blue); }
.page-banner__inner {
  display: flex;
  align-items: center;
  min-height: clamp(100px, 8.4vw, 164px);
}
.page-banner__title {
  color: var(--white);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: .01em;
}

/* ============================================================
   Home — Lede (대형 카피)
   ============================================================ */
.lede {
  padding-block: 0;
}
.lede__title {
  font-size: clamp(26px, 4.3vw, 76px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.045em;
  color: var(--gray-900);
}
.lede__title-muted { color: #B4B4B4; }

.lede__text {
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  letter-spacing: -0.02em;
  color: var(--gray-700);
}
.lede__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1vw, 16px);
  margin-top: clamp(26px, 2.9vw, 54px);
}
.lede__actions .btn { min-height: clamp(48px, 3.9vw, 66px); padding-inline: clamp(24px, 2.2vw, 40px); }

/* ---------- Lede 키 비주얼 (가로 그라데이션 위에 텍스트) ---------- */
.lede__visual {
  position: relative;
  background: var(--white);
  overflow: hidden;
  isolation: isolate;
}
/* 위아래를 살짝 넘치게 깔아 원본 하단의 저작권 문구를 잘라낸다 */
.lede__visual-img {
  position: absolute;
  top: -9%;
  left: 0;
  right: 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: 74% 42%;
}
/* 좌 → 우 가로 그라데이션: 왼쪽을 옅게 덮어 글자 뒤로 그림이 함께 비치게 */
.lede__visual-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 30%,
      rgba(255,255,255,.80) 50%,
      rgba(255,255,255,.45) 68%,
      rgba(255,255,255,.12) 84%,
      rgba(255,255,255,0) 96%);
}
.lede__visual-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(430px, 46vw, 840px);
  padding-block: clamp(40px, 5vw, 96px);
}
/* 제목은 <br> 로 줄을 잡으므로 폭 제한 없이, 본문/버튼만 폭을 제한한다 */
.lede__visual-body .lede__text,
.lede__visual-body .lede__actions { max-width: 46ch; }
.lede__visual-body .lede__text { margin-top: clamp(20px, 2.2vw, 42px); }

/* ============================================================
   Home — Key art
   ============================================================ */
.hero {
  position: relative;
  background: #0d0d16;
  overflow: hidden;
}
.hero__media {
  width: 100%;
  height: clamp(220px, 30vw, 560px);
  object-fit: cover;
  object-position: center 42%;
}

/* ============================================================
   Home — Intro
   ============================================================ */
.intro { text-align: center; }
/* 원본 2101x985 (2.13:1) 벡터 — height:auto 로 비율 고정 */
.intro__logo {
  width: clamp(200px, 18vw, 320px);
  height: auto;
  margin: 0 auto clamp(22px, 2vw, 34px);
}
.intro__tagline {
  font-size: var(--fs-lead);
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.intro__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: clamp(20px, 2vw, 34px);
}
.intro__text {
  font-size: var(--fs-body);
  color: var(--gray-700);
  line-height: 2.1;
  /* 가운데 정렬이라 마지막 줄만 짧게 남으면 문단이 기울어 보인다. balance 는
     줄 수를 늘리지 않고 각 줄 길이만 고르게 나눈다 — 지원하지 않는 브라우저는
     이 줄을 무시하고 평소대로 접는다. */
  text-wrap: balance;
}
.intro__text + .intro__text { margin-top: 1.4em; }
.intro__cta { margin-top: clamp(28px, 2.6vw, 46px); }

/* ============================================================
   Home — Games showcase (다크 밴드 + IP 배지 카드)
   ============================================================ */
.gband {
  background: #0E1016;
  color: var(--white);
}
.gband__head { max-width: 68ch; }
.gband__eyebrow { color: #7FB0FF; margin-bottom: 12px; }
.gband__title { color: var(--white); }
.gband__lead {
  margin-top: 14px;
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  color: rgba(255, 255, 255, .6);
}

/* --- 카드 공통 --- */
.gcard {
  display: block;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.gcard:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 121, 232, .6);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
}
.gcard__thumb {
  /* 키 아트 원본 비율(1600×574)에 맞춰 로고·캐릭터가 잘리지 않게 한다 */
  aspect-ratio: 1600 / 574;
  overflow: hidden;
  background: #000;
}
.gcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.gcard:hover .gcard__thumb img { transform: scale(1.05); }
/* 액션캣은 786×311 배너(2.53:1)로 다시 바꿨다. 카드 비율(2.79:1)과 거의 같아
   높이의 9%만 잘리고, 로고가 왼쪽 가운데에 있어 크롭 보정이 필요 없다.
   기존의 object-position 보정은 세로로 길던 원본 키 아트(1600×839)용이었으므로
   제거했다 — 그대로 두면 그림이 위로 밀린다. */
/* 아스트로픽스는 메인 카드와 games.html 배너가 같은 그림(1672×941, 16:9)을 쓴다.
   카드 비율(2.79:1)이 훨씬 납작해 높이의 36%가 잘리는데, 로고가 왼쪽 위에 있어
   가운데 기준으로 두면 로고가 날아간다. 기준점을 위로 올린다.
   값은 .game-banner--astropix 와 같은 18% — 두 화면이 같아 보여야 한다.
   (카드 2.787:1, 배너 2.786:1 로 비율이 사실상 같아 같은 값이 그대로 맞는다.) */
.gcard--astropix .gcard__thumb img { object-position: center 18%; }
/* 스페이스 콜로니도 같은 1672×941 그림이라 높이의 36%가 잘린다. 제목이 그림
   위쪽(y 164~296)에 있어 가운데(50%)로 두면 위에서만 170px 를 잘라 제목
   윗변이 날아간다. 35% 는 위에서 119px 만 자른다는 뜻이라 제목이 다 남고
   위에 여백도 생긴다. 아스트로픽스(18%)보다 큰 값인 이유는 이 그림의 제목이
   그만큼 아래에 있어서다 — 두 값이 다른 것은 실수가 아니다.
   35% 보다 줄이지 말 것 — :hover 의 scale(1.05) 이 위쪽을 14px 더 먹는다. */
.gcard--spacecolony .gcard__thumb img { object-position: center 35%; }
.gcard__body { padding: clamp(28px, 2.4vw, 44px); }
/* 제목 뒤에 붙는 작품명 — 이름 한가운데서 접히지 않게 한 덩어리로 묶는다.
   메인 CLIENT WORKS 의 두 칸은 "강남 미래교육센터 XR 콘텐츠" 까지가 같아서
   작품명으로 구분한다. 그 이름이 "뉴포머 / 탐험대" 로 갈라지면 구분하려고
   붙인 이름이 오히려 안 읽힌다. em 대시 앞에서만 접힌다. */
.gcard__name-work { white-space: nowrap; }

.gcard__name {
  margin-top: 20px;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.4;
}
.gcard__en {
  margin-top: 7px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .38);
}
.gcard__desc {
  margin-top: 16px;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  color: rgba(255, 255, 255, .68);
}
.gcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 1.7vw, 30px);
}
.gtag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
}

/* --- IP 구분 배지 --- */
.ipbadge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .78);
}
.ipbadge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ipbadge--own     { color: #7FB0FF; border-color: rgba(127, 176, 255, .42); background: rgba(59, 121, 232, .12); }
.ipbadge--license { color: #FFC94A; border-color: rgba(253, 185, 19, .40); background: rgba(253, 185, 19, .10); }
.ipbadge--partner { color: #4BD08B; border-color: rgba(75, 208, 139, .42); background: rgba(0, 166, 81, .12); }
.ipbadge--client  { color: #B4BCC9; border-color: rgba(255, 255, 255, .20); background: rgba(255, 255, 255, .05); }

/* --- 대표 카드 (렌타히어로) --- */
.gcard--feature {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  margin-top: var(--gap-block);
}
.gcard--feature .gcard__thumb {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(230px, 21vw, 370px);
}
.gcard--feature .gcard__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(34px, 3.4vw, 76px);
}
/* 렌타히어로 키 아트(2400×1072, 2.24:1)는 로고가 왼쪽 위 구석에 새겨져 있다.
   대표 카드의 그림칸은 그보다 세로로 길어(1440px 화면에서 1.64:1) cover 로
   깔면 좌우가 잘리는데, 가운데 기준이면 왼쪽이 13% 날아가 로고가
   'NTA / ERO Z' 로 잘려 읽힌다. 기준점을 왼쪽 끝으로 옮겨 로고를 살린다.
   잘리는 쪽은 오른쪽 인물이 된다. */
.gcard--feature .gcard__thumb img { object-position: left center; }
.gcard--feature .gcard__name { font-size: var(--fs-h2); }
.gcard--feature .gcard__en { font-size: var(--fs-caption); }
.gcard--feature .gcard__desc {
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: 1.9;
}

/* --- 3열 그리드 --- */
.gcards--trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 56px);
  margin-top: clamp(28px, 3vw, 56px);
}
.gcard--compact .gcard__name { font-size: var(--fs-h4); }
.gcard--compact .gcard__desc {
  font-size: var(--fs-body-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- CLIENT WORKS 서브 블록 --- */
.gband__sub {
  margin-top: clamp(58px, 5.4vw, 106px);
  padding-top: clamp(40px, 3.6vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.gband__sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gband__subtitle {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .55);
}
.gband__more {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  transition: color .25s var(--ease);
}
.gband__more:hover { color: #7FB0FF; }

/* ============================================================
   Home — Partners & Track Record (구 ABOUT 페이지 요약)
   ============================================================ */
.record__head { padding-top: 18px; border-top: 1px solid var(--gray-300); }
.record__head .eyebrow {
  color: var(--gray-500);
  letter-spacing: .18em;
  margin-bottom: 14px;
}

.record__partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 3vw, 58px) clamp(30px, 4vw, 90px);
  margin-top: clamp(40px, 3.6vw, 72px);
  padding-top: clamp(34px, 3.2vw, 62px);
  border-top: 2px solid var(--ink);
}
.record__partner-name {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* 회사명을 로고 이미지로 대체한 경우 — 옆 칸의 텍스트 회사명과 눈높이가 맞도록
   제목 글자 크기에 준하는 높이로 제한한다. */
.record__partner-logo {
  display: block;
  max-width: min(100%, 220px);
  max-height: clamp(24px, 2.2vw, 40px);
  object-fit: contain;
  object-position: left center;
}
.record__partner-desc {
  margin-top: 10px;
  font-size: var(--fs-body-sm);
  color: var(--gray-700);
}

.record__list { margin-top: clamp(46px, 4.2vw, 84px); }
.record__item {
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 120px) 1fr;
  gap: clamp(14px, 1.6vw, 30px);
  align-items: baseline;
  padding-block: clamp(20px, 1.9vw, 34px);
  border-top: 1px solid var(--gray-300);
}
.record__item:last-child { border-bottom: 1px solid var(--gray-300); }
.record__year {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gray-500);
}
.record__title {
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.45;
}
.record__desc {
  margin-top: 8px;
  font-size: var(--fs-body-sm);
  color: var(--gray-700);
  line-height: 1.75;
}

/* 연혁 한 줄 — 왼쪽 달, 오른쪽 내용 ------------------------------------
   .record__item 의 두 칸(연도 | 내용) 안에서 다시 두 칸으로 나눈다. 한 해에
   여러 건이 붙는 해(2017 은 넉 건)가 있어서, 달을 앞에 세워 두지 않으면 어느
   줄이 언제인지 읽히지 않는다.

   달 칸의 폭을 em 으로 고정하고 tabular-nums 를 쓰는 이유 — 숫자 폭이 글자마다
   다르면 09 와 12 의 오른쪽 끝이 어긋나 내용 줄의 시작점이 들쭉날쭉해진다.

   [.record__title / .record__desc 는 남겨 둔다] 이 자리에 있던 다섯 줄 요약이
   쓰던 규칙이다. 지금 index.html 은 안 쓰지만 RentaHeroZ_preview.html(단일 파일
   빌드본)이 아직 그 짜임을 갖고 있어, 지우면 그 파일의 이 구역이 무너진다. */
.record__line {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: clamp(10px, 1vw, 20px);
  align-items: baseline;
}
.record__line + .record__line { margin-top: clamp(10px, .9vw, 16px); }
.record__month {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.record__event {
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  color: var(--ink-soft);
}
/* 좁은 화면에서는 달을 내용 위로 올린다 — 2.6em 을 떼고 나면 남는 폭이
   너무 좁아 한 줄짜리 문구가 서너 줄로 접힌다. */
@media (max-width: 620px) {
  .record__line { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   Home — Values (더재미가 일하는 방식)
   ============================================================ */
/* 메인 '일하는 방식'(.values)과 리크루트 '찾는 동료'(.who)는 같은 구성이므로
   간격까지 한 규칙으로 묶어 두 페이지가 동일하게 보이도록 한다. */
.values,
.who {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 60px);
  /* 섹션 제목과 아이콘이 붙어 보이지 않도록 기본 간격보다 넓게 */
  margin-top: clamp(58px, 5.4vw, 106px);
}
.value { text-align: center; }
/* 아이콘 — 메인 '일하는 방식'과 리크루트 '찾는 동료'가 함께 쓴다.
   원본 그림의 가로/세로 비가 0.73~1.63 으로 제각각이라, 정사각 박스에 contain 으로
   넣으면 가로로 넓은 그림일수록 높이가 확 줄어 크기가 달라 보인다.
   높이만 맞추면 넓적한 그림이 빈약해 보이고, 칠해진 면적만 맞추면 높이가 들쭉날쭉해진다.
   그래서 이미지 파일 쪽에서 두 기준을 절충한 여백을 넣어 두었고(캔버스 세로 패딩),
   여기서는 항상 '높이'가 기준이 되도록 박스를 가로로 넉넉하게(세로의 1.3배) 잡는다.
   1.3 은 가장 넓은 캔버스 비율(1.21)보다 커서 가로가 먼저 닿는 일이 없다. */
.value__icon,
.who__icon {
  display: block;
  max-width: 100%;
  margin: 0 auto clamp(24px, 2vw, 38px);
  object-fit: contain;
}
/* 리크루트 '찾는 동료' */
.who__icon {
  height: clamp(100px, 9.2vw, 170px);
  width:  clamp(130px, 12vw, 221px);     /* = 높이 × 1.3 */
}
/* 메인 '일하는 방식' — 리크루트 '찾는 동료'와 같은 높이로 맞춘다.
   가로 여유(1.125배)는 원본 캔버스 비율이 달라 그대로 둔다. */
.value__icon {
  height: clamp(96px, 9vw, 170px);
  width:  clamp(108px, 10.1vw, 191px);   /* = 높이 × 1.125 */
}
/* 숫자 배지 — 메인 '일하는 방식'과 리크루트 '찾는 동료'가 함께 쓴다.
   지름은 기존 아이콘 높이와 동일하게 맞춰 레이아웃이 흔들리지 않게 한다. */
.value__num {
  display: grid;
  place-items: center;
  width:  clamp(140px, 13vw, 240px);
  height: clamp(140px, 13vw, 240px);
  margin: 0 auto clamp(24px, 2vw, 38px);
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  font-size: clamp(40px, 3.6vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.value__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.35;
  margin-bottom: 8px;
}
.value__desc {
  font-size: var(--fs-body);
  color: var(--gray-700);
  line-height: 1.9;
}

/* ============================================================
   Home — News
   ============================================================ */
.news {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 1.9vw, 36px);
  /* LATEST NEWS 제목과 카드 사이를 넓게 */
  margin-top: clamp(58px, 5.4vw, 106px);
}
.news__card { display: block; }
.news__thumb {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-100);
}
.news__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.news__card:hover .news__thumb img { transform: scale(1.05); }
.news__title {
  margin-top: 18px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Contact form (홈 / ABOUT / CLIENT WORKS 공통)
   ============================================================ */
.contact__head { margin-bottom: var(--gap-block); }
.contact__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.contact__slogan {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 20px;
}
.contact__desc {
  font-size: var(--fs-body);
  color: var(--gray-700);
  line-height: 1.9;
}
.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.1vw, 18px);
  max-width: 1240px;
  margin-inline: auto;
}
.field { width: 100%; }
.field--full { grid-column: 1 / -1; }
.field input,
.field textarea {
  width: 100%;
  padding: clamp(18px, 1.4vw, 26px) clamp(20px, 1.6vw, 30px);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  font-size: var(--fs-body);
  color: var(--gray-900);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: clamp(150px, 12vw, 210px); resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--gray-500); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 121, 232, .14);
}
/* 벌레잡이 칸은 화면에서 완전히 뺀다. visibility 나 투명도로 감추면
   자동 프로그램이 "보이는 칸" 으로 읽고 채워 버려 덫이 되지 않는다. */
.contact__botcheck{display:none}

/* 개인정보 수집·이용 동의 줄. 보내기 단추 바로 위에 둔다 — 누르기 직전에
   읽히는 자리다. .field 를 쓰지 않는 이유는 .field input 이 width:100% 라
   체크박스가 입력칸처럼 가로로 늘어나 버리기 때문이다. */
.contact__consent{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:4px;
  font-size:var(--fs-body-sm);
  line-height:1.7;
  color:var(--gray-700);
}
.contact__consent input[type="checkbox"]{
  flex:none;
  width:20px;
  height:20px;
  margin-top:4px;
  accent-color:var(--blue);
  cursor:pointer;
}
.contact__consent label{cursor:pointer}
.contact__consent b{color:var(--brand-red);font-weight:700}
.contact__consent a{text-decoration:underline}
/* 수집 항목 · 이용 목적 · 보유 기간. 법이 고지를 요구하는 내용이라 뺄 수 없고,
   본문과 같은 크기로 두면 폼이 글 덩어리로 보인다. 한 줄 아래에 작게 접어 둔다. */
.contact__consent-detail{
  display:block;
  margin-top:4px;
  font-size:calc(var(--fs-body-sm) * .88);
  color:var(--gray-500);
}

/* 보내기 결과 줄. 비어 있을 때는 자리를 차지하지 않는다 —
   빈 줄만큼 단추 아래가 벌어지면 눌리지 않은 폼이 어색해 보인다. */
/* 보내기 결과 문구. 버튼 '아래'에 온다 — 예전에는 .contact__submit 이 가로
   flex 라 문구가 버튼 옆에 붙어 버튼을 밀어냈다. 세로로 쌓으면 버튼은
   가운데 그대로 있고 문구만 아래에서 나타났다 사라진다. */
.contact__status{
  margin-top:0;
  font-size:var(--fs-body-sm);
  line-height:1.7;
  color:var(--gray-700);
  text-align:center;
}
.contact__status:empty{display:none}
.contact__status[data-kind="done"]{color:var(--blue);font-weight:700}
.contact__status[data-kind="fail"]{color:var(--brand-red);font-weight:700}
/* 갔으면 갔다고 눈에 띄게 알린다 */
.contact__status[data-kind="done"]::before{content:"\2713\00a0"}

.contact__submit {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
/* 입력칸 글자가 커진 만큼 전송 버튼도 함께 키운다 */
.contact__submit .btn {
  min-height: 62px;
  padding: 0 46px;
  font-size: var(--fs-body);
}
.form-note {
  grid-column: 1 / -1;
  font-size: var(--fs-caption);
  color: var(--gray-500);
  text-align: center;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .85);
  /* 위아래를 일부러 다르게 준다. 로고와 회사 정보는 띠의 위쪽에 붙여 두고,
     남는 여백은 아래로 보낸다 — 가운데에 띄워 놓으면 본문에서 눈이 내려오다
     한 번 더 멈춘다. 아래쪽은 화면 끝이 받쳐 주므로 비어 있어도 허전하지 않다.
     1440px 에서 위 95px / 아래 104px, 바 전체 265px. */
  padding-top: clamp(66px, 6.6vw, 96px);
  padding-bottom: clamp(68px, 7.2vw, 106px);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 76px);
  flex-wrap: wrap;
  justify-content: center;
}
/* height:auto 를 반드시 함께 둔다 — img 의 width/height 속성은 css 의 width/height 를
   낮은 우선순위로 지정하는 것과 같다. 여기서 width 만 덮어쓰면 height 는 속성값(985px)이
   그대로 남아 푸터가 통째로 늘어난다. */
.site-footer__logo { width: clamp(126px, 9.8vw, 162px); height: auto; flex: 0 0 auto; }
/* min-width:0 이 없으면 플렉스 칸이 제 내용보다 작아지지 못해, 좁은 화면에서
   칸이 줄어드는 대신 오른쪽으로 밀려난다. */
.site-footer__info { font-size: var(--fs-caption); line-height: 1.9; min-width: 0; }
.site-footer__row { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 2vw, 38px); }
.site-footer__label { font-weight: 700; margin-right: 10px; }
.site-footer__addr { color: rgba(255, 255, 255, .6); }
/* 로고 옆에 회사 정보를 두기엔 폭이 모자라는 구간. 위아래로 쌓아 글자가
   한 줄을 온전히 쓰게 한다 — 억지로 한 줄에 붙이면 주소가 잘린다. */
@media (max-width: 600px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* 320~360px 에서는 전화와 메일이 한 줄에 들어가지 않는다. flex-wrap 만으로는
   두 번째 칸이 넘어가 주지 않아 메일 주소가 화면 밖으로 잘린다 — 줄을 나눠 준다. */
@media (max-width: 360px) {
  .site-footer__row { flex-direction: column; gap: 2px; }
}

/* 정책 버튼 줄 */
.policy-links {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  /* 위는 띄우고 아래는 붙인다. 이 줄은 문의 폼(또는 약관 본문)이 끝난 뒤
     따라붙는 부속이라, 위가 붙어 있으면 '문의 보내기' 단추와 한 덩어리로
     읽힌다. 반대로 아래는 푸터에 가까울수록 '페이지를 닫는 줄'로 보인다. */
  padding-top: clamp(48px, 8vw, 124px);
  padding-bottom: clamp(12px, 1.2vw, 22px);
}
/* 정책 링크로 끝나는 섹션은 아래 여백을 줄여 푸터에 붙인다. 섹션 기본값
   (--gap-section, 1440px 에서 127px)을 그대로 두면 알약과 푸터 사이가
   허전하게 벌어진다. :has 를 못 읽는 옛 브라우저는 기본값을 그대로 쓰므로
   넓게 보일 뿐 깨지지는 않는다. */
.section:has(> .shell > .policy-links) {
  padding-bottom: clamp(40px, 4vw, 80px);
}

/* ============================================================
   POLICY (개인정보 취급 방침 등 약관 문서)
   ============================================================ */
.policy-doc__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 56px);
}
.policy-doc {
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  color: var(--ink-soft);
}
.policy-doc p { margin-bottom: 2px; }
.policy-doc p:last-child { margin-bottom: 0; }
.policy-doc h3 {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--gray-900);
  margin-top: clamp(30px, 2.6vw, 52px);
  margin-bottom: 6px;
}
/* 원본 언어 고지 — 약관 · 개인정보처리방침 · 청소년보호정책 세 장의 본문 맨 위.
   본문보다 한 단 작고 흐리게 두되, 왼쪽 세로선으로 본문과 구분한다.
   본문과 같은 무게로 두면 제1조처럼 읽히고, 더 흐리게 두면 안 읽힌다 —
   법적 효력을 가르는 문장이라 안 읽히면 있으나 마나다. */
.policy-doc__origin {
  margin-bottom: 18px;
  padding: 10px 0 10px 14px;
  border-left: 3px solid var(--gray-300, #d9d9d9);
  color: var(--gray-600, #6b6b6b);
  font-size: .9375rem;
  line-height: 1.65;
}
.policy-doc__sub { font-weight: 700; color: var(--gray-900); margin-top: 14px; }
.policy-doc__indent  { padding-left: 1.2em; }
.policy-doc__indent2 { padding-left: 2.4em; }
.policy-doc__indent3 { padding-left: 3.6em; }

/* ============================================================
   ABOUT
   ============================================================ */
.manifesto { text-align: center; }
.manifesto__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.03em;
  margin-bottom: clamp(20px, 2vw, 36px);
}
.manifesto__lead {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 2.1;
  letter-spacing: -0.03em;
}
.manifesto__lead + .manifesto__lead { margin-top: .6em; }
.manifesto__note {
  margin-top: clamp(26px, 2.4vw, 46px);
  font-size: var(--fs-body-sm);
  color: var(--gray-700);
  line-height: 1.95;
}
.manifesto__closing {
  margin-top: clamp(26px, 2.4vw, 46px);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--blue);
  line-height: 1.85;
  letter-spacing: -0.03em;
}
.manifesto strong { font-weight: 800; color: var(--gray-900); }

/* History timeline */
.history { margin-top: var(--gap-block); }
.history__list {
  --hy: clamp(52px, 5vw, 88px);   /* 연도 칼럼 */
  --hd: 22px;                     /* 타임라인(점) 칼럼 */
  --hm: clamp(28px, 2.6vw, 46px); /* 월 칼럼 */
  --hg: clamp(12px, 1.4vw, 26px); /* 칼럼 간격 */
  position: relative;
  max-width: 1060px;
  margin-inline: auto;
}
.history__list::before {
  content: "";
  position: absolute;
  top: 18px; bottom: 18px;
  left: calc(var(--hy) + var(--hg) + (var(--hd) / 2));
  width: 3px;
  margin-left: -1.5px;
  background: var(--blue);
  border-radius: 3px;
}
.history__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--hy) var(--hd) var(--hm) 1fr;
  gap: 0 var(--hg);
  align-items: start;
  padding-block: clamp(8px, .78vw, 15px);
}
.history__year {
  text-align: right;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.55;
}
.history__dot { position: relative; }
.history__dot--on::before {
  content: "";
  position: absolute;
  left: 50%;
  top: .72em;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--gray-100);
}
.history__month {
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.55;
}
.history__desc {
  font-size: var(--fs-body-sm);
  color: var(--gray-900);
  line-height: 1.6;
  padding-top: .12em;
}

/* ============================================================
   GAMES
   ============================================================ */
.game-list {
  display: grid;
  gap: clamp(48px, 4.6vw, 92px);
}
.game-banner {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0e0e12;
  aspect-ratio: 1482 / 532;
  position: relative;
  /* 위에 얹는 글자가 배너 폭을 따라 커지고 줄게 하는 갈고리다.
     vw 를 쓰면 배너가 본문 폭에서 멈춘 뒤에도 글자만 계속 커진다. */
  container-type: inline-size;
}
/* picture 는 그림이 아니라 껍데기다 — 자리만 채우고, 자르기와 확대는
   그 안의 img 가 맡는다(스페이스 콜로니만 avif 를 먼저 건다). */
.game-banner picture { display: block; width: 100%; height: 100%; }
.game-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.game-banner:hover img { transform: scale(1.03); }
/* 스페이스 콜로니 키 아트는 2.53:1 이라 배너(2.79:1)에서 위아래로 9.3% 만
   잘린다. 크롭 기준점 30% 는 그중 위쪽이 2.8% 만 잘린다는 뜻이다 —
   글자가 그림 위쪽에 있어 그쪽을 아껴 둔다. */
.game-banner--spacecolony img { object-position: center 30%; }
.game-banner--astropix    img { object-position: center 18%; }
/* 렌타히어로 키 아트는 2.24:1 이라 배너(2.79:1)에서 위아래로 19.6% 가 잘린다.
   가운데(50%)로 자르면 위에서만 9.8% 가 날아가는데, 로고가 그림 맨 위 0.8%
   지점부터 시작해서 RENTA 의 머리가 잘려 나간다. 12% 는 위에서 2.4% 만
   자른다는 뜻이라 로고가 통째로 남는다.
   12% 보다 키우지 말 것 — :hover 의 scale(1.03) 이 위쪽을 1.2% 더 먹는다.
   25% 로 두면 그 상태에서 로고 윗변이 배너 모서리에 닿는다. */
.game-banner--rentahero   img { object-position: center 12%; }

/* 배너 위에 얹는 작품 이름 ------------------------------------------
   상세 페이지 히어로(.sc-hero__logo)와 같은 글자, 같은 색, 같은 비율이다.
   두 곳이 달라 보이면 같은 작품으로 읽히지 않는다.

   세로 값이 히어로(15%)와 다른 이유 — 여기서는 그림 위쪽이 2.8% 잘리고
   남은 높이가 90.7% 다. (15 - 2.8) / 90.7 = 13.5% 가 같은 자리다. */
.game-banner__logo {
  position: absolute;
  left: 9.8%;
  top: 13.5%;
  text-align: center;
  pointer-events: none;
  color: #FDC33C;
  transition: transform .7s var(--ease);
}
/* 그림이 확대될 때 글자만 제자리에 있으면 따로 떠 있는 판처럼 보인다. */
.game-banner:hover .game-banner__logo { transform: scale(1.03); }
.game-banner__logo-ko {
  display: block;
  white-space: nowrap;      /* 원화처럼 한 줄로 — 접히면 로고가 아니게 된다 */
  font-size: 5.6cqw;
  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);
}
.game-banner__logo-en {
  display: flex;
  align-items: center;
  gap: .9em;
  margin-top: .85em;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 1.6cqw;
  letter-spacing: .42em;
  text-indent: .42em;       /* 자간이 뒤에도 붙어 생기는 쏠림을 되돌린다 */
  text-transform: uppercase;
  white-space: nowrap;
  color: #E8B439;
}
.game-banner__logo-en::before,
.game-banner__logo-en::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,#E8B439);
}
.game-banner__logo-en::after {
  background: linear-gradient(90deg,#E8B439,transparent);
}

/* 배너 위에 얹는 로고 그림 (캐치블록) --------------------------------
   위의 .game-banner__logo 는 글자를 얹는 갈래고, 이쪽은 만들어진 로고 파일을
   그대로 얹는 갈래다. 캐치블록 키 아트는 공식 키 아트에서 로고 아래만 잘라낸
   판이라 그림 안에 제목이 없다 — 목록에서 이 칸만 이름 없이 서는 것을 막는다.

   [width/height 를 되돌리는 이유] 위 .game-banner img 규칙이 배너 안의 모든
   img 를 100%×100% cover 로 늘린다. 그 규칙은 배경 그림용이라, 여기서 되돌리지
   않으면 로고가 배너 전체로 늘어나 뭉개진다. 선택자를 .game-banner 로 한 번 더
   묶은 것도 그 규칙(0,1,1)을 이기기 위해서다.

   [자리] 왼쪽, 가운데보다 조금 위. 이 그림은 가운데에 주인공 셋이 서 있고 좌우
   끝에만 작은 몬스터가 흩어져 있어서, 왼쪽이 제목을 얹어도 가장 덜 가리는 자리다.
   정확히 가운데(50%)에 두면 두 가지가 어긋난다 — 분홍머리 캐릭터의 얼굴에 '!' 가
   닿고, 위아래 배너(레전다이노·액션캣)의 로고보다 눈에 띄게 아래로 처져 목록이
   층층이 어긋나 보인다. 44% 가 그 둘을 함께 푸는 자리다.
   폭은 컨테이너 질의(cqw)가 아니라 %(배너 폭 기준)로 잡는다 — 배너 자체가
   기준이라 둘이 같은 값이 되고, 이미 % 로 잡힌 위 규칙들과 갈래를 맞춘다.
   19% 보다 키우면 다시 캐릭터에 닿는다. */
/* 캐치블록 배너 — 그림·그늘·로고를 한 장으로 다루기 ------------------
   옆 배너(레전다이노·액션캣)는 로고가 키 아트에 구워져 있다. 캐치블록 키 아트는
   공식 키 아트에서 "로고 아래"만 잘라낸 판이라 그림 안에 제목이 없어서, 로고를
   따로 얹는다. 얹되 한 장처럼 보여야 한다 — 그래서 세 겹을 껍데기 하나에 담고
   껍데기째 움직인다.

     .game-banner__art          껍데기 — :hover 확대는 여기에만 건다
       └ img                    배경 키 아트            (z 0)
       └ ::before               왼쪽 그늘               (z 1)
       └ img.game-banner__mark  로고                    (z 2)

   [왜 껍데기가 필요한가] 확대를 배경 img 에만 걸면 로고는 제 중심에서 저 혼자
   커진다. 한 장이었다면 로고도 배너 중심을 기준으로 바깥으로 밀려나야 하는데
   그러지 않으니, 확대되는 순간 그림과 로고가 두 장으로 갈라져 보인다.
   껍데기를 키우면 안쪽 세 겹이 같은 중심으로 함께 움직여 그 어긋남이 없다.

   [그늘도 껍데기 안에 둔다] 그늘은 배너를 꽉 채우는(inset:0) 그라데이션이라
   3% 커져도 눈에 띄지 않고, 밖에 두면 확대 때 그늘만 제자리에 남아 다시
   갈라진다.

   [z-index 를 반드시 적을 것] :hover 에서 껍데기에 transform 이 붙으면 쌓임
   맥락이 생긴다. 그 안에서 세 겹의 순서는 z-index 로만 정해진다 — 안 적으면
   DOM 순서에 끌려가 로고가 그늘 밑으로 들어가거나 그림이 그늘을 덮는다. */
.game-banner__art {
  display: block;
  position: absolute;
  inset: 0;
  transition: transform .7s var(--ease);
}
.game-banner:hover .game-banner__art { transform: scale(1.03); }

/* 안쪽 그림들은 스스로 커지지 않는다 — 껍데기가 통째로 키운다.
   위의 .game-banner:hover img (0,2,1) 을 꺼야 해서 :not() 으로 한 칸 올렸다.
   로고는 자리를 잡아 두는 translateY(-50%) 가 있어 여기서 제외한다. */
.game-banner--catchblock:hover .game-banner__art img:not(.game-banner__mark) {
  transform: none;
}

/* 왼쪽 그늘 --------------------------------------------------------------
   이 키 아트는 왼쪽까지 주황·분홍이 꽉 차 있어서 로고를 그냥 얹으면 글자와
   그림이 같은 밝기로 엉켜 읽히지 않는다. 로고에 검은 테두리가 있어도 배경이
   밝으면 테두리만으로는 경계가 서지 않는다.
   그림 전체를 덮는 게 아니라 왼쪽 끝만 짙고 오른쪽으로 가며 투명해진다 —
   가운데 주인공 셋이 서 있는 자리(40%)에서 완전히 사라진다.
   옆 배너는 덧칠이 없으므로, 짙게 하면 이 칸만 어두워져 목록에서 혼자 튄다. */
.game-banner__art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(24,14,32,.46) 0%,
    rgba(24,14,32,.34) 14%,
    rgba(24,14,32,.12) 28%,
    rgba(24,14,32,0)   40%);
}

/* 배경 키 아트 */
.game-banner__art > img { position: relative; z-index: 0; }

/* 얹는 로고 --------------------------------------------------------------
   [width/height 를 되돌리는 이유] 위 .game-banner img 규칙이 배너 안의 모든
   img 를 100%x100% cover 로 늘린다. 그 규칙은 배경 그림용이라, 되돌리지 않으면
   로고가 배너 전체로 늘어나 뭉개진다.

   [자리] 왼쪽 위. 옆 배너(레전다이노·액션캣)의 로고도 그 자리에 있어서, 목록을
   훑을 때 제목 높이가 층층이 어긋나지 않는다. 가운데 주인공 셋은 피한다.
   23% 보다 키우면 분홍머리 캐릭터 얼굴에 '!' 가 닿는다. */
.game-banner .game-banner__mark {
  position: absolute;
  left: 3.8%;
  top: 27%;
  z-index: 2;
  width: 23%;
  height: auto;             /* .game-banner img 의 100% 를 되돌린다 */
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
  /* 로고 자체에 검은 테두리가 있지만, 아래 그림이 밝은 주황·분홍이라
     테두리만으로는 경계가 묻힌다. 그림자로 한 겹 띄운다. */
  filter: drop-shadow(0 .10em .28em rgba(0,0,0,.45));
}
/* 로고는 껍데기를 따라 커질 뿐, 스스로는 아무 변형도 하지 않는다.
   이 규칙이 없으면 위의 .game-banner:hover img (0,2,1) 이 로고에도 걸려
   scale(1.03) 으로 덮이고, 자리를 잡아 두던 translateY(-50%) 가 날아가면서
   로고가 아래로 튄다. 선택자에 img 를 붙여 (0,3,1) 로 올려 둔다. */
.game-banner:hover img.game-banner__mark { transform: translateY(-50%); }

/* 끌어당겨도 그림이 뜯어지지 않게 --------------------------------------
   브라우저는 <img> 를 기본으로 끌 수 있는 것으로 본다. 이 칸은 배경 그림과
   로고가 서로 다른 요소라, 배경만 끌리면 로고가 제자리에 남아 둘이 어긋난
   채 유령 이미지가 따라다닌다 — 한 장처럼 보이던 것이 두 장으로 갈라진다.
   그림뿐 아니라 <a> 자체도 막는다. 링크는 기본으로 끌 수 있어서, 그림을
   막고 나면 이번에는 링크가 끌리며 같은 유령 이미지가 따라 나온다.
   실제로 그림만 막았을 때 dragstart 의 target 이 A 로 바뀌어 증상이 남았다.
   HTML 의 draggable="false" 와 한 벌이다 — CSS 만으로는 파이어폭스가
   막히지 않고, 속성만으로는 사파리가 남는다. */
.game-banner--catchblock,
.game-banner--catchblock img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 액션캣은 배너 이미지(2.53:1)라 이 비율에 거의 맞는다 — 보정 불필요
   (css .gcard--actioncat 주석 참고). */

/* 페이지 상단 소개 블록 (GAMES & WORKS) */
.works__head { margin-bottom: clamp(40px, 3.6vw, 72px); }
.works__head .eyebrow { margin-bottom: 12px; }
.works__lead {
  margin-top: 16px;
  font-size: var(--fs-body);
  color: var(--gray-700);
  line-height: 1.9;
}

/* 밝은 배경에서 쓰는 IP 배지 (다크 밴드용 색을 반전) */
.game-block .ipbadge {
  justify-self: start;
  margin-bottom: 4px;
  border-color: var(--gray-300);
  background: var(--gray-100);
  color: var(--gray-700);
}
.game-block .ipbadge--own {
  color: var(--blue-dark);
  background: var(--blue-light);
  border-color: rgba(59, 121, 232, .3);
}
.game-block .ipbadge--license {
  color: #8A6100;
  background: #FFF4DC;
  border-color: rgba(253, 185, 19, .5);
}
.game-block .ipbadge--partner {
  color: #00713A;
  background: #E4F6EC;
  border-color: rgba(0, 166, 81, .32);
}

.game-block { display: grid; gap: clamp(18px, 1.6vw, 30px); }
.game-block__meta { display: grid; gap: 6px; }
.game-block__name {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.game-block__desc {
  font-size: var(--fs-body-sm);
  color: var(--gray-700);
  line-height: 1.8;
}
.game-block__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .01em;
}

/* ============================================================
   CLIENT WORKS
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.6vw, 30px);
  margin-top: var(--gap-block);
}
.svc {
  position: relative;
  min-height: clamp(210px, 18vw, 320px);
  padding: clamp(24px, 2.2vw, 42px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
}
.svc--blue   { background: #3B79E8; }
.svc--purple { background: #C04CE8; }
.svc--pink   { background: #E8598E; }
.svc--blue2  { background: #3B79E8; }
.svc__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.4;
  margin-bottom: clamp(14px, 1.2vw, 22px);
  text-align: center;
}
.svc__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: clamp(32px, 2.4vw, 42px);
  padding: 0 clamp(16px, 1.3vw, 24px);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-900);
  font-size: var(--fs-caption);
  font-weight: 700;
  margin-inline: auto;
  transition: transform .25s var(--ease);
}
.svc__head { display: grid; justify-items: center; }
.svc:hover .svc__btn { transform: translateY(-2px); }
/* 카드 하단으로 흘러나오는 아트워크 */
.svc__art {
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 56%;
  object-fit: cover;
  object-position: center 30%;
  pointer-events: none;
}
/* [.svc__art--wide 를 걷어낸 이유] AR/VR 칸의 그림은 원래 배경이 비치는
   컷아웃이라 contain 으로 통째로 보여 주던 자리다. 지금 파일
   (images/cw-metaverse.png, 800x250)은 배경이 꽉 찬 네모난 스크린샷이라,
   contain 으로 두면 그림이 카드 가운데에 작게 떠 좌우로 보라색 여백이
   남는다 — 옆 세 칸은 그림이 카드 아래를 꽉 채우고 있어 이 칸만 덜 만든
   것처럼 보였다. 나머지 칸과 같은 .svc__art 로 맞춰 아래를 채운다.
   다시 컷아웃 그림으로 갈아 끼우면 이 규칙을 되살려야 한다. */
/* 단일 캐릭터 컷아웃 — 오른쪽 아래 정렬 */
.svc__art--figure {
  left: auto;
  width: 48%;
  height: 82%;
  object-fit: contain;
  object-position: bottom right;
}

/* XR 프로젝트 */
.work-list { display: grid; gap: clamp(16px, 1.6vw, 30px); margin-top: var(--gap-block); }
/* 카드 자체가 상세 페이지로 가는 링크다(<a>). <a> 는 기본이 inline 이라
   display:block 을 주지 않으면 aspect-ratio 도 position 도 먹지 않는다.
   글자색·밑줄은 카드 안에서 따로 정하므로 상속만 시킨다. */
.work-card {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0e0e12;
  aspect-ratio: 1482 / 460;
}
.work-card img { width: 100%; height: 100%; object-fit: cover; }
.work-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
}
.work-card__caption {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 1.7vw, 34px);
  right: clamp(18px, 1.7vw, 34px);
  bottom: clamp(16px, 1.5vw, 30px);
  color: var(--white);
}
.work-card__name {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.work-card__name-work { opacity: .82; font-weight: 500; }
.work-card__desc {
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, .8);
  max-width: 60ch;
}

/* 파트너 로고 */
.partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 26px);
  margin-top: var(--gap-block);
}
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(96px, 8.6vw, 156px);
  padding: 16px 20px;
  border: 1px solid #ECECE6;
  border-radius: 10px;
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--fs-body-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.partner:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
/* 로고 이미지로 교체한 타일 — 크기를 '눈에 보이는 무게' 로 맞춘다.

   로고는 비율도 제각각이고(1.17:1 가벗 ~ 7.46:1 서울경제진흥원) 그림 성격도
   제각각이라, 높이나 폭 하나로 맞추면 반드시 어딘가 어긋난다. 세 번에 걸쳐
   드러난 문제와 그 처리는 이렇다.

   1) 폭으로 맞추면 가로로 긴 로고가 눌린다
      예전 규칙은 max-width 70% + 높이 상한이었다. 그러면 가로로 긴 로고일수록
      폭에서 먼저 막혀 높이가 짓눌린다 — Meta 가 27px, 대원미디어가 31px 로
      눌려 옆 타일보다 확연히 작아 보였다. 그래서 높이·폭이 아니라 면적을 맞춘다.

   2) 파일 안에 여백이 구워져 있다
      캔버스 면적을 맞춰도 LINE NEXT 는 여전히 작아 보였다. 재보니 파일의 73%가
      빈 여백이었다(485x185 중 글자는 397x62). 가벗 55%, SEGA 38%,
      OVER THE HAND 35% 도 마찬가지였다. 그래서 로고 원본에서 투명·흰 여백을
      실제로 잘라냈다. 이제 파일 크기 = 글자 크기이므로 여백은 아래 타일 padding
      하나로만 결정된다. 로고를 새로 넣을 때도 여백을 잘라서 넣어야 한다.

   3) 획이 가늘고 성긴 로고는 같은 면적이어도 가벼워 보인다
      웅진씽크빅은 색종이가 흩뿌려져 잉크 밀도가 20.8%, BASED 는 꽉 찬 워드마크라
      69.1% 로 3.3배 차이났다. 그래서 밀도로 한 번 더 보정한다.

     밀도 보정  f = (밀도 중앙값 40.7% / 이 로고 밀도) ^ 0.5   (0.80~1.35 로 제한)
     목표 면적  A = 6000 * f
     높이       = sqrt(A / 비율)
     --k        = 그 높이 / 기준높이(54.7px @1440)

   지수 0.5 는 '면적을 맞춤(0)' 과 '잉크 양을 맞춤(1)' 의 중간이다. 1 로 두면
   가는 선 로고가 지나치게 커지고, 0 이면 위 3) 이 그대로 남는다.
   제한 0.80~1.35 는 어느 로고도 혼자 튀지 않게 하는 안전선이다.

   로고를 새로 넣거나 갈면 그 파일의 가로/세로와 잉크 밀도를 재서 위 식에
   넣으면 된다. max-width 94% 는 타일을 넘지 않게 하는 마지막 안전선이다. */
.partners { --logo-h: clamp(40px, 3.8vw, 66px); }
.partner__logo {
  height: calc(var(--logo-h) * var(--k, 1));
  width: auto;
  max-width: 94%;
  object-fit: contain;
}
.partner__logo--sega          { --k: 0.727; }   /* SEGA 2.34:1 */
.partner__logo--linenext      { --k: 0.504; }   /* LINE NEXT 2.62:1 */
.partner__logo--meta          { --k: 0.640; }   /* Meta 4.53:1 */
.partner__logo--daewon        { --k: 0.589; }   /* 대원미디어 5.66:1 */
.partner__logo--superplanet   { --k: 0.786; }   /* SUPER PLANET 3.15:1 */
.partner__logo--stickyhands   { --k: 0.810; }   /* StickyHands 3.29:1 */
.partner__logo--woongjin      { --k: 1.550; }   /* 웅진씽크빅 1.90:1 — 위 식이 준 1.192 를
     손으로 올린 값이다. 이 로고는 위쪽 45% 가 색종이 장식이고 글자는 아래 절반에만
     몰려 있어(장식 구간 잉크량 5~24%, 글자 구간 25~48%), 테두리 상자를 기준으로 맞추면
     글자가 옆 타일보다 작게 읽힌다. 밀도 보정으로도 상한 1.35 에 걸려 더 크지 못했다.
     타일 안높이 91.8px 에 대해 84.8px 로, 넘치지 않는 선까지 키웠다. */
.partner__logo--nanali        { --k: 0.911; }   /* NANALI 2.49:1 */
.partner__logo--overthehands  { --k: 1.320; }   /* OVER THE HAND 2.99:1 — 식이 준 0.873 을 손으로
     올렸다. 네모 심볼과 2줄 글자 사이 여백이 넓고 획이 가늘어, 밀도 보정(31.5%)만으로는
     부족했다. 같은 줄에서 균형이 맞는 72px 로 올렸다. */
.partner__logo--based         { --k: 0.674; }   /* BASED 3.18:1 */
.partner__logo--gibut         { --k: 1.483; }   /* (주)가벗 2.59:1 */
.partner__logo--tmd           { --k: 0.568; }   /* TMD교육그룹 5.58:1 */
.partner__logo--kosmes        { --k: 1.060; }   /* 중소벤처기업진흥공단 2.83:1 — 식이 준 0.793 을
     손으로 올린 값이다. KOSME 워드마크 아래 기관명이 한 줄 더 붙은 2단 구조라 식대로면
     작게 읽혔다. 다만 획이 굵고 꽉 찬 로고(밀도 51.9%)라 높이를 같은 줄의 TIPA(80px)까지
     올리면 혼자 무겁게 튄다 — 한 단계 낮춘 58px 가 이 줄에서 맞는 자리다. */
.partner__logo--sba           { --k: 0.576; }   /* 서울경제진흥원 7.46:1 — 식이 준 0.497 을 손으로
     올렸다. 목록에서 가장 납작해(7.46:1) 높이가 아니라 폭 상한이 크기를 정하는 유일한 로고다.
     위 max-width 를 88%→94% 로 넓히고 그 끝(235px)까지 채워 높이를 27px→31px 로 올렸다.
     더 키우려면 타일 폭 자체가 넓어져야 한다. */
.partner__logo--tipa          { --k: 1.460; }   /* 중소기업기술정보진흥원 2.04:1 — 식이 준 1.107 을
     손으로 올렸다. 2단으로 쌓인 세로형이라 세로 여유가 많다. 타일 안높이 91.8px 에 대해
     80px 로, 웅진씽크빅과 같은 선까지 키웠다. */
.partner__logo--kocca         { --k: 0.659; }   /* 한국콘텐츠진흥원 3.81:1 */
.partner__logo--kised         { --k: 0.632; }   /* 창업진흥원 5.03:1 */

/* 특허·상표 등록증 격자 — 파트너 로고 타일과 같은 계열이지만 성격이 다르다.
   로고는 한눈에 알아보는 것이 목적이라 타일 안에서 contain 으로 작게 놓지만,
   등록증은 '문서'라는 인상 자체가 근거가 되므로 칸을 가득 채워 종이처럼 세운다.
   A4 비율(1:1.414)을 aspect-ratio 로 고정해, 스캔 원본의 여백 차이와 무관하게
   아홉 장이 같은 크기의 종이로 줄을 맞춘다. */
.certs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 1.6vw, 30px);
  margin-top: var(--gap-block);
}
.cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cert__link {
  display: block;
  width: 100%;
  border: 1px solid #ECECE6;
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cert__link:hover,
.cert__link:focus-visible {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(25, 25, 25, .10);
}
.cert__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.414;
  /* 스캔본 위아래에 흰 여백이 남은 장이 섞여 있어 contain 으로 두면 장마다
     문서 크기가 달라 보인다. cover 로 채우고 위쪽을 기준으로 잘라, 어느 장이든
     제목과 등록번호가 있는 윗머리가 먼저 보이게 한다. */
  object-fit: cover;
  object-position: top center;
}
.cert__name {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.45;
  color: var(--gray-700);
  text-align: center;
  word-break: keep-all;
}

/* ============================================================
   RECRUIT
   ============================================================ */
/* 인트로 문구('세상을 더 재미있게 만들어갈 플레이어를 찾습니다.')는 페이지를 대표하는
   문장이라 섹션 제목(h2) 단계에서 대표 제목(h1) 단계로 한 칸 키운다.
   같은 .manifesto__title 을 쓰는 ABOUT·CLIENT WORKS 는 h2 그대로 둔다. */
.page-recruit .manifesto__title { font-size: var(--fs-h1); }
/* 바로 뒤에 붙는 소개 문단도 한 단계 키워 '강조 리드' 단계로 올린다.
   인접 형제 선택자라 같은 페이지의 다른 .t-body(채용 절차 안내문)는 영향받지 않는다. */
.page-recruit .manifesto__title + .t-body { font-size: var(--fs-lead); }

/* 배경 장식 — 화살표(07)/사각형(08)/십자(09) 3종을 8개 자리에 돌려 쓰고,
   크기도 자리마다 다르게 준다. <main> 안 4개 섹션이 모두 .deco 라
   nth-of-type 으로 하나씩 지정할 수 있다. 공통 규칙보다 선택자가 구체적이고
   위치도 뒤라 그대로 덮어쓴다.
   height 의 min(..., %) 은 섹션 높이를 넘겨 도형이 잘리는 것을 막는 장치다. */
.page-recruit .deco:nth-of-type(1)::before {
  width:  clamp(240px, 32vw, 500px);
  height: min(clamp(240px, 32vw, 500px), 78%);
  top: 5%; right: 3vw;
  background-image: url("../images/홈페이지_디자인-07.png");
}
.page-recruit .deco:nth-of-type(1)::after {
  width:  clamp(90px, 11vw, 150px);
  height: min(clamp(90px, 11vw, 150px), 34%);
  bottom: 7%; left: 5vw;
  background-image: url("../images/홈페이지_디자인-08.png");
}
.page-recruit .deco:nth-of-type(2)::before {
  width:  clamp(150px, 19vw, 280px);
  height: min(clamp(150px, 19vw, 280px), 55%);
  top: 9%; right: 7vw;
  background-image: url("../images/홈페이지_디자인-09.png");
}
.page-recruit .deco:nth-of-type(2)::after {
  width:  clamp(200px, 25vw, 380px);
  height: min(clamp(200px, 25vw, 380px), 62%);
  bottom: 4%; left: 2vw;
  background-image: url("../images/홈페이지_디자인-07.png");
}
.page-recruit .deco:nth-of-type(3)::before {
  width:  clamp(300px, 38vw, 580px);
  height: min(clamp(300px, 38vw, 580px), 88%);
  top: 3%; right: 2vw;
  background-image: url("../images/홈페이지_디자인-08.png");
}
.page-recruit .deco:nth-of-type(3)::after {
  width:  clamp(70px, 9vw, 120px);
  height: min(clamp(70px, 9vw, 120px), 28%);
  bottom: 9%; left: 7vw;
  background-image: url("../images/홈페이지_디자인-09.png");
}
.page-recruit .deco:nth-of-type(4)::before {
  width:  clamp(120px, 15vw, 210px);
  height: min(clamp(120px, 15vw, 210px), 44%);
  top: 7%; right: 6vw;
  background-image: url("../images/홈페이지_디자인-07.png");
}
.page-recruit .deco:nth-of-type(4)::after {
  width:  clamp(230px, 29vw, 440px);
  height: min(clamp(230px, 29vw, 440px), 70%);
  bottom: 3%; left: 3vw;
  background-image: url("../images/홈페이지_디자인-08.png");
}

/* .who 의 그리드·간격은 메인의 .values 와 한 규칙으로 묶여 있다 */
/* 숫자 배지는 메인과 공유하는 .value__num 을 그대로 사용한다 */

.welfare {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.45fr);
  align-items: stretch;
  margin-top: var(--gap-block);
}
.welfare__photo {
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
  background: var(--gray-100);
  /* 1단으로 쌓이는 좁은 화면에서는 이 값이 사진 높이를 결정하므로,
     커진 텍스트 패널과 균형이 맞도록 함께 올린다. */
  min-height: clamp(300px, 26vw, 460px);
}
.welfare__photo img { width: 100%; height: 100%; object-fit: cover; }
.welfare__panel {
  display: grid;
  align-content: center;
  gap: clamp(24px, 2.5vw, 46px);
  padding: clamp(48px, 4.8vw, 96px);
  background: var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--white);
}
.welfare__panel li {
  /* 본문(--fs-body)보다 한 단계 큰 '강조 리드' 단계를 쓴다 */
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.02em;
  /* 동그라미와 글자를 두 칸으로 나눈다. padding 으로 밀지 않는 이유는
     항목이 두 줄로 넘어갈 때다 — 칸을 나눠 두면 넘어간 줄이 동그라미
     밑으로 파고들지 않고 첫 줄 글자 선에 맞춰 들여쓰인다. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(10px, .9vw, 16px);
}
/* 목록 앞 동그라미. 사이트의 다른 점 표시(.ipbadge::before)와 같은 방식으로
   currentColor 를 쓴다 — 패널 글자색이 바뀌면 점도 같이 따라간다. */
.welfare__panel li::before {
  content: "";
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: currentColor;
  /* 첫 줄 글자의 세로 가운데에 맞춘다. 줄상자가 1.75em 이므로 그 절반에서
     점 반지름을 뺀 만큼 내린다. 칸 위쪽에 붙여 두어야 두 줄짜리 항목에서도
     점이 첫 줄 옆에 남는다. */
  margin-top: calc((1.75em - .42em) / 2);
}

/* 채용 절차 */
.process {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 34px);
  margin-top: var(--gap-block);
  flex-wrap: wrap;
}
.process__step {
  /* 라벨만 있던 때보다 설명문 두어 줄이 더 들어가므로 칸을 넓게 잡는다 */
  flex: 0 1 clamp(150px, 14.5vw, 250px);
  text-align: center;
}
.process__icon {
  /* 단계 칸이 넓어져도 아이콘 크기는 그대로 두어 도식의 리듬을 유지한다 */
  width: clamp(72px, 6.6vw, 120px);
  height: clamp(72px, 6.6vw, 120px);
  margin: 0 auto clamp(10px, 1vw, 18px);
  color: var(--blue);
}
/* 네 이미지의 캔버스에 균형 보정 여백을 넣어 두어, 정사각 박스에 contain 으로
   맞추기만 하면 4단계 아이콘이 고르게 보인다. */
.process__icon img { width: 100%; height: 100%; object-fit: contain; }
.process__num {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.process__label {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.process__desc {
  margin-top: clamp(8px, .8vw, 14px);
  color: var(--gray-700);
  font-size: var(--fs-caption);
  line-height: 1.8;
  letter-spacing: -0.01em;
  /* 설명문은 단어 단위로 끊어, 한글 문장이 어색하게 잘리지 않게 한다 */
  word-break: keep-all;
}
.process__arrow {
  flex: 0 0 auto;
  /* 칸 높이가 설명문만큼 길어졌으므로, 화살표는 세로 가운데가 아니라
     아이콘 높이(최대 120px)의 절반 지점에 맞춘다 */
  align-self: flex-start;
  margin-top: clamp(30px, 3.3vw, 60px);
  color: var(--gray-300);
  font-size: clamp(18px, 1.8vw, 30px);
  line-height: 1;
  user-select: none;
}

.recruit-note {
  margin-top: clamp(28px, 2.6vw, 50px);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--gray-700);
  line-height: 1.85;
}
.recruit-cta { display: flex; justify-content: center; margin-top: clamp(26px, 2.4vw, 46px); }
.recruit-cta .btn { min-height: clamp(50px, 4vw, 66px); padding-inline: clamp(34px, 3.4vw, 62px); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-card {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(24px, 2.4vw, 46px);
  background: var(--gray-100);
  border-radius: var(--radius-lg);
}
.contact-card__map {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #C4C4C4;
}
.contact-card__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-card__dl {
  display: grid;
  grid-template-columns: clamp(72px, 7vw, 122px) 1fr;
  gap: clamp(12px, 1.2vw, 22px) clamp(14px, 1.4vw, 26px);
  margin-top: clamp(24px, 2.4vw, 44px);
}
.contact-card__dl dt {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: .01em;
}
.contact-card__dl dd {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.8;
}
.contact-card__dl a:hover { color: var(--blue); text-decoration: underline; }

/* 길찾기 줄 — 주소 바로 아래. 링크 셋과 단추 하나가 같은 모양이라
   무엇을 눌러도 같은 종류의 일이 일어난다는 것이 보인다.
   좁은 화면에서는 줄바꿈되어 두 줄로 접힌다. */
.contact-card__ways {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.contact-card__way {
  padding: 7px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--white);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.4;
  color: var(--gray-700);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.contact-card__way:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
/* 단추는 <button> 이라 글꼴과 커서를 링크와 같게 맞춰 준다 */
.contact-card__way--btn { font-family: inherit; cursor: pointer; }


/* ============================================================
   PRESS KIT — 로고
   ============================================================ */
.logo-kit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 40px);
}
/* 로고가 한 종류일 때 — 가운데 한 장으로 크게 보여준다 */
.logo-kit--single {
  grid-template-columns: 1fr;
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}
.logo-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* 로고를 얹는 무대 — 카드가 여러 장일 때도 로고 크기가 같아 보이도록 높이를 고정한다 */
.logo-card__stage {
  display: grid;
  place-items: center;
  min-height: clamp(180px, 17vw, 300px);
  padding: clamp(28px, 3vw, 56px);
  background: var(--white);
}
.logo-card__stage--dark { background: var(--ink); }
.logo-card__stage img {
  width: clamp(180px, 17vw, 300px);
  height: auto;
}
/* 한 장짜리 카드는 무대와 로고를 함께 키운다 */
.logo-kit--single .logo-card__stage { min-height: clamp(240px, 25vw, 440px); }
.logo-kit--single .logo-card__stage img { width: clamp(230px, 24vw, 420px); }
.logo-card__body {
  padding: clamp(20px, 1.9vw, 34px);
  border-top: 1px solid var(--gray-300);
}
.logo-card__name {
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* 폰에서는 대문 바로 아래 로고 구역(Intro)을 등장 애니메이션 없이 처음부터 보인다.
   스크롤해 내려오면 로고가 빈자리에서 뒤늦게 떠오르는 것이 어색하다는
   지적이 있었다(2026-09-15). PC 는 그대로 둔다. */
@media (max-width: 900px) {
  .intro.reveal { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .partners { grid-template-columns: repeat(3, 1fr); }
  .certs { grid-template-columns: repeat(4, 1fr); }
  .news { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --header-h: 62px; }

  /* margin-left 를 0 으로 되돌린다. 좁은 화면에서는 .gnb 가 통째로 접히므로
     오른쪽으로 미는 일은 언어 단추(.lang-switch) 하나가 맡는다. 햄버거까지
     margin-left:auto 를 갖고 있으면 남는 자리를 둘이 나눠 가져
     언어 단추가 화면 한가운데로 떠 버린다. */
  .nav-toggle { display: flex; margin-left: 0; }
  .site-header__inner { gap: 12px; }
  .gnb {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--ink);
    border-top: 1px solid rgba(255,255,255,.1);
    display: none;
  }
  .gnb.is-open { display: block; }
  .gnb__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
  }
  .gnb__link {
    padding: 14px clamp(24px, 7.6vw, 170px);
    font-size: 15px;
  }
  .gnb__link[aria-current="page"]::after { display: none; }

  /* 좁은 화면에서는 떠 있는 메뉴를 만들지 않는다. 메뉴 자체가 이미 펼쳐서 보는
     목록이라, 그 안에서 또 여닫게 하면 게임 하나를 고르는 데 두 번을 눌러야 한다.
     그래서 처음부터 들여쓴 채로 보여 준다 — 데스크톱의 숨김 값들을 여기서 되돌린다. */
  .gnb__item--sub { display: block; height: auto; }
  .gnb__sub {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 8px;
    translate: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }
  /* 데스크톱의 숨김(opacity/visibility)은 :hover 로만 풀린다. 좁은 화면에는
     hover 가 없으므로 여기서 확실히 되돌려 놓지 않으면 게임 이름이 통째로
     사라진 것처럼 보인다 — 손가락으로는 다시 꺼낼 방법이 없다. */
  .gnb__item--sub:hover .gnb__sub,
  .gnb__item--sub:focus-within .gnb__sub {
    translate: none;
  }
  .gnb__sub-link {
    padding: 12px clamp(24px, 7.6vw, 170px);
    font-size: 15px;
    color: rgba(255, 255, 255, .88);
  }
  /* 상위 항목과 같은 왼쪽 선에서 시작하되, 짧은 선을 앞에 붙여 하위임을 드러낸다.
     들여쓰기만으로 구분하면 화면 폭이 좁아질 때 그 차이가 사라진다. */
  .gnb__sub-link::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: rgba(255, 255, 255, .32);
  }
  .gnb__sub-link--all {
    margin-top: 0;
    padding-top: 11px;
    border-top: 0;
  }

  .gcard--feature { grid-template-columns: 1fr; }
  /* 좁은 화면에서는 16:9 로 깎지 않고 키 아트 원본 비율(2400×1072)을 그대로 쓴다.
     16:9 는 원본보다 세로로 길어 좌우를 20% 잘라내는데, 폰에서는 그 20% 가
     로고 한 덩어리다. 원본 비율이면 로고부터 오른쪽 인물까지 다 들어온다. */
  .gcard--feature .gcard__thumb {
    aspect-ratio: 2400 / 1072;
    height: auto;
    min-height: 0;
  }
  .gcards--trio { grid-template-columns: 1fr; }
  /* 모바일: 그림 전체를 덮던 스크림을 걷고, 제목+설명이 앉은 위쪽에만
     위→아래로 옅어지는 흰 그라데이션 하나를 깐다.
     예전에는 세로·가로 스크림을 겹쳐 그림 전체를 86~94% 흰색으로 덮었는데,
     폰에서는 그 때문에 키 비주얼이 거의 보이지 않았다(2026-09-15 지적).
     멈춤점(40% · 55% · 68%)은 한국어 제목 두 줄 + 설명 두 줄이 끝나는
     자리(대문 높이의 약 45%)에 맞췄다. 그 아래 단추 둘은 원래 흰 바탕이라
     그라데이션이 없어도 읽힌다. 문구 길이를 바꾸면 멈춤점도 다시 볼 것. */
  .lede__visual-img { object-position: 62% 40%; }
  .lede__visual-scrim {
    background: linear-gradient(180deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.88) 40%,
      rgba(255,255,255,.55) 55%,
      rgba(255,255,255,0) 68%);
  }
  /* 대문 그림의 높이는 '한국어 화면'을 기준으로 못 박는다.
     min-height 로 두면 그릇의 높이를 그 안의 글이 정하게 되는데, 언어를 EN 으로
     바꾸면 두 단추(Games we have made / Start a project)가 한 줄에 못 들어가
     두 줄로 접힌다. 그만큼 그릇이 늘고, 그 안에 깔린 키 비주얼도 같이 커진다 —
     KO/EN 을 오갈 때 그림 크기가 널뛰는 게 그 때문이다.
     그래서 height 로 고정해 어느 언어에서도 같은 크기가 되게 한다. 바닥값은
     둘 중 더 높은 EN 쪽(390px 폭에서 393px)이 잘리지 않도록 여유를 두고 잡았다.
     여기 값을 줄일 때는 EN 으로 바꿔 단추가 잘리지 않는지 반드시 같이 볼 것. */
  .lede__visual-body {
    height: clamp(420px, 78vw, 560px);
    justify-content: flex-start;
  }
  .lede__visual-body .lede__text,
  .lede__visual-body .lede__actions { max-width: none; }

  .values, .who { grid-template-columns: 1fr; gap: 34px; }
  .svc-grid { grid-template-columns: 1fr; }
  .partners { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(3, 1fr); }
  .contact__form { grid-template-columns: 1fr; }
  .welfare { grid-template-columns: 1fr; }
  .welfare__photo { border-radius: var(--radius) var(--radius) 0 0; }
  .welfare__panel { border-radius: 0 0 var(--radius) var(--radius); }
  .site-footer__inner { justify-content: flex-start; }
  .contact-card__dl { grid-template-columns: 1fr; gap: 4px 0; }
  .contact-card__dl dd { margin-bottom: 14px; }
  .policy-links { justify-content: center; }
  .deco::before, .deco::after { display: none; }

  /* 프레스킷: 로고 카드는 한 줄에 하나씩 */
  .logo-kit { grid-template-columns: 1fr; }

  /* 절차 4단계를 한 줄에 늘어놓기엔 설명문이 길어 2×2로 접는다 */
  .process { gap: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 30px); }
  .process__arrow { display: none; }
  .process__step { flex: 0 1 calc(50% - 20px); }
}

/* 좁은 화면에서 손가락으로 누를 자리를 확보한다. 손끝이 닿는 넓이는 보통
   44px 안팎이라, 글자 높이만 한 단추는 눌러도 빗나간다. 글자 크기는 그대로
   두고 padding 으로 누를 자리만 넓히므로 겉모습은 거의 바뀌지 않는다. */
@media (max-width: 900px) {
  .lang-switch { gap: 0; }
  .lang-switch__btn { padding: 16px 10px; }
  .site-logo { display: flex; align-items: center; padding-block: 9px; }
  .site-footer__row a { display: inline-block; padding-block: 8px; }
  .policy-links { gap: 2px 10px; }
  .policy-links a { padding-block: 8px; }
  /* 문단에 섞여 있지 않고 혼자 서 있는 링크들 — 여기도 손끝 넓이를 맞춘다 */
  .gband__more { padding-block: 12px; }
  .svc__btn { height: 44px; }  /* 높이가 못 박혀 있어 padding 으로는 넓어지지 않는다 */
}

@media (max-width: 700px) {
  /* 손으로 넣은 줄바꿈은 넓은 화면에서 문단의 균형을 잡으려고 둔 것이다.
     좁은 화면에서는 그 줄이 다시 접히면서 '글로벌로', '만들고,', '규칙 아래'
     처럼 낱말 한둘짜리 줄이 남는다 — 가운데 정렬이라 그 들쭉날쭉함이 훨씬
     크게 보인다. 그래서 좁은 화면에서는 줄바꿈을 지우고 문단이 스스로
     접히게 둔다. <br> 를 지워도 소스의 줄바꿈이 공백 한 칸으로 남으므로
     낱말이 서로 붙지 않는다.
     제목(.lede__title)의 줄바꿈은 남긴다 — 큰 글씨 두 줄은 그 자체가 짜임새고,
     좁은 화면에서도 두 줄이 그대로 꽉 찬다. */
  .lede__text br,
  .intro__text br,
  .value__desc br,
  .contact__desc br { display: none; }

  /* 대문의 두 단추(우리가 만든 게임 / 개발 의뢰하기)는 폰에서 본문 바로
     아래에 붙어 글과 한 덩어리로 읽힌다. 키 비주얼 안에서 눌러야 할 자리로
     또렷하게 떨어져 보이도록 본문과의 사이를 넓혀 아래로 내린다. */
  .lede__actions { margin-top: 52px; }

  /* balance 는 여기서 되돌린다. 줄이 넉 줄을 넘어가면 브라우저가 길이를 맞추려고
     '상위 1%' 와 '의 리텐션을' 사이처럼 끊어서는 안 될 자리를 고른다.
     좁은 화면은 그냥 접히게 두는 편이 낫다 — 위 br 을 지운 뒤로는
     그렇게만 해도 줄이 고르게 찬다. */
  .intro__text { text-wrap: wrap; }

  /* XR 카드는 3.2:1 짜리 가로 배너다. 폭이 390px 까지 좁아지면 카드 높이가
     110px 남짓으로 눌리는데, 그 위에 얹힌 제목과 설명은 그대로 120px 을
     넘는다 — 글이 그림 위로 흘러넘쳐 서로 겹쳐 읽히지 않는다. 그래서
     좁은 화면에서는 글을 그림 위에서 떼어 아래로 내려 쌓는다.
     games.html 의 같은 내용이 쓰는 방식과 같다. */
  .work-card { aspect-ratio: auto; }
  /* 잘라내지 않고 그대로 보여 준다. 이 그림들은 제목이 그림 안에 박혀 있어서,
     cover 로 폭을 맞추면 '아스트로픽스'처럼 왼쪽에 놓인 제목이 잘려 나간다. */
  .work-card img { aspect-ratio: auto; height: auto; object-fit: contain; }
  .work-card::after { display: none; }
  .work-card__caption {
    position: static;
    padding: 16px clamp(16px, 4.6vw, 22px) 20px;
  }
}

@media (max-width: 620px) {
  .certs { grid-template-columns: repeat(2, 1fr); }
  .news { grid-template-columns: 1fr; }

  /* 좁은 화면에서는 2×2도 설명문이 눌리므로, 아이콘을 왼쪽에 둔 세로 목록으로 바꾼다 */
  .process { display: grid; gap: 26px; }
  .process__step {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 16px;
    text-align: left;
  }
  .process__icon {
    grid-row: 1 / span 3;
    width: 64px;
    height: 64px;
    margin: 4px 0 0;
  }
  .history__list { --hy: 44px; --hd: 16px; --hm: 26px; --hg: 10px; }
  .history__dot--on::before { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
}

/* ── 메인화면 캐치블록 카드 : 그림 위에 로고를 얹는다 ────────────────────
   [로고를 되살렸다] 2026-08-27 에 한 번 뺐던 로고와 왼쪽 그늘을 다시 세운다.
   옆 카드는 로고가 키 아트에 구워져 있는데 이 그림만 제목이 없어서, 로고가
   없으면 목록에서 혼자 이름 없는 그림이 된다.
   games.html 의 .game-banner--catchblock 과 같은 갈래이고, 두 칸의 비율이
   사실상 같아(카드 1600/574 = 2.787:1, 배너 1482/532 = 2.786:1) 자리·크기
   값(%)을 그대로 옮겨 왔다 — 두 화면이 같아 보여야 한다.
   그늘은 로고 글자를 읽히게 하려고 깐 것이라 로고와 한 벌이다. 로고를 또
   빼게 되면 그늘도 함께 빼야 한다 — 그늘만 남으면 왼쪽이 어두운 띠로 남아
   그림이 잘린 것처럼 보인다.

   [틀 비율 따로 두던 줄을 걷어냈다 — 2026-08-27]
   예전 키 아트는 1920x665(2.887:1) 로 카드 공통 틀(1600/574 = 2.787:1)보다
   납작해서, 공통 틀에 넣으면 object-fit:cover 가 좌우를 각 3.5% 잘라냈다.
   왼쪽 새싹 캐릭터와 오른쪽 끝 몬스터가 가장자리에서 스쳐서, 이 칸만
   aspect-ratio:1920/665 로 두어 한 픽셀도 자르지 않게 했었다.

   키 아트가 1920x814(2.359:1) 로 바뀌면서 그 줄이 필요 없어졌다. 이제 그림이
   틀보다 세로로 기니까 cover 는 좌우가 아니라 위아래를 자른다 — 걱정하던
   가장자리 캐릭터는 좌우가 통째로 남아 오히려 온전하다. 잘리는 자리는 위아래
   각 62px 인데, 늘어난 자리에 있던 잘린 머리와 배경뿐이라 잃는 것이 없다.
   틀을 따로 두면 이 칸만 24px 높아져 옆 카드와 줄이 어긋난다(예전엔 5px 낮아지는
   정도였다). 그래서 공통 틀로 되돌린다.
   판을 또 갈 때, 새 그림이 2.787:1 보다 납작하면 다시 좌우가 잘리기 시작한다. */
/* [끌어서 떼어내지 못하게] 그림을 마우스로 끌면 브라우저가 반투명 복제본을
   들고 나간다. 그림에만 걸면 <a> 가 링크째 끌려 같은 증상이 남으므로
   카드 전체와 안쪽 그림 양쪽을 함께 막는다.
   html 의 draggable="false" 와 한 벌이다 - 한쪽만으로는 브라우저마다 샌다. */
.gcard--catchblock,
.gcard--catchblock .gcard__thumb img {
  -webkit-user-drag: none;
  user-select: none;
}

/* 그림·그늘·로고를 한 껍데기에 담는다 ------------------------------------
     .gcard__thumb              틀 — 자리·비율을 잡고 넘치는 것을 자른다
       └ .gcard__art            껍데기 — :hover 확대는 여기에만 건다
           └ img                배경 키 아트                 (z 0)
           └ ::before           왼쪽 그늘                    (z 1)
           └ img.gcard__mark    로고                         (z 2)

   확대를 배경 img 에만 걸면 로고는 제 중심에서 저 혼자 커져, 확대되는 순간
   그림과 로고가 두 장으로 갈라져 보인다. 껍데기를 키우면 안쪽 세 겹이 같은
   중심으로 함께 움직인다. 그늘도 껍데기 안에 둔다 — 밖에 두면 확대 때
   그늘만 제자리에 남아 다시 갈라진다.
   z-index 는 반드시 적을 것 — :hover 의 transform 이 쌓임 맥락을 만들어
   안 적으면 DOM 순서에 끌려 로고가 그늘 밑으로 들어간다.
   (games.html 의 .game-banner__art 와 같은 짜임새다.) */
.gcard--catchblock .gcard__thumb { position: relative; }
.gcard--catchblock .gcard__art {
  display: block;
  position: absolute;
  inset: 0;
  transition: transform .6s var(--ease);
}
.gcard--catchblock:hover .gcard__art { transform: scale(1.05); }
/* 안쪽 그림들은 스스로 커지지 않는다 — 껍데기가 통째로 키운다.
   위의 .gcard:hover .gcard__thumb img (0,2,1) 을 꺼야 해서 :not() 으로
   한 칸 올렸다. 로고는 자리를 잡아 두는 translateY(-50%) 가 있어 제외한다. */
.gcard--catchblock:hover .gcard__thumb img:not(.gcard__mark) { transform: none; }
.gcard--catchblock .gcard__art > img { position: relative; z-index: 0; }

/* 왼쪽 그늘 — 이 키 아트는 왼쪽까지 주황·분홍이 꽉 차 있어서 로고를 그냥
   얹으면 글자와 그림이 같은 밝기로 엉켜 읽히지 않는다. 왼쪽 끝만 짙고
   가운데 주인공 셋이 서 있는 자리(40%)에서 완전히 사라진다.
   옆 카드는 덧칠이 없으므로 짙게 하면 이 칸만 어두워져 혼자 튄다.
   값은 .game-banner__art::before 와 같다. */
.gcard--catchblock .gcard__art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(24,14,32,.46) 0%,
    rgba(24,14,32,.34) 14%,
    rgba(24,14,32,.12) 28%,
    rgba(24,14,32,0)   40%);
}

/* 얹는 로고 --------------------------------------------------------------
   [width/height 를 되돌리는 이유] 위 .gcard__thumb img 규칙이 틀 안의 모든
   img 를 100%x100% cover 로 늘린다. 그 규칙은 배경 그림용이라, 되돌리지
   않으면 로고가 카드 전체로 늘어나 뭉개진다.
   [자리] 왼쪽 위 — 옆 카드(레전다이노·액션캣)의 로고도 그 자리에 있어서
   목록을 훑을 때 제목 높이가 층층이 어긋나지 않는다. 가운데 주인공 셋은
   피한다. 23% 보다 키우면 분홍머리 캐릭터 얼굴에 '!' 가 닿는다. */
/* [선택자에 .gcard__art > img 를 붙인 이유] 바로 위의
   `.gcard--catchblock .gcard__art > img { position: relative; z-index: 0 }` 가
   (0,2,1) 이라 (0,2,0) 짜리 `.gcard--catchblock .gcard__mark` 의 position 을
   덮어썼다. 그러면 로고가 absolute 를 잃고 그림 아래 제 흐름대로 떨어져,
   overflow:hidden 인 틀 밖으로 밀려 화면에서 통째로 사라진다.
   실제로 그렇게 사라져 있었다 — 폰·PC 양쪽 모두. 한 칸 올려 되찾는다. */
.gcard--catchblock .gcard__art > img.gcard__mark {
  position: absolute;
  left: 3.8%;
  top: 27%;
  z-index: 2;
  width: 23%;
  height: auto;             /* .gcard__thumb img 의 100% 를 되돌린다 */
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
  /* 로고 자체에 검은 테두리가 있지만 아래 그림이 밝은 주황·분홍이라
     테두리만으로는 경계가 묻힌다. 그림자로 한 겹 띄운다. */
  filter: drop-shadow(0 .10em .28em rgba(0,0,0,.45));
}
/* 로고는 껍데기를 따라 커질 뿐 스스로는 아무 변형도 하지 않는다. 선택자에
   img 를 붙여 (0,3,1) 로 올려, 자리를 잡아 두는 translateY 가 날아가면서
   로고가 아래로 튀는 것을 막는다. */
.gcard--catchblock:hover img.gcard__mark { transform: translateY(-50%); }

/* 좁은 화면에서 로고를 키운다 ------------------------------------------
   넓은 화면의 23% 는 카드가 화면 폭을 통째로 쓰는 휴대폰에서 그대로 쓰면
   로고 실폭이 80px 남짓(글자 높이 약 20px)까지 줄어 '캐치블록!' 이 읽히지
   않는다 — 카드가 좁아질수록 %는 같아도 실제 픽셀이 줄어서다.
   옆 카드는 로고가 그림에 구워져 있어 같은 문제가 없다. 이 칸만 키운다.
   [값을 고른 근거] 폭 360px 화면에서 그림 높이는 360÷2.787 ≒ 129px.
   width:30% → 로고 108×60px, top:32% + translateY(-50%) 로 세로 11~71px 에
   앉는다. 위아래 어디도 넘지 않고 가운데 주인공 셋도 건드리지 않는다.
   더 키우면 로고 아래끝이 주인공 머리에 닿는다.
   그늘도 로고가 넓어진 만큼 오른쪽으로 늘린다 — 40% 에서 끊으면 넓어진
   로고의 오른쪽 절반이 다시 밝은 배경 위에 놓여 묻힌다. */
@media (max-width: 620px) {
  /* 선택자는 위 기본값과 같은 무게로 맞춘다 — .gcard__art > img 규칙 때문에
     기본값을 (0,3,1) 로 올렸으므로 여기도 같이 올리지 않으면 이 조정이 먹지 않는다. */
  .gcard--catchblock .gcard__art > img.gcard__mark {
    width: 24%;
    top: 30%;
    left: 4.5%;
  }
  .gcard--catchblock .gcard__art::before {
    background: linear-gradient(
      to right,
      rgba(24,14,32,.56) 0%,
      rgba(24,14,32,.44) 20%,
      rgba(24,14,32,.18) 38%,
      rgba(24,14,32,0)   52%);
  }
}