/* =========================================================
   만두영 컴퍼니 면접 대작전 - 디자인(CSS)
   ---------------------------------------------------------
   ★ 위치 잡는 법 ★
   모든 화면은 원본 배경 이미지(1080×1920px) 기준 좌표로 배치합니다.
     --x : 왼쪽에서 몇 px      --y : 위에서 몇 px
     --w : 가로 크기 px         --h : 세로 크기 px
   포토샵에서 잰 픽셀 숫자를 그대로 넣으면 휴대폰 크기에 맞게 자동으로 줄어들어요.
   (--u 는 "원본 1px이 화면에서 몇 px인지"이며 script.js가 자동 계산합니다)
   ========================================================= */

/* ---------- 색상 (컬러팔레트.png 무채색 K값) ---------- */
:root {
  --k5:  #f2f2f2;
  --k10: #e6e6e6;
  --k20: #d1d3d4;
  --k40: #a7a9ac;
  --k60: #808285;
  --k80: #58595b;
  --k90: #414042;
  --k100: #231f20;
  --white: #ffffff;
  --u: 0.36px; /* 임시값, script.js가 덮어씀 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Noto Sans KR", sans-serif;
  color: var(--k100);
  background: var(--white);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  transition: background-color .3s;
}
/* 한국어는 단어 단위로 줄바꿈 (중국어·일본어는 글자 단위가 자연스러움) */
body.lang-ko { word-break: keep-all; }
body.lang-zh, body.lang-ja { line-break: strict; }
body.lang-zh { font-family: "Noto Sans SC", "Noto Sans KR", sans-serif; }
body.lang-ja { font-family: "Noto Sans JP", "Noto Sans KR", sans-serif; }

/* 화면별 바깥 여백 색 (휴대폰이 무대보다 길 때 위아래로 보이는 부분) */
body[data-screen="question"],
body[data-screen="loading"] { background: linear-gradient(#000 50%, #fff 50%); }
body[data-screen="result"]  { background: var(--k10); }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; -webkit-user-drag: none; }

/* ---------- 무대 ---------- */
#app {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage {
  position: relative;
  width: 360px;   /* script.js가 화면에 맞게 다시 계산 */
  height: 640px;
  overflow: hidden;
  overflow: clip;   /* 버튼을 눌러도 무대가 옆으로 밀리지 않게 */
  user-select: none;
  -webkit-user-select: none;
}

/* PC에서 볼 때: 가운데 휴대폰 모양으로 */
@media (min-width: 700px) {
  body, body[data-screen] { background: var(--k10); }
  #stage { box-shadow: 0 10px 40px rgba(0,0,0,.18); border-radius: 16px; }
}

/* ---------- 원본 좌표 배치 도우미 ---------- */
.abs {
  position: absolute;
  left:   calc(var(--x, 0) * var(--u));
  top:    calc(var(--y, 0) * var(--u));
  width:  calc(var(--w, 100) * var(--u));
  height: calc(var(--h, 100) * var(--u));
}

/* 글자 자동 크기 맞춤 영역 (넘치는 부분은 숨김) */
.fit { overflow: hidden; }

/* ---------- 화면 전환 ---------- */
.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .45s ease;
}
.screen .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.logo {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(70 * var(--u));
  width: calc(300 * var(--u));
}

/* ---------- 상단 버튼 (언어 · 소리) ---------- */
.top-buttons {
  position: absolute;
  z-index: 20;
  right: calc(50 * var(--u));
  top: calc(60 * var(--u));
  display: flex;
  gap: calc(24 * var(--u));
}
.round-btn {
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: calc(3 * var(--u)) solid var(--k20);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.round-btn img { width: 56%; height: 56%; }
.round-btn:active { transform: scale(.92); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--k20);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  overflow: hidden;
  min-width: 128px;
}
.lang-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  font-size: 14px;
}
.lang-menu button + button,
.lang-menu li + li { border-top: 1px solid var(--k10); }
.lang-menu button.current { font-weight: 700; background: var(--k5); }

/* ---------- 공통 큰 버튼 ---------- */
.main-btn {
  display: block;
  border-radius: 999px;
  background: var(--k100);
  color: var(--white);
  font-weight: 700;
  font-size: max(14px, calc(40 * var(--u)));
  padding: 0 calc(30 * var(--u));
  line-height: 1.25;
  transition: background-color .2s, transform .1s;
}
.main-btn:active:not(:disabled) { transform: scale(.97); }
.main-btn:disabled { background: var(--k40); cursor: not-allowed; }

/* =========================================================
   1. 이력서 화면
   ========================================================= */
/* "성 명" 칸 */
#resume-name {
  --x: 460; --y: 384; --w: 212; --h: 62;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: calc(30 * var(--u));
  white-space: nowrap;
  overflow: hidden;
}
/* 이름 입력칸 + 제출 버튼 (이력서 아래 빈 공간) */
#resume-form {
  --x: 160; --y: 1665; --w: 760; --h: 230;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
#name-input {
  height: calc(100 * var(--u));
  min-height: 36px;
  width: 100%;
  border: calc(4 * var(--u)) solid var(--k90);
  border-radius: calc(24 * var(--u));
  padding: 0 calc(30 * var(--u));
  text-align: center;
  font: inherit;
  font-size: max(16px, calc(40 * var(--u))); /* 16px 미만이면 아이폰이 화면을 확대해 버려요 */
  color: var(--k100);
  background: var(--white);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
#name-input::placeholder { color: var(--k40); }
#name-input:focus { border-color: var(--k100); }
#btn-submit { flex: 1; width: 100%; }

/* =========================================================
   2. 서류 합격 메일 화면
   ========================================================= */
/* 파란 헤더(위)와 남색 푸터(아래) 사이 흰 여백 */
#mail-body {
  --x: 130; --y: 605; --w: 820; --h: 790;
  --fs: 34;
  font-size: calc(var(--fs) * var(--u));
  line-height: 1.65;
  color: var(--k90);
  overflow-wrap: anywhere;
}
#mail-body p + p,
#mail-body p + .schedule,
#mail-body .schedule + p { margin-top: .9em; }
#mail-greeting b { color: var(--k100); }
#mail-body .schedule {
  display: flex;
  flex-direction: column;
  padding: .6em .9em;
  background: var(--k5);
  border-left: calc(8 * var(--u)) solid var(--k90);
}
#mail-body .schedule strong { color: var(--k100); }

/* 합격 도장 */
#stamp {
  --x: 770; --y: 345; --w: 200; --h: 200;   /* 파란 메일 헤더 오른쪽 */
  opacity: 0;
  transform: rotate(-12deg) scale(2.4);
  pointer-events: none;
}
#stamp.on {
  animation: stamp .35s cubic-bezier(.3, 1.6, .5, 1) forwards;
}
@keyframes stamp {
  0%   { opacity: 0; transform: rotate(-12deg) scale(2.4); }
  100% { opacity: .92; transform: rotate(-12deg) scale(1); }
}

#btn-enter {
  --x: 140; --y: 1700; --w: 800; --h: 120;
}

/* =========================================================
   3. 질문 화면
   ========================================================= */
/* 위쪽 검은 영역: 진행도 */
#progress {
  --x: 70; --y: 95; --w: 560; --h: 130;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(16 * var(--u));
}
#progress-text {
  font-weight: 900;
  font-size: calc(48 * var(--u));
  letter-spacing: .04em;
}
.progress-bar {
  height: calc(14 * var(--u));
  border-radius: 99px;
  background: var(--k80);
  overflow: hidden;
}
#progress-fill {
  height: 100%;
  width: 0;
  background: var(--white);
  border-radius: 99px;
  transition: width .4s ease;
}

/* 흰 종이 영역: 삽화 + 질문 + 선택지 */
#question-box {
  --x: 70; --y: 320; --w: 935; --h: 1265;
  --fs: 34;
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  font-size: calc(var(--fs) * var(--u));
  overflow-wrap: anywhere;
  transition: opacity .25s;
}
#question-box.fading { opacity: 0; }
.q-img-wrap {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  justify-content: center;
}
#q-img {
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: calc(24 * var(--u));
}
#q-text {
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.45;
  text-align: center;
  color: var(--k100);
}
#choices {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}
.choice {
  width: 100%;
  text-align: left;
  padding: .6em .95em;
  line-height: 1.4;
  border-radius: calc(26 * var(--u));
  border: calc(4 * var(--u)) solid var(--k20);
  background: var(--white);
  color: var(--k90);
  transition: background-color .15s, color .15s, border-color .15s;
}
.choice:active { border-color: var(--k60); }
.choice.picked {
  background: var(--k90);
  border-color: var(--k90);
  color: var(--white);
}
.choice.single { text-align: center; font-weight: 700; }

/* =========================================================
   4. 결과 분석 중
   ========================================================= */
#loading-box {
  --x: 90; --y: 560; --w: 900; --h: 760;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(60 * var(--u));
  text-align: center;
}
.loading-logo { width: calc(420 * var(--u)); }
#loading-box p {
  font-size: max(13px, calc(42 * var(--u)));
  font-weight: 500;
  line-height: 1.6;
  color: var(--k90);
}
.dots { display: flex; gap: calc(26 * var(--u)); }
.dots span {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  background: var(--k90);
  animation: bounce 1s infinite ease-in-out;
}
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40%           { transform: translateY(-60%); opacity: 1; }
}

/* =========================================================
   5. 결과 화면
   ========================================================= */
#result-card {
  --x: 0; --y: 0; --w: 1080; --h: 1350;
}
#result-img { width: 100%; height: 100%; }

/* 노트북 화면 (흰 영역 x54~1038, y536~1265) 안쪽 */
#result-text {
  --x: 100; --y: 572; --w: 892; --h: 660;
  --fs: 34;
  font-size: calc(var(--fs) * var(--u));
  color: var(--k100);
  overflow-wrap: anywhere;
}
#result-text .fit-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.r-label {
  font-size: .8em;
  font-weight: 500;
  color: var(--k60);
  letter-spacing: .08em;
}
.r-team {
  font-size: 2.1em;
  font-weight: 900;
  line-height: 1.2;
  margin-top: .1em;
}
.r-name {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--k80);
  margin-top: .35em;
  padding-bottom: .6em;
  border-bottom: calc(4 * var(--u)) solid var(--k100);
}
.r-desc {
  margin-top: .7em;
  line-height: 1.62;
  color: var(--k90);
}

#result-buttons {
  --x: 90; --y: 1410; --w: 900; --h: 250;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 * var(--u));
}
.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  border-radius: calc(32 * var(--u));
  background: var(--k90);
  color: var(--white);
  font-weight: 700;
  font-size: max(12px, calc(38 * var(--u)));
  transition: transform .1s, background-color .2s;
}
.tool-btn img {
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  filter: invert(1);   /* 검은 아이콘을 흰색으로 */
}
.tool-btn:active { transform: scale(.95); background: var(--k100); }
.tool-btn.busy { opacity: .6; pointer-events: none; }

#sns-link {
  --x: 90; --y: 1710; --w: 900; --h: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  border-radius: 999px;
  border: calc(4 * var(--u)) solid var(--k90);
  background: var(--white);
  color: var(--k100);
  text-decoration: none;
  font-size: max(12px, calc(36 * var(--u)));
  font-weight: 500;
}
#sns-link:active { background: var(--k5); }

/* ---------- 저장 안내창 ---------- */
#save-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#save-modal[hidden] { display: none; }
.modal-box {
  width: min(100%, 420px);
  background: var(--white);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
.modal-box p { font-weight: 700; font-size: 15px; }
#save-preview {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  -webkit-touch-callout: default; /* 아이폰 길게 누르기 메뉴 허용 */
  user-select: auto;
}
.modal-box .main-btn { width: 100%; height: 46px; font-size: 15px; }

/* ---------- 알림 토스트 ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 200;
  transform: translate(-50%, 20px);
  max-width: 86vw;
  padding: 10px 18px;
  border-radius: 99px;
  background: rgba(35,31,32,.92);
  color: var(--white);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }