/* ===== 디자인 토큰 ===== 모노톤 + 브랜드 블루 하나(mpc.co.kr #134ea5, 다크에서는 밝게). 보조 색을 쓰지 않는다 — 챕터마다 전체화면이라 모션과 타이포가 화면을 끌고 간다. */ :root { --brand:#134ea5; --bg:#ffffff; --bg-2:#f3f5f8; --line:#e5e8ee; --ink:#0c0f14; --ink-2:#454b57; --muted:#667085; --faint:#c3c8d2; --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; /* 페이지 좌우 여백의 단일 기준. 챕터는 가운데 컬럼이 아니라 화면 끝까지 쓴다. 내용과 줄을 맞춰야 하는 것(챕터 인덱스, 가로 트랙)은 전부 이 값에서 파생. */ --gut:clamp(24px,6vw,120px); } @media (prefers-color-scheme: dark) { :root { --brand:#5aa4f0; --bg:#08090c; --bg-2:#0f1117; --line:#1e222b; --ink:#f2f4f8; --ink-2:#b8bfcc; --muted:#767e8c; --faint:#3a4150; } } :root[data-theme="light"]{--brand:#134ea5;--bg:#ffffff;--bg-2:#f3f5f8;--line:#e5e8ee;--ink:#0c0f14;--ink-2:#454b57;--muted:#667085;--faint:#c3c8d2;} :root[data-theme="dark"]{--brand:#5aa4f0;--bg:#08090c;--bg-2:#0f1117;--line:#1e222b;--ink:#f2f4f8;--ink-2:#b8bfcc;--muted:#767e8c;--faint:#3a4150;} html { scrollbar-width:none; } html::-webkit-scrollbar { width:0; display:none; } /* ===== 헤더 — 헤어라인만, 바 없음 ===== */ header { position:fixed; top:0; left:0; right:0; z-index:60; mix-blend-mode:normal; } /* ===== 챕터 ===== 한 화면에 한 가지. .ch는 스크롤 트랙(높이는 data-len), .stage는 고정되어 안 움직인다. 고정은 html.fx가 붙었을 때만 — GSAP이 뜨고 모션이 허용될 때 엔진이 붙인다. 없으면 일반 문서처럼 쌓인다. CDN이 죽었을 때 100vh 안에 갇히는 걸 막는 장치. */ .ch { position:relative; } .stage { position:static; min-height:100vh; display:grid; align-content:center; padding:110px 0; } html.fx .stage { position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; padding:0; } .stage .wrap { width:100%; } /* 챕터 인덱스는 창 가장자리 여백에 세로로 선다. 여백이 좁으면 본문과 겹치므로 1120px 미만에서는 숨긴다. */ .idx { display:none; } html.fx .idx { display:none; position:absolute; top:calc(50% - 0.5em); left:clamp(14px,1.6vw,34px); font-size:11px; font-weight:700; letter-spacing:.28em; color:var(--faint); writing-mode:vertical-rl; } @media (min-width:1120px){ html.fx .idx { display:block; } } h1, h2 { font-weight:800; letter-spacing:-.055em; line-height:.98; } /* 히어로 최장 줄이 좌우 여백 안에 들어오는 상한. 넘기면 문장 중간에서 끊겨 두 줄짜리 헤드라인이 세 줄로 무너진다. 한글은 굵기별 폭이 달라 여유를 둔다. */ h1 { font-size:clamp(42px,7.6vw,118px); } h2 { font-size:clamp(34px,6vw,92px); } .thin { font-weight:300; color:var(--muted); } /* ===== 인트로 — 가운데 워드마크, 이어서 카드 3장 ===== 단어마다 overflow:hidden 마스크 안에서 차례로 올라오고, 로고가 마지막 박자. */ .intro { justify-items:center; text-align:center; } /* 상단 가운데 회사 마크. 왼쪽 텍스트 로고와 같은 78px 띠에 맞춰 정렬. fixed라 인트로 내내 제자리에 있고, 챕터가 지나가면 엔진이 페이드아웃시킨다. transform은 가운데 정렬 전용 — 등장은 opacity만 건드려야 translateX와 안 싸운다. */ .intro-in { width:100%; padding:0 var(--gut); } .intro-text { display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.8vw,30px); flex-wrap:wrap; } .mw { display:inline-block; } /* 액체 채움. 기본 글자는 외곽선(투명 채움 + text-stroke)이고, ::after가 같은 글자의 solid 사본(data-text)을 위에 겹쳐 clip-path로 아래에서 위로 드러낸다. 그냥 solid 텍스트라 S 같은 사선 글자에서 안 채워진 틈이 생기지 않는다. 기본값은 100%(채워진 상태) — JS나 모션이 없으면 그냥 정상 글자로 읽힌다. */ .mw .w { position:relative; display:inline-block; font-size:clamp(34px,7vw,112px); font-weight:800; letter-spacing:-.05em; line-height:1.08; color:transparent; -webkit-text-stroke:1.4px var(--ink); } .mw .w::after { content:attr(data-text); position:absolute; inset:0; color:var(--ink); -webkit-text-stroke:0; clip-path:inset(calc(100% - var(--fill,100%)) -.12em 0 -.12em); will-change:clip-path; } .mw .w.br { -webkit-text-stroke-color:var(--brand); } .mw .w.br::after { color:var(--brand); } html.fx .mw .w { --fill:0%; } .intro-sub { margin-top:clamp(18px,3vh,36px); font-size:clamp(13px,1.4vw,16px); font-weight:500; color:var(--muted); letter-spacing:-.015em; } /* ===== Why MPC — 겹치는 카드 덱 ===== 카드마다 position:sticky 같은 top이라 다음 카드가 올라와 앞 카드를 덮는다. 카드별 top 오프셋(--i)으로 앞 카드가 살짝 보이고, 엔진이 나가는 카드를 축소해 깊이를 준다. */ .deck-sec { padding:clamp(80px,12vh,150px) 0 clamp(60px,10vh,120px); } .deck-head { text-align:center; max-width:640px; margin:0 auto clamp(34px,6vh,68px); } .deck-head .lbl { margin-bottom:14px; } .deck-head h2 { font-size:clamp(30px,4.4vw,58px); font-weight:800; letter-spacing:-.045em; line-height:1.06; } .deck-head .br2 { color:var(--brand); } .deck-head p { margin-top:14px; color:var(--muted); font-size:15.5px; } .deck { max-width:1080px; margin:0 auto; } /* 카드 4장 모두 같은 가운데 인용문 형식. 강조 단어, 리드 문장 유무, 아래 항목 수만 다르다. */ .dcard { position:sticky; top:calc(clamp(92px,13vh,124px) + var(--i) * 16px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:clamp(360px,58vh,520px); padding:clamp(36px,5vw,68px) clamp(28px,5vw,72px); border-radius:26px; border:1px solid var(--line); background:var(--bg-2); box-shadow:0 34px 70px -34px rgba(12,18,38,.4); overflow:hidden; will-change:transform; } .dcard::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 40%,transparent)); } .dcard + .dcard { margin-top:clamp(26px,5vh,52px); } .dcard .dtag { font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .dcard .quote { margin-top:clamp(16px,2.4vh,26px); font-size:clamp(26px,4.4vw,60px); font-weight:800; letter-spacing:-.05em; line-height:1.12; } .dcard .br2 { color:var(--brand); } /* 카운트업(0→N)에서 자릿수가 바뀌어도 흔들리지 않게 고정폭 숫자 */ .yrs { font-variant-numeric:tabular-nums; } .dcard .qlead { margin-top:clamp(16px,2.2vh,24px); font-size:clamp(14px,1.5vw,16.5px); color:var(--ink-2); line-height:1.7; max-width:52ch; } .dcard .roles { position:relative; margin-top:clamp(30px,4.6vh,56px); padding-top:clamp(24px,3.4vh,38px); display:flex; justify-content:center; gap:clamp(18px,3.6vw,56px); flex-wrap:wrap; } .dcard .roles div { display:flex; flex-direction:column; gap:6px; min-width:76px; } .dcard .roles b { font-size:clamp(16px,1.9vw,23px); font-weight:800; color:var(--brand); letter-spacing:-.02em; } .dcard .roles span { font-size:12.5px; color:var(--muted); } /* 짧은 가운데 헤어라인 — 박스 없이 구분만 */ .dcard .roles::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:44px; height:2px; background:color-mix(in srgb,var(--brand) 55%,var(--line)); } .cue { display:none; } html.fx .cue { position:absolute; bottom:38px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700; letter-spacing:.22em; color:var(--faint); display:flex; flex-direction:column; align-items:center; gap:9px; } .cue i { width:1px; height:34px; background:linear-gradient(var(--faint),transparent); display:block; } /* 흐르는 목록. 모든 줄이 한 화면에 있고 열 전체가 움직인다. 가운데에서 멀어질수록 작아지고 흐려져서, 나머지를 숨기지 않고도 한 줄에 시선이 모인다. */ /* 섹션 도입 문장 — 작은 라벨이 아니라 제목급으로 */ .flow-lbl { text-align:center; font-size:clamp(19px,2.7vw,34px); font-weight:800; letter-spacing:-.03em; color:var(--ink-2); } .flow-lbl .hl2 { color:var(--brand); } /* 목록이 이 자리를 그대로 지나가므로, 엔진이 먼저 띄웠다가 목록이 움직이기 시작하면 지운다 */ html.fx .flow-lbl { position:absolute; top:clamp(84px,13vh,132px); left:50%; transform:translateX(-50%); margin:0; will-change:opacity, transform; } .flowlist { display:flex; flex-direction:column; align-items:center; gap:clamp(26px,5.4vh,60px); text-align:center; padding:0 clamp(22px,4vw,52px); will-change:transform; } .flowlist p { font-size:clamp(23px,4.6vw,70px); font-weight:800; letter-spacing:-.05em; line-height:1.16; color:var(--ink); transform-origin:center center; will-change:transform,opacity; } html.fx .flowlist p { white-space:nowrap; } /* 인라인 라인 아이콘 — 배경 없이 선만, 브랜드 블루. em 단위라 글자 크기를 따라간다 */ .flowlist .pic { display:inline-flex; align-items:center; justify-content:center; vertical-align:-.15em; width:.98em; height:.98em; margin:0 .1em; color:var(--brand); } .flowlist .pic svg { width:100%; height:100%; } @media (max-width:640px){ html.fx .flowlist p { white-space:normal; } .flowlist .pic { display:none; } } /* ===== 03 · HOW — 문구는 고정, 카드가 지나간다 ===== 왼쪽 문구는 서 있고 STEP 카드 4장이 대각선으로 올라가며 그 위를 지난다(동시 2장). 카드는 absolute + transform만 쓰므로 문구 레이아웃을 건드리지 않고 겹칠 수 있다. html.fx가 없으면 문구 아래 카드가 쌓인 평범한 문서가 된다. */ .rtext { max-width:min(54%,900px); } .rtext h2 { font-size:clamp(30px,4.4vw,72px); margin-top:clamp(12px,1.8vh,22px); } /* 각주가 아니라 곁텍스트. 왼쪽 헤어라인이 제목 단계를 하나 더 만들지 않고 구분해 준다 */ .rnote { margin-top:clamp(28px,4.6vh,58px); padding-left:clamp(16px,1.3vw,26px); border-left:1px solid var(--line); } .rnote b { display:block; font-size:clamp(14px,.95vw,17px); font-weight:700; letter-spacing:-.02em; } .rnote p { margin-top:11px; font-size:clamp(13px,.88vw,16px); color:var(--muted); line-height:1.8; font-weight:500; } .rcards { display:grid; gap:20px; margin-top:clamp(30px,5vh,56px); } .rcard { padding:clamp(24px,2.5vw,48px); border:1px solid var(--line); border-radius:24px; background:var(--bg-2); } .rc-h { display:flex; align-items:center; gap:clamp(12px,1.1vw,20px); } .rc-i { display:inline-flex; color:var(--brand); } .rc-i svg { width:clamp(22px,1.5vw,29px); height:clamp(22px,1.5vw,29px); display:block; } .rcard h3 { font-size:clamp(18px,1.42vw,27px); font-weight:800; letter-spacing:-.035em; } .rcard p { margin-top:clamp(14px,1.2vw,22px); font-size:clamp(13.5px,.92vw,17.5px); color:var(--muted); line-height:1.8; font-weight:500; } .rc-n { margin-top:clamp(20px,2.8vh,38px); text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-.03em; } .rc-n b { font-size:clamp(28px,2.3vw,44px); font-weight:700; color:var(--ink-2); } .rc-n i { font-style:normal; font-size:.56em; font-weight:600; color:var(--faint); margin-left:5px; } html.fx .rwrap { position:relative; height:100%; } /* 가운데 정렬 오프셋을 변수로 뺀 이유: JS가 인라인 transform을 쓰면 아래 좁은 화면 규칙을 덮어써서 문구가 위로 딸려 올라간다 */ html.fx .rtext { position:absolute; top:50%; left:var(--gut); --ty:-50%; transform:translateY(calc(var(--ty) + var(--tin,0px))); will-change:opacity,transform; } /* 컨베이어는 스테이지 전체를 덮는다. 두 레인이 지그재그를 만든다 — 홀수 카드는 오른쪽, 짝수는 왼쪽이라 각자 다른 지점에서 문구를 가로지른다 */ html.fx .rcards { display:block; position:absolute; inset:0; margin:0; } html.fx .rcard { position:absolute; top:50%; width:clamp(300px,36vw,720px); will-change:transform,opacity; box-shadow:0 30px 70px -32px rgba(0,0,0,.55); } html.fx .rcard:nth-child(odd) { left:52%; } html.fx .rcard:nth-child(even) { left:27%; } /* 좁은 화면: 레인이 문구를 덮으므로 문구는 위로, 카드는 아래 단일 레인으로. 레인 위치를 left:50% + 음수 마진이 아니라 left 하나로 잡는다 — 음수에서 min()은 더 음수인 값을 고르므로 절반 폭 마진이 상한값으로 붙어 카드가 왼쪽 밖으로 나간다. max(여백, 50% − 절반상한)이면 어느 폭에서도 안전. */ @media (max-width:980px){ html.fx .rtext { top:clamp(84px,12vh,130px); --ty:0px; max-width:none; left:clamp(24px,5vw,64px); right:clamp(24px,5vw,64px); } html.fx .rcard { top:66%; width:min(600px,88vw); } html.fx .rcard:nth-child(odd), html.fx .rcard:nth-child(even) { left:max(6vw, calc(50% - 300px)); margin-left:0; } } /* 가로 모드 폰은 폭은 좁지만 높이가 너무 낮다 — 문구 블록만 390px 중 300px을 먹어 카드가 문구를 뚫고 지나간다. 글자를 줄이고 곁텍스트는 뺀다. */ @media (max-width:980px) and (max-height:640px){ html.fx .rtext { top:clamp(40px,8vh,60px); } html.fx .rtext h2 { font-size:clamp(22px,3vw,30px); } html.fx .rnote { display:none; } } /* 3계층 — 가로 선반. 트랙이 페이지 여백을 자기 padding으로 들고 있어 인트로가 다른 챕터 본문과 같은 선에서 시작한다. html.fx가 없으면 손으로 미는 가로 스크롤로 남는다(스크롤바는 일부러 보이게, 진행바는 숨김). */ .hsec { grid-template-rows:1fr auto; gap:clamp(18px,3vh,40px); } html.fx .hsec { padding:clamp(84px,11vh,116px) 0 clamp(28px,4.6vh,52px); } .hviewport { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; } html.fx .hviewport { overflow:hidden; display:flex; align-items:center; } .htrack { display:flex; align-items:stretch; gap:clamp(12px,1.4vw,22px); width:max-content; padding:2px var(--gut); will-change:transform; } /* 헤드라인이 트랙 위 첫 번째 요소다. 고정 헤더가 아니라 같이 왼쪽으로 흘러가야 선반이 이어져 보인다 */ /* 헤드라인 폭보다 조금만 넓게. 더 넓으면 첫 카드까지가 전부 빈 공간이 된다. 상한을 두지 않은 이유: 초광폭에서 고정 폭이면 가운데 여백에 밀려 가로 이동량이 사라진다. */ .hintro { flex:0 0 auto; width:max(280px,30vw); display:flex; flex-direction:column; justify-content:center; padding-right:clamp(14px,1.8vw,32px); } .hintro h2 { font-size:clamp(30px,4.4vw,72px); } .hintro .lbl { margin-bottom:clamp(14px,2.4vh,26px); } /* 높이는 트랙의 align-items:stretch에서 온다 — 셋 다 가장 큰 카드(TIER 1, 칩 12개)에 맞춰진다 */ .tpanel { flex:0 0 auto; width:clamp(260px,30vw,560px); display:flex; flex-direction:column; padding:clamp(20px,2vw,34px); border:1px solid var(--line); border-radius:20px; background:var(--bg-2); will-change:opacity,transform; transition:border-color .4s, box-shadow .4s, background .4s; } /* 호버는 해당 티어 색으로. 들어올리거나 포인터 커서를 주지 않는다 — 누를 수 있는 요소가 아니므로 그렇게 보이면 안 된다. */ .tpanel:hover { border-color:var(--tc); background:var(--bg); box-shadow:0 20px 46px -20px rgba(0,0,0,.42); } .tpanel:hover .tp-top::before { opacity:.22; } .tpanel:hover .tp-top { transform:scale(1.03); } .tpanel:hover .tp-c { color:var(--tc); } /* 참고 사이트의 커버 이미지 자리. 티어 색을 낮은 불투명도로 덮어 티어마다 색을 따로 만들지 않고도 라이트/다크에서 같게 보인다. */ .tp-top { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:16/10; padding:clamp(14px,1.3vw,20px); border-radius:13px; background:var(--bg); border:1px solid var(--line); transition:transform .5s cubic-bezier(.2,.7,.2,1); } .tp-top::before { content:''; position:absolute; inset:0; background:var(--tc); opacity:.1; transition:opacity .4s; } .tp-n { position:relative; display:inline-flex; align-items:center; gap:7px; font-size:clamp(10.5px,.7vw,13px); font-weight:800; letter-spacing:.2em; color:var(--tc); } .tp-n::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--tc); } .tp-c { position:relative; display:block; margin-top:8px; font-size:clamp(36px,3.6vw,66px); font-weight:800; letter-spacing:-.05em; line-height:1; transition:color .4s; } .tp-c em { font-style:normal; font-size:.3em; font-weight:600; color:var(--muted); margin-left:4px; } /* 티어 3은 "N종"이 아니라 플랫폼 이름(Cloud). 숫자가 아니라 단어라 조금 작게 잡고 티어 색으로 채워 숫자 카드들 사이에서도 같은 무게로 읽히게 한다. */ .tp-word { font-size:clamp(30px,3vw,52px); color:var(--tc); letter-spacing:-.03em; } .tpanel h3 { margin-top:clamp(16px,1.8vh,24px); font-size:clamp(17px,1.35vw,25px); font-weight:800; letter-spacing:-.035em; } .tpanel p { margin-top:9px; font-size:clamp(13px,.88vw,16.5px); color:var(--muted); line-height:1.7; } /* 칩은 카드 바닥에 붙는다 — 12개짜리와 3개짜리가 같은 물건으로 읽히게 */ .tp-items { margin-top:auto; padding-top:clamp(16px,2.4vh,28px); display:flex; flex-wrap:wrap; gap:6px; } .tp-items span { font-size:clamp(12px,.75vw,14.5px); font-weight:600; color:var(--ink-2); padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--bg); } .hfoot { display:none; } html.fx .hfoot { display:flex; align-items:center; gap:clamp(14px,2.2vw,28px); } .hbar { flex:1; height:2px; background:var(--line); border-radius:2px; } .hbar span { display:block; width:0; height:100%; background:var(--brand); border-radius:2px; } .hnum { font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--muted); font-variant-numeric:tabular-nums; } .hnum b { color:var(--ink); } .hnum i { font-style:normal; margin-left:5px; } /* PROOF — 짧은 영문 아이라인, 한 단어 헤드라인, 그 아래 이름들이 무게를 잡는다. 한 단어라 크게 가되 아래 28개 이름 자리는 남겨야 한다. */ .pfh { font-size:clamp(34px,5.2vw,88px); margin-bottom:clamp(32px,5.4vh,64px); } .names { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(8px,1.4vh,16px) 20px; } .names span { font-size:clamp(13px,1.5vw,18px); font-weight:600; color:var(--ink-2); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; will-change:opacity,transform; } /* ACCESS — 네 가지 경로, 그중 둘은 실제로 누를 수 있다. 이전에는 설명이 별도 칸이라 설명과 태그 사이가 화면 폭만큼 비었다. 제목과 설명을 한 칸에 묶고 오른쪽 끝은 상태와 동작 전용으로 비웠다. */ .ach { font-size:clamp(30px,4.4vw,72px); margin-bottom:clamp(30px,5vh,60px); } .rt { display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); padding:clamp(18px,3vh,32px) 0; border-top:1px solid var(--line); will-change:opacity,transform; } .rts .rt:last-child { border-bottom:1px solid var(--line); } .rt .rn { font-size:clamp(11px,.8vw,14px); font-weight:800; color:var(--faint); width:clamp(26px,2.4vw,42px); flex-shrink:0; letter-spacing:.1em; font-variant-numeric:tabular-nums; } .rtx { flex:1; min-width:0; display:flex; flex-direction:column; gap:clamp(6px,.9vh,11px); } .rt .rh { font-size:clamp(21px,2.9vw,46px); font-weight:800; letter-spacing:-.04em; line-height:1.05; transition:color .25s; } /* 행이 화면 전체를 쓰므로 설명에는 별도 폭 제한이 필요하다 — 제한이 없으면 글자를 아무리 키워도 읽을 수 없는 길이가 된다 */ .rt .rd { max-width:62ch; font-size:clamp(14px,1.05vw,19px); color:var(--muted); line-height:1.6; font-weight:500; } .rt .rg { font-size:clamp(11px,.78vw,13px); font-weight:800; letter-spacing:.08em; color:var(--muted); flex-shrink:0; padding:8px 15px; border:1px solid var(--line); border-radius:999px; } .rt .rg.on { color:var(--brand); border-color:color-mix(in srgb, var(--brand) 42%, transparent); } /* 화살표는 실제로 눌리는 두 행에만. 장식이 아니라 "여긴 누를 수 있다"는 표시이고, 제목이 아니라 행 전체가 클릭 영역이다 */ .rar { flex-shrink:0; display:grid; place-items:center; width:clamp(30px,2.6vw,44px); height:clamp(30px,2.6vw,44px); border-radius:50%; color:var(--muted); opacity:.55; transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s, background .25s, color .25s; } .rar svg { width:55%; height:55%; } /* 클릭 가능한 행은 (이동)와