* { box-sizing: border-box; }

/* 시각적으론 숨기되 스크린리더는 읽게 — 페이지 제목(h1)처럼 시각 디자인은 그대로 두고
   싶은데 의미 구조(semantics)만 보강해야 할 때 (dogfooding PLUTO-UX-009). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #04060a;
  color: #c9d2dc;
  font-family: -apple-system, "Apple SD Gothic Neo", sans-serif;
  user-select: none;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body.idle #scene { cursor: pointer; }

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(1, 2, 4, 0.6) 100%);
}

/* 상단 워드마크 — hiddenInset 타이틀바의 드래그 영역을 겸한다 */
.wordmark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.45em;
  padding-left: 0.45em; /* letter-spacing 잔여분 보정 — 시각적 중앙 정렬 */
  color: #4d5866;
  -webkit-app-region: drag;
}

.console {
  position: fixed;
  left: 0;
  right: 0;
  /* safe-area-inset-bottom — 홈 인디케이터/제스처 바에 가려지지 않게 (모바일 실접속 대응) */
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  pointer-events: none;
  text-align: center;
}

/* 가독성 강화: 이전 색상(#cbd5df/13.5px, #6b7684/11.5px)이 어두운 배경에서 대비 부족 —
   특히 #hint(#6b7684)는 WCAG 기준(4.5:1) 미달로 사실상 안 보였다. 톤은 유지하되 명도만 상향. */
#status {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #e4eaf1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
}

#hint {
  /* status(제목)와 hint(부제)는 한 묶음 — console gap(16px)에서 끌어올려 둘만 좁게 유지.
     대신 아래 입력·버튼(인터랙션 요소)은 gap 그대로 두어 텍스트 블록과 확실히 분리된다. */
  margin: -6px 0 0;
  font-size: 14px;
  color: #a9b4c2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* 버튼이 거의 투명(opacity 0.08)해 "클릭 가능한 UI"로 인식되지 않던 문제 수정 —
   배경/테두리 명도 상향 + 아이콘으로 버튼 용도를 시각적으로 명시.
   터치 영역은 48px 이상(모바일 히트 영역 기준) 확보.
   face-auth-btn(Face ID 인증, access key 없을 때 먼저 뜸)과 start-btn(교신 시작, 인증 후)이
   같은 자리를 교대로 차지하므로 스타일을 공유한다. */
#start-btn, #face-auth-btn, #stop-btn {
  pointer-events: auto;
  -webkit-app-region: no-drag;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  min-height: 48px;
  background: rgba(127, 178, 255, 0.16);
  color: #d6e6fb;
  border: 1.5px solid rgba(150, 195, 255, 0.55);
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 20px rgba(60, 120, 220, 0.15);
}

.mic-icon, .faceid-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#start-btn:hover, #face-auth-btn:hover, #stop-btn:hover {
  background: rgba(127, 178, 255, 0.26);
  color: #eef5ff;
  border-color: rgba(180, 215, 255, 0.8);
}

#start-btn:focus-visible, #face-auth-btn:focus-visible, #stop-btn:focus-visible {
  outline: 2px solid #7fb2ff;
  outline-offset: 2px;
}

#start-btn:disabled, #face-auth-btn:disabled { opacity: 0.5; cursor: default; }
/* 위 display:inline-flex(작성자 스타일)가 UA 의 [hidden]{display:none} 을 이기므로 셋 다 명시해야 한다 —
   #stop-btn 이 빠져 있어 교신 시작 전부터 "음성 끄기" 버튼이 계속 떠 있었다. */
#start-btn[hidden], #face-auth-btn[hidden], #stop-btn[hidden] { display: none; }

/* 첫 방문 시 버튼으로 시선을 끄는 은은한 펄스 — 무엇을 눌러야 할지 못 찾는 문제 보완 */
body.idle #start-btn, body.idle #face-auth-btn {
  animation: pluto-invite-pulse 2.6s ease-in-out infinite;
}

/* ---------- 얼굴 인증(로그인) 촬영 오버레이 ---------- */
#face-overlay, #pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 8, 0.88);
  backdrop-filter: blur(6px);
}
#face-overlay[hidden], #pin-overlay[hidden] { display: none; }

.face-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(90vw, 320px);
  padding: 0 20px;
  text-align: center;
}

.face-video-frame {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  background: #04060a;
  border: 1.5px solid rgba(150, 195, 255, 0.55);
  box-shadow: 0 2px 30px rgba(60, 120, 220, 0.25);
}

#face-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* 거울모드 — 셀피 카메라가 좌우반전 없이 자연스럽게 보이도록 */
}

#face-overlay-status {
  margin: 0;
  font-size: 14px;
  color: #d6e6fb;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.face-overlay-actions {
  display: flex;
  gap: 12px;
}

/* 비밀번호 인증 — Face ID 아래 보조 경로(작은 텍스트 버튼, 같은 게이트 토글) */
#pin-auth-btn {
  pointer-events: auto;
  -webkit-app-region: no-drag;
  margin-top: 10px;
  min-height: 44px;
  background: none;
  border: none;
  color: rgba(190, 215, 250, 0.75);
  font-size: 13px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#pin-auth-btn:hover { color: #d6e6fb; }
#pin-auth-btn[hidden] { display: none; }

#pin-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

#pin-input {
  width: 150px;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 18px;
  letter-spacing: 6px;
  text-align: center;
  font-family: inherit;
  color: #e8f1ff;
  background: rgba(10, 18, 32, 0.85);
  border: 1.5px solid rgba(150, 195, 255, 0.55);
  border-radius: 12px;
}
#pin-input:focus-visible { outline: 2px solid rgba(180, 215, 255, 0.8); outline-offset: 2px; }

#pin-overlay-status {
  margin: 0;
  font-size: 14px;
  min-height: 18px;
  color: #d6e6fb;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

#face-capture-btn, #pin-submit-btn, #face-cancel-btn, #pin-cancel-btn {
  -webkit-app-region: no-drag;
  min-height: 48px; /* 44px는 내부 design.md 터치 히트 영역 기준(48px) 미달 — PLUTO-UX-009 */
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

#face-capture-btn, #pin-submit-btn {
  background: rgba(127, 178, 255, 0.24);
  color: #eef5ff;
  border: 1.5px solid rgba(180, 215, 255, 0.8);
}
#face-capture-btn:hover, #pin-submit-btn:hover { background: rgba(127, 178, 255, 0.34); }
#face-capture-btn:disabled, #pin-submit-btn:disabled { opacity: 0.5; cursor: default; }

#face-cancel-btn, #pin-cancel-btn {
  background: transparent;
  color: #a9b4c2;
  border: 1.5px solid rgba(150, 160, 175, 0.35);
}
#face-cancel-btn:hover, #pin-cancel-btn:hover { color: #d6e6fb; border-color: rgba(150, 160, 175, 0.55); }

/* ---------- 얼굴 등록 페이지 (register.html — 메인 화면과 분리된 별도 정적 페이지) ----------
   #face-capture-btn, #pin-submit-btn·.face-video-frame·#face-video는 메인 페이지의 오버레이 스타일을 그대로
   재사용한다(같은 ID/클래스) — 등록·인증 화면의 촬영 UI가 시각적으로 일관되게. */
body.register-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 100vh;
  padding: 20px;
  overflow: auto;
  text-align: center;
}

.register-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(90vw, 320px);
}

.register-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #e4eaf1;
  letter-spacing: 0.02em;
}

#register-status {
  margin: 0;
  font-size: 14px;
  color: #a9b4c2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* 카메라 실패·권한 거부 등으로 촬영이 막혀도 메인으로 돌아갈 길을 남겨둔다 — 이전엔
   촬영 버튼 하나뿐이라 실패 시 막다른 페이지였다(dogfooding PLUTO-UX-008, 2026-07-05). */
.register-back-link {
  color: #6b7684;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.register-back-link:hover { color: #a9b4c2; }

@keyframes pluto-invite-pulse {
  0%, 100% { box-shadow: 0 2px 20px rgba(60, 120, 220, 0.15); }
  50% { box-shadow: 0 2px 28px rgba(120, 180, 255, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  /* face-auth-btn도 idle pulse 애니메이션을 공유하므로 함께 꺼야 한다 — 신규 버튼이 기존
     버튼의 a11y 처리를 상속받지 못했던 문제(dogfooding PLUTO-UX-009, 2026-07-05). */
  #start-btn, #face-auth-btn, #stop-btn { transition: none; animation: none; }
}

/* 작은 화면(폰 세로) — 텍스트가 잘리지 않게 폭 제한 + 살짝 축소 */
@media (max-width: 420px) {
  .console { gap: 10px; }
  #status { font-size: 15px; }
  #hint { font-size: 13px; }
}

/* ---------- 텍스트 지휘 (chat) — 씬 팔레트(푸른 헤이즈 톤)와 통일 ---------- */
#chat-feed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 184px);
  width: min(560px, calc(100vw - 32px));
  max-height: 32vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 4px 4px;
  /* 위쪽으로 자연스럽게 사라지게 — 씬을 가리지 않는 자막 느낌 */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%);
  mask-image: linear-gradient(to bottom, transparent, black 14%);
  transition: opacity 0.8s ease;
}
/* 유휴 자동 숨김 — 마지막 메시지 후 일정 시간 지나면 씬에서 물러난다(새 메시지·입력창 포커스로 소환) */
#chat-feed.idle-hidden {
  opacity: 0;
  pointer-events: none;
}
.chat-msg {
  max-width: 86%;
  padding: 7px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chat-msg.user {
  align-self: flex-end;
  background: rgba(127, 178, 255, 0.16);
  color: #d6e6fb;
  border: 1px solid rgba(150, 195, 255, 0.3);
}
.chat-msg.pluto {
  align-self: flex-start;
  /* 작업 보고는 길다 — 말풍선 86% 제한을 풀어 피드 전폭을 쓴다(우측 빈 공간 방지) */
  max-width: 100%;
  background: rgba(9, 13, 21, 0.6);
  color: #c9d2dc;
  border: 1px solid rgba(150, 195, 255, 0.14);
}
#chat-form {
  /* .console이 pointer-events:none(캔버스 클릭 통과용)이라 자식도 기본 상속돼 클릭이 씹힌다 —
     #start-btn/#face-auth-btn처럼 명시적으로 auto 복구해야 입력창·전송 버튼이 눌린다. */
  pointer-events: auto;
  display: flex;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  margin-top: 4px; /* 텍스트 블록(status/hint)과 입력 행을 한 번 더 떼어 답답함 해소 */
}
#chat-form[hidden] { display: none; }
#chat-input {
  flex: 1;
  min-width: 0;
  background: rgba(9, 13, 21, 0.6);
  border: 1px solid rgba(150, 195, 255, 0.22);
  border-radius: 999px;
  padding: 10px 16px;
  color: #e4eaf1;
  font-size: 16px; /* iOS 자동 줌 방지 하한 */
  font-family: inherit;
  outline: none;
}
#chat-input::placeholder { color: #6b7684; }
#chat-input:focus { border-color: rgba(150, 195, 255, 0.55); }
#chat-send {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(150, 195, 255, 0.3);
  background: rgba(127, 178, 255, 0.16);
  color: #d6e6fb;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
#chat-send:active { background: rgba(127, 178, 255, 0.26); }
@media (max-width: 420px) {
  #chat-feed { bottom: calc(env(safe-area-inset-bottom, 0px) + 172px); }
}

/* 음성 끄기 — 시작 버튼과 같은 계열이되 주 동작이 아니므로 한 단계 낮춘다 */
#stop-btn {
  background: rgba(120, 130, 150, 0.14);
  border-color: rgba(160, 175, 200, 0.42);
  color: #c3cddc;
  font-size: 14px;
  padding: 10px 22px;
  min-height: 42px;
}