/* DETAIL 도슨트 — 인식 화면
   디자인(2_인식페이지.dc.html) 토큰을 재사용하되, 통합개발문서.md와 SPEC_API.md 기준
   반자동 탭-확정 UX에 맞춰 구조를 다시 짰습니다. 하단 "구현 시 디자인과 달라진 점" 참고. */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: #ececec; /* 화면 밖(휴대폰 카드 바깥) 배경 — 디자인 토큰 기준 */
  color: #fff;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 휴대폰/태블릿 세로 화면에서는 max-width/max-height에 걸리지 않아 그냥 전체를 꽉 채우고,
   PC처럼 넓고 낮은 화면에서는 휴대폰 비율 카드로 가운데 정렬됩니다(디자인의 390×844 캔버스와 동일한 의도). */
.screen {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  max-height: 900px;
  overflow: hidden;
  background: #FF6B6B; /* 부팅 중 흰 플래시 방지 */
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.blob {
  position: absolute;
  pointer-events: none;
  filter: blur(38px);
  border-radius: 46% 54% 48% 52% / 55% 45% 52% 48%;
}
.blob-tr {
  top: -18%; right: -36%; width: 120%; aspect-ratio: 1 / 0.96;
  background: radial-gradient(ellipse 62% 60% at 62% 38%, rgba(107,127,255,0.95) 0%, rgba(107,127,255,0.85) 32%, rgba(107,127,255,0.45) 55%, rgba(107,127,255,0.14) 72%, transparent 86%);
}
.blob-bl {
  bottom: -19%; left: -36%; width: 118%; aspect-ratio: 1 / 0.96;
  background: radial-gradient(ellipse 62% 60% at 40% 62%, rgba(107,127,255,0.92) 0%, rgba(107,127,255,0.8) 32%, rgba(107,127,255,0.42) 55%, rgba(107,127,255,0.13) 72%, transparent 86%);
  border-radius: 54% 46% 52% 48% / 45% 55% 48% 52%;
}

.step-header {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  padding: 30px 20px 0;
  display: flex; align-items: flex-start; justify-content: center; gap: 7px;
  text-align: center;
}
.badge {
  width: 17px; height: 17px; border-radius: 50%; border: 1.4px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex: 0 0 auto; margin-top: 2px;
}
.step-header p {
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.3px; line-height: 1.55;
}
.step-header-2 { padding: 14px 24px 0; }

/* 전시 선택 레일 (디자인 그대로 재현, 장식용) */
.rail {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  display: flex; gap: 4px;
  overflow-x: auto; overflow-y: hidden;
  touch-action: pan-x;
  padding: 16px 0 4px;
  margin-top: 2px;
  scrollbar-width: none;
  align-items: center;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail-pad { flex: 0 0 auto; width: calc(50% - 32px); }
.rail-slot {
  flex: 0 0 auto; width: 64px; height: 124px;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center;
}
.rail-thumb {
  width: 40px; height: 72px;
  border-radius: 3px;
  background: rgba(232, 232, 232, 0.95);
  transition: width .3s cubic-bezier(.2,.9,.25,1), height .3s cubic-bezier(.2,.9,.25,1), box-shadow .3s ease;
}
.rail-slot.selected .rail-thumb {
  width: 60px; height: 116px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.room-info {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  text-align: center;
  padding-top: 4px;
}
.room-name { font-size: 12.5px; font-weight: 500; color: #1f1f2b; }
.room-arrow {
  display: flex; justify-content: center; margin-top: 6px;
  animation: nudge 1.8s ease-in-out infinite;
}

.viewfinder-wrap {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 20px 0;
  display: flex;
  align-items: center;
}

.viewfinder {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(170deg, #8d8b86, #61605c);
  cursor: pointer;
  touch-action: manipulation;
}

.camera-feed {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}

.grid-line { position: absolute; background: rgba(255,255,255,0.32); }
.grid-v { top: 0; bottom: 0; width: 1px; }
.grid-h { left: 0; right: 0; height: 1px; }

/* 스캔 라인 — 인식 진행 중임을 보여주는 애니메이션(디자인 스타일). 가이드 상태 중 guiding일 때만 보임(recognize.js에서 토글). */
.scan-line {
  position: absolute; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  box-shadow: 0 0 14px rgba(255,255,255,0.65);
  animation: sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}
.scan-line[hidden] { display: none; }

/* 완전 자동 캡처가 아닌, 상시 노출되는 점선 가이드 프레임.
   회색(비활성, 0~4초) → 흰색(활성, 4초~ 탭 가능)으로 전환된다. */
/* 모서리 가이드 — 원본 디자인(2_인식페이지.dc.html) 스타일. 4개 모서리 브라켓 + 상태별 색상 전환.
   완전 자동 캡처가 아닌 "탭해서 확정"하는 반자동 동작 자체는 바뀌지 않음(recognize.js 로직 동일). */
.guide-frame {
  --guide-color: rgba(255, 255, 255, 0.55);
  position: absolute;
  top: 5.5%; left: 5.5%; right: 5.5%; bottom: 5.5%;
  transition: opacity .35s ease;
  pointer-events: none;
}
.guide-frame[data-state="inactive"] { --guide-color: rgba(255, 255, 255, 0.45); }
.guide-frame[data-state="active"] { --guide-color: #fff; }
.guide-frame[data-state="matched"] { --guide-color: #8B7FE0; }
.guide-frame[data-state="hidden"] { opacity: 0; }

.guide-corner {
  position: absolute;
  width: 15%;
  aspect-ratio: 1 / 1;
  border-color: var(--guide-color);
  transition: border-color .35s ease;
}
.guide-corner.tl { top: 0; left: 0; border-top: 6px solid; border-left: 6px solid; border-radius: 16px 0 0 0; }
.guide-corner.tr { top: 0; right: 0; border-top: 6px solid; border-right: 6px solid; border-radius: 0 16px 0 0; }
.guide-corner.bl { bottom: 0; left: 0; border-bottom: 6px solid; border-left: 6px solid; border-radius: 0 0 0 16px; }
.guide-corner.br { bottom: 0; right: 0; border-bottom: 6px solid; border-right: 6px solid; border-radius: 0 0 16px 0; }

.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 0 24px;
  animation: pop .26s ease both;
}
/* 버그 수정: 위 .overlay{display:flex}가 hidden 속성보다 우선 적용돼서
   JS가 el.hidden=true로 숨겨도 계속 화면에 떠 있었음. 이 규칙으로 확실히 숨김. */
.overlay[hidden] { display: none; }
.overlay-permission { background: rgba(24,22,30,0.55); backdrop-filter: blur(1.5px); }
.overlay-permission p { font-size: 12.5px; font-weight: 500; }

.overlay-loading { background: rgba(24,22,30,0.46); backdrop-filter: blur(2px); }
.overlay-loading p { font-size: 11.5px; font-weight: 400; letter-spacing: 0.2px; opacity: .9; }

.spinner {
  position: relative; width: 52px; height: 52px;
}
.spinner::before, .spinner::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
.spinner::before { border: 3px solid rgba(255,255,255,0.26); }
.spinner::after { border: 3px solid transparent; border-top-color: #fff; animation: spin .85s linear infinite; }

.overlay-fail { background: rgba(24,22,30,0.62); backdrop-filter: blur(2px); gap: 14px; }
.fail-title { font-size: 13.5px; font-weight: 700; }
.fail-hint { font-size: 12px; font-weight: 400; opacity: .85; line-height: 1.5; }
.fail-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 220px; }

.btn {
  display: block; text-align: center;
  padding: 12px 26px; border-radius: 13px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 13px; font-weight: 500; color: #fff;
  text-decoration: none; cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: #fff; color: #FF6B6B; border-color: #fff; }
.btn-ghost { background: rgba(255,255,255,0.16); }

.status-row {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-top: 16px;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: blink 1.3s ease-in-out infinite;
}
.status-row p { font-size: 12px; font-weight: 300; letter-spacing: 0.3px; opacity: 0.92; }

.browse-row {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  display: flex; justify-content: center;
  padding: 14px 24px 0;
}

.footer {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 10.5px; letter-spacing: 0.5px; opacity: 0.72;
}

.flash {
  position: absolute; inset: 0; z-index: 8;
  background: #fff; opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.flash.show { opacity: 1; }

@keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes sweep { 0% { top: 4%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: 96%; opacity: 0; } }