/* =====================================================================
   화면별 스타일 — 좌표·크기·폰트는 발주처 피그마 **Section 4** 실측값.
     0 대기 33:3 · 1 프롤로그 33:581 (한 장 위에서 글 3번 교체)
     4 이름 33:614 · 5~7 문항 33:752 · 8 결과 33:918
   종이(자산 7)는 #paper 레이어(base.css)에 있고 여기서는 그 위에 글만 놓는다.
   ===================================================================== */

.page { position: absolute; inset: 0; }

.page--error {
  display: flex; align-items: center; justify-content: center;
  padding: 0 120px; text-align: center;
  font-family: var(--f-sans); font-weight: 500; font-size: 44px;
  color: var(--sub); line-height: 1.6;
}

/* ── 0 · 대기 ─────────────────────────────────────────────────────── */
/* 「제13회 21세기 인문가치포럼」 양옆 선 — 래스터 자산 5 (548.57×32 @ 265.21,449) */
.attract__forum {
  position: absolute; left: 265.21px; top: 449px;
  width: 548.57px; height: 32px; display: block;
}
/* 「나만의 컬러 번역기 / Color Translator」 — 래스터 자산 6 (455×303 @ 312,570) */
.attract__title {
  position: absolute; left: 312px; top: 570px;
  width: 455px; height: 303px; display: block;
}
.attract__title img { display: block; width: 100%; height: 100%; }   /* 래퍼가 등장, 이미지가 유휴 부유 (motion.css) */
/* 판정 4색 점 — 33:566 (168×24 @ 456,924 · 지름 24 · 중심 간격 48) */
.attract__dots {
  position: absolute; left: 456px; top: 924px;
  display: flex; gap: 24px;
}
.dot {
  width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--judge-ring);
}
.dot--BLK { background: var(--judge-BLK); }
.dot--MNT { background: var(--judge-MNT); }
.dot--PNK { background: var(--judge-PNK); }
.dot--WHT { background: var(--judge-WHT); }

/* 부제 — 33:572 (Sans Medium 32 · 행간 44 · 자간 −0.64 · 중앙 · y 981) */
.attract__sub {
  position: absolute; left: 0; right: 0; top: 981px; margin: 0;
  font-family: var(--f-sans); font-weight: 500; font-size: 32px;
  line-height: 44px; letter-spacing: -0.64px; text-align: center; color: var(--sub);
}
.attract__sub span { display: block; }

/* ── 1 · 프롤로그 (33:581) ─────────────────────────────────────────── */
/* 라벨 「PROLOGUE 01 / 03」 — Sans Medium 40 #787878.
   시안 top 564 → 09-01 사장님 지시 두 번(1줄 올림 + "50% 더 넉넉하게")으로 430.
   종이 본체가 y 325~1221 이라 이 이상 올리면 찢긴 윗단에 붙는다. */
.pro__label {
  position: absolute; left: 0; right: 0; top: 430px; height: 58px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-weight: 500; font-size: 40px; line-height: 1;
  color: var(--muted);
}
/* 점선 600 — 33:596 (시안 y 677 → 라벨과 같이 올려 540.5, 라벨 밑 52px 유지) */
.rule--pro { position: absolute; left: 240px; top: 540.5px; width: 600px; }
/* 본문 — Serif SemiBold #585243 자간 −1 (33:597).
   시안은 42px · 행간 1.448 · 폭 600 · 밴드 700~1014 — 09-01 사장님 지시 누적:
   기본 36px(−2 세 번: "너무 가득찬다") · 행간 1.9(줄 사이 시안의 2배) · 폭 800
   ("지금부터 잠시나마 세상의 소음에서 벗어나," 19자가 36px 한 줄 ≈ 697px) ·
   밴드 = 점선~점 사이 560~1150(590px) 가운데 정렬 하나로 단순화("50% 더 넉넉하게").
   ⚠ 상단은 점선(540.5~545.5) 밑 15px — 더 붙이면 긴 원고 첫 줄이 점선을 파묻는다
   (09-01 "점선이 사라졌다" 피드백). 36px·행간 1.9 로 8줄까지, 넘치면 34 → 30 축소. */
.pro__body {
  position: absolute; left: 140px; top: 560px; width: 800px; height: 590px;
  display: flex; align-items: center; justify-content: center;
}
.pro__text {
  margin: 0; width: 100%;
  font-family: var(--f-serif); font-weight: 600; font-size: 36px;
  letter-spacing: -1px; line-height: 1.9; text-align: center; color: var(--ink);
}
.pro__text span { display: block; }
/* 점 3개 — 33:1771 (116×24 @ 482 · 시안 y 1088 → 09-01 "50% 더 넉넉하게"로 1150.
   종이 본체 하단이 1221 이라 이 이상 내리면 찢긴 아랫단에 붙는다) */
.pro__dots {
  position: absolute; left: 482px; top: 1150px;
  display: flex; gap: 22px;
}
.pdot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--dot-off); transition: background-color 300ms ease;
}
.pdot.is-on { background: var(--ink-btn); }

/* ── 4 · 이름 입력 (33:614) ────────────────────────────────────────── */
/* 제목 — Serif Black 56 #585243 자간 −1, 중심 y 364 */
.name__title {
  position: absolute; left: 0; right: 0; top: 324px; height: 80px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-weight: 900; font-size: 56px; line-height: 1;
  letter-spacing: -1px; text-align: center; color: var(--ink);
}
.rule--name { position: absolute; left: 139px; top: 461.5px; width: var(--rule-w); }

/* 입력칸 — 33:637 (800×149 @ 140,534 · r100 · #DFD9CB · Serif Black 62 자간 20) */
.name__field {
  position: absolute; left: 140px; top: 534px;
  width: 800px; height: 149px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  background: var(--nav);
  font-family: var(--f-serif); font-weight: 900; font-size: 62px; line-height: 1;
  letter-spacing: 20px; color: var(--ink-btn);
  overflow: hidden;
}
/* 자간 20px 이라 마지막 글자 뒤에도 20px 이 붙는다 — 그만큼 당겨 가운데를 맞춘다 */
.name__text { margin-left: 20px; }
.name__caret {
  width: 4px; height: 66px; margin-left: -12px;
  background: var(--ink-btn); opacity: 0;
  animation: caret 1.1s steps(1, end) infinite;
}
@keyframes caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.name__field.is-composing .name__caret { opacity: 1; animation: none; }
html.fx-off .name__caret { animation: none; opacity: 0; }

/* ── 5~7 · 문항 (33:752) ───────────────────────────────────────────── */
/* 09-01 사장님 "위에서부터 아래까지 잡아두고 균일하게 배분해줘 (점선에 버튼까지)":
   시안의 절대 배치(밴드 340~700 · 점선 713.5 · 카드 761~)를 버리고,
   진행바(194~240) 아래 ~ 하단 네비 위(1660)를 한 플렉스 컬럼으로 잡아
   제목 · 점선 · 카드 3~4장을 space-evenly 로 등간격 배분한다.
   제목 크기는 pages/question.js 가 44 → 40 → 34px 로 정한다 (fit.js, 시안 46 −2). */
.page--question {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-evenly;
  padding: 270px 0 260px;
  box-sizing: border-box;
}
.question__band {
  width: var(--rule-w);
  display: flex; align-items: center; justify-content: center;
}
.question {
  margin: 0; width: 100%;
  font-family: var(--f-serif); font-weight: 900; font-size: 44px;
  letter-spacing: -1px; line-height: 1.448; text-align: center; color: var(--ink);
}
/* 수동 줄바꿈(시안 33:891·원고_편집.txt) — 폭을 넘는 줄은 그 줄 안에서 균형 있게 접힌다.
   ⚠ nowrap 금지: Q3 1행의 {q2Answer} 는 최장 27자라 nowrap 이면 화면을 뚫고 나가
   가운데 정렬이 깨져 보인다 (09-01 실사고). 접히면 fit.js 가 높이로 크기를 정한다. */
.question__line { display: block; text-wrap: balance; }
.rule--question { width: var(--rule-w); }

/* 선택카드 — 33:893~911. 카드끼리는 44px 고정 간격으로 묶고(기존 40 + 09-01 사장님 +4),
   카드 묶음·제목·점선 사이만 페이지 플렉스가 등간격으로 배분한다. */
.choices {
  display: flex; flex-direction: column; gap: 44px;
  width: var(--choice-w);
}
.choice {
  display: flex; align-items: center; gap: 30px;
  width: 100%; min-height: 148px;
  padding: 37px 44px;
  background: var(--nav);
  border: 0;
  border-radius: 44px;
  text-align: left;
}
/* 번호 알약 — 33:895 (h74 · r37 · 좌우 30 · 안쪽 간격 20) */
.choice__no {
  flex: 0 0 auto;
  height: 74px; padding: 0 30px; border-radius: 37px;
  display: flex; align-items: center; gap: 20px;
  background: var(--paper); color: var(--ink);
  transition: background-color 200ms ease, color 200ms ease;
}
.choice__num {
  font-family: var(--f-sans); font-weight: 700; font-size: 37px; line-height: 1;
}
.choice__keyword {
  font-family: var(--f-sans); font-weight: 500; font-size: 34px; line-height: 1;
  letter-spacing: 2px;
}
.choice__answer {
  flex: 1 1 auto;
  font-family: var(--f-sans); font-weight: 500; font-size: 32px;
  line-height: 1.42; color: var(--sub);
}

/* ── 8 · 결과 (33:918) ─────────────────────────────────────────────── */
/* 리드 「지민 님을 위한 오늘의 문구」 — 20px #787878 (이름 Bold · 나머지 Regular), 중심 y 475 */
.result__lead {
  position: absolute; left: 0; right: 0; top: 461px; height: 28px; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.3em;
  font-family: var(--f-sans); font-weight: 400; font-size: 20px; line-height: 1;
  color: var(--muted); text-align: center;
}
.result__lead b { font-weight: 700; }
/* 실선 549×1 #787878 — 33:1018 (y 501) */
.result__line {
  position: absolute; left: 265.5px; top: 501px; width: 549px; height: 1px;
  background: var(--muted);
}
/* 픽토그램 100×100 — 33:968 (490,562) */
.picto { position: absolute; left: 490px; top: 562px; width: 100px; height: 100px; }
.picto__img { display: block; width: 100%; height: 100%; }
/* 색 이름 — Serif Black 46 검정 자간 −1, 중심 y 725 */
.result__color {
  position: absolute; left: 0; right: 0; top: 692px; height: 66px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-weight: 900; font-size: 46px; line-height: 1;
  letter-spacing: -1px; text-align: center; color: #000;
}
/* 문장 — Serif Regular 36 검정 (33:974 는 최대 520px 폭의 수동 줄바꿈).
   문장마다 줄을 바꾸고(textlines.sentenceLines) 520px 안에서 자연 줄바꿈한다.
   시안: 행간 1.448 · 밴드 316px(중심 y 918) — 09-01 사장님 "마지막 멘트도 행간 늘려줘"로
   행간 1.9(프롤로그와 동일), 밴드를 상태 박스 위 빈 공간으로 내려 420px(760~1180).
   36px 행간 1.9 로 6줄까지 유지, 길면 36 → 32 → 28 (fit.js) */
.result__band {
  position: absolute; left: 280px; top: 760px; width: 520px; height: 420px;
  display: flex; align-items: center; justify-content: center;
}
.result__sentence {
  margin: 0; width: 100%;
  font-family: var(--f-serif); font-weight: 400; font-size: 36px;
  line-height: 1.9; text-align: center; color: #000;
}
.result__sentence span { display: block;; text-wrap: balance; }
/* 상태 박스 — 33:975 (654 @ 213,1355 · r30 · #DFD9CB · Sans Bold 42 #6E644E) */
.result__status {
  position: absolute; left: 213px; top: 1355px; width: 654px; min-height: 130px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 40px;
  background: var(--nav); border-radius: 30px;
  font-family: var(--f-sans); font-weight: 700; font-size: 42px; line-height: 1.2;
  text-align: center; color: var(--sub);
  transition: background-color 300ms ease, color 300ms ease;
}
.result__status.is-ok   { color: var(--ink); }
.result__status.is-fail { background: #F5E3E3; color: #8A3A3A; }

/* ── A · 관리자 (숨김 화면 — 운영자만 본다) ───────────────────────── */
.page--admin { background: #23211D; }
.admin {
  position: absolute; inset: 120px 80px;
  display: flex; flex-direction: column; gap: 48px;
  color: #E9E4D8; font-family: var(--f-sans);
}
.admin__title { margin: 0; font-size: 56px; font-weight: 900; letter-spacing: 2px; }
.admin__grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 20px 32px;
  margin: 0; font-size: 34px;
}
.admin__grid dt { color: #A79E88; }
.admin__grid dd { margin: 0; font-family: var(--f-mono); word-break: break-all; }
.admin__grid dd.is-ok { color: #7FD9B8; }
.admin__grid dd.is-fail { color: #F09A9A; }
.admin__actions { display: flex; gap: 24px; flex-wrap: wrap; }
.admin__btn {
  padding: 28px 48px; border: 2px solid #6C6555; border-radius: 20px;
  background: #34312A; color: #E9E4D8;
  font-family: var(--f-sans); font-weight: 700; font-size: 36px;
}
.admin__btn.is-press { background: #45412F; }
.admin__btn--danger { border-color: #8A3A3A; color: #F0B4B4; }
.admin__note { margin: 0; font-size: 32px; color: #C9BFA6; min-height: 44px; }