/* ============================================================================
알고케어 채용 사이트 (algocare career) — style.css
----------------------------------------------------------------------------
구성
00. 웹폰트 (@font-face)
01. 디자인 토큰 (:root 커스텀 프로퍼티)
02. 리셋 & 기본 타이포
03. 유틸리티 (브레이크포인트 show/hide, 등장 애니메이션 마커,
헤딩 단어 마스크 .split-reveal, 글자 롤업 [data-rollup]/.rollup-in,
공통 부품)
04. 네비게이션 바 (심볼 / 가운데 '알고케어 채용' / '채용공고 보기' pill)
04b. 맨 위로(TOP) 버튼 — 오른쪽 아래 고정
05. 히어로 (#1) — 스크럽 영상 + 카피(헤드라인·CTA·하단 스크림) · 100svh
05b. 알고케어 문화 챗봇 (#1.5) — 히어로 바로 아래, 가운데 카드
06. 팀 사진 패럴랙스 준비 상태
07. 성과 지표 — 다크
07c. 보조 지표 타일 3개 + 캡션 (지표 섹션 안)
07b. 앰비언트 영상 밴드 (레거시 · 마크업 없음)
08. 채용공고 (#채용공고) — 2열 그리드
08b. 연혁 타임라인 (#milestones)
08c. 합류 여정 (레거시 · 9차에서 마크업 삭제)
08d. 브랜드 갤러리 (#brand-gallery)
09. 더 알고싶다면? CTA 카드 (레거시)
09b. 복리후생 (#benefits)
09c. 미래 로드맵 밴드 (#roadmap) — 두 번째 다크 면
09d. 알고케어 사람들 (#people) — 9차 신규
09e. 최종 CTA (#join) — 9차 신규
10. 푸터 + 워드마크 서명 (+ 블로그·English 링크)
11. 채용공고 상세 오버레이 + 합류 여정 스텝 도식 (신규 기능)
12. 팀 미션/비전 · 팀 소개 · 조직문화 블록
12b. 룩북 사진 마퀴 (레거시 · 마크업 없음)
12c. 팀 투어 미니게임 (.office) — #team 안 인라인 캔버스 (11차 신규)
12d. 인재상 자가 테스트 (.waystest) — #ways 안 인라인 10문항 (12차 신규)
13. 반응형 — 태블릿 (810–1199.98px)
14. 반응형 — 모바일 (≤809.98px)
섹션 순서(위→아래, 2026-07 9차): 히어로 → 문화 챗봇 → 브랜드 갤러리(다크)
→ 미션/비전 → 채용공고 → 연혁 타임라인 → 성과 지표(다크)
→ 팀 사진 + 팀 소개 → 알고케어 사람들 → 인재상 → 복리후생
→ 미래 로드맵(다크) → 최종 CTA → 푸터
★ 9차에서 사라진 섹션 둘 — 합류 여정(#hiring) · 하단 반복 채용공고(#jobs-bottom).
CSS 는 남겨 두었지만 마크업은 없다. 되살리지 말 것.
브레이크포인트는 원본 Framer 사이트와 동일하다.
데스크톱 ≥ 1200px
태블릿 810px – 1199.98px
모바일 ≤ 809.98px
========================================================================== */
/* ============================================================================
00. 웹폰트
원본 사이트가 쓰던 woff2 파일을 그대로 내려받아 assets/fonts 에 두었다.
========================================================================== */
@font-face {
font-family: 'Pretendard';
src: url('../assets/fonts/pretendard-regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('../assets/fonts/pretendard-medium.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('../assets/fonts/pretendard-semibold.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('../assets/fonts/pretendard-bold.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../assets/fonts/manrope-semibold.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../assets/fonts/manrope-bold.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
/* Codec Pro Bold — 팀 페이지 '일하는 방식' 카드 영문 타이틀 전용 */
@font-face {
font-family: 'Codec Pro';
src: url('../assets/fonts/codecpro-bold.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
/* ============================================================================
01. 디자인 토큰
========================================================================== */
:root {
/* --- 컬러: 텍스트 ------------------------------------------------------ */
--c-ink: #0A0909; /* 기본 헤딩·본문 (가장 많이 쓰임) */
--c-ink-soft: #444444; /* 팀 소개 설명문 / 오버레이 본문 */
--c-body: #756D6B; /* 헤딩 아래 서브 카피, 태그 */
--c-muted: #888888; /* 예비 (현재 사용처 없음) */
--c-nav: #1A1A1A; /* 로고 잉크 (SVG 인라인 값) */
--c-white: #FFFFFF;
--c-white-dim: #E6E6E6; /* 다크 카드 타이틀 */
/* --- 컬러: 배경/서피스 ------------------------------------------------- */
--c-page: #FEFEFE; /* 페이지 기본 배경 */
--c-surface: #FFFFFF; /* 내비 / CTA 섹션 */
--c-panel: #FAF9F9; /* 푸터, 오버레이 요약 박스 */
--c-panel-alt: #F5F3F2; /* 밝은 CTA 카드, 코어밸류 번호 뱃지, 오버레이 태그 */
--c-panel-blue: #F6F7FA; /* Vision 카드, 인재상 밴드 */
--c-dark: #0A0909; /* 다크 섹션 / 다크 카드 */
--c-card-glass: rgba(255, 255, 255, 0.08); /* 다크 위 글래스 카드 */
/* --- 컬러: 브랜드 액센트 ----------------------------------------------- */
--c-accent: #F47B1A; /* Wonder Orange — 섹션 헤딩 위 점, 지표 수치 강조 */
--c-accent-soft: rgba(244, 123, 26, 0.55); /* 다크 지표 차트의 오렌지 글로우 */
/* --- 컬러: 라인/보더 --------------------------------------------------- */
--c-line: #DFDBDA; /* 채용 카드 상단 헤어라인, 푸터 룰 */
--c-line-soft: #ECE9E8; /* 팀 목록 행 구분선 */
--c-line-bar: #DBDBDB; /* 푸터 정보 항목 사이 세로 바 */
/* 다크 면 위의 헤어라인. --c-line(#DFDBDA)을 어두운 배경에 쓰면 너무 밝아
선이 튀어 보여서, 흰색을 22% 로 깐 값을 따로 둔다 (로드맵 밴드 화살표). */
--c-line-dark: rgba(255, 255, 255, 0.22);
/* --- 컬러: 팀 페이지 '일하는 방식' 4색 로테이션 ------------------------ */
--c-p1: rgb(238, 133, 56); /* 오렌지 */
--c-p2: rgb(198, 216, 59); /* 옐로그린 */
--c-p3: rgb(130, 184, 126); /* 그린 */
--c-p4: rgb(167, 129, 208); /* 퍼플 */
/* 위 4색 위에 흰 본문을 얹을 때만 까는 암막. 새 색이 아니라 --c-dark 의 46% 다.
이 농도에서 네 카드색 모두 흰 글자 대비 5:1 이상이 나온다. (§4-7) */
--c-card-scrim: rgba(10, 9, 9, 0.46);
/* --- 폰트 -------------------------------------------------------------- */
--font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
'Malgun Gothic', sans-serif;
--font-en: 'Manrope', 'Pretendard', sans-serif;
--font-display: 'Codec Pro', 'Manrope', 'Pretendard', sans-serif;
/* --- 타입 스케일 (데스크톱 기준) --------------------------------------- */
--fs-display: 80px; /* 예비 */
--fs-h1: 36px; /* 섹션 대제목 */
--fs-h2: 34px; /* 예비 */
--fs-h3: 27px; /* 예비 */
--fs-team-name: 26px; /* 팀 이름 / 코어밸류 타이틀 */
--fs-lg: 24px; /* 채용 카드 직무명, 다크 카드 타이틀 */
--fs-md: 22px;
--fs-body-lg: 20px; /* 본문 큰 것 */
--fs-body: 18px;
--fs-sm: 16px;
--fs-nav: 15px;
--fs-xs: 14px; /* 태그, 캡션 */
--fs-2xs: 13px; /* 푸터 */
--ls-tight: -0.02em; /* 거의 모든 한글 텍스트 */
--ls-tighter:-0.03em; /* 히어로 헤드라인 */
--lh-head: 1.4;
--lh-body: 1.7;
--lh-ui: 1.5;
--lh-display:1.2;
/* --- 레이아웃 ---------------------------------------------------------- */
--w-content: 1120px; /* 다크 섹션 내부 폭 */
--w-content-sm: 1072px; /* 푸터 / 팀 목록 폭 */
--w-jobs: 1069px; /* 채용공고 그리드 폭 */
--h-nav: 72px;
--pad-x: 40px; /* 좌우 기본 여백 */
/* --- 라운드 ------------------------------------------------------------ */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-card:14px;
--r-lg: 20px;
--r-xl: 24px;
--r-full:100px;
/* --- 모션 -------------------------------------------------------------- */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);
--dur-appear: 760ms;
--dur-hover: 220ms;
}
/* ============================================================================
02. 리셋 & 기본
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* ★ scroll-behavior: smooth 를 다시 넣지 말 것 (16차) — 앵커 부드러운 스크롤은
js/main.js initSmoothAnchor 가 전담한다. CSS 로 걸면 ScrollTrigger 가 내부에서
스크롤 위치를 복원할 때마다 그 이동까지 애니메이션이 되어, 모바일에서
스크롤 방향을 바꿀 때 페이지가 위로 미끄러져 올라가는 버그가 난다. */
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--c-page);
color: var(--c-ink);
font-family: var(--font-kr);
font-weight: 400;
letter-spacing: var(--ls-tight);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
/* ============================================================================
03. 유틸리티
========================================================================== */
/* --- 브레이크포인트별 숨김 (원본 Framer 의 hidden-* 패턴과 동일) ---------- */
@media (min-width: 1200px) { .hide-desktop { display: none !important; } }
@media (min-width: 810px) and (max-width: 1199.98px){ .hide-tablet { display: none !important; } }
@media (max-width: 809.98px) { .hide-mobile { display: none !important; } }
/* --- 스크린리더 전용 ------------------------------------------------------ */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* --- 스크롤 등장 애니메이션 -----------------------------------------------
`.appear` 는 **마커 클래스**일 뿐이고, 여기에는 숨김 스타일이 없다.
초기 숨김 상태(opacity 0 · translateY)는 js/main.js 의 GSAP 이 런타임에
직접 심는다(점진적 향상). JS·GSAP 가 없거나 `?static=1`·reduced-motion
이면 아무 것도 심지 않으므로 콘텐츠는 처음부터 그대로 보인다.
`.appear--soft` 는 이동량이 작은 변형, `.appear--delay-*` 는 예전 CSS
지연값의 잔재로 지금은 GSAP stagger 가 대신한다(마크업 호환용). */
.appear { will-change: opacity, transform; }
/* --- 헤딩 단어 마스크 등장 `.split-reveal` --------------------------------
섹션 대제목에 붙이는 마커 클래스. js/main.js 의 splitHeading() 이 텍스트를
**띄어쓰기 단위**로 잘라 각 낱말을 [마스크 span > 안쪽 span] 두 겹으로 감싼다.
낱말 사이의 공백은 그대로 텍스트 노드로 남기기 때문에 한글 줄바꿈이
원문과 똑같이 일어나고, 낱말 안쪽 자간(letter-spacing)도 건드리지 않는다.
초기 숨김 상태는 여기에 쓰지 않는다 — `.appear` 와 같은 원칙으로,
GSAP 이 런타임에 yPercent 를 심는다. JS·GSAP 가 없으면 그냥 제목이 보인다.
overflow:hidden 인 인라인 블록은 baseline 정렬이 달라지므로
vertical-align:top 으로 고정한다 (마스크 높이 = 부모 line-height 와 동일). */
.split-reveal__word {
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.split-reveal__inner {
display: inline-block;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* --- 글자 롤업 `[data-rollup]` / `.rollup-in` (13차 신규) ------------------
두 가지 롤업이 같은 조판 규칙을 쓴다.
① 호버 롤업 `[data-rollup]` — 내비 pill · 히어로 CTA · 최종 CTA 버튼.
글자마다 [앞면 / 복제 뒷면] 두 겹을 세로로 쌓아 두고, 호버하면 앞면이
위로 빠지고 뒷면이 아래에서 올라온다. **CSS 트랜지션만 쓴다** —
JS(js/main.js buildRollup)는 DOM 을 만들고 `--i`(글자 순번)만 심는다.
② 등장 롤업 `.rollup-in` — 히어로 h1 한 곳뿐. 겹은 한 장이고, 마스크
안에서 글자가 밀려 올라온다. 움직임은 GSAP 이 준다.
한글 줄바꿈 규칙은 `.split-reveal`(§03) 과 같다 — **낱말로 먼저 감싸고
그 안에서 글자를 쪼갠다.** 낱말 사이 공백은 텍스트 노드로 남아 브라우저가
원문과 같은 자리에서 줄을 바꾼다. 마스크는 baseline 이 어긋나지 않게
`vertical-align: top` 이다.
★ 절제 규칙 — 본문 문단·카드 텍스트에는 붙이지 않는다. 버튼과 히어로 h1 뿐이다.
★ 호버 롤업의 DOM 자체를 데스크톱 포인터 + 모션 ON 일 때만 만든다.
터치·reduced-motion·?static=1 이면 평범한 텍스트 그대로다. */
.rollup__word,
.rollup-in__word {
display: inline-block;
white-space: nowrap;
vertical-align: top;
}
.rollup__char,
.rollup-in__char {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.rollup__face {
display: block;
transition: transform 380ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 20ms);
}
/* 복제 뒷면은 눈에만 보이는 겹이다 — 드래그 복사에 글자가 두 번 들어가지 않게 막는다.
(스크린리더는 aria-hidden + 요소의 aria-label 로 이미 원문 한 벌만 읽는다) */
.rollup__face--dup {
position: absolute;
inset: 0;
transform: translateY(100%);
user-select: none;
-webkit-user-select: none;
}
[data-rollup]:hover .rollup__face,
[data-rollup]:focus-visible .rollup__face { transform: translateY(-100%); }
[data-rollup]:hover .rollup__face--dup,
[data-rollup]:focus-visible .rollup__face--dup { transform: translateY(0); }
/* 등장 롤업 — 초기 숨김값(yPercent)은 여기 쓰지 않는다. GSAP 이 심는다(§5-0 ①). */
.rollup-in__inner {
display: inline-block;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.rollup__face { transition: none; }
}
/* --- 오렌지 액센트 점 ----------------------------------------------------- */
.dot {
display: block;
width: 10px; height: 10px;
border-radius: var(--r-full);
background: var(--c-accent);
flex: none;
}
/* --- 섹션 헤딩 묶음 ------------------------------------------------------- */
.section-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
/* --- 버튼 ----------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 2px;
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
border-radius: var(--r-full);
transition: transform var(--dur-hover) var(--ease-out),
background-color var(--dur-hover) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
/* 솔리드 다크 pill — 밝은 섹션 위 */
.btn--dark {
padding: 12px 24px;
color: var(--c-white);
background: var(--c-dark);
}
.btn--dark:hover { background: #262626; }
/* 헤어라인 pill — 밝은 면 위의 **보조** 버튼 (9차 신규, 최종 CTA #join 에서 씀).
그림자 토큰이 없는 사이트라 카드와 같은 언어(1px --c-line)로만 띄운다.
새 색을 만들지 않는다 — 글자는 --c-ink, 면은 --c-surface 다. */
.btn--line {
padding: 12px 24px;
color: var(--c-ink);
background: var(--c-surface);
box-shadow: inset 0 0 0 1px var(--c-line);
}
.btn--line:hover { background: var(--c-panel-alt); }
/* 대각선 화살표 아이콘 (17×17) */
.icon-arrow { width: 17px; height: 17px; flex: none; }
/* --- 마그네틱 버튼 --------------------------------------------------------
커서가 가까이 오면 버튼이 커서 쪽으로 최대 12px 끌려간다.
끌림값은 GSAP 이 `--mx` / `--my` 커스텀 프로퍼티에 넣고, transform 은
**CSS 가 조합**한다 — 그래야 기존 위치 보정(translateY(-50%))이나 호버
들림(-1px / -3px)과 충돌하지 않는다.
바인딩은 js/main.js bindMagnetic() 이 하고, 데스크톱 포인터 + 모션 ON
일 때만 걸린다 (터치·reduced-motion·?static=1 이면 아예 걸지 않는다). */
.btn--magnetic { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.btn--magnetic:hover { transform: translate(var(--mx, 0px), calc(-1px + var(--my, 0px))); }
/* ============================================================================
04. 네비게이션 바
========================================================================== */
/* 상단 스페이서(.nav-spacer)는 없앴다 — 첫 섹션이 100svh 히어로라
내비가 영상 위에 얹혀야 "첫 화면 = 영상 한 장" 이 성립한다.
히어로가 아닌 페이지를 새로 만들면 그 페이지에만 스페이서를 다시 넣는다. */
.nav {
position: fixed;
top: 0; left: 0;
width: 100%;
height: var(--h-nav);
z-index: 100;
background: var(--c-surface);
transition: transform 320ms var(--ease-out);
}
/* 아래로 스크롤할 때만 살짝 감춘다 (위로 올리면 즉시 복귀) — js/main.js initNav */
.nav.nav--hidden { transform: translateY(-100%); }
/* 원본은 전폭 바다 — 로고 x40, 메뉴 우측 41px (컨테이너 폭 제한 없음) */
.nav__inner {
position: relative;
width: 100%;
max-width: none;
height: var(--h-nav);
margin: 0 auto;
}
/* --- 왼쪽: algocare 심볼(원형 마크)만. 워드마크 글자는 쓰지 않는다 --------
가운데 제목이 '알고케어 채용'을 말해 주므로 왼쪽은 문패가 아니라 홈 버튼이다. */
.nav__logo {
position: absolute;
top: 50%; left: var(--pad-x);
transform: translateY(-50%);
width: 30px; height: 30px;
color: var(--c-nav);
}
.nav__logo img,
.nav__logo-img { display: block; width: 100%; height: 100%; }
/* --- 가운데: '알고케어 채용' (문서의 h1) ----------------------------------
좌우 슬롯 폭과 무관하게 바(bar) 기준으로 절대 중앙에 놓는다.
히어로에서 헤드라인을 걷어냈기 때문에 이 텍스트가 페이지의 유일한 문패다. */
.nav__title {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-family: var(--font-kr);
font-size: 30px; /* 7차: 15px → 2배 — 내비의 문패를 키운다 */
font-weight: 600;
line-height: var(--lh-ui);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
white-space: nowrap;
pointer-events: none;
}
/* --- 우측 pill: '블로그 보러가기' (새 탭) ---------------------------------
버튼 토큰(.btn.btn--dark)을 그대로 쓰고, 위치와 높이만 잡아 준다.
채용공고가 히어로 바로 아래 첫 섹션이라 내비에서 또 보내지 않는다 —
페이지 밖 목적지(아티클/블로그)로 내보낸다. 하단 CTA 카드와 주소가 같다.
내비에는 이 버튼 하나뿐이라 햄버거·모바일 메뉴 오버레이는 없앴다. */
.nav__cta {
position: absolute;
top: 50%; right: var(--pad-x);
/* --mx/--my 는 마그네틱 끌림값 (기본 0). 세로 -50% 보정과 함께 조합한다 */
transform: translate(var(--mx, 0px), calc(-50% + var(--my, 0px)));
padding: 7px 14px; /* 7차: 문패를 키우며 pill 은 한 단 줄였다 */
font-size: var(--fs-2xs);
white-space: nowrap;
}
.nav__cta:hover { transform: translate(var(--mx, 0px), calc(-50% - 1px + var(--my, 0px))); }
/* ============================================================================
04b. 맨 위로(TOP) 버튼 — 오른쪽 아래 24px 고정
----------------------------------------------------------------------------
1.5 화면 높이만큼 내려가면 떠오르고(페이드+상승), 위쪽으로 돌아오면 사라진다.
토글은 js/main.js initToTop() 이 `.is-visible` 로 한다.
★ 초기 숨김을 CSS 에 두는 **유일한 예외**다 (모션 대전제 ①의 예외).
이 버튼은 콘텐츠가 아니라 JS 로만 동작하는 UI 부품이라, 스크립트가 죽었을 때
'눌러도 아무 일 없는 버튼'을 보여 주는 쪽이 더 나쁘다. 대신 모션이 꺼진 상태
(`html.no-motion` = ?static=1 · reduced-motion · GSAP 미로드)에서는
**처음부터 보이게** 두어 캡처에서도 위치를 확인할 수 있다.
z-index 95 — 팀 커서 미리보기(90)보다 위, 내비(100)·오버레이(200)보다 아래.
그래서 채용 상세가 열리면 백드롭 뒤로 자연스럽게 가려진다.
--mx/--my 는 마그네틱 끌림값 자리다 (§03 .btn--magnetic 과 같은 방식). */
.to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 95;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border-radius: var(--r-full);
background: var(--c-dark);
color: var(--c-white);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(var(--mx, 0px), calc(12px + var(--my, 0px)));
transition: opacity 240ms var(--ease-out),
transform 240ms var(--ease-out),
background-color var(--dur-hover) var(--ease-out),
visibility 0s linear 240ms;
}
.to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(var(--mx, 0px), var(--my, 0px));
transition: opacity 240ms var(--ease-out),
transform 240ms var(--ease-out),
background-color var(--dur-hover) var(--ease-out),
visibility 0s linear 0s;
}
.to-top:hover { background: #262626; }
.to-top__icon { width: 20px; height: 20px; }
/* 모션 OFF — 처음부터 제자리에 보이는 정적 버튼 */
.no-motion .to-top {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.to-top {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: none;
}
}
/* ============================================================================
05. 히어로 (#1) — 스크럽 영상 한 장 · 풀 뷰포트
데스크톱·모바일 모두 100svh 로 첫 화면을 영상이 가득 채운다.
svh 미지원 브라우저를 위해 100vh 를 먼저 쓰고 100svh 로 덮어쓴다.
(모바일 주소창이 접혔다 펴져도 높이가 튀지 않는다.)
히어로 안에는 영상 말고 아무것도 없다 — 헤드라인·스크림·CTA 전부 없앴다.
문패(`알고케어 채용`)는 내비 가운데로 옮겼고, 내비 배경이 흰 불투명이라
가독성용 스크림도 필요 없다. 다시 얹지 말 것.
스크롤 스크럽(핀)은 JS 가 건다. CSS 는 높이만 책임진다 —
ScrollTrigger 가 핀 스페이서를 만들어 뒤 섹션을 밀어낸다.
========================================================================== */
/* 스테이지(330svh) 안에서 히어로가 sticky 로 붙는다.
스크롤 0~150svh = 영상 스크럽, 150~230svh = 문화 챗봇이 커튼처럼 덮는 구간.
커튼 구간(80svh)은 .culture-chat 의 min-height·margin-top 과 항상 같은 값이어야 한다.
(예전 GSAP pin 은 스페이서 ↔ fixed 전환이 어긋나 흰 화면 버그가 났다 — 7차에 교체) */
.hero-stage {
position: relative;
height: 330vh;
height: 330svh;
}
/* 모션이 꺼지면(?static=1 · reduced-motion · GSAP 미로드) 스크럽 구간 자체를 접는다.
영상이 seek 불가로 강등돼도(js initHero degrade) 같은 클래스로 접는다. */
.no-motion .hero-stage,
.hero-degraded .hero-stage { height: 100vh; height: 100svh; }
.hero {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
height: 100svh;
overflow: hidden;
background: #000; /* 영상 첫 프레임이 그려지기 전 흰 깜빡임 방지 */
}
.hero__video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 50%;
pointer-events: none; /* 컨트롤 없음 — 스크롤을 가로채지 않는다 */
}
/* --- 히어로 카피 (9차 신규) -----------------------------------------------
영상 위 좌하단에 헤드라인 + CTA 를 얹는다. 3차에서 걷어냈던 카피가
돌아온 것이라, 그때 없앤 스크림도 **하단 한정**으로 되살렸다.
★ 스크림 규칙 — 화면 아래 55% 구간에서만 서서히 어두워지는 그라디언트다.
위쪽(내비 주변)은 건드리지 않아 영상 분위기가 그대로 남는다.
농도를 더 올리지 말 것: 영상이 밝은 기기 클로즈업이라 이 정도면
흰 글자 대비가 충분하고, 더 진하면 영상이 죽는다.
★ 오버레이가 히어로 전면을 덮으므로 pointer-events 를 꺼 둔다 —
안 그러면 350svh 스테이지 내내 스크롤·클릭을 가로챈다. CTA 만 되살린다.
★ .appear 를 붙이지 않는다(첫 화면). 사라지는 연출은 js/main.js initHero
가 스크럽 진행도에 물려 opacity 로만 처리하고, 모션 OFF 면 늘 보인다. */
.hero__copy {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 24px;
padding: 0 var(--pad-x) clamp(56px, 11svh, 104px);
pointer-events: none;
will-change: opacity;
}
.hero__scrim {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top,
rgba(10, 9, 9, 0.52) 0%,
rgba(10, 9, 9, 0.26) 24%,
rgba(10, 9, 9, 0) 55%);
}
.hero__headline {
position: relative; /* 스크림 위로 */
max-width: 18em;
font-weight: 700;
/* 첫 화면의 유일한 메시지라 섹션 헤딩보다 한 급 크게 간다 (10차에서 34px → 최대 56px) */
font-size: clamp(40px, 4.2vw, 56px);
line-height: 1.25;
letter-spacing: var(--ls-tighter);
color: var(--c-white);
}
.hero__cta {
position: relative;
pointer-events: auto; /* 오버레이에서 이 요소만 클릭을 받는다 */
}
/* ============================================================================
05b. 알고케어 문화 챗봇 (#1.5) — 히어로 바로 아래
----------------------------------------------------------------------------
가운데 카드 한 장. 새 색·새 라운드를 만들지 않고 기존 토큰만 쓴다
(섹션 --c-page / 카드 --c-surface + 1px --c-line 헤어라인 + --r-lg).
★ 이 컴포넌트의 핵심은 `overscroll-behavior: contain` 한 줄이다.
대화창은 높이가 고정된 스크롤 영역이라, 없으면 대화창 끝까지 굴린 순간
스크롤이 페이지로 넘어가(scroll chaining) "대화를 읽으려다 페이지가
내려가는" 충돌이 난다. contain 이 그 전파를 막는다.
→ 대화창 안에서 굴리면 대화만, 카드 밖에서 굴리면 페이지만 움직인다.
★ 핀을 걸지 않는다. 등장은 .appear 하나뿐이라 스크롤을 가로채지 않는다.
========================================================================== */
.culture-chat {
position: relative;
z-index: 2; /* sticky 히어로 위로 올라온다 (커튼) */
background: var(--c-page);
/* 히어로 스테이지의 마지막 80svh 위로 겹쳐 올라온다 — 영상이 끝나면
이 섹션이 화면에 도킹된다. 값은 .hero-stage 커튼 구간과 반드시 같아야 한다.
모션 OFF·강등 시에는 겹침을 푼다(아래). */
margin-top: -80vh;
margin-top: -80svh;
min-height: 80vh;
min-height: 80svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 72px var(--pad-x);
}
.no-motion .culture-chat,
.hero-degraded .culture-chat { margin-top: 0; min-height: 72vh; min-height: 72svh; }
/* blog.moncher.xyz 벤치마킹 — 카드 상자 없이 헤드라인·알약 입력창·칩이
페이지 위에 그대로 얹힌다. */
.culture-chat__inner {
width: 720px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.culture-chat__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.culture-chat__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.culture-chat__sub {
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
color: var(--c-body);
}
/* --- 대화 영역 (첫 질문 전에는 hidden · 스크롤 격리) ----------------------- */
.culture-chat__messages {
width: 100%;
max-height: clamp(280px, 44vh, 480px);
overflow-y: auto;
overscroll-behavior: contain; /* ★ 페이지로 스크롤이 넘어가지 않게 (본문 위 주석) */
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
}
.culture-chat__messages[hidden] { display: none; } /* 칩과 같은 이유 — flex 가 hidden 을 이긴다 */
.chat-msg { display: flex; }
.chat-msg--bot { justify-content: flex-start; }
.chat-msg--user { justify-content: flex-end; }
.chat-bubble {
max-width: 84%;
padding: 12px 16px;
border-radius: var(--r-md);
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
white-space: pre-wrap; /* 모델이 넣은 줄바꿈만 살린다 (HTML 아님) */
overflow-wrap: anywhere;
}
.chat-msg--bot .chat-bubble { background: var(--c-panel-alt); color: var(--c-ink); }
.chat-msg--user .chat-bubble { background: var(--c-dark); color: var(--c-white); }
/* 답변 대기 — 점 세 개가 차례로 뛴다 */
.chat-bubble--typing {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 16px;
}
.chat-dot {
width: 6px; height: 6px;
border-radius: var(--r-full);
background: var(--c-body);
animation: chat-dot-pulse 1.2s var(--ease-inout) infinite;
}
.chat-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes chat-dot-pulse {
0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* 모션이 꺼지면 멈춘 점 세 개로 남긴다 (룩북 마퀴와 같은 패턴, §5-6) */
.no-motion .chat-dot { animation: none; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
.chat-dot { animation: none !important; opacity: 0.5; }
}
/* --- 추천 질문 칩 (입력창 아래 · 가운데 정렬) ------------------------------ */
.culture-chat__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* ★ `display: flex` 는 브라우저 기본 `[hidden]{display:none}` 과 명시도가 같아서
author 스타일이 이긴다 → hidden 을 걸어도 칩이 그대로 보인다. 다시 눌러 준다.
(키가 없을 때 칩을 숨기는 규칙이 이 한 줄에 걸려 있다.) */
.culture-chat__chips[hidden] { display: none; }
.chat-chip {
padding: 8px 14px;
border: 1px solid var(--c-line);
border-radius: var(--r-full);
background: var(--c-surface);
font-family: inherit;
font-weight: 500;
font-size: var(--fs-xs);
letter-spacing: var(--ls-tight);
color: var(--c-body);
cursor: pointer;
transition: background var(--dur-hover) var(--ease-out),
color var(--dur-hover) var(--ease-out),
border-color var(--dur-hover) var(--ease-out);
}
.culture-chat__chips[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
.chat-chip:hover { background: var(--c-panel-alt); border-color: var(--c-ink); color: var(--c-ink); }
}
.chat-chip:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
/* --- 입력 줄 — 알약(pill) 하나가 입력창이자 컨테이너다.
안쪽 오른쪽 끝에 원형 보내기 버튼이 들어간다 (moncher 스타일). ------------- */
.culture-chat__form {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 8px 8px 24px;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-full);
transition: border-color var(--dur-hover) var(--ease-out);
}
.culture-chat__form:focus-within { border-color: var(--c-ink); }
.chat-input {
flex: 1 1 auto;
min-width: 0;
padding: 10px 0;
border: 0;
background: transparent;
font-family: inherit;
font-weight: 500;
font-size: var(--fs-sm);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.chat-input::placeholder { color: var(--c-body); }
.chat-input:focus-visible { outline: none; } /* 포커스 표시는 pill 테두리(focus-within)가 맡는다 */
.chat-input:disabled { color: var(--c-body); cursor: not-allowed; }
.chat-send {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--r-full);
background: var(--c-dark);
color: var(--c-white);
cursor: pointer;
transition: opacity var(--dur-hover) var(--ease-out);
}
.chat-send__icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
.chat-send:hover:not(:disabled) { opacity: 0.85; }
}
.chat-send:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.chat-send:disabled { opacity: 0.45; cursor: not-allowed; }
.culture-chat__note {
width: 100%;
text-align: center;
font-weight: 500;
font-size: var(--fs-xs);
letter-spacing: var(--ls-tight);
color: var(--c-body);
}
/* ============================================================================
06. 팀 사진 패럴랙스 준비 상태
컨테이너보다 15% 큰 이미지를 넣어 두고 그 여유분 안에서만 움직인다.
js/main.js 가 에 .has-parallax 를 붙일 때만 적용된다.
========================================================================== */
/* .team-photo-hero 는 높이를 aspect-ratio 로 잡기 때문에, 흐름 배치 상태에서는
자식의 % 높이가 순환 참조로 무효가 된다. 절대배치로 빼면 컨테이너의 확정
높이를 기준으로 115% 가 정상 해석된다. */
.has-parallax .team-photo-hero img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 115%;
will-change: transform;
}
/* ============================================================================
07. 성과 지표 — 다크 (#4)
오렌지(--c-accent)는 수치 단위·차트 선 강조에만 쓴다. 면으로 쓰지 않는다.
========================================================================== */
/* 원본은 1693px 고정 높이, 내용은 top:47% 기준 세로 가운데 정렬.
보조 타일 3개 + 캡션이 들어오면서 내용이 ~230px 길어져 섹션도 그만큼 키웠다
(1693 → 1930). 위·아래 여백을 원본과 비슷하게(위 ~145px / 아래 ~250px) 유지하는 값이다. */
.stats {
position: relative;
width: 100%;
height: 1930px;
background: var(--c-dark);
padding: 0;
}
.stats__inner {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 120px;
width: var(--w-content);
max-width: calc(100% - 2 * var(--pad-x));
}
.stats__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: #FEFEFE;
}
.stats__grid {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.stats__row {
display: flex;
flex-direction: row;
gap: 20px;
width: 100%;
}
/* 카드 공통 — 컨테이너 쿼리 단위(cqw)로 데스크톱 비율 그대로 축소된다 */
.stat-card {
position: relative;
container-type: inline-size;
background: var(--c-card-glass);
border-radius: var(--r-card);
overflow: hidden;
cursor: pointer;
transition: background-color var(--dur-hover) var(--ease-out);
}
.stat-card:hover { background: rgba(255, 255, 255, 0.12); }
.stat-card__head { /* 좌상단 타이틀 + 큰 숫자 묶음 */
position: absolute;
top: 8.9%; left: 3.6%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.stat-card__title {
font-weight: 500;
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
white-space: pre-line;
}
.stat-card__figure {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
color: var(--c-white);
font-weight: 700;
line-height: var(--lh-head);
}
/* 원본은 단위 글자(억 / % / 억 원)도 숫자와 완전히 같은 font-size 다.
다크 섹션의 오렌지는 여기(단위)와 차트 선 하나에만 쓴다 — §4-4 참고. */
.stat-card__unit {
font-weight: 700;
font-size: inherit;
letter-spacing: var(--ls-tight);
color: var(--c-accent);
}
/* --- 카드 1: 150억 투자 유치 (1120 × 449) ------------------------------- */
.stat-card--funding { width: 100%; aspect-ratio: 1120 / 449; }
.stat-card--funding .stat-card__title { font-size: max(13px, 2.143cqw); } /* 24px */
.stat-card--funding .stat-card__figure { font-size: max(38px, 7.143cqw); } /* 80px */
.stat-card__chart {
position: absolute;
top: 15.8%; left: 14.3%;
width: 80.7%; height: 72.6%;
}
.stat-card__chart svg { width: 100%; height: 100%; }
/* 투자 유치 곡선의 면은 흰색 대신 오렌지 글로우로 채운다 (위 55% → 아래 0%) */
.stat-card__chart stop:first-child { stop-color: var(--c-accent-soft); }
.stat-card__note {
position: absolute;
top: 8.5%; right: 9.1%;
text-align: right;
font-weight: 500;
font-size: max(12px, 1.964cqw); /* 22px */
line-height: var(--lh-head);
color: var(--c-white);
}
.stat-card__note-dot {
position: absolute;
top: 15.1%; right: 4.8%;
width: 0.804cqw; height: 0.804cqw; /* 9px */
min-width: 6px; min-height: 6px;
border-radius: var(--r-full);
background: var(--c-accent);
}
/* --- 카드 3a: ARR (455 × 240) ------------------------------------------- */
.stat-card--arr { width: 40.9%; aspect-ratio: 455 / 240; }
.stat-card--arr .stat-card__head { top: 16.7%; left: 8.8%; width: 78.5%; }
.stat-card--arr .stat-card__title { font-size: max(13px, 5.275cqw); }
.stat-card--arr .stat-card__figure { font-size: max(30px, 13.187cqw); gap: 8px; } /* 60px */
.stat-card__plus { width: 7.47cqw; height: 7.47cqw; min-width: 16px; min-height: 16px; }
.stat-card__plus path { fill: var(--c-accent); } /* 단위와 같은 취급 */
/* --- 카드 3b: CES Innovation Awards (645 × 240) ------------------------- */
.stat-card--ces { width: 58.04%; aspect-ratio: 645 / 240; }
.stat-card--ces .stat-card__head { top: 16.7%; left: 6.2%; }
.stat-card--ces .stat-card__title { font-size: max(13px, 3.721cqw); }
.stat-card--ces .stat-card__figure { font-size: max(30px, 9.302cqw); } /* 60px */
.stat-card__badge {
position: absolute;
top: 62.9%; left: 76.9%;
width: 15.35%; height: auto;
}
/* ============================================================================
07c. 보조 지표 타일 3개 + 캡션 (지표 섹션 안, .stats__grid 의 마지막 두 자식)
----------------------------------------------------------------------------
위 카드들과 같은 글래스 배경·라운드를 쓰되 차트가 없는 납작한 타일이다.
카드처럼 절대배치·컨테이너 쿼리를 쓰지 않고 평범한 흐름 배치라, 한글이
길어져도 잘리지 않는다. 오렌지는 여기서도 **단위 글자에만** 쓴다(§4-4).
========================================================================== */
.stats__tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
.stat-tile {
display: flex;
flex-direction: column;
gap: 8px;
padding: 28px 24px;
border-radius: var(--r-card);
background: var(--c-card-glass);
transition: background-color var(--dur-hover) var(--ease-out);
}
.stat-tile:hover { background: rgba(255, 255, 255, 0.12); }
.stat-tile__title {
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
}
.stat-tile__figure {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 4px;
font-weight: 700;
font-size: 40px;
line-height: var(--lh-head);
color: var(--c-white);
}
/* 단위만 오렌지 — 숫자는 흰색 그대로. 카드(.stat-card__unit)와 같은 규칙이다 */
.stat-tile__unit {
font-weight: 700;
font-size: inherit;
letter-spacing: var(--ls-tight);
color: var(--c-accent);
}
/* 타일 아래 작은 주석 한 줄 */
.stats__caption {
width: 100%;
text-align: center;
font-weight: 500;
font-size: var(--fs-xs);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
opacity: 0.7;
}
/* ============================================================================
08. 채용공고 (#4) — 미션/비전 다음, 2열 그리드
========================================================================== */
/* 9차: 앞 섹션이 합류 여정(삭제)에서 미션/비전으로 바뀌어 위 여백을 되돌렸다.
흰 면(mv)에서 곧바로 이어지므로 제목이 숨 쉴 자리가 필요하다. */
.jobs { background: var(--c-page); padding-top: 120px; }
.jobs__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 70px;
width: var(--w-jobs);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.jobs__title {
width: 100%;
text-align: center;
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
/* 2열 그리드 (≥810px). 행 간격은 0 — 카드 상단 헤어라인이 구분선 역할을 한다.
같은 행의 카드는 stretch 되어 헤어라인이 좌우로 나란히 맞는다. */
.jobs__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
row-gap: 0;
width: 100%;
}
.job-card {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 24px 0;
border-top: 1px solid var(--c-line);
cursor: pointer;
text-align: left;
}
/* --- 호버/포커스 폴리시 (2026-07 4차) ------------------------------------
예전 `opacity: .62` 통짜 흐림을 걷어내고 세 가지를 함께 움직인다.
① 카드 바탕이 --c-panel 로 아주 옅게 물든다 (::before, 좌우 16px 여유)
② 직무명이 오른쪽으로 4px
③ 화살표가 오른쪽 위로 4px 이동하면서 브랜드 오렌지로 바뀐다
전환 180ms / --ease-out. 키보드 포커스(:focus-visible)도 똑같이 받는다.
`--c-panel` 밴드는 행 간격이 0 인 그리드에서도 헤어라인을 가리지 않도록
위쪽 1px 을 비워 둔다. */
.job-card::before {
content: '';
position: absolute;
top: 1px; right: -16px; bottom: 0; left: -16px;
z-index: -1; /* 카드 자체 배경이 없으므로 텍스트 뒤에 깔린다 */
border-radius: var(--r-md);
background: var(--c-panel);
opacity: 0;
transition: opacity 180ms var(--ease-out);
}
.job-card__titles,
.job-card__arrow {
transition: transform 180ms var(--ease-out), color 180ms var(--ease-out);
}
.job-card__arrow { color: var(--c-body); }
@media (hover: hover) and (pointer: fine) {
.job-card:hover::before { opacity: 1; }
.job-card:hover .job-card__titles { transform: translateX(4px); }
.job-card:hover .job-card__arrow {
transform: translate(4px, -4px);
color: var(--c-accent);
}
}
.job-card:focus-visible::before { opacity: 1; }
.job-card:focus-visible .job-card__titles { transform: translateX(4px); }
.job-card:focus-visible .job-card__arrow {
transform: translate(4px, -4px);
color: var(--c-accent);
}
@media (prefers-reduced-motion: reduce) {
.job-card::before,
.job-card__titles,
.job-card__arrow { transition: none; }
}
.job-card__main {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 1 1 auto;
}
/* 그리드 타일에서는 영문·국문 직무명을 두 줄로 쌓는다 (한 줄로는 넘친다) */
.job-card__titles {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
}
.job-card__en {
font-weight: 600;
font-size: var(--fs-lg);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.job-card__en strong { font-weight: 700; }
.job-card__ko {
font-weight: 500;
font-size: var(--fs-sm); /* 7차: 영문 직무명(24px)보다 작게 — 16px */
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink-soft);
}
.job-card__tags {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
row-gap: 4px;
gap: 10px;
min-height: 27px;
}
.job-card__tag {
font-weight: 500;
font-size: var(--fs-xs);
line-height: var(--lh-head);
color: var(--c-body);
}
.job-card__tag-rule {
width: 1px; height: 12px;
background: var(--c-line);
flex: none;
}
.job-card__arrow { width: 40px; height: 41px; flex: none; }
.jobs__tail { height: 120px; background: var(--c-surface); }
/* ⚠ 레거시 — 하단 반복 공고(#jobs-bottom)는 9차에서 마크업이 삭제됐다.
그 자리는 최종 CTA(#join, §09e)가 받는다. 규칙만 남겨 두었을 뿐이니
되살리지 말 것. */
.jobs--bottom { padding-top: 130px; }
/* ============================================================================
08c. 합류 여정 (#hiring) — ⚠ 레거시 (9차에서 마크업 삭제 · 되살리지 말 것)
----------------------------------------------------------------------------
전형 절차는 공고 상세 오버레이의 journey 도식(§11)이 직무별로 말한다.
아래 규칙은 참고용으로만 남겨 뒀고, 지금 페이지에는 이 클래스가 하나도 없다.
----------------------------------------------------------------------------
연혁 타임라인(아래 §)과 같은 시각 언어 — 1px 헤어라인 + 오렌지 노드.
데스크톱은 7칸 가로 흐름, 태블릿·모바일(§13·§14)은 세로 스택.
과제 전형·3차 인터뷰(선택 단계)는 속이 빈 노드 + 헤어라인 배지로 구분한다.
========================================================================== */
.hiring {
width: 100%;
padding: 0 0 96px;
background: var(--c-page);
}
.hiring__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
width: var(--w-content);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.hiring__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.hiring__sub {
font-weight: 500;
font-size: var(--fs-body-lg);
line-height: 1.6;
letter-spacing: var(--ls-tight);
color: var(--c-body);
}
.hiring__flow {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
width: 100%;
}
.hiring-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 8px;
text-align: center;
}
/* 노드 중심(10px)을 잇는 가로 헤어라인 — 연혁과 같은 방식 */
.hiring-step::before {
content: '';
position: absolute;
top: 10px; left: -50%;
width: 100%; height: 1px;
background: var(--c-line);
}
.hiring-step:first-child::before { display: none; }
.hiring-step__node {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px; height: 20px;
margin-bottom: 12px;
border-radius: var(--r-full);
background: var(--c-page); /* 선을 덮어 끊는다 */
}
.hiring-step__node::after {
content: '';
width: 10px; height: 10px;
border-radius: var(--r-full);
background: var(--c-accent);
}
/* 선택 단계(과제 전형·3차 인터뷰): 속이 빈 노드 */
.hiring-step--optional .hiring-step__node::after {
background: var(--c-page);
border: 2px solid var(--c-accent);
box-sizing: border-box;
}
.hiring-step__num {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-xs);
line-height: var(--lh-head);
letter-spacing: normal;
color: var(--c-body);
}
.hiring-step__label {
font-weight: 600;
font-size: var(--fs-sm);
line-height: 1.5;
letter-spacing: var(--ls-tight);
color: var(--c-ink);
word-break: keep-all;
}
.hiring-step__badge {
display: inline-block;
margin-left: 2px;
padding: 1px 8px;
border: 1px solid var(--c-line);
border-radius: var(--r-full);
font-weight: 500;
font-size: var(--fs-2xs);
line-height: 1.5;
color: var(--c-body);
vertical-align: 2px;
white-space: nowrap;
}
.hiring-step__desc {
margin-top: 2px;
font-weight: 500;
font-size: var(--fs-xs);
line-height: 1.6;
letter-spacing: var(--ls-tight);
color: var(--c-body);
word-break: keep-all;
}
/* ============================================================================
08d. 브랜드 갤러리 (#brand-gallery) — 채용공고 ↔ 미션·비전 사이 챕터 전환
----------------------------------------------------------------------------
다크 스테이지(280vh) + sticky 뷰포트. 스크럽 모션(부상 → 테이크오버 확대)은
js/main.js initGallery 가 건다. 모션 OFF 에서는 이 CSS 의 정지 콜라주가
그대로 보인다 — 아래 위치값이 곧 정지 상태다.
========================================================================== */
.gallery {
position: relative;
/* 10차: 280svh → 220svh. 스크럽 구간이 길수록 컷이 제자리를 찾기까지
검은 배경이 오래 보인다 — 구간을 줄여 이미지가 빨리 자리잡게 한다. */
height: 220vh;
height: 220svh;
background: var(--c-dark);
}
.no-motion .gallery { height: 100vh; height: 100svh; }
.gallery__stage {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
}
.gallery__item {
position: absolute;
margin: 0;
border-radius: var(--r-card);
overflow: hidden;
background: var(--c-ink);
will-change: transform;
}
.gallery__item img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
}
/* 13차: 컷마다 살짝 다른 각도로 기울여 '붙여 둔 콜라주' 감을 준다.
★ 기울기를 CSS 가 잡는 이유 — GSAP 은 y(세로 이동)만 건드리고 기존 transform 의
회전은 그대로 이어받는다. 그래서 모션 OFF 정지 화면에도 배치감이 남는다.
★ 가운데 컷(--center)은 기울이지 않는다. 후반부에 화면 전체로 확대되는 컷이라
각도가 남으면 풀블리드가 어긋난다. */
.gallery__item--a { left: 7%; top: 16%; width: 21vw; aspect-ratio: 3 / 4; transform: rotate(-2.4deg); }
.gallery__item--b { right: 9%; top: 10%; width: 24vw; aspect-ratio: 4 / 3; transform: rotate(1.8deg); }
.gallery__item--c { left: 12%; bottom: 10%; width: 20vw; aspect-ratio: 4 / 3; transform: rotate(2.2deg); }
.gallery__item--d { right: 14%; bottom: 14%; width: 17vw; aspect-ratio: 3 / 4; transform: rotate(-1.6deg); }
.gallery__item--center {
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 36vw; aspect-ratio: 16 / 10;
z-index: 2;
}
.gallery__caption {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
opacity: 0; /* initGallery 가 마지막에 띄운다 */
font-weight: 700;
font-size: var(--fs-h1);
letter-spacing: var(--ls-tight);
color: var(--c-white);
white-space: nowrap;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.no-motion .gallery__caption { opacity: 1; }
/* --- 컷 캡션 라벨 (13차 신규) ---------------------------------------------
landonorris.com 식 소형 캡션이다. 사진 왼쪽 아래에 작은 글씨로 얹고,
밝은 사진 위에서도 읽히도록 아래쪽에만 얕은 그림자 그라디언트를 깐다.
★ 문구 규칙 — **장소·연도·사실을 지어내지 않는다.** 이 사진들의 촬영지와
시점은 확인된 바 없으므로 라벨은 화면에 보이는 것만 담담히 적는다.
번호(01~05)는 콜라주 순번일 뿐 어떤 기록도 뜻하지 않는다.
★ 오렌지를 쓰지 않는다 — 다크 면의 오렌지는 지표 섹션 수치 전용이다(§1-3). */
.gallery__label {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 28px 12px 10px;
font-weight: 700;
font-size: 11px;
line-height: 1.3;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.86);
background: linear-gradient(to top, rgba(10, 9, 9, 0.55) 0%, rgba(10, 9, 9, 0) 100%);
pointer-events: none;
}
/* ============================================================================
08b. 연혁 타임라인 (#milestones) — 다크 지표 다음, 밝은 면
----------------------------------------------------------------------------
합류 여정 스테퍼(§11)와 같은 시각 언어다 — 1px 헤어라인 + 노드.
다만 노드는 번호가 아니라 **오렌지 점**이고, 선은 노드 뒤로 지나간다
(노드 원의 배경이 --c-page 라 선을 덮어 끊어 준다).
데스크톱·태블릿: 5칸 가로 흐름 (칸 사이 간격을 0 으로 두고 아이템 안쪽에
padding 을 주어야 `left:-50% / width:100%` 연결선이 정확히 노드 중심을 잇는다).
모바일(§14): 세로 스택 — [노드 | 텍스트] 2열이 되고 연결선이 세로로 선다.
========================================================================== */
.milestones {
width: 100%;
padding: 120px 0;
background: var(--c-page);
}
.milestones__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
width: var(--w-content-sm);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.milestones__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.milestones__sub {
font-weight: 500;
font-size: var(--fs-body-lg);
line-height: 1.6;
letter-spacing: var(--ls-tight);
color: var(--c-body);
}
.milestones__list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100%;
}
.milestone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 12px;
text-align: center;
}
/* 노드 중심(10px)을 잇는 가로 헤어라인. 첫 칸 앞에는 그리지 않는다 */
.milestone::before {
content: '';
position: absolute;
top: 10px; left: -50%;
width: 100%; height: 1px;
background: var(--c-line);
}
.milestone:first-child::before { display: none; }
.milestone__node {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px; height: 20px;
margin-bottom: 12px;
border-radius: var(--r-full);
background: var(--c-page); /* 선을 덮어 끊는다 */
}
.milestone__node::after {
content: '';
width: 10px; height: 10px;
border-radius: var(--r-full);
background: var(--c-accent);
}
.milestone__year {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-body-lg);
line-height: var(--lh-head);
letter-spacing: normal;
color: var(--c-ink);
}
.milestone__title {
font-weight: 600;
font-size: var(--fs-sm);
line-height: 1.5;
letter-spacing: var(--ls-tight);
color: var(--c-ink);
word-break: keep-all;
}
.milestone__desc {
font-weight: 500;
font-size: var(--fs-xs);
line-height: 1.6;
letter-spacing: var(--ls-tight);
color: var(--c-body);
word-break: keep-all;
}
/* ============================================================================
09b. 복리후생 (#benefits) — 인재상 다음, 밝은 면
----------------------------------------------------------------------------
노션 채용 페이지의 6개 그룹 = 카드 6장 (데스크톱·태블릿 2열 × 3행, 모바일 1열).
그림자 토큰이 없는 사이트라 카드는 **1px 헤어라인**으로만 띄운다.
★ 하이라이트 항목(.benefit__item--key)은 불릿 점을 오렌지로 바꾸고 글자를
600 / --c-ink 로 올린다. 배경·뱃지로 강조하지 않는다 — 오렌지는 점에만(§1-3).
★ 카드 높이는 내용에 맡긴다(그리드 기본 stretch 라 같은 행끼리는 자동으로 맞는다).
========================================================================== */
.benefits {
width: 100%;
padding: 120px 0;
background: var(--c-page);
}
.benefits__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
width: var(--w-content-sm);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.benefits__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.benefits__sub {
font-weight: 500;
font-size: var(--fs-body-lg);
line-height: 1.6;
letter-spacing: var(--ls-tight);
color: var(--c-body);
}
.benefits__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
.benefit-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
background: var(--c-surface);
}
.benefit-card__title {
font-weight: 600;
font-size: var(--fs-lg);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
word-break: keep-all;
}
.benefit-card__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.benefit__item {
position: relative;
padding-left: 16px;
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
color: var(--c-ink-soft);
word-break: keep-all;
}
.benefit__item::before {
content: '';
position: absolute;
top: 0.72em; left: 0;
width: 5px; height: 5px;
border-radius: var(--r-full);
background: var(--c-line);
}
/* 하이라이트 — 점만 오렌지, 글자는 한 단 굵게 */
.benefit__item--key {
font-weight: 600;
color: var(--c-ink);
}
.benefit__item--key::before { background: var(--c-accent); }
/* ============================================================================
09c. 미래 로드맵 밴드 (#roadmap) — 두 번째이자 마지막 다크 면
----------------------------------------------------------------------------
차트도 사진도 없는 조용한 다크 밴드. 문장 세 줄과 3단 흐름(측정 → 분석 → 확장)뿐이다.
화살표는 1px 헤어라인(--c-line-dark) + 6px 셰브런이고, 모바일에서는 세로로 선다.
여기서 오렌지는 헤딩 위 점 하나뿐이다 — 지표 섹션과 같은 절제를 지킨다.
========================================================================== */
.roadmap {
width: 100%;
padding: 120px 0;
background: var(--c-dark);
}
.roadmap__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 72px;
width: var(--w-content);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.roadmap__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white);
}
.roadmap__body {
max-width: 860px;
font-weight: 500;
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
word-break: keep-all;
}
.roadmap__flow {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
}
.roadmap__step {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.roadmap__step-label {
font-weight: 700;
font-size: var(--fs-lg);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white);
}
.roadmap__step-desc {
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
opacity: 0.75;
word-break: keep-all;
}
/* 단계 사이 헤어라인 화살표 (선 + 셰브런). 콘텐츠가 아니라 장식이라 aria-hidden */
.roadmap__arrow {
flex: none;
display: flex;
flex-direction: row;
align-items: center; /* 가로일 땐 선을 세로 중앙에, 세로일 땐 가로 중앙에 둔다 */
justify-content: center;
width: 72px;
padding: 0 12px;
margin-top: 14px; /* 라벨 첫 줄 높이에 맞춰 내린다 */
align-self: flex-start;
}
.roadmap__arrow::before {
content: '';
flex: 1 1 auto;
height: 1px;
background: var(--c-line-dark);
}
.roadmap__arrow::after {
content: '';
flex: none;
width: 6px; height: 6px;
margin-left: -4px;
border-top: 1px solid var(--c-line-dark);
border-right: 1px solid var(--c-line-dark);
transform: rotate(45deg);
}
/* --- 글로벌 패널: 도트 맵 + 3단 흐름 오버레이 (10차) -------------------------
맵(1376×768)이 장면, 흐름이 그 위 하단 스크림 안의 자막이다.
맵 자체가 다크 톤이라 스크림은 하단 가독성 확보용으로만 얕게 깐다.
모바일에서는 오버레이를 풀고 흐름을 맵 아래로 내린다 (§14). */
.roadmap__panel {
position: relative;
width: 100%;
margin: 0;
border-radius: var(--r-lg);
overflow: hidden;
}
.roadmap__panel img {
display: block;
width: 100%;
height: auto;
}
.roadmap__panel-body {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 20px;
padding: clamp(24px, 3.5vw, 44px);
background: linear-gradient(to top,
rgba(10, 9, 9, 0.78) 0%,
rgba(10, 9, 9, 0.32) 42%,
rgba(10, 9, 9, 0) 68%);
}
.roadmap__panel-caption {
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
}
/* ============================================================================
09d. 알고케어 사람들 (#people) — 팀 소개 다음, 밝은 면 (9차 신규)
----------------------------------------------------------------------------
복리후생 카드(§09b)와 같은 언어다 — 그림자 없이 **1px --c-line 헤어라인**,
--r-lg 라운드, --c-surface 면. 새 색·새 라운드를 만들지 않는다.
★ 사진은 카드마다 원본 비율이 다르다(가로 1066×800 · 세로 533×800).
aspect-ratio: 4/5 로 크기를 통일하고, 잘리는 방향이 카드마다 다르므로
object-position 을 **카드별 modifier** 로 따로 잡는다. 값을 바꿀 때는
실제 사진에서 얼굴이 프레임 안에 남는지 확인할 것.
★ 인용부호 장식을 오렌지로 칠하지 않는다 — 이 섹션의 오렌지는
헤딩 위 .dot 하나뿐이다 (§1-3).
========================================================================== */
.people {
width: 100%;
padding: 120px 0;
background: var(--c-page);
}
.people__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
width: var(--w-content-sm);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.people__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.people__sub {
font-weight: 500;
font-size: var(--fs-body-lg);
line-height: 1.6;
letter-spacing: var(--ls-tight);
color: var(--c-body);
}
.people__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
.person-card {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px 20px 28px;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
background: var(--c-surface);
}
.person-card__photo {
overflow: hidden;
border-radius: var(--r-md);
background: var(--c-panel-alt); /* 이미지가 늦게 뜰 때의 빈 자리 */
}
.person-card__photo img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
/* 가로 1066×800 · 인물이 프레임 오른쪽 (얼굴 ≒ x 560) — 창을 오른쪽으로 민다 */
.person-card__photo--ella img { object-position: 58% 50%; }
/* 세로 533×800 · 상반신 — 위쪽(얼굴)을 남기고 발치를 자른다 */
.person-card__photo--elvy img { object-position: 50% 22%; }
/* 가로 1047×800 · 인물이 거의 가운데 (얼굴 ≒ x 540) */
.person-card__photo--billie img { object-position: 52% 50%; }
/* 세로 533×800 · 상반신, 얼굴이 위쪽 1/4 지점 — 살짝 위로 당겨 다리 쪽을 더 자른다 */
.person-card__photo--jay img { object-position: 50% 25%; }
/* 정사각 800×800 · 얼굴이 살짝 왼쪽(≒ x 45%) — 가로 크롭만 발생, 세로는 그대로 */
.person-card__photo--andrea img { object-position: 45% 50%; }
/* 세로 533×800 · 얼굴이 중앙보다 살짝 아래(긴 생머리) */
.person-card__photo--chloe img { object-position: 50% 35%; }
.person-card__quote {
margin: 0;
flex: 1 1 auto;
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
color: var(--c-ink-soft);
word-break: keep-all;
}
/* 닉네임 + 영문 직무 한 단어 (10차: 실명·직책은 여전히 없지만, 인용의 맥락을
주기 위해 직무만 영문으로 병기한다 — Ella Pharmacist 식) */
.person-card__name {
font-weight: 600;
font-size: var(--fs-sm);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.person-card__role {
margin-left: 6px;
font-weight: 500;
font-size: var(--fs-xs);
color: var(--c-body);
}
/* ============================================================================
09e. 최종 CTA (#join) — 로드맵(다크) 다음, 푸터 직전 (9차 신규)
----------------------------------------------------------------------------
7차의 하단 반복 공고(#jobs-bottom) 자리다. 목록 대신 갈 곳 두 개와 문의
주소만 둔 조용한 흰 면이라, 바로 뒤 푸터(--c-panel)와 톤이 이어진다.
버튼은 기존 토큰(.btn--dark) + 9차 보조 토큰(.btn--line) 둘뿐이고,
여기에는 오렌지가 하나도 없다 — 마지막 화면은 결정만 남긴다.
========================================================================== */
.join {
width: 100%;
padding: 140px 0;
background: var(--c-surface);
}
.join__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: var(--w-content-sm);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
text-align: center;
}
/* --- 시그니처 라인 드로잉 마크 (13차 신규) --------------------------------
최종 CTA 를 여는 브랜드 심볼. 뷰포트에 들어오면 획을 긋듯 한 번 그려진다
(js/main.js initSignature — stroke-dasharray/dashoffset, ScrollTrigger once).
★ 초기 상태(dashoffset)를 여기 쓰지 않는다 — §5-0 ① 대로 GSAP 이 런타임에
심는다. 그래서 JS 가 죽거나 ?static=1 이면 **처음부터 다 그려진 마크**다.
★ 획 굵기는 0.8 user unit ≒ 2px(72px 표시 기준). 더 굵히면 서명이 아니라
로고 도장처럼 보인다.
★ 색 — 획은 --c-ink 뿐이고, 오렌지는 가운데 점(지름 4px) 하나다.
이 섹션에서 유일하게 허용한 오렌지이며 면으로 키우지 않는다. */
.join__sign {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
/* 14차: 스트로크 마크 → 로고 이미지. 흰 배경 JPEG 의 코너를 원으로 잘라 낸다
(마크 자체가 원형이라 50% 로 잘라도 형태가 깎이지 않는다). */
.join__logo {
display: block;
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: contain;
}
/* 아래 세 규칙은 걷어낸 시그니처 드로잉(#joinSign)용이다. 마크업에서 빠졌지만
되살릴 때 다시 쓰라고 남겨 둔다 — js/main.js initSignature 와 짝이다. */
.join__sign-svg {
width: 72px;
height: 72px;
overflow: visible;
}
.join__sign-stroke {
fill: none;
stroke: var(--c-ink);
stroke-width: 0.8;
stroke-linecap: round;
}
.join__sign-dot { fill: var(--c-accent); }
.join__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.join__sub {
max-width: 34em;
font-weight: 500;
font-size: var(--fs-body-lg);
line-height: 1.6;
letter-spacing: var(--ls-tight);
color: var(--c-body);
word-break: keep-all;
}
.join__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 12px;
}
.join__contact {
margin-top: 4px;
font-weight: 500;
font-size: var(--fs-xs);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-body);
}
.join__contact a {
color: var(--c-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--c-line);
transition: text-decoration-color var(--dur-hover) var(--ease-out);
}
.join__contact a:hover { text-decoration-color: var(--c-ink); }
/* ============================================================================
10. 푸터 (#9) + 대형 워드마크
========================================================================== */
.site-footer {
display: flex;
align-items: center;
width: 100%;
min-height: 375px;
padding: 60px 0;
background: var(--c-panel);
}
.site-footer__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 41px;
width: var(--w-content-sm);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.site-footer__company {
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer__name {
font-weight: 600;
font-size: var(--fs-xs);
line-height: var(--lh-head);
color: var(--c-ink);
}
.site-footer__row {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-weight: 500;
font-size: var(--fs-2xs);
line-height: var(--lh-head);
color: var(--c-body);
}
.site-footer__bar { width: 4px; height: 12px; flex: none; }
/* 9차: 블로그 · English 링크 줄. 사업자 정보(.site-footer__row)와 같은 크기·색이고
링크만 헤어라인 밑줄을 받아 '누를 수 있는 글자'로 읽힌다. */
.site-footer__links a {
color: var(--c-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--c-line);
transition: text-decoration-color var(--dur-hover) var(--ease-out);
}
.site-footer__links a:hover { text-decoration-color: var(--c-ink); }
/* --- 푸터 워드마크 서명 (2026-07 5차에서 축소) ----------------------------
4차에는 푸터 폭(1072px)을 꽉 채우는 '대형' 워드마크였는데, 섹션 하나처럼
읽혀서 **190px 짜리 작은 서명**으로 줄였다(스프라이트 원본 크기 212×27 에
가까운, 사실상 등신대 크기다). 푸터 안쪽이 왼쪽 정렬 컬럼이라 워드마크도
왼쪽에 맞춘다 — 가운데로 띄우면 혼자 다른 격자를 쓰는 것처럼 보인다.
색은 헤어라인 그레이(--c-line) 하나뿐 — 새 색 없음.
컨테이너에 overflow:hidden 이 걸려 있어 GSAP 스크럽(yPercent 22 → 0 +
페이드)이 '아래에서 떠오르는' 마스크 등장으로 보인다. 마크가 24px 남짓이라
실제 이동량은 5px 정도로, 눈에 띄지 않는 조용한 인사에 가깝다.
모션이 꺼져 있으면 처음부터 제자리에 그려진 정적 타이포그래피다. */
.footer-wordmark {
width: 190px;
max-width: 100%;
overflow: hidden;
line-height: 0;
}
.footer-wordmark__svg {
display: block;
width: 100%;
height: auto;
color: var(--c-line);
will-change: transform, opacity;
}
.site-footer__bottom {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.site-footer__rule { width: 100%; height: 1px; background: var(--c-line); }
.site-footer__copy {
font-weight: 500;
font-size: var(--fs-2xs);
line-height: var(--lh-head);
color: var(--c-body);
padding-top: 8px;
}
.site-footer__sns {
display: flex;
flex-direction: row;
gap: 8px;
margin-top: 8px;
}
.site-footer__sns a {
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
transition: opacity var(--dur-hover) var(--ease-out);
}
.site-footer__sns a:hover { opacity: 0.6; }
.site-footer__sns svg { width: 32px; height: 32px; }
.site-footer__sns svg rect:first-child { fill: transparent; }
/* 원본의 SNS 글리프는 연회색 #B0B1B4 다 (검정이 아니다) */
.site-footer__sns svg path { fill: #B0B1B4; }
.site-footer__sns--kakao svg { width: 24px; height: 24px; }
/* ============================================================================
11. 채용공고 상세 오버레이 (신규 기능)
원본 사이트는 노션으로 이동하지만, 이 사이트는 페이지 안에서 상세를 연다.
========================================================================== */
.job-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
justify-content: flex-end;
}
.job-overlay[hidden] { display: none; }
.job-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 9, 9, 0.5);
opacity: 0;
transition: opacity 260ms var(--ease-out);
}
.job-overlay.is-open .job-overlay__backdrop { opacity: 1; }
.job-overlay__panel {
position: relative;
width: min(760px, 100%);
height: 100%;
background: var(--c-page);
display: flex;
flex-direction: column;
transform: translateX(24px);
opacity: 0;
transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.job-overlay.is-open .job-overlay__panel { transform: none; opacity: 1; }
.job-overlay__close {
position: absolute;
top: 20px; right: 20px;
z-index: 2;
width: 40px; height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-full);
background: rgba(10, 9, 9, 0.06);
transition: background-color var(--dur-hover) var(--ease-out);
}
.job-overlay__close:hover { background: rgba(10, 9, 9, 0.12); }
.job-overlay__close svg { width: 18px; height: 18px; }
.job-overlay__scroll {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 72px 56px 56px;
}
/* --- 오버레이 헤더 -------------------------------------------------------- */
.job-detail__eyebrow {
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: 0.02em;
color: var(--c-accent);
text-transform: uppercase;
margin-bottom: 12px;
}
.job-detail__title {
font-weight: 700;
font-size: 32px;
line-height: 1.3;
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.job-detail__tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 16px;
}
.job-detail__tag {
padding: 6px 12px;
border-radius: var(--r-full);
background: var(--c-panel-alt);
font-weight: 500;
font-size: var(--fs-2xs);
color: var(--c-body);
}
.job-detail__summary {
margin-top: 24px;
padding: 20px 22px;
border-radius: var(--r-md);
background: var(--c-panel);
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--c-ink-soft);
}
.job-detail__notice {
margin-top: 24px;
padding: 20px 22px;
border-radius: var(--r-md);
border: 1px solid var(--c-line);
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--c-body);
}
/* --- 오버레이 본문 섹션 --------------------------------------------------- */
.job-detail__section { margin-top: 44px; }
.job-detail__section h3 {
font-weight: 700;
font-size: var(--fs-body-lg);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
padding-bottom: 12px;
border-bottom: 1px solid var(--c-line);
margin-bottom: 18px;
}
.job-detail__section p {
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--c-ink-soft);
}
.job-detail__section p + p { margin-top: 12px; }
.job-detail__list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
}
.job-detail__list li {
position: relative;
padding-left: 16px;
font-weight: 500;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--c-ink-soft);
}
.job-detail__list li::before {
content: '';
position: absolute;
top: 0.72em; left: 0;
width: 5px; height: 5px;
border-radius: var(--r-full);
background: var(--c-accent);
}
/* --- 합류 여정 스텝 도식 (job.journey 로부터 생성) -------------------------
헤어라인 1px + 34px 원형 노드. 그림자·면 채우기 없음.
마지막 스텝만 브랜드 오렌지로 채워 '도착점'을 표시한다. */
.journey {
display: flex;
flex-direction: row;
align-items: flex-start;
margin-top: 4px;
}
.journey__step {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
/* 노드와 노드를 잇는 가는 가로선 (첫 스텝 앞에는 없다) */
.journey__step::before {
content: '';
position: absolute;
top: 17px; left: -50%;
width: 100%; height: 1px;
background: var(--c-line);
}
.journey__step:first-child::before { display: none; }
.journey__node {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 34px; height: 34px;
border: 1px solid var(--c-line);
border-radius: var(--r-full);
background: var(--c-page);
font-weight: 600;
font-size: var(--fs-2xs);
letter-spacing: normal;
color: var(--c-body);
}
.journey__label {
font-weight: 500;
font-size: var(--fs-2xs);
line-height: 1.5;
color: var(--c-body);
padding: 0 4px;
}
.journey__step--final .journey__node {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-white);
}
.journey__step--final .journey__label { font-weight: 600; color: var(--c-ink); }
.journey__note {
margin-top: 18px;
font-weight: 500;
font-size: var(--fs-2xs);
line-height: var(--lh-ui);
color: var(--c-body);
}
/* --- 오버레이 하단 CTA ---------------------------------------------------- */
.job-detail__foot {
margin-top: 56px;
padding-top: 28px;
border-top: 1px solid var(--c-line);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.job-detail__notion {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 500;
font-size: var(--fs-xs);
color: var(--c-body);
text-decoration: underline;
text-underline-offset: 3px;
}
.job-detail__notion:hover { color: var(--c-ink); }
/* ============================================================================
12. 팀 미션/비전 · 팀 소개 · 조직문화 블록 (#team · #culture)
원래 team.html 이었던 섹션들. 2026-07 에 index.html 한 장으로 합쳤다.
========================================================================== */
/* --- 팀 블록 여는 풀블리드 사진 (원본 aspect-ratio 2.06897 → 1440px 에서 696px) --- */
.team-photo-hero {
position: relative; /* 패럴랙스 이미지의 절대배치 기준 */
width: 100%;
aspect-ratio: 2.06897;
overflow: clip;
background: var(--c-surface);
}
.team-photo-hero img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
/* --- 팀 소개 + 팀 조직 목록 (원본 1499px 고정 높이 섹션) ------------------- */
.team-hero {
position: relative;
background: var(--c-surface);
padding: 100px 0 60px; /* 행에 썸네일이 들어가며 고정 높이(1499px)를 auto 로 풀었다 */
}
.team-hero__inner {
margin: 0 auto;
width: var(--w-content-sm);
max-width: calc(100% - 2 * var(--pad-x));
}
/* 제목 + 팀 투어 버튼을 한 줄에 (모바일에서는 세로 스택, §14) */
.team-hero__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.team-hero__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
/* 한 행 = [고정 썸네일] + [국문·영문 팀명 한 줄 + 설명]
(2026-07 7차: 커서 추종 미리보기를 걷어내고 왼쪽 고정 썸네일로 바꿨다) */
.team-list { display: flex; flex-direction: column; gap: 20px; }
.team-row {
display: grid;
grid-template-columns: 240px 1fr;
gap: 28px;
align-items: center;
padding: 32px 0;
border-top: 1px solid var(--c-line-soft);
}
.team-row__thumb {
width: 100%;
aspect-ratio: 3 / 2;
border-radius: var(--r-md);
overflow: hidden;
background: var(--c-panel);
}
.team-row__thumb img {
width: 100%; height: 100%;
object-fit: cover;
}
.team-row__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.team-row:first-child { border-top: 0; } /* 원본은 행 '사이'에만 구분선이 있다 */
.team-row__label {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
width: auto;
}
.team-row__ko {
font-weight: 600;
font-size: var(--fs-team-name);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.team-row__en {
font-weight: 500;
font-size: var(--fs-lg);
line-height: var(--lh-head);
letter-spacing: normal;
color: rgb(179, 172, 170);
}
.team-row__desc {
width: 100%;
font-weight: 500;
font-size: var(--fs-nav);
line-height: var(--lh-ui);
letter-spacing: var(--ls-tight);
color: var(--c-ink-soft);
}
.team-row__desc p + p { margin-top: 0; }
/* --- 미션 / 비전 — 모뉴멘털 다크 (8차 리디자인) ----------------------------
작은 카드 두 장 대신, 다크 배경 위 초대형 스테이트먼트로 웅장하게.
오렌지는 아이브로 글자에만 쓴다 (§1-3). */
.mv {
position: relative;
background: var(--c-dark);
padding: 180px 0 160px;
}
.mv__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 110px;
width: var(--w-content);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.mv__block {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
text-align: center;
}
.mv__eyebrow {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-sm);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-accent);
}
.mv__statement {
font-weight: 700;
font-size: clamp(34px, 4.6vw, 64px);
line-height: 1.32;
letter-spacing: var(--ls-tight);
color: var(--c-white);
word-break: keep-all;
}
.mv__statement--vision {
font-size: clamp(26px, 3.4vw, 46px);
color: var(--c-white-dim);
}
/* 코어밸류 3 — 다크 위 3열 미니 칼럼 */
.values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
width: 100%;
padding-top: 80px;
border-top: 1px solid var(--c-line-dark);
}
.value-item { display: flex; flex-direction: column; gap: 10px; }
.value-item__head {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 12px;
}
.value-item__badge {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-sm);
color: var(--c-accent);
}
.value-item__title {
font-weight: 600;
font-size: var(--fs-md);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white);
}
.value-item__desc {
font-weight: 500;
font-size: var(--fs-sm);
line-height: 1.7;
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
word-break: keep-all;
}
/* ============================================================================
12b. 알고케어 인재상 (#ways) — 다크 & 오렌지 에디토리얼 인덱스 (8차)
----------------------------------------------------------------------------
컬러 카드 그리드를 걷어내고, 다크 배경 위 헤어라인 인덱스 리스트로 바꿨다.
[번호(오렌지) | 라벨(백) | 정의문(딤)] 3열 · 파트 라벨은 오렌지 캡스.
호버 시 라벨만 오렌지로 물든다 — 면 강조는 쓰지 않는다 (§1-3).
카피 정본: 노션 '알고케어 인재상 (위키_정본)' — 10가지 · 3파트.
========================================================================== */
.ways {
background: var(--c-dark);
padding: 160px 0;
/* 카드가 좌우 ±90px 에서 날아드는 동안 가로 스크롤이 생기지 않게 가둔다 (10차) */
overflow-x: clip;
}
.ways__inner {
display: flex;
flex-direction: column;
gap: 56px;
width: var(--w-content);
max-width: calc(100% - 2 * var(--pad-x));
margin: 0 auto;
}
.ways__head {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 24px;
}
.ways__title {
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white);
}
.ways__sub {
font-weight: 500;
font-size: var(--fs-body-lg);
line-height: 1.7;
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
}
.ways__part {
display: flex;
flex-direction: column;
gap: 8px;
}
.ways__part-label {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-sm);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-accent);
}
.ways__part-desc {
font-weight: 500;
font-size: var(--fs-sm);
line-height: 1.7;
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
word-break: keep-all;
}
.ways__list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
/* 10차: 헤어라인 인덱스 리스트 → 브랜드 생성 컷을 다크 오버레이 아래 깐 카드.
배경 컷은 카드 안의 .way-row__bg ![]()
다 (assets/brand/* — 페이지의 다른
섹션이 이미 쓰는 컷이라 추가 다운로드가 거의 없고, lazy 로딩을 받는다).
등장은 좌/우 교차 플라이인(.appear--from-left/right, js/main.js §4-b)이다.
층 구성: 컷(z0) → 다크 오버레이 ::before(z1) → 텍스트(z2).
★ 글자 대비는 오버레이가 보장한다 — 왼쪽(텍스트 시작점)이 가장 진하고
오른쪽으로 갈수록 이미지가 배어 나온다. 오버레이를 옅게 만들지 말 것. */
.way-row {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 72px 300px minmax(0, 1fr);
column-gap: 24px;
align-items: baseline;
padding: 30px 32px;
border-radius: var(--r-lg);
background: var(--c-ink);
}
.way-row > * { position: relative; z-index: 2; } /* 텍스트를 오버레이 위로 */
.way-row__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.way-row::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(100deg,
rgba(10, 9, 9, 0.95) 0%,
rgba(10, 9, 9, 0.86) 55%,
rgba(10, 9, 9, 0.62) 100%);
}
.way-row__num {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-body-lg);
color: var(--c-accent);
}
.way-row__label {
font-weight: 600;
font-size: var(--fs-team-name);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white);
transition: color var(--dur-hover) var(--ease-out);
word-break: keep-all;
}
@media (hover: hover) and (pointer: fine) {
.way-row:hover .way-row__label { color: var(--c-accent); }
}
/* 14차: 정의문(desc) 과 반대 사례(dont) 를 **같은 칸에 겹쳐** 두고 호버로 교차한다.
★ 왜 겹치나 — 아래로 펼치면 호버할 때마다 행 높이가 변해 리스트 전체가 출렁인다.
같은 셀에 쌓으면 칸 높이가 둘 중 긴 쪽으로 한 번 정해지고 그 뒤로는 안 움직인다.
★ 호버가 없는 기기(터치)에서는 겹치기를 풀고 두 문장을 위아래로 그냥 다 보여 준다
— 호버로만 닿는 콘텐츠를 만들지 않기 위한 기본값이다(아래 미디어쿼리 밖 규칙).
★ Don't 카피 출처: 노션 '알고케어 인재상 (위키_정본)' 의 '이런 모습은 경계합니다'(✕).
인재상 정의문과 마찬가지로 정본을 먼저 고치고 여기로 옮긴다. */
.way-row__copy {
display: grid;
gap: 8px;
}
.way-row__desc {
font-weight: 500;
font-size: var(--fs-sm);
line-height: 1.7;
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
word-break: keep-all;
}
/* Don't 문장은 정의문을 **대체**하는 본문이다 — 정의문보다 흐리면 읽기가 더 어려워지니
같은 --c-white-dim 을 쓴다. 구분은 색이 아니라 앞의 'Don’t' pill 이 맡는다. */
.way-row__dont {
font-weight: 500;
font-size: var(--fs-sm);
line-height: 1.7;
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
word-break: keep-all;
}
/* 'Don’t' 라벨 — 오렌지를 쓰지 않는다. 오렌지는 지향점(번호·라벨) 쪽 색이고
여기는 경계 문장이라 무채색 헤어라인 pill 로 조용히 구분만 한다 (§1-3). */
.way-row__dont-tag {
display: inline-block;
margin-right: 9px;
padding: 2px 7px;
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
font-family: var(--font-en);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.66);
vertical-align: 2px;
white-space: nowrap;
}
/* 낭독기에만 읽히는 안내 — 'Don’t' pill 만으로는 맥락이 안 잡힌다 */
.way-row__dont-sr {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.way-row__copy { gap: 0; }
.way-row__copy > * { grid-area: 1 / 1; } /* 두 문장을 같은 칸에 포개기 */
.way-row__desc,
.way-row__dont { transition: opacity var(--dur-hover) var(--ease-out); }
.way-row__dont { opacity: 0; }
.way-row:hover .way-row__desc { opacity: 0; }
.way-row:hover .way-row__dont { opacity: 1; }
}
/* ============================================================================
12c. 팀 투어 미니게임 (.office) — #team 섹션 안 인라인 임베드
----------------------------------------------------------------------------
11차. 별도 페이지(office.html)에 있던 탑다운 오피스 맵을 팀 목록 위로 들여왔다.
· 판은 16/10 비율 + max-height 로 잘라 섹션 폭에 맞춘다. 캔버스는 판을 꽉 채우고,
HUD·힌트·팀 카드·완주 토스트는 전부 이 판 안 absolute 오버레이다.
· 조작권은 '활성'(.is-active) 일 때만 잡는다 — 그래야 방향키·터치 스와이프가
페이지 스크롤을 뺏지 않는다(스크롤 하이재킹 방지). 활성 표시는 오렌지 링.
· 비활성일 때는 .office__veil(버튼)이 판 전체를 덮어 첫 클릭을 삼킨다.
새 색은 만들지 않는다 — 라인/잉크/액센트 모두 :root 토큰이다.
========================================================================== */
.office {
position: relative;
aspect-ratio: 16 / 10;
max-height: 72vh;
margin: 0 0 48px;
border-radius: var(--r-xl);
overflow: hidden;
background: #EFE7DA; /* 맵 로드 전 프레임 색과 동일(로우폴리 맵 여백 톤) */
box-shadow: inset 0 0 0 1px var(--c-line), 0 14px 40px rgba(10, 9, 9, 0.08);
transition: box-shadow var(--dur-hover) var(--ease-out);
}
/* 활성 상태 — 조작권이 이 판에 있다는 표시 */
.office.is-active {
box-shadow: inset 0 0 0 2px var(--c-accent),
0 0 0 4px rgba(244, 123, 26, 0.16),
0 14px 40px rgba(10, 9, 9, 0.12);
}
.office__stage {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
outline: none;
touch-action: pan-y; /* 비활성: 세로 스와이프는 페이지 스크롤 */
cursor: pointer;
}
.office.is-active .office__stage { touch-action: none; cursor: crosshair; }
/* --- HUD (좌: 진행도 / 우: 나가기) --------------------------------------- */
.office__hud {
position: absolute;
top: 14px; left: 14px; right: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
pointer-events: none;
z-index: 3;
}
.office__pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 15px;
border-radius: var(--r-full);
background: rgba(255, 255, 255, 0.92);
box-shadow: inset 0 0 0 1px var(--c-line);
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
backdrop-filter: blur(6px);
}
.office__pill em { font-style: normal; color: var(--c-accent); }
/* 나가기 버튼은 활성일 때만 보인다 */
.office__exit { opacity: 0; pointer-events: none; transition: opacity var(--dur-hover) var(--ease-out); }
.office.is-active .office__exit { opacity: 1; pointer-events: auto; }
.office__exit:hover { background: var(--c-panel-alt); }
/* --- 조작 힌트 ------------------------------------------------------------ */
.office__hint {
position: absolute;
left: 50%; bottom: 16px;
transform: translateX(-50%);
padding: 8px 16px;
border-radius: var(--r-full);
background: rgba(10, 9, 9, 0.78);
color: var(--c-white);
font-weight: 500;
font-size: var(--fs-2xs);
letter-spacing: var(--ls-tight);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s var(--ease-out);
z-index: 3;
}
.office.is-active .office__hint { opacity: 1; }
.office .office__hint.is-hidden { opacity: 0; }
/* 팀 카드가 열려 있으면 힌트는 비킨다 (좁은 화면에서 겹침) */
.office.has-card .office__hint { opacity: 0; }
/* 힌트 두 벌 — 입력장치에 맞는 문장만 남긴다 (14차).
기본(터치·호버 없음)은 터치 문구이고, 마우스 환경에서만 마우스 문구로 바꾼다.
★ 기본값을 터치 쪽으로 둔 이유: 미디어쿼리를 못 읽는 환경에서도 모바일 사용자가
조작법을 알 수 있어야 한다(마우스 사용자는 어차피 방향키가 있다). */
.office__hint-mouse { display: none; }
.office__hint-touch { display: inline; }
@media (hover: hover) and (pointer: fine) {
.office__hint-mouse { display: inline; }
.office__hint-touch { display: none; }
}
/* --- 터치 아날로그 조이스틱 (15차) -----------------------------------------
14차의 4방향 십자 패드를 큰 원(베이스) + 작은 원(노브)으로 바꿨다.
노브를 끌면 그 각도로 360° 이동한다 (js/office.js 의 axis 벡터).
마우스+정밀 포인터 환경에서는 아예 감춘다.
★ 팀 카드와 겹치지 않게, 모바일에서는 카드를 판 **위쪽**으로 올린다
(아래 반응형 블록의 .office__card 규칙). 순서를 바꾸면 카드가 스틱을 덮는다.
★ 노브의 transform 은 JS 가 매 프레임 쓴다 — 여기에 transition 을 걸면
손가락을 따라오는 게 굼떠진다. 손을 뗄 때만 CSS 로 되돌린다. */
.office__stick {
position: absolute;
left: 14px; bottom: 14px;
width: 108px; height: 108px;
border-radius: 50%;
background: rgba(10, 9, 9, 0.42);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
touch-action: none; /* 스틱 위 스와이프가 페이지를 굴리지 않게 */
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
cursor: grab;
z-index: 5; /* 카드(4)보다 위 — 항상 조작 가능해야 한다 */
}
@media (hover: hover) and (pointer: fine) {
.office__stick { display: none; }
}
.office__stick:focus-visible {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26),
0 0 0 3px rgba(244, 123, 26, 0.55);
outline: none;
}
.office__stick.is-holding { cursor: grabbing; background: rgba(10, 9, 9, 0.52); }
.office__stick-knob {
position: absolute;
left: 50%; top: 50%;
width: 44px; height: 44px; /* 탭 타깃 하한 44px */
border-radius: 50%;
background: var(--c-white);
box-shadow: 0 3px 10px rgba(10, 9, 9, 0.35);
transform: translate(-50%, -50%);
/* 손을 뗐을 때만 가운데로 스르륵 — 잡고 있는 동안은 JS 가 즉시 옮긴다 */
transition: transform 0.18s var(--ease-out), background 0.15s linear;
pointer-events: none; /* 이벤트는 베이스가 전부 받는다 */
}
.office__stick.is-holding .office__stick-knob {
background: var(--c-accent);
transition: background 0.15s linear; /* 위치 transition 제거 = 손가락에 딱 붙는다 */
}
/* --- 팀 소개 카드 (판 오른쪽 아래) ---------------------------------------- */
.office__card {
position: absolute;
right: 16px; bottom: 16px;
width: 320px;
max-width: calc(100% - 32px);
/* 14차: 문제 목록이 붙어 카드가 길어졌다 — 판 밖으로 넘치면 안 되니 판 높이에
맞춰 자르고 카드 안에서 스크롤한다. x 는 계속 잘라야 사진 라운딩이 유지된다. */
max-height: calc(100% - 32px);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--c-surface);
border-radius: var(--r-lg);
box-shadow: inset 0 0 0 1px var(--c-line), 0 16px 40px rgba(10, 9, 9, 0.20);
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
z-index: 4;
}
.office__card.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.office__card-photo { display: block; width: 100%; height: 128px; object-fit: cover; }
.office__card-body { padding: 15px 18px 17px; }
.office__card-title {
font-weight: 700;
font-size: var(--fs-body);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.office__card-en {
margin-left: 7px;
font-family: var(--font-en);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-accent);
}
.office__card-desc {
margin-top: 8px;
font-weight: 500;
font-size: var(--fs-2xs);
line-height: 1.65;
letter-spacing: var(--ls-tight);
color: var(--c-ink-soft);
word-break: keep-all;
}
/* 14차: '이 팀 채용공고 보기' 링크를 걷어내고 그 자리에 팀이 푸는 문제 목록을 뒀다.
카드가 팀마다 길어지므로 판 높이를 넘지 않게 자체 스크롤을 준다 (.office__card 의
max-height 참조). 불릿은 오렌지 점 하나뿐이다 — 배경·태그로 강조하지 않는다 (§1-3). */
.office__card-probs-label {
margin-top: 13px;
padding-top: 11px;
border-top: 1px solid var(--c-line);
font-family: var(--font-en);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--c-ink-soft);
}
.office__card-probs {
margin-top: 7px;
display: flex;
flex-direction: column;
gap: 5px;
list-style: none;
}
.office__card-prob {
position: relative;
padding-left: 11px;
font-weight: 500;
font-size: var(--fs-2xs);
line-height: 1.55;
letter-spacing: var(--ls-tight);
color: var(--c-ink);
word-break: keep-all;
}
.office__card-prob::before {
content: '';
position: absolute;
left: 0; top: 0.62em;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--c-accent);
}
.office__card-badge {
margin-left: 10px;
font-weight: 600;
font-size: 12px;
color: var(--c-accent);
}
/* --- 완주 토스트 ---------------------------------------------------------- */
.office__toast {
position: absolute;
left: 50%; top: 62px;
transform: translateX(-50%) translateY(-8px);
max-width: calc(100% - 40px);
padding: 12px 20px;
border-radius: var(--r-card);
background: var(--c-dark);
color: var(--c-white);
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: var(--ls-tight);
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
z-index: 5;
}
.office__toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.office__toast a { color: var(--c-accent); font-weight: 700; }
/* --- 시작 베일 — 비활성일 때 판 전체를 덮는 버튼 --------------------------- */
.office__veil {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(250, 247, 243, 0.42);
backdrop-filter: blur(1.5px);
transition: opacity var(--dur-hover) var(--ease-out);
z-index: 6;
}
.office.is-active .office__veil { opacity: 0; pointer-events: none; }
.office__veil-pill {
padding: 13px 26px;
border-radius: var(--r-full);
background: var(--c-dark);
color: var(--c-white);
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: var(--ls-tight);
box-shadow: 0 10px 26px rgba(10, 9, 9, 0.24);
transition: transform var(--dur-hover) var(--ease-out);
}
.office__veil:hover .office__veil-pill { transform: translateY(-2px); }
.office__veil-sub {
padding: 6px 14px;
border-radius: var(--r-full);
background: rgba(255, 255, 255, 0.88);
font-weight: 500;
font-size: var(--fs-2xs);
letter-spacing: var(--ls-tight);
color: var(--c-body);
}
/* ============================================================================
12d. 인재상 자가 테스트 (.waystest) — #ways 섹션 안, 10번 카드 아래 (12차)
----------------------------------------------------------------------------
"나는 알고케어와 얼마나 맞을까?" 10문항 자가 진단. 모달이 아니라 인라인이다.
· 톤은 #ways 를 그대로 따른다 — 거의 검정 면 + 흰 헤어라인 + 오렌지는 점처럼.
오렌지를 쓰는 곳은 넷뿐이다: 라벨 캡스 / 진행 막대 / 종합 점수 숫자 /
최고 파트 막대. 선택지 호버는 면을 칠하지 않고 테두리만 밝힌다 (§1-3).
· 문항 → 결과로 갈아 끼우면서 높이가 튀지 않게 패널에 min-height 를 준다.
· 마크업은 js/ways-test.js 가 그린다. 여기 클래스와 1:1 이다.
.waystest__intro 시작 화면 (HTML 에 정적으로 있음)
.wt-quiz / .wt-opts / .wt-opt 문항 화면
.wt-result / .wt-bars / .wt-cta 결과 화면
========================================================================== */
.waystest {
display: flex;
flex-direction: column;
gap: 28px;
margin-top: 8px;
padding-top: 56px;
border-top: 1px solid var(--c-line-dark);
}
.waystest__head {
display: flex;
flex-direction: column;
gap: 12px;
}
.waystest__label {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-accent);
}
.waystest__title {
font-weight: 700;
font-size: var(--fs-team-name);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white);
}
.waystest__lead {
max-width: 44em;
font-weight: 500;
font-size: var(--fs-sm);
line-height: 1.7;
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
word-break: keep-all;
}
/* 인트로·문항·결과가 번갈아 들어가는 판. 높이 하한으로 전환 시 점프를 막는다. */
.waystest__panel {
display: flex;
min-height: 300px;
padding: 36px 40px;
border-radius: var(--r-lg);
background: var(--c-ink);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.waystest__panel > * { width: 100%; }
.waystest__intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
text-align: center;
}
.waystest__start {
padding: 14px 32px;
border-radius: var(--r-full);
background: var(--c-accent);
color: var(--c-white);
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: var(--ls-tight);
transition: transform var(--dur-hover) var(--ease-out),
background-color var(--dur-hover) var(--ease-out);
}
.waystest__start:hover { transform: translateY(-1px); background: #FF8B2E; }
.waystest__note {
font-weight: 500;
font-size: var(--fs-2xs);
letter-spacing: var(--ls-tight);
color: rgba(255, 255, 255, 0.52);
}
/* --- 문항 화면 ------------------------------------------------------------ */
.wt-quiz {
display: flex;
flex-direction: column;
gap: 20px;
}
.wt-quiz__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.wt-quiz__count {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-xs);
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.52);
}
.wt-quiz__count em { font-style: normal; font-size: var(--fs-body); color: var(--c-white); }
.wt-quiz__part {
font-weight: 500;
font-size: var(--fs-2xs);
letter-spacing: var(--ls-tight);
color: rgba(255, 255, 255, 0.52);
text-align: right;
}
.wt-quiz__bar {
height: 2px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.14);
overflow: hidden;
}
.wt-quiz__fill {
display: block;
height: 100%;
background: var(--c-accent);
transition: width 320ms var(--ease-out);
}
/* 판 폭(1120px)을 그대로 쓰면 한 줄이 너무 길어진다 — 읽기 폭으로 가둔다 */
.wt-quiz__ask {
max-width: 900px;
margin-top: 4px;
font-weight: 600;
font-size: var(--fs-body-lg);
line-height: 1.55;
letter-spacing: var(--ls-tight);
color: var(--c-white);
word-break: keep-all;
}
.wt-opts {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 900px;
}
/* 선택지: 헤어라인 카드. 호버·포커스에도 면을 칠하지 않고 테두리만 밝힌다. */
.wt-opt {
display: flex;
align-items: flex-start;
gap: 14px;
width: 100%;
padding: 16px 18px;
text-align: left;
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
transition: box-shadow var(--dur-hover) var(--ease-out),
background-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.wt-opt:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.40); }
.wt-opt:hover .wt-opt__key { color: var(--c-accent); }
}
.wt-opt.is-picked {
box-shadow: inset 0 0 0 1px var(--c-accent);
background: rgba(244, 123, 26, 0.08);
}
.wt-opt.is-picked .wt-opt__key { color: var(--c-accent); }
.wt-opt__key {
flex: none;
width: 22px;
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-xs);
line-height: 1.7;
color: rgba(255, 255, 255, 0.44);
transition: color var(--dur-hover) var(--ease-out);
}
.wt-opt__text {
font-weight: 500;
font-size: var(--fs-sm);
line-height: 1.65;
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
word-break: keep-all;
}
.wt-quiz__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 2px;
}
/* 텍스트 버튼 — 다크 면 위 3순위 액션 (이전 문항 · 그만두기 · 다시하기) */
.wt-ghost {
padding: 4px 2px;
font-weight: 500;
font-size: var(--fs-2xs);
letter-spacing: var(--ls-tight);
color: rgba(255, 255, 255, 0.52);
transition: color var(--dur-hover) var(--ease-out);
}
.wt-ghost:hover { color: var(--c-white); }
/* --- 결과 화면 ------------------------------------------------------------ */
.wt-result {
display: flex;
flex-direction: column;
gap: 18px;
}
.wt-result__eyebrow {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-accent);
}
.wt-result__type {
font-weight: 700;
font-size: var(--fs-team-name);
line-height: var(--lh-head);
letter-spacing: var(--ls-tight);
color: var(--c-white);
}
.wt-result__type em { font-style: normal; color: var(--c-accent); }
.wt-result__score {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 4px;
}
.wt-result__num {
font-family: var(--font-en);
font-weight: 700;
font-size: 56px;
line-height: 1;
color: var(--c-accent);
font-variant-numeric: tabular-nums;
}
.wt-result__num i { font-style: normal; font-size: 26px; }
.wt-result__cap {
font-weight: 500;
font-size: var(--fs-2xs);
line-height: 1.5;
letter-spacing: var(--ls-tight);
color: rgba(255, 255, 255, 0.52);
}
/* 파트별 막대 3개 — 최고 파트만 오렌지, 나머지는 흰색 저채도 */
.wt-bars {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 620px;
}
.wt-bar {
display: grid;
grid-template-columns: 130px minmax(0, 1fr) 46px;
align-items: center;
column-gap: 14px;
}
.wt-bar__name {
font-weight: 500;
font-size: var(--fs-2xs);
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
}
.wt-bar__track {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
overflow: hidden;
}
.wt-bar__track i {
display: block;
width: 0;
height: 100%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.42);
transition: width 720ms var(--ease-out);
}
.wt-bar.is-top .wt-bar__track i { background: var(--c-accent); }
.wt-bar.is-top .wt-bar__name { color: var(--c-white); }
.wt-bar__val {
font-family: var(--font-en);
font-weight: 700;
font-size: var(--fs-xs);
text-align: right;
color: rgba(255, 255, 255, 0.62);
font-variant-numeric: tabular-nums;
}
.wt-bar.is-top .wt-bar__val { color: var(--c-white); }
.wt-result__read {
max-width: 52em;
font-weight: 500;
font-size: var(--fs-sm);
line-height: 1.75;
letter-spacing: var(--ls-tight);
color: var(--c-white-dim);
word-break: keep-all;
}
.wt-result__peak {
font-weight: 500;
font-size: var(--fs-2xs);
letter-spacing: var(--ls-tight);
color: rgba(255, 255, 255, 0.52);
}
.wt-result__peak em { font-style: normal; font-weight: 600; color: var(--c-white); }
.wt-result__cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
.wt-cta {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border-radius: var(--r-full);
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: var(--ls-tight);
transition: transform var(--dur-hover) var(--ease-out),
background-color var(--dur-hover) var(--ease-out);
}
.wt-cta:hover { transform: translateY(-1px); }
.wt-cta--solid { background: var(--c-white); color: var(--c-ink); }
.wt-cta--solid:hover { background: var(--c-white-dim); }
.wt-cta--line {
color: var(--c-white);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.wt-cta--line:hover { background: rgba(255, 255, 255, 0.08); }
.wt-result__again { align-self: flex-start; }
/* 모션을 끈 환경에서는 막대·진행바가 즉시 최종 상태로 간다 */
.no-motion .wt-quiz__fill,
.no-motion .wt-bar__track i { transition: none; }
@media (prefers-reduced-motion: reduce) {
.wt-quiz__fill, .wt-bar__track i { transition: none; }
.waystest__start:hover, .wt-cta:hover { transform: none; }
}
/* ============================================================================
13. 반응형 — 태블릿 (810px – 1199.98px)
========================================================================== */
@media (max-width: 1199.98px) {
:root {
--fs-display: 64px;
--fs-h1: 32px;
--fs-h2: 32px;
--fs-h3: 24px;
--fs-team-name: 24px;
--fs-lg: 22px;
--fs-body-lg: 18px;
--fs-body: 16px;
--pad-x: 32px;
}
.nav__cta { right: 24px; padding: 7px 14px; }
.stats { height: auto; padding: 110px 0 120px; }
.stats__inner { position: static; transform: none; gap: 80px; margin: 0 auto; }
/* 팀/컬처 블록: 데스크톱 전용 고정 높이·절대배치를 흐름 배치로 되돌린다 */
.team-photo-hero { aspect-ratio: 2.4; }
.team-hero { padding: 90px 0 40px; }
.team-hero__head { margin-bottom: 24px; }
/* 팀 투어 판: 폭이 줄어든 만큼 조금 더 정사각에 가깝게 (§12c) */
.office { aspect-ratio: 3 / 2; max-height: 68vh; margin-bottom: 36px; }
.office__card { width: 280px; }
.office__card-photo { height: 106px; }
.team-row { grid-template-columns: 200px 1fr; gap: 20px; }
.mv { padding: 130px 0 110px; }
.mv__inner { gap: 80px; }
.values { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 56px; }
/* --- 인재상: 정의문이 라벨 아래로 --- */
.ways { padding: 120px 0; }
.ways__inner { gap: 44px; }
.way-row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 6px; }
.way-row__copy { grid-column: 2; } /* 14차: 정의문+Don't 를 감싼 래퍼가 그리드 아이템이다 */
/* 자가 테스트: 판 여백만 줄인다 (§12d) */
.waystest { padding-top: 44px; }
.waystest__panel { min-height: 320px; padding: 30px 28px; }
.wt-result__num { font-size: 48px; }
.wt-bar { grid-template-columns: 116px minmax(0, 1fr) 44px; }
.job-overlay__scroll { padding: 68px 40px 48px; }
/* --- 보조 지표 타일 --- */
.stat-tile { padding: 24px 20px; }
.stat-tile__figure { font-size: 34px; }
/* --- 연혁 타임라인: 5칸 가로 흐름을 **세로 스택**으로 갈아탄다 -------------
태블릿 폭(810px)에서 5칸을 유지하면 한 칸이 133px 까지 좁아져 한글이
일곱 줄로 쪼개진다. 세로로 세우면 [노드 | 텍스트] 2열이 되고 연결선도
세로로 선다(모바일도 이 규칙을 그대로 물려받는다). */
.milestones { padding: 100px 0; }
.milestones__inner { gap: 48px; }
.milestones__list {
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 640px;
}
.milestone {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
column-gap: 16px;
row-gap: 2px;
padding: 0 0 28px;
text-align: left;
}
.milestone:last-child { padding-bottom: 0; }
.milestone__node { grid-column: 1; grid-row: 1; margin-bottom: 0; margin-top: 2px; }
.milestone__year,
.milestone__title,
.milestone__desc { grid-column: 2; }
/* 세로 연결선 — 노드 아래에서 다음 노드까지. 마지막 항목만 그리지 않는다 */
.milestone::before {
top: 22px; left: 9.5px;
width: 1px; height: calc(100% - 22px);
}
.milestone:first-child::before { display: block; }
.milestone:last-child::before { display: none; }
/* --- 합류 여정: 7칸 가로 흐름을 세로 스택으로 (연혁과 같은 규칙) --------- */
.hiring { padding: 0 0 80px; }
.hiring__inner { gap: 48px; }
.hiring__flow {
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.hiring-step {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
column-gap: 16px;
row-gap: 2px;
padding: 0 0 28px;
text-align: left;
}
.hiring-step:last-child { padding-bottom: 0; }
.hiring-step__node { grid-column: 1; grid-row: 1; margin-bottom: 0; margin-top: 2px; }
.hiring-step__num,
.hiring-step__label,
.hiring-step__desc { grid-column: 2; }
.hiring-step::before {
top: 22px; left: 9.5px;
width: 1px; height: calc(100% - 22px);
}
.hiring-step:first-child::before { display: block; }
.hiring-step:last-child::before { display: none; }
/* --- 브랜드 갤러리 --- */
.gallery__item--center { width: 44vw; }
/* --- 복리후생 --- */
.benefits { padding: 100px 0; }
.benefits__inner { gap: 48px; }
.benefit-card { padding: 28px; gap: 14px; }
/* --- 미래 로드맵 (태블릿까지는 가로 3단 유지) --- */
.roadmap { padding: 100px 0; }
.roadmap__inner { gap: 56px; }
.roadmap__arrow { width: 48px; padding: 0 8px; margin-top: 12px; }
/* --- 채용공고 --- */
.jobs { padding-top: 100px; }
/* --- 알고케어 사람들 (태블릿도 3열 유지 — 810px 에서 카드 폭 약 236px) --- */
.people { padding: 100px 0; }
.people__inner { gap: 48px; }
.people__grid { gap: 16px; }
.person-card { padding: 16px 16px 24px; gap: 16px; }
/* --- 최종 CTA --- */
.join { padding: 110px 0; }
}
/* ============================================================================
14. 반응형 — 모바일 (≤ 809.98px)
========================================================================== */
@media (max-width: 809.98px) {
:root {
--fs-display: 32px;
--fs-h1: 20px;
--fs-h2: 20px;
--fs-h3: 18px;
--fs-team-name: 20px;
--fs-lg: 18px;
--fs-md: 16px;
--fs-body-lg: 15px;
--fs-body: 14px;
--fs-sm: 14px;
--fs-xs: 13px;
--fs-2xs: 11px;
--pad-x: 20px;
}
/* --- 내비 (모바일은 2슬롯: 심볼 / CTA pill) ---
★ 9차: 가운데 문패를 **숨긴다.** 데스크톱에서 30px 로 키운 문패를 모바일까지
들고 오면 좁은 폭에서 우측 pill 과 맞닿아 글자가 붙어 보인다(실측 390px).
모바일 첫 화면에는 히어로 헤드라인이 있으므로 문패가 없어도 문맥이 선다.
(숨김이라 접근성 손실도 없다 — 페이지 제목은 과 히어로 h1 이 말한다.) */
.nav__logo { left: var(--pad-x); width: 28px; height: 28px; }
.nav__title { display: none; }
.nav__cta { right: var(--pad-x); padding: 6px 12px; font-size: 12px; gap: 1px; }
.nav__cta .icon-arrow { width: 14px; height: 14px; }
/* 좁은 폰(≤380px, 예: iPhone SE·갤럭시 S 기본형)에서 pill 을 한 단 더 줄인다. */
@media (max-width: 380px) {
.nav__cta { padding: 5px 10px; font-size: 11px; }
.nav__cta .icon-arrow { width: 13px; height: 13px; }
}
/* --- 히어로: 풀 뷰포트(100svh) 영상은 그대로, 카피만 여백을 줄인다 ---
모바일 히어로는 흰 기기 클로즈업이라 카피가 없으면 첫 화면이 비어 보인다.
스크림 + 헤드라인 + CTA 가 접히지 않고 한 화면에 들어와야 한다. */
.hero__copy { gap: 18px; padding-bottom: clamp(48px, 9svh, 80px); }
/* 모바일 --fs-h2 는 20px 인데, 첫 화면의 유일한 메시지가 섹션 제목과 같은
크기면 힘이 없다. 이 헤딩에만 한 단(24px) 올린다 — 새 토큰을 만들지 않고
그 헤딩에만 하드코딩하는 §2-3 규칙 그대로다. 390px 에서 2줄 · 184px 폭. */
.hero__headline { max-width: 14em; font-size: 30px; }
/* --- 문화 챗봇: 카드가 좌우 여백만 남기고 꽉 찬다 ---
대화창은 ~50svh 로 줄이고, 입력줄은 흐름 배치 그대로 둔다
(position:fixed 로 띄우면 iOS 에서 키보드와 어긋난다 — 하지 말 것). */
.culture-chat { padding: 64px var(--pad-x); }
.culture-chat__inner { gap: 20px; }
.culture-chat__messages { max-height: 50svh; }
.chat-bubble { max-width: 90%; padding: 10px 14px; }
.culture-chat__form { padding: 6px 6px 6px 18px; }
.chat-send { width: 40px; height: 40px; }
/* --- 트랙션 지표: 카드 세로 스택 --- */
.stats { height: auto; padding: 72px 0 80px; }
.stats__inner {
position: static; transform: none; margin: 0 auto;
gap: 48px; max-width: calc(100% - 2 * var(--pad-x));
}
.stats__row { flex-direction: column; }
.stat-card--arr,
.stat-card--ces { width: 100%; }
.stat-card--funding { aspect-ratio: 358 / 300; }
.stat-card--arr { aspect-ratio: 358 / 190; }
.stat-card--ces { aspect-ratio: 358 / 210; }
.stat-card__head { top: 9%; left: 7%; }
.stat-card__note { top: 8%; right: 7%; }
.stat-card__note-dot { display: none; }
.stat-card__chart { top: auto; bottom: 6%; left: 7%; width: 86%; height: 46%; }
.stat-card__badge { top: auto; bottom: 12%; left: auto; right: 7%; width: 24%; }
/* --- 보조 지표 타일: 세로 스택 --- */
.stats__tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.stat-tile { padding: 20px; gap: 6px; }
.stat-tile__figure { font-size: 30px; }
/* --- 채용공고: 1열 --- */
.jobs { padding-top: 72px; }
.jobs__inner { gap: 40px; }
.jobs__list { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.job-card { padding: 18px 0; }
.jobs__tail { height: 60px; }
/* --- 알고케어 사람들: 1열 --- */
.people { padding: 64px 0; }
.people__inner { gap: 32px; }
.people__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.person-card { padding: 16px 16px 22px; gap: 14px; }
/* 사진 비율(4/5)은 모바일에서도 그대로 둔다 — 가로로 눕히면 세로 원본(엘비)의
머리가 잘린다. 1열이라 카드가 길어지지만 인물 사진은 잘리지 않는 쪽이 낫다. */
/* --- 최종 CTA --- */
.join { padding: 72px 0; }
.join__inner { gap: 16px; }
.join__actions { gap: 10px; margin-top: 8px; }
/* --- 연혁 타임라인 (세로 스택 규칙은 §13 에서 물려받는다) --- */
.milestones { padding: 64px 0; }
.milestones__inner { gap: 32px; }
.milestone { column-gap: 14px; padding-bottom: 24px; }
/* --- 복리후생: 1열 --- */
.benefits { padding: 64px 0; }
.benefits__inner { gap: 32px; }
.benefits__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.benefit-card { padding: 24px; gap: 12px; }
.benefit__item { padding-left: 14px; }
/* --- 미래 로드맵: 3단이 세로로 선다 (화살표도 함께 눕는다) --- */
.roadmap { padding: 64px 0; }
.roadmap__inner { gap: 40px; }
/* 모바일: 세로 흐름이 맵보다 길어 오버레이가 안 된다 — 흐름을 맵 아래로 내린다 */
.roadmap__panel { overflow: visible; }
.roadmap__panel img { border-radius: var(--r-lg); }
.roadmap__panel-body { position: static; background: none; padding: 20px 0 0; }
.roadmap__flow { flex-direction: column; }
.roadmap__step { width: 100%; }
.roadmap__arrow {
flex-direction: column;
align-self: center;
width: 100%;
height: 32px;
margin: 14px 0;
padding: 0;
}
.roadmap__arrow::before { width: 1px; height: auto; }
.roadmap__arrow::after {
margin-left: 0;
margin-top: -4px;
transform: rotate(135deg);
}
/* --- CTA 카드 --- */
/* --- 푸터 --- */
.site-footer { min-height: 0; padding: 44px 0; }
.site-footer__inner { gap: 28px; }
.site-footer__row { gap: 8px; }
.footer-wordmark { width: 150px; }
/* --- 오버레이 --- */
.job-overlay__panel { width: 100%; }
.job-overlay__scroll { padding: 64px 20px 44px; }
.job-detail__title { font-size: 24px; }
.job-detail__section { margin-top: 32px; }
/* 합류 여정: 모바일은 세로 스텝 */
.journey { flex-direction: column; gap: 16px; }
.journey__step { flex: none; flex-direction: row; align-items: center; gap: 12px; text-align: left; }
.journey__step::before { top: -16px; left: 17px; width: 1px; height: 16px; }
.journey__label { padding: 0; }
/* --- 합류 여정 · 룩북 (세로 스택 규칙은 §13 에서 물려받는다) --- */
.hiring { padding: 0 0 56px; }
.gallery { height: 190vh; height: 190svh; }
.gallery__item--a { left: 5%; top: 14%; width: 34vw; }
.gallery__item--b { right: 5%; top: 9%; width: 40vw; }
.gallery__item--c { left: 7%; bottom: 9%; width: 34vw; }
.gallery__item--d { right: 7%; bottom: 13%; width: 30vw; }
.gallery__item--center { width: 66vw; }
.gallery__caption { font-size: 22px; white-space: normal; text-align: center; width: 80%; }
/* 컷이 작아지는 만큼 라벨도 줄이고 자간을 좁힌다 (두 줄로 접히면 지저분하다) */
.gallery__label { padding: 20px 8px 7px; font-size: 9px; letter-spacing: 0.1em; }
/* --- 최종 CTA 시그니처 마크 --- */
.join__logo,
.join__sign-svg { width: 56px; height: 56px; }
/* --- 팀 / 조직문화 --- */
.team-photo-hero { aspect-ratio: 1.9; }
.team-hero { padding: 48px 0 24px; }
/* 팀 투어 판: 세로로 길게 잡아야 좁은 폭에서도 오피스가 보인다 (§12c) */
.office { aspect-ratio: 3 / 4; max-height: 66vh; margin-bottom: 28px; border-radius: var(--r-lg); }
.office__hud { top: 10px; left: 10px; right: 10px; }
.office__pill { padding: 6px 12px; font-size: var(--fs-2xs); }
.office__hint {
/* 14차: 아래쪽은 방향 패드가 쓴다 — 힌트를 패드 위로 올린다(겹침 방지) */
left: 10px; right: 10px; bottom: 108px;
transform: none;
white-space: normal;
text-align: center;
font-size: 12px;
}
/* 모바일: 카드를 판 **위쪽**으로 올린다 (아래는 조이스틱 자리다).
높이를 묶어서 지도와 스틱이 함께 보이게 한다. */
.office__card {
left: 10px; right: 10px; width: auto;
top: 48px; /* HUD pill(top:10) 아래 */
bottom: auto;
/* 62% = 문제 4개가 스크롤 없이 딱 들어오는 높이 (측정값 303px 기준).
더 줄이면 마지막 문제가 잘려서 "3~5개 나열"의 의도가 깨진다.
힌트와 겹칠 수 있지만 카드가 열리면 힌트는 숨는다(.office.has-card 규칙). */
max-height: 62%;
}
/* 스틱은 좁은 화면에서 살짝 줄인다 — 지도를 너무 가리지 않게 */
.office__stick { left: 10px; bottom: 10px; width: 100px; height: 100px; }
.office__stick-knob { width: 44px; height: 44px; }
.office__card-photo { height: 84px; }
.office__card-body { padding: 12px 14px 14px; }
.office__toast { top: 52px; padding: 10px 16px; font-size: var(--fs-2xs); }
.office__veil-pill { padding: 11px 20px; font-size: var(--fs-xs); }
.office__veil-sub { font-size: 12px; text-align: center; max-width: 82%; }
.team-row { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
.team-row__thumb { aspect-ratio: 16 / 9; }
.team-row__body { gap: 10px; }
.team-row__label { width: 100%; flex-wrap: wrap; }
.team-row__desc p + p { margin-top: 10px; }
.mv { padding: 96px 0 80px; }
.mv__inner { gap: 64px; }
.mv__block { gap: 16px; }
.mv__statement { font-size: 26px; }
.mv__statement--vision { font-size: 21px; }
.values { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 44px; }
/* --- 인재상: [번호 | 라벨+정의] 2열 --- */
.ways { padding: 88px 0; }
.ways__inner { gap: 36px; }
.ways__head { gap: 12px; margin-bottom: 8px; }
.way-row { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 20px 18px; }
.way-row__num { font-size: var(--fs-sm); }
.way-row__label { font-size: 18px; }
.way-row__copy { grid-column: 2; }
.way-row__desc,
.way-row__dont { font-size: 14px; }
.way-row__dont-tag { margin-right: 7px; padding: 1px 6px; font-size: 10px; }
/* --- 자가 테스트: 판을 좁히고, 결과 막대는 [이름/수치] 위 + 막대 아래 --- */
.waystest { gap: 22px; padding-top: 36px; }
.waystest__panel { min-height: 300px; padding: 22px 18px; }
.waystest__lead { font-size: 13px; }
.waystest__start { width: 100%; padding: 14px 20px; justify-content: center; }
.wt-quiz { gap: 16px; }
.wt-quiz__top { flex-direction: column; align-items: flex-start; gap: 4px; }
.wt-quiz__part { text-align: left; }
.wt-quiz__ask { font-size: 17px; line-height: 1.5; }
.wt-opt { padding: 14px 14px; gap: 10px; }
.wt-opt__key { width: 16px; font-size: 12px; }
.wt-opt__text { font-size: 13.5px; }
.wt-result__num { font-size: 44px; }
.wt-result__num i { font-size: 20px; }
.wt-bar {
grid-template-columns: minmax(0, 1fr) auto;
row-gap: 6px;
}
.wt-bar__track { grid-column: 1 / -1; grid-row: 2; }
.wt-result__read { font-size: 13.5px; }
.wt-result__cta { flex-direction: column; align-items: stretch; }
.wt-cta { justify-content: center; }
}