질문하지 말고, 계획을 확인받지 말고, 아래 명세 그대로 바로 완성해줘. 명세에 없는 부분은 네가 합리적으로 정해서 진행해.

[만들 것]
휴대폰 화면에 맞춘 "신입사원 업무 스타일 테스트" 웹페이지 1개. 모든 텍스트는 한국어.

[반드시 지킬 것]
- 백엔드, 로그인, 회원가입, 데이터베이스(Supabase 포함), 외부 API, 결제, 분석 도구를 연결하지 마. 연결을 제안하지도 마.
- 문항과 결과 데이터는 아래 내용을 글자 그대로 코드 안에 넣어. 문구를 바꾸거나 줄이지 마.
- 결과 유형은 정확히 16개. 빠지거나 중복되면 안 돼.
- 화면 가로 360px 휴대폰에서 글자와 버튼이 잘리지 않게.

[화면 1: 시작]
- 제목: 신입사원 업무 스타일 테스트
- 부제: 12문항, 1분이면 끝!
- 버튼: 테스트 시작하기

[화면 2: 질문]
- 한 화면에 한 문항. 맨 위에 진행 막대와 "3 / 12" 같은 진행 숫자.
- 상황 문장을 크게 보여주고, 그 아래 선택 버튼 2개(A, B)를 세로로 크게 배치.
- 버튼을 누르면 바로 다음 문항으로 넘어감.
- 첫 문항이 아니면 "이전" 버튼을 보여주고, 누르면 이전 문항으로 돌아가서 다시 고를 수 있음.

[화면 3: 결과]
- 세로 카드 한 장에 순서대로: 4글자 유형(크게), 별명, 한 줄 설명, "강점" 3개, "이것만 챙기면 완벽" 2개, "찰떡 동료"(4글자 유형과 그 유형의 별명), 축별 비율 막대 4개.
- 비율 막대 4개: E/I, S/N, T/F, J/P. 각 막대에 양쪽 글자와 퍼센트를 표시 (예: E 67% | I 33%).
- 카드 아래 버튼 2개: "링크 복사"(현재 페이지 주소를 클립보드에 복사하고 "복사됐어요!" 알림), "다시 하기"(처음 화면으로).

[모든 화면 공통]
- 맨 아래 작은 회색 글씨: 재미로 보는 테스트이며 공식 MBTI® 검사가 아닙니다.

[채점 규칙]
- 12문항은 4개 축(E/I, S/N, T/F, J/P)에 3문항씩 배정되어 있어.
- 각 문항에서 A를 고르면 그 축의 앞 글자(E, S, T, J)에 1점, B를 고르면 뒤 글자(I, N, F, P)에 1점.
- 축마다 점수가 높은 글자를 골라 E/I, S/N, T/F, J/P 순서로 4글자를 만들어. 축마다 3문항이라 동점은 없어.
- 비율 막대의 퍼센트 = 그 축 3문항 중 해당 글자를 고른 개수 ÷ 3 (0개 0%, 1개 33%, 2개 67%, 3개 100%).

[문항] 형식: 번호 | 축 | 상황 | A | B
1 | E/I | 입사 첫 주 점심시간 | 동기들을 다 모아서 같이 먹으러 간다 | 조용히 혼자 먹으며 재충전한다
2 | E/I | 팀 회식 다음 날 아침 | 어제 얘기로 수다 떨며 출근한다 | 이어폰 끼고 조용히 출근한다
3 | E/I | 모르는 업무가 생겼다 | 옆자리 선배에게 바로 물어본다 | 먼저 혼자 찾아보고 정리해서 묻는다
4 | S/N | 처음 받은 업무 매뉴얼 | 첫 줄부터 순서대로 꼼꼼히 읽는다 | 전체 흐름부터 훑고 감을 잡는다
5 | S/N | 회의에서 더 끌리는 말 | "지난달 실적이 12% 올랐습니다" | "이대로면 내년엔 판이 바뀝니다"
6 | S/N | 새 프로젝트 아이디어를 내야 한다 | 잘된 사례부터 찾아본다 | 아무도 안 해본 방식부터 상상한다
7 | T/F | 동기가 보고서를 봐 달라고 한다 | 고칠 점부터 정확히 짚어 준다 | 잘한 점부터 말하고 조심스럽게 제안한다
8 | T/F | 동기가 "나 오늘 팀장님한테 혼났어…"라고 한다 | "무슨 일로?" 원인부터 같이 따져 본다 | "헉, 괜찮아?" 마음부터 달래 준다
9 | T/F | 두 가지 안 중 하나를 골라야 한다 | 숫자와 근거가 더 좋은 쪽 | 함께 일할 사람들이 더 편한 쪽
10 | J/P | 마감이 일주일 남았다 | 오늘부터 일정표를 짜서 나눠 한다 | 마감이 다가와야 집중력이 폭발한다
11 | J/P | 내 책상 상태 | 서류가 제자리에, 깔끔하게 | 어지러워도 어디 있는지 나는 안다
12 | J/P | 갑자기 연차가 하루 생겼다 | 할 일 목록부터 정리한다 | 일단 눈 뜨고 그날 기분대로

[결과] 형식: 유형 | 별명 | 한 줄 설명 | 강점(쉼표로 3개) | 이것만 챙기면 완벽(쉼표로 2개) | 찰떡 동료 유형
ESTJ | 일정표 사령관 | 마감은 내가 지킨다 | 일정 관리, 빠른 실행, 책임감 | 계획이 틀어져도 심호흡 한 번, 속도가 다른 동료 기다려 주기 | ISTP
ESTP | 현장 해결사 | 일단 부딪혀 보고 답을 찾는다 | 순발력, 위기 대처, 추진력 | 시작 전 5분만 계획하기, 끝난 일 기록 남기기 | ISFJ
ESFJ | 탕비실 분위기 메이커 | 모두의 컨디션을 챙기는 팀의 온도계 | 배려, 협업, 분위기 살리기 | 내 일부터 챙기기, 거절도 연습하기 | ISFP
ESFP | 회식 MVP | 어디서든 분위기를 띄우는 에너지 담당 | 친화력, 긍정 에너지, 현장 적응력 | 일정은 캘린더에 적어 두기, 지루한 일도 끝까지 가 보기 | ISTJ
ENTJ | 미래의 본부장 | 큰 그림과 실행력을 다 갖춘 리더 꿈나무 | 목표 설정, 결단력, 추진력 | 과정도 즐기기, 의견을 묻고 결정하기 | INTP
ENTP | 아이디어 폭격기 | 회의에서 "근데 이건 어때요?"를 맡고 있다 | 발상, 토론, 순발력 | 벌인 일 하나씩 마무리하기, 반론은 부드럽게 | INFJ
ENFJ | 동기 단톡방 반장 | 사람을 모으고 챙기는 타고난 리더 | 공감, 소통, 동기 부여 | 모두를 만족시키려 애쓰지 않기, 내 휴식도 챙기기 | INFP
ENFP | 사내 인싸 탐험가 | 새로운 일이라면 일단 손부터 든다 | 열정, 친화력, 아이디어 | 우선순위 정하기, 시작한 일 끝맺기 | INTJ
ISTJ | 엑셀 장인 | 숫자 하나 틀리지 않는 믿음의 아이콘 | 꼼꼼함, 성실함, 약속 지키기 | 새 방식도 한 번 시도해 보기, 80점일 때 먼저 공유하기 | ESFP
ISTP | 조용한 문제 해결러 | 말없이 고쳐 놓고 사라진다 | 침착함, 문제 해결, 효율 | 진행 상황 먼저 공유하기, 생각을 말로 꺼내기 | ESTJ
ISFJ | 든든한 수호천사 | 놓친 일을 조용히 챙겨 주는 숨은 공신 | 세심함, 책임감, 꾸준함 | 힘들면 힘들다고 말하기, 내 성과도 알리기 | ESTP
ISFP | 감성 디자이너 | 보고서도 예쁘게 만드는 감각파 | 미적 감각, 유연함, 배려 | 의견을 미루지 말고 말하기, 마감 알림 맞춰 두기 | ESFJ
INTJ | 전략 설계자 | 3년 뒤 계획이 이미 머릿속에 있다 | 기획력, 분석력, 독립성 | 계획을 팀과 공유하기, 완벽하지 않아도 출발하기 | ENFP
INTP | 원리 탐구자 | "왜요?"를 끝까지 파고드는 분석가 | 논리, 호기심, 문제 분석 | 분석에 기한 정하기, 결론부터 말하기 | ENTJ
INFJ | 속 깊은 상담가 | 동기들의 고민이 모이는 조용한 창구 | 통찰력, 경청, 신중함 | 혼자 끙끙 앓지 않기, 기대하는 바를 말로 전하기 | ENTP
INFP | 마음 따뜻한 몽상가 | 일에서도 의미를 찾는 이상주의자 | 공감, 창의력, 진정성 | 작은 것부터 실행하기, 피드백을 나에 대한 평가로 듣지 않기 | ENFJ

[디자인]
- 밝은 파스텔 톤 배경, 흰색 둥근 카드, 큰 글씨, 넉넉한 여백.
- 결과 카드는 휴대폰 화면 하나에 들어오게 해서 캡처해 공유하기 좋게.
- 선택 버튼은 누르면 살짝 색이 바뀌는 효과.