/**
* 새 디자인 목업 전용 스타일 (2026-10-12).
*
* 🔴 **지금 사이트를 건드리지 않는다.** `site.css` 와 별개 파일이고 `mockup-v2-*.html`
* 만 이것을 부른다. 확정되면 그때 `site.css` 로 옮긴다.
*
* 🔑 **값의 출처가 둘이다 — 섞는 기준이 있다** (`docs/REDESIGN-DECISIONS.md`).
* 레이아웃·섹션 구성 → **디자이너** (피그마 「NSTAGE WEBSITE」)
* 색·서체·스케일·푸터 → **사내 웹 디자인 시스템** (CI 가이드라인 1.0)
* 디자이너 안을 그대로 쓰면 명함·제안서·PPT 와 어긋나기 때문이다.
*
* 🔑 피그마에서 **측정된 값** (「Layout system」 블록)
* 본문폭 1312 · 좌우 여백 64 · 헤더 88 · 섹션 상하 80~96 · 카드 간격 24 · 갤러리 간격 8
* 그리고 지침: "Let backgrounds span the viewport while content remains inside a
* centered container" — **배경은 화면 끝까지, 내용은 가운데 통 안에.**
*
* ⚠️ 사내 규칙을 이긴 자리 **둘뿐**이고 둘 다 적어 둔다
* · 히어로 제목 88px (사내 display 48) — 목업의 인상이 여기 걸려 있다
* · 본문폭 1312 · 헤더 88 (사내 1200 · 64) — 레이아웃은 디자이너 몫이다
*/
/* ── 토큰 ──────────────────────────────────────────────────────────────── */
:root {
/* 🔴 **엔스테이지 크림슨 레드** — PANTONE 1797CP · C7 M100 Y78 K1.
피그마 팔레트의 #CC1C2E 와 노션의 #CE0B30 둘 다 CI 값이 아니다. */
--red: #CE1130;
--red-700: #A90E27;
--red-20: #F5CFD6;
/* 🔑 서브 컬러는 **다크 그레이**다. 순검정을 쓰지 않는다 */
--ink: #3E3A39;
--ink-2: #656161;
--ink-3: #8B8988;
--paper: #FFFFFF;
--paper-2: #F5F5F5;
--line: #D8D8D7;
--line-s: #8B8988;
--max: 1312px;
--gut: 64px;
/* 🔑 **라운드는 UI 컨트롤에만 4–16px.** 색 면·배너는 직각이다 (각진 큐브) */
--r-sm: 6px;
--r-md: 12px;
--font-ko: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
--font-lat: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
--mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
/**
* 🔑 **한 덩어리는 한 글꼴로 — 언어 블록 단위로 건다.**
* 기본은 한글 Noto Sans KR 이다. 이 글꼴에 라틴 글자가 들어 있어 한국어 문장
* 속의 영문·숫자도 **같은 글꼴로** 그려진다 — 거기에만 Inter 를 끼우면 한
* 문장 안에서 글꼴이 갈려 자간이 벌어진다(「9 월」 처럼 보이는 그 증상).
* 🔑 영어·베트남어 **블록**에만 Inter 를 쓴다 (디자이너 권고).
*/
html { font-family: var(--font-ko); }
/* 🔑 **글꼴만이 아니라 행간도 되돌린다.** 아래 `:lang(vi)` 가 `` 에 걸리면
그 값이 쪽 전체로 물려 내려간다 — 베트남어 쪽에 섞인 영문 덩어리까지 베트남어
행간(1.7)으로 벌어졌다. 자기 언어를 적은 덩어리는 자기 값(1.625)을 쓴다.
⚠️ 자간도 함께 적어 두지만 지금은 값이 같다(`0` 과 `normal`). 나중에 베트남어
자간을 0 이 아닌 값으로 바꿔도 영문이 따라가지 않게 하는 울타리다. */
:lang(en) { font-family: var(--font-lat); letter-spacing: normal; line-height: 1.625; }
:lang(vi) {
font-family: var(--font-lat);
/* ⚠️ **베트남어는 자간 0.** 음수 자간을 주면 성조 부호(ạ ế ở ữ)가 옆 글자에 닿는다 */
letter-spacing: 0; line-height: 1.7;
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--paper); color: var(--ink);
font-size: 16px; line-height: 1.625; font-weight: 400;
word-break: keep-all; /* 🔑 국문은 단어 단위 줄바꿈 */
-webkit-font-smoothing: antialiased;
}
/* 🚨 `height: auto` 를 **빼면 안 된다.** 마크업의 `height="1125"` 가 그대로 살아
남아, 폭만 줄어든 사진이 세로로 늘어난다(2026-10-13 어드민 글에서 발생).
⚠️ 크기를 고정하는 자리(.gal · .card .icon 등)는 더 구체적이라 그대로 이긴다. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
/* 🔴 **읽는 단** (2026-10-14). 글 화면의 본문은 `74ch`(699px)인데 그것이 1184px
칸의 **왼쪽에 붙어** 있어, 오른쪽에 613px 이 비었다 — 글이 화면 왼쪽으로
쏠려 보였다. 단을 720px 로 좁히면 본문·제목·사진이 **한 단으로 모여** 화면
가운데에 선다 (노션 블로그와 같은 값: 1440px 에서 360 → 1080).
🔑 `wrap` 을 좁히는 것이 **본문만 가운데로 미는 것보다 낫다.** 빵부스러기·제목·
표지가 같은 단을 쓰므로 왼쪽 끝이 저절로 맞는다. */
.wrap.read { max-width: calc(720px + 2 * var(--gut)); }
@media (max-width: 900px) { :root { --gut: 32px; } }
@media (max-width: 600px) { :root { --gut: 20px; } }
/* ── 글자 역할 ─────────────────────────────────────────────────────────
🔑 **사내 `Web` 그룹** — h1 36/44 · h2 28/36 · h3 22/30 · body 16/26.
히어로만 디자이너 88px 이다.
⚠️ 웨이트는 300/400/700/900 뿐. **500·600·800 은 CI 지정 웨이트가 아니다.** */
/* 🔴 **국문과 영문의 행간·자간이 다르다.** 88px 영문 대문자에 맞춘 1.0 / −.05em 을
한글에 그대로 주면 **받침이 윗줄에 닿는다.** 사내 기준은 국문 제목 행간
1.15~1.2 · 자간 −0.01~−0.02em 이다. 기본을 국문으로 두고 영문만 조인다. */
.t-hero { font-size: 88px; font-weight: 900; line-height: 1.18; letter-spacing: -.02em; margin: 0; }
/* ⚠️ **마지막 안전장치.** 한 낱말이 칸보다 길면 줄을 끊는다 — 보기에 좋진 않지만,
끊지 않으면 그 낱말이 **페이지 폭을 늘려** 화면 전체가 가로로 밀린다. */
.t-hero, .t-page, .t-card, .post-h { overflow-wrap: break-word; }
:lang(en).t-hero, :lang(en) .t-hero { line-height: 1.04; letter-spacing: -.05em; }
.t-page { font-size: 36px; font-weight: 700; line-height: 1.22; letter-spacing: -.02em; margin: 0; }
.t-sec { font-size: 28px; font-weight: 700; line-height: 1.29; letter-spacing: -.02em; margin: 0; }
.t-card { font-size: 22px; font-weight: 700; line-height: 1.36; letter-spacing: -.01em; margin: 0; }
.t-sub { font-size: 18px; font-weight: 700; line-height: 1.44; margin: 0; }
.t-lead { font-size: 18px; font-weight: 400; line-height: 1.67; color: var(--ink-2); }
.t-body { font-size: 16px; font-weight: 400; line-height: 1.625; color: var(--ink-2); }
.t-small { font-size: 14px; line-height: 1.57; color: var(--ink-2); }
.t-cap { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
/* 섹션 번호 라벨 — 피그마의 「■ 01 / OUR GAMES」 */
.t-num { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.t-num::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
/* ⚠️ 베트남어 큰 제목은 자간을 **0 으로 되돌린다**
🔴 **글자 자신의 언어로 건다 — 조상으로 걸면 안 된다** (2026-10-22).
전에는 `:lang(vi) .t-hero` 처럼 **자손 선택자**로 적혀 있었다. 그런데 이것은
「`lang="vi"` 인 조상 안에 있는 `.t-hero`」라는 뜻이라, ``
아래에서는 **`lang="en"` 이라고 또렷이 적힌 글까지** 함께 걸렸다.
홈페이지의 큰 제목(`FUN LIVES ON.`)과 섹션 라벨(`01 / Our games`)은 세 언어
모두 영문 그대로 두는 자리인데, 베트남어 화면에서만 자간이 벌어지고
대문자 변환이 풀려 **같은 글이 다른 모양**으로 보였다. 바로 위 `.t-hero` 의
영문 규칙이 `:lang(en).t-hero` 와 `:lang(en) .t-hero` 를 **둘 다** 적어 둔 것과
달리, 이쪽은 자손형만 있었고 파일에서 더 뒤에 있어 영문 규칙을 이겼다. */
.t-hero:lang(vi), .t-page:lang(vi), .t-sec:lang(vi) {
letter-spacing: 0; line-height: 1.3;
}
.t-num:lang(vi) { letter-spacing: .04em; text-transform: none; }
/* 🔑 **게임 제목은 세 언어가 같은 모양이어야 한다** (2026-10-26 요청).
같은 「Wonder Merge」가 영어 쪽에서는 `-.05em`, 베트남어 쪽에서는 `0` 으로
그려져 **글자 사이가 눈에 띄게 달랐다** — 제목은 게임 이름이라 언어가
달라도 같은 글자다.
🔑 **베트남어 쪽을 기준으로 삼는다.** 성조 부호(ạ ế ở ữ)가 있어 음수 자간을
줄 수 없는 쪽이고, 거기에 맞추면 세 언어가 모두 성립한다.
⚠️ `:lang(en).t-hero`(0,2,0)를 이겨야 하므로 `.t-hero` 를 함께 적는다. */
.t-hero.t-game,
.t-hero.t-game:lang(en),
.t-hero.t-game:lang(vi) { letter-spacing: 0; line-height: 1.3; }
/* 모바일 — 사내 규칙대로 한 단계 내린다. 본문 16px 은 그대로 */
@media (max-width: 900px) { .t-hero { font-size: 56px; letter-spacing: -.035em; } }
@media (max-width: 600px) {
/* 🔴 **글자 크기를 화면 폭에 맡긴다.** 38px 로 못 박았더니 Contact 의
「A CONVERSATION.」가 375px 화면에 안 들어가 **페이지 전체가 414px 로 늘어났다**
— 가로 스크롤이 생기고 모든 칸이 어긋난다. 영문 큰 제목은 한 낱말이 길어
줄바꿈이 안 되므로, 폭이 좁아지면 글자도 같이 작아져야 한다. */
.t-hero { font-size: clamp(26px, 9vw, 38px); letter-spacing: -.03em; }
.t-page { font-size: 28px; }
.t-sec { font-size: 24px; }
.t-card { font-size: 20px; }
.t-lead { font-size: 16px; }
}
/* ── 단추 ─────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 20px; min-height: 44px; /* 🔑 터치 타깃 44px */
border: 1px solid transparent; border-radius: var(--r-sm);
font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
background: var(--red); color: #fff;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--red-700); }
/* 🔴 **단추 글자는 줄을 바꾸지 않는다** (2026-11-10). 공고 목록에서 제목이 길면
flex 가 단추를 눌러 「공고 / 보기」로 끊겼다 — 두 줄짜리 단추는 눌러야 하는
것처럼 보이지 않고, 줄마다 높이가 달라져 줄도 어긋난다. */
.btn { white-space: nowrap; }
.btn.sm { padding: 8px 14px; min-height: 36px; font-size: 13px; }
/* 🔑 화면에서 할 일이 하나뿐인 자리에 쓴다 — 지금은 공고 맨 아래 지원 단추 */
.btn.lg { padding: 17px 32px; min-height: 56px; font-size: 16px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-s); }
.btn.ghost:hover { border-color: var(--ink); }
/* 🔑 레드 면 위의 단추는 화이트다 — 레드 위에 레드를 올리지 않는다 */
.btn.on-red { background: #fff; color: var(--red); }
.btn.on-red:hover { background: var(--paper-2); }
/* ── 헤더 — 로고 왼쪽 · 메뉴 가운데 · 언어 오른쪽 (피그마) ─────────────── */
.hd { height: 88px; border-bottom: 1px solid var(--line); background: var(--paper); }
.hd > .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
/* 🔴 로고는 **파일 한 장**이다. CSS 로 색을 바꾸지 않는다 */
/* 🔑 **높이가 아니라 폭으로 맞춘다** (2026-10-22, 새 락업). 심볼이 글자의
1.888배에서 1.2125배로 줄면서 비율이 3.96:1 → 5.57:1 로 넓고 낮아졌다 —
높이를 32 로 두면 폭이 178px 로 벌어지고 글자만 1.5배로 커진다.
⚠️ `width` 를 주고 `height:auto` 로 둔다. 반대로 두면 이 파일을 모르는 사람이
높이를 고쳤을 때 머리줄이 통째로 흔들린다. */
.hd .logo img { width: 128px; height: auto; }
/* 🔑 **로고 옆에 붙인다** (2026-10-12). 가운데 정렬은 메뉴가 넷뿐이라 로고와
언어 고르개 사이에 덩그러니 떠 보였다 — 왼쪽에 모아 두고 남는 자리를
오른쪽으로 민다(`margin-right: auto`). */
.hd nav { display: flex; gap: 32px; margin-left: 16px; margin-right: auto; }
.hd nav a { font-size: 14px; font-weight: 700; color: var(--ink-2); padding: 8px 0;
border-bottom: 2px solid transparent; transition: color .12s ease; }
.hd nav a:hover { color: var(--ink); }
/* 🔑 지금 보는 쪽은 **빨강 + 밑줄** 둘 다로 알린다 — 색 하나로만 알리지 않는다 */
.hd nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
.hd .lang { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; }
.hd .lang button { border: 0; background: none; border-radius: 4px; padding: 7px 11px;
font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: pointer; }
.hd .lang button[aria-pressed="true"] { background: var(--red); color: #fff; }
.hd .burger { display: none; border: 1px solid var(--line); border-radius: var(--r-sm);
background: none; width: 44px; height: 44px; cursor: pointer; font-size: 18px; }
@media (max-width: 900px) {
.hd { height: 64px; position: relative; } /* 펼친 메뉴를 걸 자리 */
.hd nav { display: none; }
.hd .burger { display: block; }
.hd .logo { margin-right: auto; }
/* 🔑 **같은 `nav` 를 편다.** 좁은 화면용 목록을 따로 만들지 않는다 —
둘로 두면 메뉴를 하나 더할 때 한쪽만 고쳐진다.
⚠️ `.hd` 안에 절대 위치로 건다. 화면에 고정(fixed)하면 머리가 스크롤에 따라
움직이는 화면에서 메뉴만 제자리에 남는다. */
.hd nav[data-open] {
display: flex; flex-direction: column; gap: 0;
position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
margin: 0; padding: 6px 0 12px;
background: var(--paper); border-bottom: 1px solid var(--line);
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}
/* 손가락으로 누르는 자리라 높이를 키운다 (48px 이상) */
.hd nav[data-open] a { padding: 14px var(--gut); font-size: 16px; border-bottom: 0; }
.hd nav[data-open] a[aria-current="page"] { color: var(--red); }
}
/* ── 히어로 ① 슬로건 (피그마 기본) ──────────────────────────────────
🔑 **레드 면 하나**다. 페이지에서 레드 면이 둘 이상이면 안 되는데, 아래 CTA 밴드도
레드라 **둘이 된다** — 그래서 CTA 는 좁은 띠로 두고 이쪽을 주인공으로 둔다. */
.hero-slogan { background: var(--red); color: #fff; }
/* 🔴 **`padding` 단축을 쓰지 않는다.** `.wrap` 의 좌우 여백(--gut)까지 0 으로
덮어 **히어로만 한 칸 왼쪽으로 튀어나갔다** (2026-10-12). 위아래만 건드린다. */
.hero-slogan > .wrap { padding-top: 72px; padding-bottom: 80px; }
.hero-slogan .t-num { color: #fff; }
.hero-slogan .t-num::before { background: #fff; }
.hero-slogan h1 { max-width: 20ch; }
.hero-slogan p { margin: 28px 0 0; max-width: 72ch; font-size: 18px; color: rgba(255,255,255,.92); }
/* ── 히어로 ② 게임 (지금 사이트 구조 유지안) ─────────────────────────
🔴 **그라데이션을 쓰지 않는다** (CI). 아트 위에 흰 장막을 덮는 대신
**글자 면과 아트 면을 나란히** 둔다 — 색 면은 직각이고, 어떤 게임 아트가
와도 글씨가 흔들리지 않는다. */
.hero-game { background: var(--paper-2); }
.hero-game > .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
align-items: center; padding-top: 64px; padding-bottom: 64px; }
.hero-game .now { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.hero-game .now i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: block; }
.hero-game .sub-en { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin: 8px 0 16px; }
.hero-game .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-game .tag { font-size: 12px; font-weight: 700; color: var(--ink-2);
border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 12px; background: var(--paper); }
.hero-game .tag.live { color: #0F6E56; border-color: #BFE3D0; }
.hero-game p.lead { margin: 0 0 24px; }
.hero-game .stores { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-game .art { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
@media (max-width: 900px) {
.hero-game > .wrap { grid-template-columns: 1fr; gap: 28px;
padding-top: 36px; padding-bottom: 36px; }
.hero-game .art { order: -1; aspect-ratio: 16/9; }
}
/* ── 섹션 공통 ─────────────────────────────────────────────────────────── */
.sec { padding: 88px 0; }
.sec.alt { background: var(--paper-2); }
.sec-head { margin-bottom: 40px; }
.sec-head .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sec-head p { margin: 16px 0 0; max-width: 72ch; }
.more { font-size: 14px; font-weight: 700; color: var(--red); white-space: nowrap; }
/* 🔑 **토막은 안 끊고, 줄은 안 박는다.** 「WE BUILD. WE LAUNCH. WE GROW.」처럼
짧은 토막을 이어 쓰는 제목에 쓴다 — 넓으면 한 줄, 좁으면 토막 단위로 넘어간다.
🔴 `
` 로 박아 두면 **들어갈 때도 늘 끊긴다**. 375px 에서 한 줄 폭이
337px, 쓸 수 있는 폭이 335px 이었다 — 2px 때문에 세 줄로 보였다. */
.ln-set > span { white-space: nowrap; }
.more:hover { text-decoration: underline; }
@media (max-width: 600px) {
.sec { padding: 56px 0; }
/* 🔴 **좁은 화면에서는 제목과 링크를 위아래로 둔다** (2026-11-10).
`.more` 는 줄바꿈을 막아 둔 글자라(「See the full lineup →」·
「Xem toàn bộ danh mục →」) 한 줄에 같이 세우면 **제목 쪽만 짓눌려**
「Our game / lineup」으로 끊겼다. 말마다 길이가 달라 한국어만 보고
맞추면 영어·베트남어에서 깨진다. */
.sec-head .row { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* ── Our impact — 카드 셋 ─────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat { border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; background: var(--paper); }
.stat .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
/* 🔑 아이콘은 `accent-soft` 원이 아니라 레드 사각 — 피그마대로. 색 면이라 직각이다 */
.stat .ico { width: 36px; height: 36px; background: var(--red); color: #fff;
display: grid; place-items: center; }
.stat .ico svg { width: 18px; height: 18px; }
.stat .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.stat .n { font-size: 48px; font-weight: 900; letter-spacing: -.02em; line-height: 1;
font-variant-numeric: tabular-nums; }
.stat .k { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr; } }
/* ── 게임 카드 ─────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
background: var(--paper); display: flex; flex-direction: column; }
/* 아트 칸 — 마우스를 올리면 아래에서 이름 띠가 올라온다
🔴 **그라데이션을 쓰지 않는다** (CI). 사진 위 가독성은 **평평한 반투명 면**으로
낸다 — 색 면은 직각이라는 원칙과도 맞고, 어떤 아트가 와도 읽히는 정도가 같다.
⚠️ 카드에는 제목이 이미 아래에 있다. 띠는 **아트만 보이는 순간**(마우스가 그림
위에 있을 때)을 메우는 것이지 제목을 대신하는 것이 아니다 — 그래서 평소에는
감춰 두고, 보조기술에는 중복으로 읽히지 않게 숨긴다. */
.card .art { position: relative; display: block; overflow: hidden; }
.card .art img { aspect-ratio: 16/9; object-fit: cover; width: 100%; display: block; }
.card .art .cap {
display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 16px;
background: rgba(62, 58, 57, .86); color: #fff;
font-size: 15px; font-weight: 700; line-height: 1.35;
transform: translateY(101%);
}
.card .body { padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
.card .icon { width: 48px; height: 48px; border-radius: var(--r-md); object-fit: cover; flex: 0 0 auto; }
.card .t { flex: 1; min-width: 0; }
.card .t h3 { margin: 0 0 6px; }
.card .foot { margin-top: auto; border-top: 1px solid var(--line); padding: 16px 20px;
display: flex; gap: 10px; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .cards { grid-template-columns: 1fr; } }
/* ALSO — C등급. 카드가 아니라 **목록**이다 (주인공이 아니다) */
.also { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 24px; margin-top: 40px;
border-top: 1px solid var(--line); padding-top: 28px; }
.also a { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.also img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.also span { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .also { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .also { grid-template-columns: 1fr; } }
/* ── 큰 두 칸 (ONE TEAM ONE FUTURE) — 간격 48~88 ──────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split figure { margin: 0; }
.split img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.split figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }
/* ── WHAT WE DO — 세 칸, 왼쪽 레드 선 ─────────────────────────────────── */
/* 🔴 **세 칸의 내용 폭이 달랐다.** 칸마다 좌우 32px 여백을 주고 첫 칸만
`padding-left:0` 으로 뒀더니, 첫 칸만 내용이 32px 넓었다 — 글줄 길이가
달라 세 칸이 같은 크기로 읽히지 않는다.
🔑 여백을 빼고 **gap 으로 벌린 뒤 구분선을 그 사이에 긋는다.** 이러면 세 칸이
정확히 1fr 로 같고, 선은 가운데에 선다. */
.wwd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-top: 40px; }
.wwd > div { position: relative; }
.wwd > div + div::before { content: ""; position: absolute; left: -32px; top: 0; bottom: 0;
width: 1px; background: var(--line); }
.wwd .n { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--red); margin-bottom: 10px; }
.wwd h3 { margin: 0 0 12px; }
.wwd ul { margin: 14px 0 0; padding-left: 18px; }
.wwd li { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
@media (max-width: 900px) {
.wwd { grid-template-columns: 1fr; gap: 32px; }
/* 세로로 쌓이면 칸 사이 세로선은 뜻이 없다 — 왼쪽 레드 선으로 바꾼다 */
.wwd > div { padding-left: 20px; border-left: 2px solid var(--red); }
.wwd > div + div::before { content: none; }
}
/* ── 사진 모음 — 간격 8 (피그마 측정값) ───────────────────────────────── */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gal img { aspect-ratio: 3/2; object-fit: cover; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gal { grid-template-columns: repeat(2, 1fr); } }
/* ── 글 카드 (Our story) ──────────────────────────────────────────────── */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-c { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
background: var(--paper); display: flex; flex-direction: column; }
.post-c img { aspect-ratio: 16/9; object-fit: cover; }
/* ⚠️ 사진을 링크로 감쌌다 — `a` 는 기본이 인라인이라 블록으로 돌려놓지 않으면
칸이 어긋나고, 확대가 테두리 밖으로 비어져 나간다. */
.post-c .art { display: block; overflow: hidden; }
.post-c .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-c .t-cap { margin-top: auto; }
@media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .posts { grid-template-columns: 1fr; } }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filters button { border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-sm);
padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2);
cursor: pointer; min-height: 40px; }
.filters button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
/* 쪽 번호 — 무한 스크롤을 쓰지 않는다 (사내 규칙) */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; height: 40px; display: grid; place-items: center;
border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; font-weight: 700;
color: var(--ink-2); padding: 0 10px; }
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager [aria-current="page"] { background: var(--red); border-color: var(--red); color: #fff; }
.pager .off { opacity: .4; }
/* ── 연표 ─────────────────────────────────────────────────────────────── */
.tl { border-top: 1px solid var(--line); }
.tl .row { display: grid; grid-template-columns: 120px 1fr; gap: 24px;
border-bottom: 1px solid var(--line); padding: 18px 0; }
.tl .y { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--red);
font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .tl .row { grid-template-columns: 84px 1fr; gap: 14px; } }
/* ── 채용 ─────────────────────────────────────────────────────────────── */
.jobs { border-top: 1px solid var(--line); }
.job { border-bottom: 1px solid var(--line); padding: 22px 0; display: flex;
align-items: center; justify-content: space-between; gap: 20px; }
.job h3 { margin: 0 0 6px; }
/* 🔑 **좁아지면 제목이 줄어들고 단추는 그대로다.** 반대로 두면 글자 몇 자 때문에
단추가 쪼그라든다 — 제목은 원래 여러 줄로 읽는 것이고 단추는 아니다. */
.job > .btn { flex: 0 0 auto; }
.job > :first-child { min-width: 0; }
/* ── 문의 폼 ──────────────────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.fld { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.fld label { font-size: 14px; font-weight: 700; }
.fld .req { color: var(--red); } /* 🔑 필수 표시는 라벨 뒤 레드 * */
.fld input, .fld select, .fld textarea {
font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
border: 1px solid var(--line-s); border-radius: var(--r-sm); padding: 0 12px; height: 44px;
}
.fld textarea { height: auto; min-height: 150px; padding: 12px; line-height: 1.6; resize: vertical; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--ink-2); }
.fld .hint { font-size: 12px; color: var(--ink-3); }
.fld .err { font-size: 13px; color: var(--red); font-weight: 700; display: none; }
.fld.bad input, .fld.bad select, .fld.bad textarea { border-color: var(--red); }
.fld.bad .err { display: block; }
/* 오피스 카드 — 하단에 구글 지도 (Contact 에서만) */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.office { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
background: var(--paper); display: flex; flex-direction: column; }
.office .in { padding: 24px; }
.office .pin { display: inline-block; background: var(--red); color: #fff; font-size: 11px;
font-weight: 700; letter-spacing: .08em; padding: 5px 9px; } /* 🔑 색 면은 직각 */
.office h3 { margin: 14px 0 0; }
.office address { font-style: normal; margin-top: 10px; }
.office iframe { width: 100%; height: 240px; border: 0; border-top: 1px solid var(--line);
display: block; margin-top: auto; }
@media (max-width: 860px) { .offices { grid-template-columns: 1fr; } }
/* ── 레드 CTA 밴드 ────────────────────────────────────────────────────
🔑 **가로로 눕힌다** (피그마). 심볼과 제목이 왼쪽에서 한 덩어리로 서고,
설명과 단추가 오른쪽에 붙는다 — 가운데 정렬보다 띠가 낮아져 본문을 밀지 않는다. */
.cta { background: var(--red); color: #fff; padding: 64px 0; }
.cta > .wrap { display: grid; grid-template-columns: 1.7fr 1fr; gap: 64px; align-items: center; }
.cta .left { display: flex; align-items: center; gap: 40px; }
.cta img.sym { width: 140px; flex: none; }
.cta h2 { margin: 0; }
.cta p { margin: 0 0 24px; color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.7; }
/* ⚠️ 좁은 화면에서는 한 줄로 세운다. 심볼은 작게 — 140px 이 화면 폭을 먹는다 */
@media (max-width: 1000px) {
.cta > .wrap { grid-template-columns: 1fr; gap: 32px; }
.cta .left { gap: 24px; }
.cta img.sym { width: 72px; }
}
@media (max-width: 600px) {
.cta .left { flex-direction: column; align-items: flex-start; gap: 16px; }
.cta img.sym { width: 56px; }
}
/* ── 푸터 ─────────────────────────────────────────────────────────────
🔴 **피그마는 다크 푸터**지만 밝은 면으로 간다 — 사내 규칙(`surface-alt`,
로고 `-black` 24px, 레드 없음)이고, 「전체적으로 밝은 톤」 요청과도 맞는다. */
.ft { background: var(--paper-2); color: var(--ink-2); padding: 64px 0 28px; }
.ft .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.ft .logo img { width: 96px; height: auto; margin-bottom: 16px; }
.ft h4 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-3); }
.ft p, .ft li { font-size: 14px; line-height: 1.8; }
.ft ul { margin: 0; padding: 0; list-style: none; }
.ft a:hover { color: var(--ink); text-decoration: underline; }
.ft .bot { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 22px;
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12px; }
@media (max-width: 860px) { .ft .cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 600px) { .ft .cols { grid-template-columns: 1fr; } }
/* ── 목업 표시 ────────────────────────────────────────────────────────
🔑 진짜 사이트로 오해하지 않도록. 히어로 전환 스위치도 여기 둔다 —
피그마는 슬로건 면이고, 「게임이 위에」는 따로 정한 것이라 둘 다 본다. */
/* 🔑 등장 효과는 opacity 한 번만. 패럴랙스·스크롤 하이재킹은 쓰지 않는다 */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* ══ Our Story — 피그마 「C. About and culture」 재현 ══════════════════ */
/* 제목 왼쪽 · 리드 오른쪽. 🔑 리드는 제목 **아랫줄에 맞춰** 내려 붙인다 */
.story-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: end; }
.story-head h1 { margin: 0; }
/* 🔑 두 톤 제목 — 윗줄 차콜, 아랫줄 레드. **레드 「텍스트」는 강조 한두 곳**이라는
CI 규칙 안에 있다 (면이 아니라 글자다)
⚠️ `.story-head` 안에서만 걸어 뒀더니 채용 화면 제목이 **한 줄로 붙었다** —
거기는 머리 칸을 두 칸으로 나누지 않아 `.story-head` 가 없다. 제목 자체에 건다. */
.t-hero .red, .t-page .red { color: var(--red); display: block; }
.story-head p { margin: 0 0 8px; }
@media (max-width: 900px) { .story-head { grid-template-columns: 1fr; gap: 24px; align-items: start; } }
/* 사진 + 레드 패널 띠 — 🔑 **색 면은 직각이다.** 라운드를 주지 않는다 */
.band { display: grid; grid-template-columns: 1.55fr 1fr; margin-top: 56px; }
/* 🔑 사진이든 영상이든 **같은 칸을 채운다** — 띠의 왼쪽은 하나의 그림 자리다 */
.band img, .band video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; display: block; }
/* ⚠️ **움직임을 줄이기로 한 사람에게는 멈춘 그림을 보여 준다.** `autoplay` 는
속성이라 CSS 로 못 끄므로 `v2-careers.js` 가 멈춘다 — 여기서는 포스터만 남는다. */
/* 🔑 **위·가운데·아래로 벌린다** (피그마). 가운데 모아 두면 아래쪽이 비어 보인다 —
키커는 맨 위, 큰 글씨는 가운데, 설명은 바닥에 앉는다. */
.band .panel { background: var(--red); color: #fff; padding: 36px 44px;
display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.band .panel .t-num { margin: 0; }
.band .panel .t-num { color: #fff; }
.band .panel .t-num::before { background: #fff; }
.band .panel h2 { margin: 0; }
.band .panel p { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.88); max-width: 42ch; }
@media (max-width: 900px) {
.band { grid-template-columns: 1fr; }
.band img { aspect-ratio: 16/9; }
.band .panel { padding: 28px 24px; }
}
/* 가로형 연표 — 점을 꿴 선 하나. **한 화면에 다섯 칸**, 나머지는 가로로 넘긴다
🔑 다섯으로 못 박는 이유: 칸 너비를 글에 맡기면 「Spun off as an independent
company」 같은 긴 줄에서 칸이 벌어져 선 간격이 들쭉날쭉해진다.
⚠️ **숨은 가로 스크롤을 만들지 않는다** (사내 규칙) — 화살표를 띄우고,
마지막 칸이 잘려 보이게 두어 더 있다는 것을 알린다. */
.tl-wrap { position: relative; }
.tl-h {
display: grid; grid-auto-flow: column;
grid-auto-columns: calc((100% - 4 * 48px) / 5); /* 다섯 칸 + 사이 넷 */
/* ⚠️ 아래 여백이 좁으면 **가로 스크롤바가 글에 붙어** 밑줄처럼 보인다 */
gap: 48px; overflow-x: auto; padding: 28px 0 24px;
/* ⚠️ **mandatory 를 쓰지 않는다.** 화살표로 scrollBy 를 걸면 스냅이 그 자리에서
되돌려 **스크롤이 아예 먹지 않는다** (실제로 그랬다). proximity 로 두고,
넘기는 거리는 칸 간격의 정확한 배수로 준다. */
scroll-snap-type: x proximity; scroll-behavior: smooth;
scrollbar-width: thin;
}
.tl-h .it { scroll-snap-align: start; position: relative; padding-top: 22px; min-width: 0; }
/* 선은 칸마다 이어 긋는다 — 한 줄을 깔면 넘길 때 끊긴다 */
.tl-h .it::before { content: ""; position: absolute; top: 5px; left: 0; right: -48px;
height: 1px; background: var(--line); }
.tl-h .it:last-child::before { right: 0; }
.tl-h .it::after { content: ""; position: absolute; top: 0; left: 0;
width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.tl-h .y { font-size: 28px; font-weight: 900; color: var(--red); letter-spacing: -.02em;
line-height: 1.2; font-variant-numeric: tabular-nums; }
.tl-h .k { margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.tl-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.tl-nav button { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--paper);
border-radius: var(--r-sm); font: inherit; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.tl-nav button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.tl-nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 900px) { .tl-h { grid-auto-columns: calc((100% - 32px) / 2); gap: 32px; }
.tl-h .it::before { right: -32px; } }
@media (max-width: 600px) { .tl-h { grid-auto-columns: 78%; gap: 24px; }
.tl-h .it::before { right: -24px; } }
/* ══ HOW WE BUILD — 피그마 「무엇을 어떻게 만드는가」 ══════════════════ */
/* 🔑 **두 칸의 키를 맞춘다** (`stretch`). `start` 로 두면 왼쪽 사진이 오른쪽 03번
문구보다 한참 아래까지 내려가, 섹션이 왼쪽으로 기운 것처럼 보였다. */
.build { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: stretch; }
.build .lead-col { display: flex; flex-direction: column; }
/* 🔴 **사진은 16:9 가로형이다** (피그마 실측 1.88:1). 앞서 두 칸 높이를 맞추려고
남는 높이를 사진에 주었더니 **1.14:1 세로형처럼 늘어났다** — 단체 사진이
위아래로 잘려 사람 얼굴이 먼저 잘려 나갔다.
🔑 키를 맞추는 일은 사진이 아니라 **칸**이 한다. 사진은 비율을 지키고, 왼쪽
칸이 오른쪽보다 일찍 끝나는 것은 그대로 둔다 — 피그마도 그렇다. */
/* 🔴 **`height` 속성이 `aspect-ratio` 를 이긴다.** 마크업에 height="480" 이
남아 있어 비율을 16:9 로 적어 놓고도 1.13:1 로 그려졌다 — 비율은 **한쪽이
auto 일 때만** 쓰인다. `height:auto` 를 함께 건다. */
.build .lead-col img { aspect-ratio: 16/9; height: auto; object-fit: cover; flex: 0 0 auto; }
.build .lead-col h2 { margin: 0 0 20px; }
/* 사진 위 꼬리표 — 레드 선 + 영문 라벨 */
.tag-line { display: flex; align-items: center; gap: 12px; margin: 32px 0 14px;
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tag-line::before { content: ""; width: 28px; height: 2px; background: var(--red); flex: none; }
.build .lead-col img { width: 100%; }
/* 오른쪽 — 번호 블록. 🔑 위에 선 하나로 칸을 가른다 (테두리 상자를 쓰지 않는다) */
/* 🔑 **첫 칸에도 윗선을 둔다** (피그마). 선을 빼면 오른쪽 칸이 왼쪽 키커보다
한 줄 위로 올라와 두 칸이 어긋나 보인다 — 선 하나가 기준선 노릇을 한다. */
.steps > div { border-top: 1px solid var(--line); padding: 20px 0 24px; }
.steps h3 { margin: 0 0 10px; }
.steps ul { margin: 12px 0 0; padding-left: 18px; }
.steps li { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
/* 아래 세 기둥 */
/* ⚠️ 위 여백은 이름표(`.t-num`)가 가져간다 — 여기서 또 주면 두 칸이 벌어진다 */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 20px; }
.pillars > div { border-top: 2px solid var(--line); padding-top: 20px; }
.pillars .lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--red); margin-bottom: 14px; }
.pillars h3 { margin: 0 0 14px; }
.pillars ul { margin: 12px 0 0; padding-left: 18px; }
.pillars li { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
@media (max-width: 900px) {
.build { grid-template-columns: 1fr; gap: 40px; }
.pillars { grid-template-columns: 1fr; gap: 32px; margin-top: 20px; }
}
/* ══ 채용 목록 — 피그마 「E. Careers listing」 ════════════════════════ */
/* 🔑 공고 줄은 **쌓는다** — 제목 / 조건 / 단추 순. 홈의 미리보기(.jobs .job)는
오른쪽에 단추를 붙이는데, 목록에서는 제목이 길어 단추가 밀려 내려간다. */
.jobs.stack .job { display: block; padding: 28px 0; }
.jobs.stack .job .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 16px; }
.jobs.stack .job .meta span { font-size: 14px; color: var(--ink-2); }
/* 구분점 — 글자로 「|」 를 넣지 않는다. 화면 낭독기가 「수직선」을 읽는다 */
.jobs.stack .job .meta span + span::before { content: ""; display: inline-block; width: 1px;
height: 12px; background: var(--line); margin-right: 14px; vertical-align: -1px; }
/* 주소 라벨 */
.office .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--red); margin-top: 18px; }
/* ══ Contact — 피그마 「G. Contact」 ══════════════════════════════════ */
/* 문의 창구 둘 — 위에 선 하나로 가른다 */
/* 🔑 창구는 **셋**이다 (CI 가 정한 biz · people · support). 둘로 줄이면
고객지원 가는 길이 사라진다 — 게임 이용 문의가 사업 메일로 온다. */
.inq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
/* 🔑 **단추를 아래에 맞춘다.** 칸마다 설명 길이가 달라(채용 칸에는 링크가 한 줄 더
있다) 단추가 제각각 높이에 서 있었다 — 세 칸이 같은 줄에서 끝나야 한 묶음으로
읽힌다. 남는 높이를 단추 위의 여백이 가져간다. */
.inq > div { border-top: 1px solid var(--line-s); padding-top: 20px;
display: flex; flex-direction: column; }
.inq .btn { align-self: flex-start; margin-top: auto; }
.inq .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-2); margin-bottom: 14px; }
.inq h2 { margin: 0 0 12px; }
.inq p { margin: 0 0 22px; max-width: 46ch; }
@media (max-width: 1000px) { .inq { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 700px) { .inq { grid-template-columns: 1fr; } }
/* 오피스 카드 머리 — 핀 + 이름 왼쪽, 안내 라벨 오른쪽 */
.office .hd-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.office .hd-row .left { display: flex; align-items: center; gap: 12px; }
.office .guide { font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--red); }
.office h3 { margin: 0; }
/* 🔑 지도는 **카드 안에서 한 칸**을 차지한다. 주소 위에 둔다 — 「어디인가」를
먼저 보여 주고 글자 주소가 그것을 확인해 준다. */
.office .gmap { width: 100%; height: 220px; border: 1px solid var(--line);
border-radius: var(--r-sm); display: block; margin-top: 18px; }
/* ══ 게임 상세 — 피그마 「H. Game detail」 ════════════════════════════
🔴 **어두운 바닥을 걷어낸다.** 지금 사이트는 키아트를 전면에 깔고 그 위에 흰
글씨를 얹는데, 아트마다 밝기가 달라 읽히는 정도가 들쭉날쭉했다. 밝은 면에
글을 두고 아트는 **자기 칸 안에서** 보여 준다. */
.crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.gd-head { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; margin-top: 20px; }
.gd-head h1 { margin: 0 0 12px; }
.gd-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 20px; }
.gd-meta span { font-size: 14px; color: var(--ink-2); }
.gd-meta .pub { color: var(--red); font-weight: 700; }
.gd-head .stores { display: flex; gap: 10px; flex-wrap: wrap; }
.gd-icon { text-align: center; }
.gd-icon img { width: 104px; height: 104px; border-radius: 22px; object-fit: cover; }
@media (max-width: 760px) { .gd-head { grid-template-columns: 1fr; gap: 24px; } }
/* 본문 두 칸 — 왼쪽 아트·스크린샷·소개, 오른쪽 정보 카드 */
.gd-body { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; margin-top: 40px; }
@media (max-width: 1000px) { .gd-body { grid-template-columns: 1fr; } }
.gd-art { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.gd-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; background: var(--paper); }
.gd-card + .gd-card { margin-top: 20px; }
.gd-card h2 { margin: 0 0 16px; }
.gd-card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; }
.gd-card dt { font-size: 13px; color: var(--ink-2); }
.gd-card dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; }
.gd-card .note { font-size: 11px; color: var(--ink-3); margin: 16px 0 0; line-height: 1.6; }
.gd-card .links { list-style: none; margin: 16px 0 0; padding: 0; }
.gd-card .links li { border-top: 1px solid var(--line); }
.gd-card .links a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 13px; }
.gd-card .links a:hover { color: var(--red); }
.gd-card .btn { width: 100%; justify-content: center; }
/* 스크린샷 — 가로로 넘긴다.
🔴 **원본 비율을 지킨다.** 칸을 16:9 로 고정했더니 세로형 게임 화면이 위아래로
잘려 나갔다 — 게임마다 세로·가로가 섞여 있어 한 비율로 묶을 수 없다.
**높이만 맞추고 너비는 사진이 정한다.**
⚠️ 마지막 장이 잘려 보이게 두어 더 있음을 알린다 (숨은 가로 스크롤을 만들지 않는다).
⚠️ 아래 여백은 스크롤바 자리다 — 좁히면 막대가 사진에 붙는다. */
.shots { display: flex; gap: 16px; overflow-x: auto;
scroll-snap-type: x proximity; padding-bottom: 18px; }
.shots img { height: 340px; width: auto; flex: 0 0 auto; border-radius: var(--r-sm);
scroll-snap-align: start; }
@media (max-width: 900px) { .shots img { height: 280px; } }
@media (max-width: 600px) { .shots img { height: 240px; } }
/* 소개 글 상자 */
.gd-about { border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; margin-top: 18px; }
.gd-about p { margin: 0; }
/* 다른 타이틀 — 가로 카드 둘 */
.more-games { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mg { display: flex; gap: 16px; border: 1px solid var(--line); border-radius: var(--r-md);
padding: 16px; background: var(--paper); align-items: center; }
.mg img { width: 160px; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.mg h3 { margin: 0 0 6px; }
@media (max-width: 760px) { .more-games { grid-template-columns: 1fr; } .mg img { width: 112px; } }
/* 🔑 공고 제목은 **누르는 자리**다 — 밑줄 대신 색으로 알린다(목록이 밑줄투성이가 된다) */
.job h2 a:hover, .job h3 a:hover { color: var(--red); }
/* ══ 사진 위에 마우스를 올리면 살짝 확대 ══════════════════════════════
🔑 지금 사이트와 **같은 값**이다 (scale 1.04~1.05 · .4s ease). 다르게 주면
목업과 본편을 오갈 때 손끝 감각이 어긋난다.
🔑 **잘라 줄 테두리가 있는 곳에만** 건다 — `overflow:hidden` 이 없으면 사진이
칸 밖으로 비어져 나가 옆 칸을 덮는다.
⚠️ `prefers-reduced-motion` 에서는 걸지 않는다. 움직임을 줄여 달라는 설정이다. */
.gal figure { margin: 0; overflow: hidden; border-radius: var(--r-sm); background: var(--line); }
.gal figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
.gal figure img,
.card .art img,
.post-c img,
.mg img { transition: transform .4s ease; }
.gal figure:hover img { transform: scale(1.05); }
.card:hover .art img,
.post-c:hover img,
.mg:hover img { transform: scale(1.04); }
.card .art .cap { transition: transform .25s ease; }
}
/* 🔑 띠는 **마우스를 올렸을 때와 키보드로 짚었을 때** 둘 다 올라온다 —
마우스가 없는 사람에게도 같은 것이 보여야 한다 */
.card:hover .art .cap,
.card:focus-within .art .cap { transform: translateY(0); }
/* ══ 약관·처리방침 ════════════════════════════════════════════════════
🔑 **읽으라고 만든 화면이다.** 글 폭을 좁히고(한 줄 35~45자) 목차를 옆에 붙인다.
⚠️ 목차는 **sticky 하나만** 쓴다 — 외부 사이트에서 헤더는 스크롤과 함께 올라간다
(둘 다 붙이면 화면 위쪽이 두 겹으로 잠긴다). */
.legal { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; }
.legal nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.legal nav a { font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 8px 12px;
border-left: 2px solid var(--line); }
.legal nav a:hover { color: var(--ink); border-left-color: var(--ink-3); }
.legal nav a[aria-current="true"] { color: var(--red); border-left-color: var(--red); font-weight: 700; }
.legal article { max-width: 68ch; }
.legal article h2 { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em;
margin: 44px 0 14px; scroll-margin-top: 24px; }
.legal article h2:first-of-type { margin-top: 0; }
.legal article p { margin: 0 0 14px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.legal article ul, .legal article ol { margin: 0 0 14px; padding-left: 20px; }
.legal article li { font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.legal article b { color: var(--ink); }
.legal article table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.legal article th, .legal article td { border: 1px solid var(--line); padding: 10px 12px;
font-size: 14px; line-height: 1.6; text-align: left; vertical-align: top; }
.legal article th { background: var(--paper-2); font-weight: 700; }
/* 번역본 고지 — 눈에 띄되 경고처럼 보이지 않게 */
.legal .fhint { font-size: 13px; line-height: 1.7; color: var(--ink-3);
border-left: 2px solid var(--line); padding: 2px 0 2px 14px; margin: 0 0 20px; }
/* 🔑 **고쳐야 한다는 사실을 화면에 적어 둔다** — 문서 안에 숨겨 두면 아무도 안 본다 */
.legal .stamp { background: var(--red-20); border-left: 3px solid var(--red);
padding: 14px 16px; margin: 0 0 28px; font-size: 14px; line-height: 1.7; }
@media (max-width: 900px) {
.legal { grid-template-columns: 1fr; gap: 28px; }
.legal nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.legal nav a { border-left: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.legal nav a[aria-current="true"] { border-color: var(--red); }
}
/* 🔑 카드 제목도 누르는 자리다 — 밑줄 대신 색으로 알린다 */
.card .t h3 a:hover { color: var(--red); }
/* ══ 채용 공고 상세 — 피그마 「F. Job detail」 ════════════════════════ */
.job-head { display: flex; align-items: flex-start; justify-content: space-between;
gap: 32px; margin-top: 18px; }
.job-head h1 { margin: 0; max-width: 24ch; }
/* 🔑 **지원 단추는 늘 보인다.** 공고가 길어 아래까지 읽고 나면 위로 돌아가야 하는데,
붙여 두면 읽던 자리에서 바로 누를 수 있다.
⚠️ sticky 는 이 화면에서 이것 **하나뿐**이다 — 헤더는 스크롤과 함께 올라간다. */
/* 🔑 **작아서 안 보였다** (2026-10-14). 공고에서 할 일이 하나뿐인 화면이라
그 하나는 커야 한다 — 글자와 여백을 키운다. */
.job-apply { position: sticky; top: 24px; flex: none; font-size: 15px; padding: 15px 28px; }
/* 요약 카드 — Mode · Location · Experience · Salary */
.job-meta { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2);
padding: 4px 24px; margin: 28px 0 32px; }
.job-meta dl { margin: 0; display: grid; grid-template-columns: 150px 1fr; }
.job-meta dt, .job-meta dd { margin: 0; padding: 16px 0; border-top: 1px solid var(--line);
font-size: 14px; line-height: 1.6; }
.job-meta dt { color: var(--ink-2); }
.job-meta dd { color: var(--ink); font-weight: 700; }
.job-meta dt:first-of-type, .job-meta dt:first-of-type + dd { border-top: 0; }
@media (max-width: 600px) {
.job-meta dl { grid-template-columns: 1fr; }
.job-meta dd { padding-top: 0; border-top: 0; }
}
/* 본문 — 읽는 글이다. 옛 채용 화면과 나란히 놓고 맞췄다 (2026-10-14).
⚠️ **`max-width` 를 여기서 또 걸지 않는다.** 단(`.wrap.read`)이 이미 720px 이라,
`72ch` 를 남겨 두면 본문만 그 안에서 또 왼쪽에 붙는다. */
/* 머리말 — 본문 맨 앞 한 줄. 어느 태그로 들어오든 `v2-job.js` 의 `tidy()` 가
여기로 모아 준다. 옛 화면처럼 **왼쪽 선 + 회사 이름 레드**로 둔다. */
.job-body .lead { margin: 0 0 28px; padding: 2px 0 2px 16px; border-left: 3px solid var(--line);
font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.job-body .lead .nm { color: var(--red); }
/* 🔴 **`h2` 만 보고 있었다** (2026-10-14). 이관 본문의 절 제목은 `h3` 로 들어와
브라우저 기본값(18.72px 검정)으로 떴고, 「[QUY TRÌNH TUYỂN DỤNG]」처럼 `p` 로
남은 것은 **본문과 구분이 안 됐다**. 셋을 한 모양으로 묶는다
(`p` → `h3` 승격은 `v2-job.js` 의 `tidy()` 가 한다). */
.job-body h2, .job-body h3 { margin: 40px 0 14px; font-size: 19px; font-weight: 700;
line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }
.job-body h2:first-child, .job-body h3:first-child { margin-top: 0; }
/* 🔑 **글자를 키우고 줄을 좁혔다.** 15px/1.8 은 글자가 작아 줄 사이가 멀어 보였다 —
16px/1.7 은 줄 간격의 절대값이 같은데도 **빽빽하게** 읽힌다. */
.job-body p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.job-body ul { margin: 0 0 14px; padding-left: 22px; }
.job-body li { margin: 0 0 6px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
/* 🔴 **소제목과 그 목록이 한 묶음으로 안 읽혔다** (2026-10-14).
「- Quản lý Team Creative」 같은 줄과 바로 아래 목록 사이가 문단 사이와 **같은
14px** 이라, 목록이 어느 소제목에 딸린 것인지 눈으로 묶이지 않았다.
🔑 **붙일 것은 붙이고 뗄 것은 뗀다** — 소제목과 제 목록은 4px 로 붙이고,
묶음과 묶음 사이는 22px 로 벌린다. 간격이 곧 묶음을 말한다. */
.job-body p:has(+ ul), .job-body p:has(+ ol) { margin-bottom: 4px; }
/* ⚠️ **다음 소제목 앞에서만 벌린다** (2026-10-14). 처음에는 목록 뒤의 문단을
모두 벌렸는데, 「※ 면접 비용을 지원해 드립니다」처럼 **그 목록에 딸린 주석**까지
밀려나 혼자 떨어져 보였다. 벌릴 자리는 **새 묶음이 시작하는 곳**(`- …` 줄)뿐이다. */
.job-body ul + p.ln, .job-body ol + p.ln { margin-top: 22px; }
/* 🔴 **「- 」로 시작하는 줄들이 서로 따로 놀았다** (2026-10-14). 이관 본문에서
목록이 `p` 로 남은 자리인데 문단 간격(14px)이 그대로 붙어, 다섯 줄이 **다섯
덩이**로 읽혔다. 항목끼리는 6px 로 붙여 한 덩이가 되게 한다.
(어느 줄이 항목인지는 `v2-job.js` 의 `tidy()` 가 `.ln` 으로 표시한다) */
.job-body p.ln { margin-bottom: 6px; }
.job-body p.ln + p.ln { margin-top: 0; }
/* 묶음이 끝나고 보통 문단이 오면 다시 벌린다 */
.job-body p.ln + p:not(.ln) { margin-top: 20px; }
/* 🔑 굵게는 **진하게도** 한다. 본문이 흐린 회색이라 굵기만으로는 덜 떠올랐다 */
.job-body strong, .job-body b { color: var(--ink); font-weight: 700; }
/* 🔑 **링크는 링크로 보여야 한다** (2026-10-14). 본문과 같은 회색이라 눌리는
줄인지 알 수 없었다. 색은 사이트의 레드를 쓴다 — 파랑을 들이면 이 화면에만
없던 색이 하나 더 생긴다. 밑줄로 색맹인 사람에게도 표시가 남는다. */
.job-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px; }
.job-body a:hover { text-decoration-thickness: 2px; }
/* 본문 가운데 쓰인 인용 — 머리말은 위의 `.lead` 가 맡으므로 여기 오지 않는다 */
.job-body blockquote { margin: 0 0 24px; padding: 2px 0 2px 16px;
border-left: 3px solid var(--line); color: var(--ink); }
.job-body blockquote p { margin: 0; color: var(--ink); }
/* 다 읽은 자리의 지원 단추 — 위의 따라붙는 단추와 짝이다 */
.job-end { margin: 40px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.job-end .btn { width: 100%; justify-content: center; }
/* 제출 서류 */
.job-docs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.job-docs span { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 12px;
font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--paper); }
@media (max-width: 760px) {
.job-head { flex-direction: column; gap: 20px; }
.job-apply { position: static; }
}
/* ══ 히어로 — 슬로건 + 미션 ═════════════════════════════════════════
🔑 **둘만 둔다**: 슬로건(무엇을 말하는가) → 미션(무엇을 하는가).
가치 두 칸은 2026-10-13 에 걷어냈다 — 레드 띠 안에 글 덩어리가 셋이 되면
정작 읽혀야 할 슬로건이 묻힌다. 가치는 회사 소개에서 따로 말한다. */
/* ⚠️ **글자 수로 너비를 묶지 않는다** (2026-10-13). `62ch` 를 걸었더니 미션 둘째
줄이 한가운데서 꺾여 세 줄이 됐다 — 레드 띠에서는 두 줄이 나란해야 읽힌다.
`wrap` 이 이미 1312px 로 잡아 주므로 여기서 또 자를 이유가 없다. */
.hero-slogan .mission { margin: 28px 0 0; max-width: none; font-size: 18px; line-height: 1.7;
color: rgba(255,255,255,.94); }
/* 🔑 설명을 레드 패널로 내린 뒤의 머리 칸 — **제목 한 줄만 남았다.**
두 칸 격자를 풀지 않으면 오른쪽 절반이 빈 채로 남아 제목이 왼쪽으로 쏠려 보인다. */
.story-head.one-line { display: block; }
.story-head.one-line h1 { max-width: none; }
/* ══ 가로 레일 — 사진 · 글 ═══════════════════════════════════════════
🔑 쪽 번호 대신 **옆으로 넘긴다** (2026-10-13). 사진 45장과 글 20편은 쪽을
나눠 봐야 「다음 쪽에 뭐가 있나」가 보이지 않는다. 옆으로 밀면 다음 것이
반쯤 보여서 더 볼지 말지를 바로 정할 수 있다.
⚠️ **mandatory 를 쓰지 않는다.** 화살표로 옮길 때 스냅이 그 자리에서 되돌려
스크롤이 아예 먹지 않는다 (연혁에서 겪었다). proximity 로 두고, 넘기는
거리는 칸 간격의 정확한 배수로 준다. */
.rail { position: relative; }
.rail-track {
display: grid; grid-auto-flow: column;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity; scroll-behavior: smooth;
scrollbar-width: thin;
/* ⚠️ 아래 여백이 좁으면 **가로 스크롤바가 사진에 붙어** 테두리처럼 보인다 */
padding-bottom: 14px;
}
.rail-track > * { scroll-snap-align: start; min-width: 0; }
/* 🔑 `.gal`·`.posts` 의 세로 격자를 **덮어쓴다** — 클래스 둘을 겹쳐 특정도를 올린다 */
/* 🔑 사진은 **세 줄이 한 칸**이다 (2026-10-13). 한 줄로 늘어놓으면 띠처럼 얇아져
「사진이 몇 장이나 있나」가 안 보인다. 세 줄을 그대로 두고 칸째 옆으로 넘긴다. */
.rail-track.gal { grid-template-columns: none; grid-template-rows: repeat(3, auto);
grid-auto-columns: calc((100% - 3 * 8px) / 4); }
.rail-track.gal figure { aspect-ratio: 3/2; }
.rail-track.posts { grid-template-columns: none; grid-auto-columns: calc((100% - 2 * 24px) / 3); }
/* 화살표 — **칸 옆 여백에 세운다.** `.wrap` 의 좌우 여백이 64px 이라 그 안에 선다.
⚠️ 사진 위에 겹쳐 놓지 않는다. 첫 장과 끝 장이 가려져, 가린 자리에 무엇이
있었는지 모르게 된다. */
.rail-nav button {
position: absolute; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px; border-radius: 50%;
border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.rail-nav button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.rail-nav button:disabled { opacity: .3; cursor: default; box-shadow: none; }
/* 🔑 **여백 폭에 매단다** — 고정 px 로 적으면 좁은 화면에서 단추가 화면 밖으로 나간다 */
.rail-nav .prev { left: calc(-1 * var(--gut) + 8px); }
.rail-nav .next { right: calc(-1 * var(--gut) + 8px); }
/* 🔑 넘길 것이 없으면 통째로 숨는다 — `display` 가 걸린 요소는 hidden 이 밀린다 */
.rail-nav[hidden], .tl-nav[hidden] { display: none; }
/* ⚠️ **1100px 아래에서는 화살표를 치운다.** 그 아래로는 `.wrap` 이 화면 폭을 다
쓰기 시작해, 단추가 여백에 서면 화면 끝에 달라붙는다. 900px 아래는 `--gut` 이
32px 로 줄어 아예 설 자리도 없다. 손가락으로 미는 화면이라 화살표 없이 둔다. */
@media (max-width: 1100px) { .rail-nav { display: none; } }
/* ⚠️ 칸 수를 줄이는 것은 **900px 아래**다. 위 규칙과 한 블록에 묶었더니 1024px
에서 사진이 두 장씩만 떴다 — 화살표를 치우는 폭과 칸을 줄이는 폭은 다르다. */
@media (max-width: 900px) {
.rail-track.gal { grid-auto-columns: calc((100% - 8px) / 2); }
.rail-track.posts { grid-auto-columns: 78%; }
}
/* ══ 사진 크게 보기 ═══════════════════════════════════════════════════
🔑 **지금 사이트의 `lightbox.js` 를 그대로 쓴다** (2026-10-13). 목업으로 옮기면서
빠져 있었다 — 갤러리는 3:2 로 **잘라서** 보여 주므로, 단체 사진은 양끝 사람이
잘린 채로 끝난다. 누르면 원본 비율로 펼쳐야 한다.
⚠️ 모양만 v2 토큰으로 맞춘다. 동작(번호·화살표·Esc·초점 되돌리기)은 손대지 않는다 —
두 곳에서 쓰는 파일이라 여기서 고치면 지금 사이트가 같이 바뀐다. */
.lbox { position: fixed; inset: 0; z-index: 90; background: rgba(8, 10, 14, .96);
display: flex; align-items: center; justify-content: center; padding: 56px 64px; }
.lbox[hidden] { display: none; }
body.lbox-open { overflow: hidden; }
.lbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
max-width: 100%; max-height: 100%; }
/* 🔑 `contain` — 여기서 또 자르면 크게 보는 뜻이 없다 */
.lbox img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; display: block; }
.lbox figcaption { color: #fff; font-size: 13px; line-height: 1.6; text-align: center; max-width: 72ch; }
.lbox figcaption .n { display: block; margin-top: 4px; font-size: 11.5px;
letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.lbox button { position: absolute; background: rgba(255, 255, 255, .1); border: 0; color: #fff;
cursor: pointer; line-height: 1; transition: background .15s; }
.lbox button:hover { background: rgba(255, 255, 255, .22); }
.lbox-x { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 20px; }
.lbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 26px; }
.lbox-prev { left: 12px; }
.lbox-next { right: 12px; }
.lbox button:disabled { opacity: .25; cursor: default; background: rgba(255, 255, 255, .1); }
/* 🔑 좁은 화면에서는 좌우 단추가 사진을 덮는다 — 아래로 내린다 */
@media (max-width: 760px) {
.lbox { padding: 52px 12px 76px; }
.lbox img { max-height: calc(100vh - 190px); }
.lbox-nav { top: auto; bottom: 14px; transform: none; width: 56px; height: 44px; }
.lbox-prev { left: 24px; }
.lbox-next { right: 24px; }
}
/* 🔑 누를 수 있다는 것을 커서로 알린다. 키보드로 잡힌 자리도 보여야 한다 —
안 보이면 탭으로 들어온 사람이 자기가 어디 있는지 알 수 없다. */
.gal figure { cursor: zoom-in; }
.gal figure:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* ══ N Story 글 ══════════════════════════════════════════════════════
🔑 읽는 화면이다. **한 단으로 좁게** 둔다 — 글줄이 길면 다음 줄 첫 글자를
찾느라 눈이 되돌아온다. 사진만 단보다 넓게 나간다. */
/* ⚠️ **글자 수로 제목을 묶지 않는다** (2026-10-13). `24ch` 를 걸었더니 한 줄에 들어갈
제목까지 둘로 꺾였다 — 글 제목은 본문과 달리 **한 줄로 읽히는 것이 먼저**다.
`wrap` 이 이미 1312px 로 잡아 주므로 여기서 또 자를 이유가 없다.
🔑 그래도 넘치는 긴 제목은 저절로 꺾인다 — 묶지 않는다는 뜻이지 한 줄로 **고정**
한다는 뜻이 아니다. */
.post-h { margin: 14px 0 0; }
.post-by { margin: 14px 0 0; }
.post-cover { margin: 40px 0 0; }
/* ⚠️ **여기서 또 자르지 않는다.** 단(`.wrap.read`)이 이미 720px 이라, `74ch` 를
남겨 두면 그 안에서 본문만 21px 더 좁아져 **또 왼쪽으로 붙는다.** */
.post-body { margin-top: 40px; font-size: 17px; line-height: 1.85; color: var(--ink-2); }
/* 🔴 **`h3` 도 함께 받는다** (2026-10-13). 어드민 편집기의 「소제목」은 저장될 때
서버가 `h3` 로 맞춘다 — `h2` 만 보고 있었더니 **어드민으로 쓴 글의 소제목이
본문보다 작게** 떴다. 옛 블록 글은 `h2` 로 들어오므로 둘 다 받아야 한다. */
.post-body h2, .post-body h3 { margin: 48px 0 14px; font-size: 22px; font-weight: 700;
line-height: 1.45; color: var(--ink); }
.post-body p { margin: 0 0 20px; white-space: pre-line; } /* 줄바꿈이 데이터에 있다 */
.post-body ul { margin: 0 0 20px; padding-left: 20px; }
.post-body li { margin: 0 0 8px; }
/* 🔑 콜아웃 — 레드 면을 **또 깔지 않는다.** 한 화면에 레드는 하나다 */
.post-body .bnote { margin: 0 0 24px; padding: 18px 20px; background: var(--paper-2);
border-left: 3px solid var(--red); font-size: 16px; white-space: pre-line; }
.post-body .bfig, .post-cover { margin-left: 0; margin-right: 0; }
.bfig { margin: 28px 0; cursor: zoom-in; }
.bfig img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.bfig figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.bfig:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* ⚠️ 본문 사진은 **글단보다 넓게.** 세로 사진이 많아 글단 폭에 맞추면 화면을 다 먹는다 */
/* 🔑 사진은 **단 너비를 꽉 채운다** (2026-10-14). 560px 로 묶어 두면 720px 단 안에서
사진만 왼쪽에 붙어, 고치려던 쏠림이 작게 되살아난다. 원래 의도도 「사진은 단보다
좁지 않게」였다. */
.post-body .bfig { max-width: none; }
/* 🔑 **어드민으로 쓴 글의 사진은 `bfig` 클래스가 없다** — 편집기가 맨 `` 로
저장한다. 옛 블록 글(`bfig`)과 같아 보이도록 여기서 같은 모양을 준다.
🚨 비율은 손대지 않는다 — `height: auto` 만 두고 `aspect-ratio`·`object-fit` 는 쓰지 않는다. */
.post-body figure { margin: 28px 0; cursor: zoom-in; }
.post-body figure img { width: 100%; height: auto; border-radius: var(--r-sm); }
.post-body figure figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.post-body figure:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* 🔑 영상 칸 — `site.css` 의 `.post .byt` 를 **여기로 옮겨 왔다** (2026-10-13).
그 규칙은 `.post` 안에서만 돌고, N Story 글 화면은 `v2.css` 하나만 읽는다
(`post.html` 12줄) — 옮겨 오지 않으면 유튜브가 기본 300×150 으로 작게 박힌다.
⚠️ `figure` 가 아니라 `div` 다 — 라이트박스의 사진 번호를 밀지 않으려는 것이다. */
.post-body .byt { position: relative; margin: 28px 0; aspect-ratio: 16/9;
background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.post-body .byt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* 🔑 표 — 역시 `site.css` 에서 옮겨 왔다.
🔴 **표에 `display:block` 을 걸지 않는다.** 가로 스크롤을 주려고 그렇게 했더니
표가 더는 표 박스가 아니게 되어 `table-layout:fixed` 가 통째로 무시됐다 —
정해 둔 열 너비가 안 먹는다. 스크롤은 **감싼 칸**이 맡는다
(`v2-post.js` 의 `sizeTables` 가 둘러 준다). */
.post-body .btwrap { overflow-x: auto; margin: 0 0 22px; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14.5px; }
.post-body .btwrap > table { margin: 0; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left;
vertical-align: top; line-height: 1.7; color: var(--ink-2); }
.post-body th { background: var(--paper-2); color: var(--ink); font-weight: 600; white-space: nowrap; }
/* 선을 끈 표 — 칸 나눔은 두고 테두리만 없앤다 (머리줄 바탕도 함께 뺀다) */
.post-body table[data-line="none"] th, .post-body table[data-line="none"] td { border-color: transparent; }
.post-body table[data-line="none"] th { background: none; }
.post-body table[data-line="bold"] th, .post-body table[data-line="bold"] td { border-width: 2px; border-color: var(--ink-3); }
/* 🔑 열 너비를 정해 둔 표는 그 값을 지킨다 (`data-w` → `sizeTables` 가 폭으로 바꾼다) */
.post-body table[data-w] { table-layout: fixed; }
/* 🔑 약관의 조(條) — `h2` 는 큰 묶음(1~7)이 쓰고 있어 **조는 h3 로 둔다.**
⚠️ 차례(`v2-legal.js`)는 `h2[id]` 만 본다 — 조를 h2 로 올리면 왼쪽 차례가
열 줄 넘게 늘어나 정작 큰 묶음이 묻힌다. */
.legal article h3 { margin: 28px 0 10px; font-size: 16px; font-weight: 700;
line-height: 1.5; color: var(--ink); }
/* 항(項)은 번호를 매긴다 — 약관은 「제6조 2항」으로 가리키는 글이다 */
.legal article ol { list-style: decimal; }
.legal article ol > li { margin: 0 0 8px; }
/* ══ 연혁 — 카드형 ═══════════════════════════════════════════════════
🔑 **선 위의 점에서 카드로 바꿨다** (2026-10-13, 디자이너 시안). 선형은 한 칸에
연도와 한 줄이 떠 있어 「무엇이 몇 개나 있나」가 안 잡혔다. 카드로 두면 칸이
세어지고, 번호를 달 수 있어 전체 길이가 먼저 보인다.
⚠️ 흰 카드를 **흰 바닥에 두지 않는다.** 바깥 상자를 흰색으로 두고 섹션 바닥을
회색(`alt`)으로 깔아야 카드 테두리가 보인다. */
.tlc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 24px; position: relative; }
/* 스크롤 막대 — 옆으로 밀 수 있다는 것을 **가만히 있을 때도** 말해 준다.
🔑 **옅은 레드에서 레드로 올렸다** (2026-10-14). 6px 짜리 막대 하나는 「레드 면」이
아니다 — 옆의 안내 칩에 박힌 점과 같은 무게다. 옅게 두니 회색 띠에 묻혀,
움직일 수 있다는 신호가 되지 못했다.
🔑 **연혁 전용(`tlc-`)이 아니라 레일 공통 부품이다** (2026-10-14). 연혁에만 띠가
있고 글·사진 레일에는 없어, 같은 화면 안에서 어떤 줄은 밀 수 있는지 보이고
어떤 줄은 안 보였다. `rail()` 은 `bar` 가 없으면 그냥 지나가므로, 띠를 붙이는
일은 **마크업에 한 줄 두는 것**이 전부다. */
.rail-top { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.rail-prog { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rail-prog span { display: block; height: 100%; width: 14%; border-radius: 999px;
background: var(--red); transition: width .2s ease, margin-left .2s ease; }
.rail-hint { display: inline-flex; align-items: center; gap: 8px; flex: none;
border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-2); }
.rail-hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
/* ⚠️ 카드 밖에 선 띠는 제목과 붙어 버린다 — 연혁은 카드 안이라 이 여백이 없다 */
.sec .wrap > .rail > .rail-top, .filters + .rail > .rail-top { margin-top: 4px; }
.tlc-rail { margin: 0; padding: 0 0 14px; list-style: none;
grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; } /* 다섯 칸 + 사이 넷 */
.ms { position: relative; border: 1px solid var(--line); border-radius: var(--r-md);
padding: 18px 18px 20px; background: var(--paper); }
.ms::before { content: ""; position: absolute; top: 18px; left: 18px;
width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.ms .no { position: absolute; top: 14px; right: 18px; font-size: 11px; font-weight: 700;
letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ms .y { margin-top: 20px; font-size: 32px; font-weight: 900; line-height: 1.1;
letter-spacing: -.02em; color: var(--red); font-variant-numeric: tabular-nums; }
.ms .k { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.ms .m { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
@media (max-width: 900px) {
.tlc { padding: 18px; }
.tlc-rail { grid-auto-columns: 78%; }
.rail-hint { display: none; } /* 좁은 화면에서는 띠만 남긴다 */
}
/* ══ 제목 크기 — 화면 폭을 따라간다 ══════════════════════════════════
🔴 전에는 `style="font-size:52px"` 처럼 **글에 박아 두었다.** 인라인 스타일은
미디어 쿼리가 못 이겨서, 375px 화면에서도 52px 로 그려졌다. Contact 의
「A CONVERSATION.」는 한 낱말이라 줄바꿈도 안 되어 **페이지 폭이 433px 로
늘어났다** — 가로 스크롤이 생기고 모든 칸이 어긋났다 (2026-10-13).
🔑 `clamp(최소, 화면비율, 최대)` 로 둔다. 넓은 화면에서는 적어 둔 값 그대로이고,
좁아지면 글자도 같이 줄어든다. 자리마다 쓰던 값이 달라 이름을 그 값으로 둔다. */
.fs-56 { font-size: clamp(28px, 7.5vw, 56px); }
.fs-52 { font-size: clamp(26px, 7vw, 52px); }
.fs-48 { font-size: clamp(25px, 6.6vw, 48px); }
.fs-44 { font-size: clamp(24px, 6vw, 44px); }
.fs-42 { font-size: clamp(23px, 5.8vw, 42px); }
.fs-36 { font-size: clamp(21px, 5vw, 36px); }
.fs-26 { font-size: clamp(19px, 3.6vw, 26px); }
/* ══ 손가락으로 누르는 화면 ═══════════════════════════════════════════
🔑 **누르는 것은 전부 44px 이상**으로 둔다 (2026-10-13). 데스크톱에서 작게 둔
것들이 그대로 내려와, 재 보니 언어 단추 34px · 작은 단추 39px · 분류 단추
40px 이었다 — 손가락 끝이 24px 안팎이라 옆 것을 같이 누르게 된다.
⚠️ 글자 크기는 올리지 않는다. 높이만 키워 누르는 자리를 넓힌다. */
@media (max-width: 900px) {
.btn, .btn.sm, .filters button, .pager a, .pager span { min-height: 44px; }
.btn.sm { padding: 10px 16px; }
.filters button { padding: 10px 14px; }
.hd .lang button { padding: 12px 14px; }
}
/* ══ 스토어 배지 ═════════════════════════════════════════════════════
🔴 **공식 파일 그대로.** 두 회사 모두 모양·비율·여백을 고치지 못하게 한다.
목업은 아이콘 + 글자로 흉내 내고 있었는데, 지금 사이트는 2026-10-08 에 같은
지적을 받고 이미 공식 파일로 바꿨다 — 목업만 되돌아가 있었다 (2026-10-13).
🔑 높이만 맞춘다. 배지마다 안쪽 여백이 달라 가로 길이가 다르게 보이는데,
그건 설계가 그런 것이라 억지로 맞추지 않는다. */
/* 🔴 **두 배지를 같은 높이로 두면 구글 쪽이 작아 보인다** (2026-10-13 지적).
파일을 재 보니 그렇게 그려져 있었다 — 구글 PNG 는 캔버스 646×250 안에서
**실제 그림이 564×168** 이고 위아래로 41px 씩 투명 여백이 들어 있다(세로의 33%).
애플 SVG 는 검은 모서리 사각형이 119.664×40 을 꽉 채운다 — 여백이 0 이다.
🔑 그래서 **보이는 높이**를 맞춘다. 구글 쪽만 1÷0.672 = 1.488배로 키운다.
여백은 구글이 요구하는 여백이므로 **잘라내지 않는다** — 키워서 그 안에 둔다.
⚠️ 높이를 한곳(`--badge-h`)에서 정한다. 자리마다 따로 적으면 한쪽만 고쳐진다. */
/* 🔑 배지와 플랫폼 로고가 **한 줄**에 선다. 둘 다 「여기서 할 수 있다」는 같은 말이라
줄을 나눌 이유가 없다. `display:contents` 로 안쪽 틀을 비켜 세워, 간격이 한 값으로
맞는다 — 틀마다 gap 을 따로 주면 또 어긋난다.
🔴 **그 「비켜 세우기」는 `.storerow` 안에서만이다** (2026-10-13). `.stores` 를
통째로 `display:contents` 로 돌렸더니 **게임 카드 줄이 깨졌다** — 카드 꼬리에는
`.storerow` 가 없어서 간격도 높이(`--badge-h`)도 걸릴 자리가 사라졌고, 구글
배지가 제 원본 크기로 부풀고 애플이 점처럼 작아졌다.
🔑 그래서 기본값은 **`:root` 에 둔다** — 어느 자리에 꽂히든 높이는 정해져 있다. */
:root { --badge-h: 36px; }
.storerow, .stores { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 틀 둘은 `.storerow` 안에서만 비켜선다 — 카드 꼬리에서는 `.stores` 가 제 줄을 만든다 */
.storerow .stores { display: contents; }
.sbadge { display: inline-flex; align-items: center; gap: 8px; }
.sbadge img { height: var(--badge-h); width: auto; display: block; }
/* 🔑 **민짜 로고에만 테두리.** 틱톡·Instant Games 는 로고만 와서 밝은 면에서
그냥 떠 보인다 — 스토어 배지와 토스·크레이지게임즈는 제 상자를 들고 온다. */
.sbadge.plain img { border: 1px solid var(--line); border-radius: var(--r-sm); }
.sbadge[data-kind="android"] img { height: calc(var(--badge-h) / 0.672); }
/* 🔴 **구글 배지는 옆에도 투명 여백을 달고 온다** — 캔버스 646px 중 좌우 41px 씩이다.
그래서 같은 `gap` 을 줘도 구글 옆만 더 벌어져 보였다(보이는 간격 ≈ 19px 대 10px).
그 여백만큼 **음수 여백으로 깎아** 보이는 간격을 맞춘다.
계산: 가로 여백 41/250 = 0.164 × 이미지 높이, 이미지 높이 = --badge-h ÷ 0.672.
→ 0.164 ÷ 0.672 ≈ 0.244 × --badge-h
⚠️ 덤으로 줄 맨 앞의 **보이는 왼쪽 끝이 제목과 맞는다** — 전에는 9px 안쪽으로
들어가 있었다. */
.sbadge[data-kind="android"] { margin-left: calc(var(--badge-h) * -0.244);
margin-right: calc(var(--badge-h) * -0.244); }
/* 🔑 **어디서나 같은 크기다** (2026-10-13). 카드만 28px 로 낮춰 뒀더니 상세에서
보던 배지와 달라 보였다. 칸 폭이 276px 라 36px 두 개(108 + 10 + 84 = 202px)가
들어간다 — 좁아서 줄일 이유가 없었다. */
@media (max-width: 600px) { .stores { --badge-h: 30px; } }
/* 🔴 **게임 카드에서 배지 셋이 두 줄로 꺾였다** (2026-10-14). 원스토어까지 있는
타이틀은 구글(138) + 애플(108) + 원스토어(121) = 367px 인데 카드 꼬리의 폭이
337px 밖에 없다. 꺾이면 카드마다 높이가 달라져 격자가 들쭉날쭉해진다.
🔑 **칸에 맞춰 배지가 줄어든다.** 화면 폭이 아니라 **카드 폭**(`cqw`)을 보므로,
격자가 2단이 되든 3단이 되든 그 카드 안에서 알아서 맞는다.
계산: 쓸 수 있는 폭 = 카드 폭 − 꼬리 좌우 여백(40) − 사이 간격 둘(20).
배지 셋의 폭 합은 높이의 **9.706배**다(구글의 음수 여백까지 셈한 값).
⚠️ 빼는 값을 60 이 아니라 **68** 로 둔다 — 60 이면 계산이 딱 맞아떨어져
소수점 반올림 한 번에 꺾였다. 8px 은 그 여유다.
⚠️ `min()` 으로 **36px 을 넘지 않게** 가둔다 — 카드가 아주 넓어도 상세 화면보다
커지면 안 된다.
⚠️ `nowrap` 을 함께 건다. 계산이 어긋나도 **꺾이는 대신 넘치게** 해서, 잘못되면
조용히 두 줄이 되는 대신 눈에 띄게 한다. */
.card { container-type: inline-size; }
.card .stores { flex-wrap: nowrap; gap: 10px;
--badge-h: min(36px, calc((100cqw - 68px) / 9.706)); }
/* ══ 앱 마켓 밖의 플랫폼 ═════════════════════════════════════════════
🔑 로고 파일을 **받은 곳만 로고**로 둔다. 없는 곳은 없는 배지를 흉내 내지 않고
글자 칩으로 둔다 — 스토어 배지와 섞이지 않게 테두리만 있는 모양으로.
(2026-10-14 기준 로고가 있는 곳: TikTok · Instant Games · Apps in Toss ·
CrazyGames. 원스토어는 공식 배지가 들어와 배지 줄로 올라갔다.)
⚠️ ONE store 는 앱 마켓이지만 **배지가 없어 여기로 들어온다.** 「앱 마켓 밖」이
기준이 아니라 **「배지가 없는 곳」**이 기준이다. */
.plats { display: contents; }
.plat { display: inline-flex; align-items: center; gap: 6px;
border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
font-size: 13px; font-weight: 700; color: var(--ink-2); }
/* 🔑 로고가 있는 플랫폼은 **로고만** 보여 준다. 받은 파일을 그대로 쓰므로 테두리와
안쪽 여백을 걷어내고 — 로고가 제 바탕색을 들고 오기 때문이다(틱톡 검정,
Instant Games 파랑). 거기에 우리 테두리까지 두르면 상자가 둘이 된다.
⚠️ 높이만 맞춘다. 비율이 제각각이라(틱톡 2.6:1 · Instant Games 1.5:1 ·
CrazyGames 2.8:1) 가로를 억지로 맞추면 로고가 찌그러진다. */
.plat.logo { padding: 0; border: 0; border-radius: 0; gap: 10px; }
.plat.logo img { height: 36px; width: auto; display: block; border-radius: var(--r-sm); }
/* ⚠️ 로고마다 바탕색이 다르다(틱톡 검정 · Instant Games 파랑). 민짜 로고는 흰 면
위에서 **테두리가 없으면 떠 있는 것처럼 보인다** — 같은 선으로 두른다. */
.plat.logo img { border: 1px solid var(--line); }
/* 🔑 **배지로 온 것은 두르지 않는다** (2026-10-14). 토스·크레이지게임즈는 스토어
배지와 같은 모양(검은 면 + 제 테두리)으로 와서, 또 두르면 상자가 둘이 된다. */
.plat.logo.boxed img { border: 0; border-radius: 0; }
/* ══ 채용 — 이런 분 / 반대로 / 전형 ══════════════════════════════════
🔑 지금 사이트의 세 칸을 v2 톤으로 옮겼다. 상자·그림자·그러데이션을 쓰지 않고
**선과 면**으로만 가른다. */
.sec.dark { background: var(--ink); color: var(--paper); }
.sec.dark .t-page, .sec.dark .t-card, .sec.dark b { color: var(--paper); }
.sec.dark .t-lead, .sec.dark .t-body { color: rgba(255, 255, 255, .78); }
.sec.dark .t-num { color: var(--paper); }
.sec.dark .t-num::before { background: var(--red); }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.who > div { position: relative; }
/* 선 하나로만 가른다 — 어두운 면 위에 또 상자를 두르면 면이 겹쳐 보인다 */
.who > div + div::before { content: ""; position: absolute; left: -28px; top: 0; bottom: 0;
width: 1px; background: rgba(255, 255, 255, .18); }
.who .n { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
color: var(--red); font-variant-numeric: tabular-nums; }
.who h3 { margin: 0 0 14px; line-height: 1.4; }
.nofit { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.nofit ul { margin: 0; padding: 0; list-style: none; }
.nofit li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.nofit li:first-child { padding-top: 0; }
.nofit li:last-child { border-bottom: 0; }
.nofit .x { flex: none; width: 20px; font-size: 15px; color: var(--ink-3); line-height: 1.6; }
/* 🔴 **`.nofit b` 였다** (2026-10-14). 태그로 잡으니 고객지원 화면의 **문장 속**
굵게(「닉네임 또는 유저 ID」·「주문번호」·「보내지 마세요.」)까지 걸려
`display:block` 이 먹었다 — 문장 한가운데에서 줄이 끊어지고 있었다.
🔑 이름(`.h`)으로 잡아 **그 자리의 머리글만** 고른다.
🔑 굵게를 빼고 **크기(16/15)와 색(ink/ink-2)** 으로 위계를 만든다. */
.nofit .h { display: block; margin: 0 0 6px; font-size: 16px; font-weight: 500; color: var(--ink); }
.nofit span { font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.steps3 > div { padding: 28px; }
.steps3 > div + div { border-left: 1px solid var(--line); }
.steps3 .n { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--red); }
.steps3 h3 { margin: 0 0 10px; }
.steps3 .t-body { margin: 0; }
@media (max-width: 900px) {
.who { grid-template-columns: 1fr; gap: 32px; }
.who > div + div::before { display: none; }
.who > div + div { padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .18); }
.nofit { grid-template-columns: 1fr; gap: 32px; }
.steps3 { grid-template-columns: 1fr; }
.steps3 > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
/* ══ 고객지원 — 자주 묻는 것 ══════════════════════════════════════════
🔑 **`details` 를 그대로 쓴다.** 열고 닫는 것은 브라우저가 이미 하고, 검색·
인쇄·보조기술도 그 동작을 안다 — 자바스크립트로 다시 만들 이유가 없다.
🔑 상자를 두르지 않고 **선 하나로만** 가른다 — 채용 화면의 `.nofit` 과 같은 결이다. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
/* 🔑 열림 표시는 **글자가 아니라 선 둘**이다. 언어가 바뀌어도 그대로다 */
.faq summary::after, .faq summary::before { content: ""; position: absolute; right: 8px; top: 50%;
width: 14px; height: 2px; background: var(--ink-2); transition: transform .2s ease; }
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0); }
.faq details[open] summary { color: var(--red); }
.faq summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.faq .a { padding: 0 44px 24px 0; font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.faq .a a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.faq .a ul { margin: 10px 0 0; padding-left: 20px; }
.faq .a li { margin: 0 0 6px; }
/* ⚠️ 체크리스트의 번호는 `.nofit .x` 자리를 빌린다 — 거기 `×` 가 들어가던 칸이다 */
.nofit .x[lang="en"] { font-size: 12px; font-weight: 700; color: var(--red);
font-variant-numeric: tabular-nums; line-height: 1.9; }
@media (max-width: 900px) {
.faq summary { font-size: 16px; padding-right: 36px; }
.faq .a { padding-right: 0; }
}
/* ══ 오류 화면 (404 · 403 · 500 · 503) ═══════════════════════════════
🔑 **막다른 곳으로 두지 않는다.** 코드·제목·설명 아래에 늘 돌아갈 길이 있다. */
.err-page { max-width: 62ch; padding: 40px 0 24px; }
.err-page .t-num { font-variant-numeric: tabular-nums; }
.err-page h1 { margin: 18px 0 0; }
.err-page .t-lead { margin: 20px 0 0; }
.err-page .acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }
/* ⚠️ 참조번호는 **고르게 읽혀야 한다** — 전화로 불러 주는 값이다 */
.err-page .ref { margin: 32px 0 0; }
.err-page .ref b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
/* ── 폼 보조 ──────────────────────────────────────────────────────────
🔑 **디자인 시스템에 없던 두 가지**를 여기서 채운다. 화면마다 따로 적으면
홈페이지가 바뀔 때 그 화면만 뒤처진다 (공고 신청 화면에서 필요했다). */
/* 🔴 **못 누르는 단추는 못 누르게 보여야 한다.** 빨갛게 둔 채 안 눌리면
사람은 고장으로 읽고 몇 번이고 더 누른다. */
.btn:disabled { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
.btn:disabled:hover { background: var(--red); border-color: transparent; }
.btn.ghost:disabled:hover { background: transparent; border-color: var(--line-s); }
/* 🔑 상태 한 낱말 (「검토 대기」·「게시됨」). `.office .pin` 과 `.hero-game .tag` 는
그 블록 안에서만 먹어 다른 자리에서는 아무 꾸밈이 없다 — 자리에 매이지 않은
것이 하나 필요했다. ⚠️ 색 면은 직각이 규칙이지만 이것은 UI 컨트롤 쪽이라
라운드를 준다 (`--r-sm`). */
.state { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 700;
padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
color: var(--ink-2); background: var(--paper); }
.state.on { color: #fff; background: var(--red); border-color: var(--red); }
/* ── 자리 맞춤 유틸리티 ────────────────────────────────────────────────
🔑 **인라인 `style=` 을 걷어내며 만들었다** (2026-10-17, CSP 3단계).
CSP 에서 `style-src 'unsafe-inline'` 을 떼려면 내보낸 HTML 에 `style="…"`
이 **한 글자도 없어야** 한다. 여기 있는 것은 그때 옮겨 온 값들이고,
**값을 바꾼 것이 아니라 자리만 옮긴 것**이다 — 화면은 전과 같아야 한다.
🔴 **선택자에 클래스를 두 번 적는다**(`.u-mt-auto.u-mt-auto`). 인라인
`style=` 은 어떤 클래스 규칙보다도 셌는데, 평범한 한 클래스로 바꾸면
`.card .t-cap` 같은 두 겹 규칙에 **조용히 진다** — 빈 화면과 달리
여백만 틀어져서 눈으로 봐야 안다. 명시도를 맞춰 그 길을 막는다.
⚠️ **새 화면에서 먼저 쓰지 말 것.** 이것은 옛 인라인을 받아 내는 자리다.
새로 만들 때는 그 블록의 이름 있는 규칙을 쓰는 것이 맞다.
⚠️ `margin: 24px 0 0` 류를 `margin-top` 으로 줄이지 말 것 — 줄임꼴은 나머지
세 방향을 **0 으로 덮는다.** 원래 인라인이 그랬으므로 그대로 둔다. */
/* 섹션 여백 — 두 섹션을 붙여 쓸 때 */
.u-pb-0.u-pb-0 { padding-bottom: 0; }
.u-pt-0.u-pt-0 { padding-top: 0; }
.u-pb-40.u-pb-40 { padding-bottom: 40px; }
/* 바깥 여백 — 줄임꼴(네 방향을 모두 정한다) */
.u-m-n10-0-18.u-m-n10-0-18 { margin: -10px 0 18px; }
.u-m-18-0-0.u-m-18-0-0 { margin: 18px 0 0; }
.u-m-20-0-0.u-m-20-0-0 { margin: 20px 0 0; }
.u-m-72-0-0.u-m-72-0-0 { margin: 72px 0 0; }
.u-m-0-0-16.u-m-0-0-16 { margin: 0 0 16px; }
.u-m-0-0-18.u-m-0-0-18 { margin: 0 0 18px; }
/* 바깥 여백 — 위쪽만 (나머지 방향은 원래 규칙을 따른다) */
.u-mt-0.u-mt-0 { margin-top: 0; }
.u-mt-14.u-mt-14 { margin-top: 14px; }
.u-mt-16.u-mt-16 { margin-top: 16px; }
.u-mt-20.u-mt-20 { margin-top: 20px; }
.u-mt-22.u-mt-22 { margin-top: 22px; }
.u-mt-24.u-mt-24 { margin-top: 24px; }
.u-mt-28.u-mt-28 { margin-top: 28px; }
/* 🔑 카드 안에서 아래로 밀어 바닥에 붙이는 자리 (flex) */
.u-mt-auto.u-mt-auto { margin-top: auto; }
.u-mb-8.u-mb-8 { margin-bottom: 8px; }
/* 그 밖 */
.u-inline.u-inline { display: inline; }
.u-block.u-block { display: block; }
.u-red.u-red { color: var(--red); }
.u-fs-125.u-fs-125 { font-size: 12.5px; }
.u-maxw-62.u-maxw-62 { max-width: 62ch; }
/* 🔑 본문 리드 한 줄을 굵게 세우는 자리 (index 의 첫 문단) */
.u-lead-strong.u-lead-strong { margin: 24px 0 0; font-weight: 700; color: var(--ink); }
/* 🔑 **화면이 뜬 뒤 JS 가 끼워 넣는 조각들**(`assets/js/v2-*.js`)에서 옮겨 온 값.
`innerHTML` 로 넣은 `style=` 도 브라우저가 마크업으로 파싱하므로 CSP 의
`style-src` 에 똑같이 걸린다 — 정적 HTML 과 다를 것이 없다. */
.u-err-banner.u-err-banner { background: #CE1130; color: #fff; padding: 12px 16px; margin: 0; }
.u-m-40-0-16.u-m-40-0-16 { margin: 40px 0 16px; }
.u-m-40-0-0.u-m-40-0-0 { margin: 40px 0 0; }
.u-m-10-0-0.u-m-10-0-0 { margin: 10px 0 0; }
.u-m-0-0-4.u-m-0-0-4 { margin: 0 0 4px; }
.u-p-28-0.u-p-28-0 { padding: 28px 0; }
.u-ink.u-ink { color: var(--ink); }