@charset "UTF-8";

/* ============================================================
   CATCH BLOCK! — 캐치블록! 게임 소개 페이지 전용 스타일
   공통 style.css 와 충돌하지 않도록 모든 클래스에 cb- 접두사를 붙인다.
   헤더·푸터는 사이트 공통(.site-header/.site-footer)을 그대로 쓴다.

   조형 언어 — 앞선 세 페이지와 겹치지 않게 잡았다.
     렌타히어로 Z  잉크 · 하프톤 코믹
     레전다이노    각진 홀로그램
     액션캣        스티커(굵은 검은 외곽선 + 단색 그림자) · 발자국
     캐치블록      >> 장난감 블록. 외곽선을 쓰지 않는다.
   대신 "면"으로 만든다 — 둥근 모서리 + 아래로 떨어지는 같은 색 계열의 짙은 밑면.
   플라스틱 블록을 위에서 살짝 내려다본 모양이다. 위쪽에 스터드(돌기) 두 개를
   얹으면 블록이라는 것이 한 번에 읽힌다.
   바닥 무늬와 배경색은 원본 사이트(thejaemi.com/복제-캐치블록)에서 가져왔다 —
   공구(스패너 · 열쇠 · 망치 · 톱니바퀴) 워터마크에 레몬 옐로와 노랑→로즈
   그라데이션이다. 블록·수식 무늬와 네이비를 쓰던 초안은 원본과 색도 무늬도
   맞지 않아 걷어냈다. 자세한 내용은 .cb-u-tools 와 팔레트 주석에 있다.

   [자료 대기] 확인되지 않은 값은 본문에 .cb-tbd 로 표시해 두었다.
   자료가 들어오면 그 마크만 지우면 된다.
   ============================================================ */

.cb-page{
  /* --- color --- 키 아트에서 그대로 뽑았다 */
  --cb-butter:   #FFC94D;   /* 키 아트 배경의 따뜻한 노랑 */
  --cb-butter-2: #FFB01F;
  --cb-orange:   #FF7A2F;   /* 로고 'Block!' 의 주황 */
  --cb-orange-d: #D94E10;   /* 주황 블록의 밑면 */
  --cb-sky:      #4EC3F0;   /* 로고 'Catch' 의 하늘색 */
  --cb-sky-d:    #1E93C8;
  --cb-pink:     #FF7BA9;   /* 분홍 머리 아이 */
  --cb-lime:     #A6D93C;   /* 초록 안경 */
  --cb-ink:      #2A2118;   /* 먹 — 순검정 대신 따뜻한 갈색먹. 원화가 부드러워서다 */
  /* 아래 네 값은 원본 사이트(thejaemi.com/복제-캐치블록)의 배경에서 그대로 뽑았다.
     원본은 레몬 옐로를 본문 바닥으로 깔고, 구간을 나눌 때 노랑→로즈 그라데이션
     띠를 넣는다. 네이비는 원본 어디에도 없는 색이라 걷어냈다 — 이 페이지에서
     어두운 구간이 필요하면 --cb-rose-d 를 쓴다. */
  --cb-lemon:    #FFEF98;   /* 원본 본문 바닥 */
  --cb-lemon-2:  #FDE67C;
  /* 원본 띠의 분홍(#D8647A)을 두 단 내린 값이다. 원본 그대로 쓰면 흰 본문이
     4.3:1 로 AA(4.5:1)를 못 넘긴다. 여기까지 내리면 흰 글자 6.0:1,
     연분홍 본문(#FBD9E2) 5.0:1 로 둘 다 통과한다. */
  --cb-rose:     #A83E5E;   /* 원본 그라데이션 아래쪽의 분홍 계열 */
  --cb-rose-d:   #7E2A48;   /* 흰 글자를 얹는 짙은 쪽 */
  --cb-cream:    #FFF7E8;   /* 밝은 구간 바닥 */
  --cb-cream-2:  #FFEFD2;
  --cb-white:    #FFFFFF;
  --cb-gray:     #6B6154;
  --cb-side:     #E7DAC2;   /* 흰 블록의 밑면 */

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

  /* --- structure --- */
  --cb-drop:  9px;                  /* 블록 밑면 두께. 이 페이지의 기준 치수다 */
  --cb-r:     18px;                 /* 블록 모서리 */
  --cb-r-s:   12px;
  --cb-wrap:  1280px;

  --cb-sp-4:2.75rem;   /* 섹션 머리와 본문 사이 */

  font-size:var(--cb-fs-body);
  line-height:1.7;
  color:var(--cb-ink);
  background:var(--cb-cream);
  overflow-x:hidden;
}

/* 목업의 요소 셀렉터 우선순위를 유지하려고 :where() 로 감싼다 */
:where(.cb-page) img{max-width:100%;display:block}
:where(.cb-page) a{color:inherit}
:where(.cb-page) :focus-visible{outline:3px solid var(--cb-orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .cb-page *{transition:none!important;animation:none!important}
}

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


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

/* 블록 — 이 페이지의 기본 단위.
   외곽선이 없다. 아래로만 떨어지는 짙은 밑면 하나로 두께를 만든다.
   밑면 색은 --cb-side 로 바꿔 끼운다 — 블록 색이 바뀌면 밑면도 같이 따라오게
   한 곳에서만 정한다. */
.cb-brick{
  background:var(--cb-white);
  border-radius:var(--cb-r);
  box-shadow:0 var(--cb-drop) 0 var(--cb-side);
}
/* 스터드 — 블록 윗면의 돌기 두 개. 이게 있어야 카드가 아니라 블록으로 읽힌다.
   장식이므로 자리만 차지하지 않게 절대 배치하고, 부모에 position:relative 를 건다. */
.cb-stud{position:relative}
.cb-stud::before,
.cb-stud::after{
  content:'';
  position:absolute;top:calc(var(--cb-drop) * -1 + 2px);
  width:26px;height:14px;
  border-radius:8px 8px 4px 4px;
  background:var(--cb-stud-color,var(--cb-side));
}
.cb-stud::before{left:26px}
.cb-stud::after{left:64px}

/* 바닥 무늬 — 공구(스패너 · 톱니바퀴).
   원본 사이트가 쓰는 배경 워터마크를 그대로 옮긴 것이다. 원본은 1280x720 짜리
   PNG 한 장이라 늘리면 흐려지고 이어 붙지도 않아서, 같은 모티프를 400 짜리
   타일 SVG 로 다시 그렸다. 파일을 받지 않으니 용량이 들지 않고 어느 크기에서도
   선명하다.

   한 번 촘촘하게 만들었다가 되돌렸다. 처음에는 한 타일에 스패너 · 열쇠 · 망치 ·
   톱니바퀴 네 종류를 넣었는데, 형태가 넷이라 눈이 무늬를 배경으로 흘리지 않고
   하나씩 알아보려 들었다. 무늬가 배경이 아니라 내용으로 읽힌 것이다.
   지금은 형태를 둘로 줄이고, 그중 스패너를 크기만 달리해 두 번 쓴다 —
   개수(3)는 크게 줄지 않았는데도 "종류"가 줄어서 훨씬 조용해진다.
   톱니도 촘촘한 원본 대신 8 개짜리로 다시 그렸다. 잔 톱니는 이 크기에서
   형태로 읽히지 않고 가장자리만 지저분하게 만든다.

   고칠 때 지켜야 할 것 — 형태를 세 종류 이상으로 늘리지 않는다.
   개수를 늘리는 것보다 종류를 늘리는 쪽이 훨씬 빨리 복잡해진다.

   opacity 를 도형마다 주지 않고 <g> 하나에 건다. 도형마다 fill-opacity 를 주면
   스패너의 머리와 자루처럼 겹치는 자리만 두 겹으로 짙어진다.
   구멍(톱니바퀴 가운데, 스패너 입)은 fill-rule='evenodd' 로 뚫었다 — 배경색
   원을 덧그리면 그라데이션 위에서 그 자리만 색이 어긋난다.

   진하기는 여기 <g opacity> 한 곳에서만 정한다. 예전에는 구간마다 .85 · .75 를
   덧걸어서, 무늬가 왜 구간마다 다르게 보이는지 두 곳을 봐야 알 수 있었다.

   밝은 구간용(기본)과 원색·어두운 구간용(--light) 두 벌을 둔다. */
.cb-u-tools{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%232A2118' opacity='.042'%3E%3Cg transform='translate(96,100) rotate(-38)'%3E%3Cpath d='M29.2,15.4 A19,19 0 1,1 29.2,-15.4 L23.9,-8.1 A10,10 0 1,0 23.9,8.1 Z'/%3E%3Crect x='-36' y='-6.5' width='46' height='13' rx='6.5'/%3E%3C/g%3E%3Cg transform='translate(300,190) rotate(12)'%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(0)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(45)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(90)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(135)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(180)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(225)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(270)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(315)'/%3E%3Cpath fill-rule='evenodd' d='M-26,0 a26,26 0 1,0 52,0 a26,26 0 1,0 -52,0 Z M-10,0 a10,10 0 1,0 20,0 a10,10 0 1,0 -20,0 Z'/%3E%3C/g%3E%3Cg transform='translate(162,312) rotate(18) scale(.76)'%3E%3Cpath d='M29.2,15.4 A19,19 0 1,1 29.2,-15.4 L23.9,-8.1 A10,10 0 1,0 23.9,8.1 Z'/%3E%3Crect x='-36' y='-6.5' width='46' height='13' rx='6.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:400px 400px;
}
.cb-u-tools--light{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%23FFFFFF' opacity='.105'%3E%3Cg transform='translate(96,100) rotate(-38)'%3E%3Cpath d='M29.2,15.4 A19,19 0 1,1 29.2,-15.4 L23.9,-8.1 A10,10 0 1,0 23.9,8.1 Z'/%3E%3Crect x='-36' y='-6.5' width='46' height='13' rx='6.5'/%3E%3C/g%3E%3Cg transform='translate(300,190) rotate(12)'%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(0)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(45)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(90)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(135)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(180)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(225)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(270)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(315)'/%3E%3Cpath fill-rule='evenodd' d='M-26,0 a26,26 0 1,0 52,0 a26,26 0 1,0 -52,0 Z M-10,0 a10,10 0 1,0 20,0 a10,10 0 1,0 -20,0 Z'/%3E%3C/g%3E%3Cg transform='translate(162,312) rotate(18) scale(.76)'%3E%3Cpath d='M29.2,15.4 A19,19 0 1,1 29.2,-15.4 L23.9,-8.1 A10,10 0 1,0 23.9,8.1 Z'/%3E%3Crect x='-36' y='-6.5' width='46' height='13' rx='6.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:400px 400px;
}
/* [현재 쓰이지 않음] CTA 가 어두운 바닥이던 시절의 금빛 변형이다.
   그 구간의 바닥을 걷어내 크림이 되면서 무늬도 기본(먹)으로 돌아갔고,
   지금 이 규칙을 부르는 곳은 없다. 지우지 않고 남겨 두는 이유는 CTA 를
   다시 어둡게 되돌릴 때 이 한 벌이 그대로 필요해서다 — .cb-cta 주석의
   되돌리기 안내가 이 이름을 가리킨다. 어두운 구간을 영영 안 쓰기로 하면
   이 규칙과 그 안내를 함께 지우면 된다.

   아래는 그때의 설명이다. 바닥이 주황 그라데이션이라 흰 무늬는 그 위에서
   색이 아니라 그냥 밝기로만 읽힌다. 바로 아래 "문의하기" 버튼과 같은
   버터 옐로를 써서 구간 전체가 한 색으로 묶이게 했다.

   진하기가 --light(.105)보다 훨씬 높은 .28 인 이유는 색이 바닥과 같은
   난색 계열이어서다. 흰색만큼 밝기 차가 나지 않으니 같은 값으로는 사라진다.

   도형 좌표는 위 두 벌과 글자 하나까지 같다 — 색과 진하기만 다르다.
   같은 그림을 세 번 적어 두는 셈인데, 네 번째 색이 필요해지는 순간
   이 방식은 접고 mask-image + background-color 로 바꾸는 편이 낫다.
   그러면 그림 한 벌에 색은 변수로 갈아 끼우게 된다. */
.cb-u-tools--gold{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%23FFC94D' opacity='.28'%3E%3Cg transform='translate(96,100) rotate(-38)'%3E%3Cpath d='M29.2,15.4 A19,19 0 1,1 29.2,-15.4 L23.9,-8.1 A10,10 0 1,0 23.9,8.1 Z'/%3E%3Crect x='-36' y='-6.5' width='46' height='13' rx='6.5'/%3E%3C/g%3E%3Cg transform='translate(300,190) rotate(12)'%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(0)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(45)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(90)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(135)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(180)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(225)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(270)'/%3E%3Crect x='-5.5' y='-36' width='11' height='14' rx='3.5' transform='rotate(315)'/%3E%3Cpath fill-rule='evenodd' d='M-26,0 a26,26 0 1,0 52,0 a26,26 0 1,0 -52,0 Z M-10,0 a10,10 0 1,0 20,0 a10,10 0 1,0 -20,0 Z'/%3E%3C/g%3E%3Cg transform='translate(162,312) rotate(18) scale(.76)'%3E%3Cpath d='M29.2,15.4 A19,19 0 1,1 29.2,-15.4 L23.9,-8.1 A10,10 0 1,0 23.9,8.1 Z'/%3E%3Crect x='-36' y='-6.5' width='46' height='13' rx='6.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:400px 400px;
}


/* 라벨 칩 — 블록 조각. 알약(액션캣)이 아니라 모서리만 둥근 네모다. */
.cb-chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.4em 1.05em .46em;
  font-size:var(--cb-fs-cap);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cb-ink);
  background:var(--cb-butter);
  border-radius:var(--cb-r-s);
  box-shadow:0 5px 0 var(--cb-butter-2);
}
.cb-chip--sky{background:var(--cb-sky);color:var(--cb-white);box-shadow:0 5px 0 var(--cb-sky-d)}
.cb-chip--orange{background:var(--cb-orange);color:var(--cb-white);box-shadow:0 5px 0 var(--cb-orange-d)}
.cb-chip--white{background:var(--cb-white);box-shadow:0 5px 0 var(--cb-side)}

/* 섹션 머리 */
.cb-head{margin-bottom:var(--cb-sp-4)}
.cb-head__title{
  margin-top:.6em;
  font-size:var(--cb-fs-sect);
  font-weight:900;
  line-height:1.24;
  letter-spacing:-.02em;
}
.cb-head__lead{
  margin-top:.9em;
  max-width:46em;
  font-size:var(--cb-fs-lead);
  color:var(--cb-gray);
}
.cb-head__lead strong{font-weight:600;color:var(--cb-ink)}
/* --onDark 변형(어두운 바닥용 흰 글자)이 여기 있었다. PARTNERSHIP 구간을
   걷어내면서 쓰는 곳이 없어졌다 — 이 페이지에 남은 바닥은 전부 밝은 색이다.
   어두운 구간을 다시 만들면 그때 함께 되살린다. */
.cb-head--center{text-align:center}
.cb-head--center .cb-head__lead{margin-inline:auto}

/* 미확정 정보 표시 — 확인되면 이 마크만 지우면 된다.
   이 페이지는 아직 자료가 적어 쓰이는 자리가 많다. */
.cb-tbd{
  font-size:.85em;
  padding:.1em .5em;
  color:#8A4B00;
  background:rgba(255,201,77,.42);
  border-bottom:2px solid var(--cb-butter-2);
}
/* 원래는 반투명 노랑(.18)에 밝은 글자였다. 그 조합은 어떤 바닥에서든
   판이 바닥과 섞여, 13px 글자가 3.7:1 밖에 나오지 않았다 — 로즈에서도 같다.
   불투명한 노란 칩으로 두면 바닥이 무슨 색이든 6.9:1 로 고정된다.
   이 표시는 "아직 안 정해짐" 을 알리는 자리라 흐려지면 존재 이유가 없다. */
/* .cb-cta .cb-tbd 덮어쓰기 규칙은 지웠다 — CTA 안에 있던 유일한 .cb-tbd
   ("스토어 링크는 서비스 상태 확인 후 추가 예정")를 본문에서 걷어냈기 때문이다.
   .cb-tbd 는 지금 이 페이지 본문에 한 자리도 남아 있지 않다 — GAME SPEC 의 두 줄에
   이어 PLAY 세 칸의 조각까지 확인된 값으로 채우면서 걷어냈다. 그래도 위 규칙은
   남긴다. 이 표시는 특정 문장의 장식이 아니라 "아직 안 정해짐" 을 적어 두는 이
   페이지의 표기법이고, 다음 미확정 값이 생기면 마크업만 붙이면 되기 때문이다.
   CTA(로즈 바닥)에 .cb-tbd 를 다시 넣게 되면 이 덮어쓰기도 같이 되살려야 한다 —
   기본값의 반투명 노랑은 어두운 바닥과 섞여 흙색이 된다. 그때 쓰던 값은
   color:#7A3F00 / background:#FFE9B8 / border-bottom-color:#E0A93C 였다. */

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


/* ============================================================
   HERO
   ============================================================ */
.cb-hero{
  position:relative;
  isolation:isolate;
  padding:clamp(48px,6vw,96px) 0 clamp(44px,5.5vw,88px);
  /* 원본 히어로의 색 흐름을 그대로 따랐다 — 위쪽은 노랑, 아래로 갈수록 로즈.
     세 값 모두 원본 배경 이미지에서 직접 뽑은 것이다(#E5C900 / #E0AD1C / #D8647A).
     가운데를 밝게 여는 radial 은 원본에도 있는 처리로, 타이틀 로고 뒤를 비운다. */
  background:radial-gradient(132% 108% at 50% 4%, #FFEFA6 0%, #F3CE18 40%, #E4A03A 72%, #DC6E7C 100%);
  overflow:hidden;
}
.cb-hero__tools{position:absolute;inset:0;z-index:-1}
.cb-hero__inner{position:relative;text-align:center}

/* 제목 — 타이틀 로고. 뒤에는 블록 무늬 배경만 둔다.
   상한 396px 은 원본 폭 그대로다. 이 로고는 외곽선이 굵고 안쪽 격자무늬가 촘촘해서
   조금만 늘려도 격자가 먼저 뭉갠다. 더 큰 로고 파일이 들어오면 이 값을 올린다.
   그림자는 넣지 않는다 — 로고 자체가 검은 외곽선과 그림자를 이미 갖고 있어,
   위에 한 겹 더 얹으면 글자가 번져 보인다. */
/* 로고 애니메이션 — 블록이 위에서 떨어져 자리에 앉고, 그 뒤로 가볍게 뜬다.
   이 페이지의 조형이 장난감 블록이라 "떨어져 끼워지는" 움직임이 맞다.
   회전이나 반짝임은 쓰지 않았다 — 로고 자체가 외곽선과 그림자를 가진
   두꺼운 그림이라, 거기에 빛을 얹으면 글자가 번져 읽힌다.

   두 움직임을 각각 다른 요소에 건 이유는 transform 이 하나뿐이어서다.
   한 요소에 낙하와 부유를 같이 걸면 뒤에 오는 애니메이션이 앞의 transform 을
   통째로 덮어써서 착지 자세가 날아간다. 낙하는 로고(img)가, 부유는
   제목(h1)이 맡아 서로 겹쳐 쌓이게 했다.

   모션 최소화 설정에서는 위쪽 prefers-reduced-motion 규칙이 animation 을
   통째로 끈다. 그때는 로고가 처음부터 제자리에 그냥 놓인다 —
   키프레임의 opacity:0 은 애니메이션이 돌 때만 적용되므로 사라지지 않는다. */
@keyframes cb-logo-drop{
  0%  {opacity:0; transform:translateY(-72px) scale(.92)}
  48% {opacity:1; transform:translateY(0)     scale(1)}
  /* 착지 — 밑면이 눌린다. transform-origin 이 아래라 바닥에 닿은 것처럼 퍼진다 */
  60% {transform:scale(1.07,.93)}
  74% {transform:translateY(-11px) scale(.985,1.015)}
  88% {transform:translateY(0)     scale(1.02,.98)}
  100%{transform:translateY(0)     scale(1)}
}
@keyframes cb-logo-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}

.cb-hero__title{
  margin:0;
  /* 낙하가 끝나는 시점(1.05s)부터 이어받아 끊김 없이 넘어간다 */
  animation:cb-logo-float 3.6s ease-in-out 1.05s infinite;
}
.cb-hero__logo{
  width:min(100%,clamp(220px,30vw,396px));
  height:auto;
  margin-inline:auto;
  transform-origin:50% 100%;
  animation:cb-logo-drop 1.05s cubic-bezier(.22,.7,.3,1) both;
}

.cb-hero__sub{
  margin:clamp(22px,2.8vw,36px) auto 0;
  max-width:44em;
  font-size:var(--cb-fs-lead);
  color:#6A4A16;
}
.cb-hero__chips{
  margin-top:clamp(20px,2.4vw,30px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
}

/* 키 아트 띠 — catchblock-kv.webp (1920x814).
   공식 키 아트(1920x1080) 에서 로고 아래만 잘라 만든 파일이다.
   원본 그림 한가운데 위쪽에 게임 로고가 박혀 있는데 바로 위 h1 이 같은 로고를
   세우고 있어서, 그대로 쓰면 한 화면에 로고가 두 번 나온다.
   원본 전체(로고 포함)를 쓰고 싶으면 히어로의 h1 로고를 빼고 이 자리에
   전체 컷을 넣는 편이 낫다. 둘 중 하나만 로고를 가져야 한다.

   [2026-08-27 판 갈이] 한동안 1920x665 (원본의 y=415~) 였다가, 위아래를 더
   넉넉히 남긴 1920x814 판으로 바뀌었다. 위쪽이 149px 늘었지만 로고는 여전히
   들어오지 않는다 — 늘어난 자리에는 잘린 캐릭터 머리와 배경 빛만 있다.
   webp 는 새 jpg 에서 다시 구웠다(quality 86, 149KB).
   판을 또 갈 때는 위쪽에 로고가 물리지 않는지 먼저 보고, html 의 width/height
   두 값도 파일 규격에 맞춰 함께 고칠 것.

   폭은 본문 폭(1280)까지 쓴다. 파일이 1920 이라 1280 자리에 넣으면 67% 로
   줄어들어 그려지므로, 고해상도 화면에서도 흐려지지 않는다. */
.cb-hero__band{
  margin-top:clamp(30px,3.6vw,52px);
  overflow:hidden;
  border-radius:var(--cb-r);
  box-shadow:0 var(--cb-drop) 0 rgba(42,33,24,.30);
}
.cb-hero__band img{width:100%;height:auto}


/* ============================================================
   VIDEO — 게임 영상
   레전다이노와 같은 자체 호스팅 <video> 다. 유튜브 임베드를 쓰지 않는 이유는
   두 가지다 — 오프라인 zip 배포본에서도 재생되어야 하고, 유튜브 임베드는
   file:// 로 열면 referrer 가 없어 "오류 153" 으로 막힌다.

   조형은 바로 위 키 아트 밴드(.cb-hero__band)를 따른다 — 같은 모서리,
   같은 밑면. 스터드는 얹지 않는다. 1280 폭에 가까운 판 위에서 돌기 두 개는
   블록이 아니라 얼룩으로 읽히기 때문이고, 이는 SPEC 카드와 같은 이유다.
   ============================================================ */
.cb-video{padding:clamp(56px,6.4vw,96px) 0 0;background:var(--cb-cream)}

/* 키 아트(1080)보다 한 단 좁게 잡는다. 바로 위에 놓이는 두 판이 같은 폭이면
   어느 쪽이 주인공인지 읽히지 않아, 영상을 한 걸음 물려 세운다. */
.cb-video__frame{
  width:min(100%,960px);
  margin:var(--cb-sp-4) auto 0;
  /* 16/9 가 아니다. 원본이 2400x1080 이라 16:9 로 담으면 위아래에 검은 띠가
     남는다. 칸을 영상 비율에 맞추면 띠 없이 꽉 찬다. 다른 비율의 영상으로
     교체하면 이 값과 <video> 의 width/height 를 함께 고쳐야 한다. */
  aspect-ratio:2400/1080;
  overflow:hidden;
  border-radius:var(--cb-r);
  box-shadow:0 var(--cb-drop) 0 rgba(42,33,24,.30);
  background:#000;
}
/* 칸과 영상이 같은 비율이라 contain 이어도 남는 자리는 생기지 않는다.
   cover 를 쓰지 않는 이유는 재생 막대다 — 칸을 넘겨 잘라내면 컨트롤이
   프레임 밖으로 밀려난다. 레전다이노(.ld-media video)와 같은 처리다. */
.cb-video__frame video{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
  background:#000;
}

.cb-video__note{
  margin-top:calc(var(--cb-drop) + .9rem);
  text-align:center;
  font-size:var(--cb-fs-cap);
  color:var(--cb-gray);
}
/* 출처 표기. 파트너사 자료라 눈에 띄되 본문을 가리지 않을 정도로 둔다. */
.cb-video__src{
  color:var(--cb-gray);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--cb-butter-2);
  text-decoration-thickness:2px;
}
.cb-video__src:hover{color:var(--cb-ink);text-decoration-color:var(--cb-orange)}


/* ============================================================
   SPEC — 게임 정보
   ============================================================ */
.cb-spec{padding:clamp(56px,6.4vw,96px) 0;background:var(--cb-cream)}
.cb-spec__card{
  --cb-stud-color:var(--cb-side);
  padding:clamp(26px,3.2vw,46px);
}
/* 앱 아이콘 + 제목 한 줄. 스토어 목록과 같은 배치다. */
.cb-spec__head{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,32px);
}
.cb-spec__icon{
  flex:none;
  width:clamp(88px,11vw,132px);
  height:auto;
  /* 아이콘 원본은 흰 바닥 위에 놓인 둥근 사각형이라 카드(흰 블록)와 바닥색이
     같다. 그래도 한 번 더 깎아 두는 이유는 원본의 곡률이 파일마다 다를 수 있어서다
     — 아이콘을 교체해도 이 칸의 모서리는 늘 같게 나온다. */
  border-radius:22%;
  box-shadow:0 6px 0 var(--cb-side);
}
/* 좁은 화면에서는 아이콘과 제목이 한 줄에 들어가면 제목이 두세 글자씩 끊긴다 */
@media (max-width:560px){
  .cb-spec__head{flex-direction:column;align-items:flex-start;gap:16px}
}

.cb-spec__title{
  margin:.55em 0 0;
  font-size:var(--cb-fs-sect);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.2;
}
.cb-spec__title span{
  display:block;
  margin-top:.35em;
  font-size:.42em;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--cb-gray);
}
/* 두 칸으로 나눈다. 항목이 일곱 줄이라 한 줄로 세우면 카드만 길어진다. */
.cb-spec__rows{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem clamp(20px,2.4vw,38px);
}
.cb-spec__row{
  display:flex;gap:1rem;align-items:baseline;
  padding:.62em .2em;
  border-bottom:2px dotted rgba(42,33,24,.16);
}
.cb-spec__key{
  flex:0 0 auto;width:96px;
  font-size:var(--cb-fs-cap);
  font-weight:800;
  letter-spacing:.1em;
  color:var(--cb-gray);
}
.cb-spec__val{font-weight:700}


/* ============================================================
   PLAY — 무엇을 하는 게임인가
   ============================================================ */
.cb-play{
  position:relative;
  isolation:isolate;
  padding:clamp(60px,6.8vw,104px) 0;
  /* 원본이 본문 구간에 깔아 둔 레몬 옐로다. 앞뒤의 크림 구간과 붙어도
     한 단 노랗게 떠서 구간이 갈린다. */
  background:var(--cb-lemon);
  overflow:hidden;
}
.cb-play__tools{position:absolute;inset:0;z-index:-1}
.cb-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);
}
/* 단계 블록 — 요원 카드(액션캣)와 달리 그림이 없다. 번호 블록 하나가 그림 자리를
   대신하므로, 번호를 본문보다 훨씬 크게 잡아 시선이 먼저 걸리게 한다. */
.cb-step{
  --cb-stud-color:var(--cb-side);
  padding:clamp(22px,2.6vw,32px);
}
.cb-step--sky  {--cb-step-key:var(--cb-sky);   --cb-step-side:var(--cb-sky-d)}
.cb-step--pink {--cb-step-key:var(--cb-pink);  --cb-step-side:#D9457C}
.cb-step--lime {--cb-step-key:var(--cb-lime);  --cb-step-side:#6F9C13}
.cb-step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:3.1em;height:3.1em;
  font-size:1.05rem;font-weight:900;letter-spacing:.02em;
  color:var(--cb-white);
  background:var(--cb-step-key,var(--cb-sky));
  border-radius:var(--cb-r-s);
  box-shadow:0 6px 0 var(--cb-step-side,var(--cb-sky-d));
}
.cb-step__title{
  margin:1.5em 0 0;
  font-size:clamp(1.1rem,1.6vw,1.35rem);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.3;
}
.cb-step__desc{margin:.6em 0 0;font-size:var(--cb-fs-cap);color:var(--cb-gray);line-height:1.75}


/* ============================================================
   MODES — 싱글 · 멀티
   바닥은 크림이다. 앞이 레몬(PLAY), 뒤가 로즈(PARTNER)라 이 칸까지 색을
   얹으면 세 구간이 한 덩어리로 붙는다. 무늬도 같은 이유로 깔지 않았다.
   ============================================================ */
.cb-modes{
  padding:clamp(60px,6.8vw,104px) 0;
  background:var(--cb-cream);
}
.cb-modes__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
  /* start 여야 두 카드가 각자 글 길이만큼만 선다. stretch 로 두면 짧은 쪽에
     빈 바닥이 생기는데, 밑면(box-shadow)이 있는 블록에서는 그 빈 자리가
     블록이 눌린 것처럼 보인다. */
  align-items:start;
}
.cb-mode{
  --cb-stud-color:var(--cb-side);
  padding:clamp(24px,2.8vw,38px);
}
.cb-mode__title{
  margin:1.05em 0 0;
  font-size:clamp(1.2rem,1.9vw,1.55rem);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.3;
}
.cb-mode__desc{
  margin:.75em 0 0;
  color:var(--cb-gray);
  line-height:1.8;
}
/* 사실 칸 — 위 문단이 문장이라면 이쪽은 값이다. 처음부터 읽지 않고 훑는
   사람이 인원과 클리어 조건만 집어 갈 수 있게 따로 뗐다. */
.cb-mode__facts{
  margin:clamp(20px,2.2vw,28px) 0 0;
  padding-top:clamp(16px,1.8vw,22px);
  border-top:2px dotted var(--cb-side);
}
.cb-mode__fact{
  display:grid;
  grid-template-columns:5.2em minmax(0,1fr);
  gap:.9em;
  padding:.44em 0;
}
.cb-mode__fact dt{
  font-size:var(--cb-fs-cap);
  font-weight:800;
  letter-spacing:.04em;
  color:var(--cb-gray);
}
.cb-mode__fact dd{
  margin:0;
  font-size:var(--cb-fs-cap);
  font-weight:700;
  line-height:1.65;
}
/* 두 칸이 나란히 설 자리가 없어지면 세로로 쌓는다. 780 은 카드 안의
   "20웨이브까지 버티기" 가 두 줄로 꺾이기 시작하는 폭이다. */
@media (max-width:780px){
  .cb-modes__grid{grid-template-columns:1fr}
}


/* PARTNERSHIP 구간(.cb-partner 계열)은 마크업과 함께 걷어냈다.
   로고 판과 "교육 회사와 게임 회사가 함께 만들었다" 제목을 다 뺐더니
   남는 것이 칩 하나뿐이라 구간째 지웠다.
   이 구간이 이 페이지의 유일한 어두운 바닥이었다 — 되살릴 때는
   --cb-rose / --cb-rose-d 로 노랑→로즈 띠를 다시 깔면 된다.
   그 두 값은 팔레트에 남겨 두었다. */

/* ============================================================
   COLLAB — 공동 개발 표기 (히어로 키 아트 아래)
   ============================================================ */
/* 폭은 위 게임 로고(최대 396)보다 조금만 넓게 둔다.
   이름표가 게임 제목보다 커지면 무엇을 소개하는 페이지인지가 흐려진다.
   아래쪽 여백은 히어로 구간의 padding-bottom 이 이미 만들어 주므로 0 이고,
   위로만 벌린다 — 이 판은 키 아트 뒤에 붙어 히어로를 닫는 마지막 요소다. */
.cb-collab{
  width:min(100%,600px);
  margin:clamp(22px,2.6vw,34px) auto 0;
}
/* 판은 두 층으로 쌓는다 — 위층 웅진씽크빅, 아래층 더재미 × Mathpid.
   판 자체는 이 페이지의 기본 단위인 블록 조형을 그대로 쓴다 —
   흰 면 + 아래로만 떨어지는 짙은 밑면. */
.cb-collab__bar{
  display:grid;
  gap:clamp(18px,2.2vw,26px);
  padding:clamp(24px,2.8vw,34px) clamp(26px,3.2vw,42px);
  background:var(--cb-white);
  border-radius:var(--cb-r);
  box-shadow:0 var(--cb-drop) 0 var(--cb-side);
}

/* --- 세 로고의 크기 ---
   폭을 똑같이 주면 안 된다. 세 파일 모두 여백 없이 딱 맞게 잘려 있는데도
   실제 비율이 제각각이라, 같은 폭이 곧 같은 크기가 아니다.
     웅진씽크빅 1.90:1   글자 + 색종이 그래픽
     더재미     2.12:1   사각 심볼 + 쌓인 글자 — 셋 중 가장 빽빽한 덩어리
     Mathpid   6.45:1   한 줄로 눕는 워드마크 — 폭을 줘도 높이가 안 나온다
   그래서 폭이 아니라 "글자가 비슷한 크기로 보이는 지점"으로 맞춘다.
   아래 세 값은 그렇게 잡은 것이고, 하나만 고치면 균형이 깨진다. */

/* 위층. 더재미보다 크게 세운다. */
.cb-collab__top{width:min(100%,200px);height:auto;margin-inline:auto}
/* 두 층을 가르는 점선. 장식이 아니라 이 블록의 의미를 지탱하는 선이다 —
   이게 없으면 위아래가 한 덩어리로 붙어 "세 회사가 협업했다"로 읽힌다.
   협업은 아래층 둘 뿐이다. */
/* 한때 이 줄이 1fr · auto · 1fr 세 칸짜리 grid 였다. 두 칸을 똑같이 나누면
   공평해 보일 것 같지만 실제로는 반대였다 — 좁은 더재미(118)가 넓은 칸 가운데
   놓이면서 그 주변에만 빈 자리가 크게 남고, 곱셈 기호가 Mathpid 쪽으로
   붙어 보였다. 나란히 선 것이 아니라 한쪽으로 쏠린 것처럼 읽힌 원인이다.
   지금은 셋을 글자 폭 그대로 두고 줄 전체를 가운데 세운다. 그러면 곱셈 기호
   양옆 간격이 같아지고, 크기 균형은 아래 각 로고의 폭 값이 맡는다. */
.cb-collab__pair{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,2.6vw,36px);
  padding-top:clamp(18px,2.2vw,26px);
  border-top:2px dotted var(--cb-side);
}
/* 더재미는 셋 중 가장 작게 둔다. 밀도가 높은 덩어리라 작게 놓아야
   옆의 가벼운 워드마크와 무게가 맞는다 — 폭을 키우면 혼자 튄다. */
/* flex:none 이었다. 좁은 화면에서 두 로고가 줄어들지 못해 더재미가 판 밖으로
   잘려 나갔다 — 230+118 에 곱셈 기호와 좌우 간격까지 더하면 390px 화면에서
   판 안쪽 폭(298px)을 100px 넘게 넘어선다.
   flex 가 함께 줄이도록 바꿨다. 줄어드는 양이 기준 폭에 비례하므로
   230:118 균형은 어느 폭에서도 그대로 유지된다 — 위 주석의 크기 근거를 깨지 않는다.
   min-width:0 이 반드시 있어야 한다. 없으면 이미지 본래 폭(Mathpid 755px)이
   하한이 되어 flex 가 끝내 줄이지 못한다. */
.cb-collab__logo{width:118px;max-width:100%;height:auto;flex:0 1 auto;min-width:0}
/* Mathpid 는 한 줄짜리라 폭을 크게 줘야 글자가 산다.
   230px 에서 글자 높이가 더재미의 글자와 비슷해진다. */
.cb-collab__logo--mathpid{width:230px}
.cb-collab__x{
  font-size:clamp(1rem,1.5vw,1.35rem);
  font-weight:700;
  color:rgba(42,33,24,.26);
  line-height:1;
}
/* 좁은 화면에서는 판 안쪽 여백과 로고 사이 간격을 함께 좁힌다.
   위 flex 만으로도 잘리지는 않지만, 줄어드는 몫이 전부 로고에 몰려
   두 로고가 필요 이상으로 작아진다. 여백에서 먼저 덜어내면 로고가 더 크게 남는다.
   두 값을 바꿔도 230:118 균형에는 영향이 없다 — 줄이는 총량만 달라진다. */
@media (max-width:560px){
  .cb-collab__bar{padding-inline:18px}
  .cb-collab__pair{gap:14px}
}
/* 파트너 로고가 들어오기 전까지만 서 있는 자리표시.
   점선 상자로 둘러 "아직 비어 있다"를 드러낸다 — 진짜 로고처럼 보이면
   확인 안 된 표기가 그대로 나가 버린다. 파일이 들어오면 통째로 지운다. */
.cb-collab__pending{
  display:grid;place-items:center;gap:.4em;
  padding:.9em .6em;
  font-weight:800;
  color:rgba(42,33,24,.5);
  border:2px dashed rgba(42,33,24,.2);
  border-radius:12px;
  text-align:center;
}
/* 판 아래에 한 줄 설명(.cb-collab__note)이 붙어 있었다. 지웠다 —
   바로 아래 PARTNERSHIP 구간이 같은 말을 문장으로 하고 있어서, 로고 판까지
   설명을 달면 한 페이지에서 공동 개발이라는 말을 세 번 하게 된다.
   로고 두 개가 나란히 선 것만으로 이미 읽힌다. */


/* ============================================================
   CTA
   ============================================================ */
.cb-cta{
  /* position:relative · isolation:isolate · overflow:hidden 세 줄이 있었다.
     전부 무늬 층(.cb-cta__tools, z-index:-1)을 이 구간 안에 가둬 두려던 값이라,
     무늬를 걷어낸 지금은 아무것도 담지 않는다. 무늬를 되살리면 세 줄도 함께
     되살려야 한다 — 없으면 z-index:-1 층이 페이지 바닥까지 내려가 사라진다. */
  padding:clamp(64px,7vw,110px) 0;
  text-align:center;
  /* 바닥을 깔지 않는다 — .cb-page 의 크림(--cb-cream)이 그대로 비친다.
     한때 로즈 그라데이션(--cb-rose → --cb-rose-d)을 깐 유일한 어두운 구간이었다.
     그 판을 걷어낸 이유는, 설명 문단과 블록 버튼을 차례로 걷어내고 나니
     남은 것이 제목 한 줄과 링크 한 줄뿐이라 색만 다른 커다란 네모가 되어서다.
     바로 앞 MODES 구간도 같은 크림이라, 지금 이 구간을 가르는 것은 색이
     아니라 위아래 여백(padding)뿐이다. 그 여백을 줄이면 두 구간이 한 덩어리로
     붙으므로, 이 값은 장식이 아니라 구간을 가르는 유일한 장치다.

     [중요] 바닥이 밝아졌으므로 위에 얹히는 글자도 전부 어두운 쪽이다 —
     제목과 링크 모두 --cb-ink 다. 어두운 바닥으로 되돌리려면 둘을 같이
     뒤집어야 한다. 하나만 바꾸면 글자가 바닥에 묻힌다. 되살릴 때 쓰던 값은
     background:linear-gradient(160deg,var(--cb-rose),var(--cb-rose-d) 88%) 에
     글자 --cb-white, 그리고 본문의 무늬 층은 .cb-u-tools--gold 였다. */
}
/* .cb-cta__tools{position:absolute;inset:0;z-index:-1} 는 지웠다 —
   무늬 층을 본문에서 걷어내면서 이 규칙을 부르는 곳이 없어졌다.
   되살릴 때는 위 .cb-cta 의 position:relative 안내와 한 짝으로 쓴다. */
.cb-cta__title{
  font-size:var(--cb-fs-sect);
  /* 다른 구간 제목(.cb-head__title)은 900 이지만 여기만 700 이다.
     이 구간은 제목 아래에 설명 문단이 없어 제목 한 줄이 곧바로 링크와 만난다.
     900 으로 두면 그 한 줄이 페이지에서 가장 굵은 덩어리가 되어, 구간을
     닫는 자리가 아니라 새로 여는 자리처럼 읽힌다. */
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--cb-ink);
}
/* .cb-cta__desc 는 지웠다 — CTA 의 설명 문단을 본문에서 걷어냈다.
   되살릴 때 필요한 값은 margin:1em auto 0 / max-width:40em / color:#FFE0C6 였다.
   흰 제목과 같은 색을 쓰면 두 줄이 한 덩어리로 붙어서, 한 단 낮춘 연한
   살구색(로즈 바닥에서 4.8:1)으로 두었던 것이다. */
/* 이 자리에 .cb-cta__btns / .cb-btn / .cb-btn--ghost 세 규칙이 있었다.
   노란 블록 버튼 하나와 옅은 흰 판 두 개였는데, 위의 설명 문단을 걷어낸 뒤로
   구간에 남은 것이 제목 한 줄과 이 줄뿐이라 판 세 개가 로즈 바닥 위에
   네모로만 읽혔다. 아래 글자 링크로 바꿨다.
   블록 버튼을 되살릴 일이 생기면 .cb-brick 의 밑면 방식(box-shadow:0 6px 0)을
   그대로 따르면 된다 — 이 페이지의 버튼은 그 조형에서 나온 것이었다. */
.cb-cta__links{
  margin-top:clamp(28px,3.2vw,44px);
  display:flex;flex-wrap:wrap;justify-content:center;
  /* 판이 없어졌으니 링크끼리 붙으면 한 문장처럼 읽힌다. 버튼일 때(.9rem)보다
     간격을 크게 벌려 세 개가 각각 따로 누를 것으로 보이게 한다. */
  gap:clamp(1.4rem,3.4vw,2.9rem);
}
.cb-cta__link{
  position:relative;
  display:inline-flex;align-items:center;gap:.4em;
  /* 판이 없어도 손가락으로 누를 자리는 남아야 한다 — 44px 은 그 최소치다. */
  min-height:44px;
  padding:.35em .1em;
  font-weight:700;
  letter-spacing:-.01em;
  /* 크림 바닥이라 먹으로 둔다. 로즈 바닥일 때는 --cb-white 였다. */
  color:var(--cb-ink);
  text-decoration:none;
}
/* 밑줄을 text-decoration 이 아니라 막대 하나로 그린다.
   두께가 자라는 움직임을 줄 수 있고, 글자 아래로 띄울 자리도 정확히 잡힌다
   — text-underline-offset 은 브라우저마다 기준선이 조금씩 다르다. */
.cb-cta__link::after{
  content:'';
  position:absolute;left:0;right:0;bottom:.15em;
  height:2px;
  background:currentColor;
  opacity:.5;
  transition:opacity .16s var(--ease),height .16s var(--ease);
}
.cb-cta__link:hover::after{opacity:1;height:3px}
.cb-cta__arrow{transition:transform .16s var(--ease)}
.cb-cta__link:hover .cb-cta__arrow{transform:translateX(4px)}
/* 문의하기만 한 단 굵고 밑줄도 처음부터 진하다. 셋을 완전히 똑같이 두면
   이 구간이 무엇을 시키려는 자리인지가 사라진다 — 판을 걷어낸 대신
   무게로만 그 차이를 남긴다. 셋을 같게 두려면 이 두 줄만 지우면 된다. */
.cb-cta__link--lead{font-weight:900}
.cb-cta__link--lead::after{opacity:1}


/* ============================================================
   반응형
   ============================================================ */
@media (max-width:960px){
  .cb-spec__rows{grid-template-columns:1fr}
}
@media (max-width:780px){
  .cb-steps{grid-template-columns:1fr}
}