/*
 * 튜토리얼 (화면기획서 슬라이드 16~44 / 튜토리얼 시나리오 기획서 40단계)
 *  NPC(하이보안) 안내 → 화면 관찰 → 직접 조작 → 즉시 피드백.
 *  하단 NPC 대화창은 슬라이드 20 목업의 대사 박스를 따른다.
 */
.tutorial {
  font-family: var(--font-game);
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--c-bg-outdoor);
}
/* 상단 HUD 자리(튜토리얼은 실제 HUD 대신 안내용 정적 표시) */
.tutorial__stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  background-color: var(--c-bg-outdoor);
  /* 내부 .stage-wrap(flex:1)이 높이를 받도록 플렉스 컨테이너로 만든다.
     이게 없으면 stage-wrap 높이가 0이 되어 맵·미션패널·오버레이가 안 보인다. */
  display: flex; flex-direction: column;
}
/* 맵을 어둡게: 시나리오상 'NPC 안내 중 맵이 어둡게 처리' */
.tutorial__dim {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(42, 35, 32, .30);
  pointer-events: none;
}
.tutorial__dim--off { display: none; }

/* NPC(하이보안) 대화창 (하단 고정)
   화면 폭을 다 쓰면(예전 left/right 3%) 1920 에서 1800px 이 넘어 한 줄이 너무 길다
   (사용자 지시 2026-09-09). 폭을 묶고 가운데에 놓는다.
   글이 들어가는 폭은 1100 - 여백 48 - 얼굴 88 - 간격 18 = 946px 이고,
   이 폭에서도 가장 긴 대사가 2줄이라 아래 3줄 고정 높이는 그대로 유효하다. */
.tutorial__npc {
  position: absolute; left: 50%; right: auto; bottom: 3%;
  transform: translateX(-50%);
  width: min(1100px, 94vw);
  z-index: 40;
  display: flex; align-items: flex-start; gap: 18px;
  border: 1px solid var(--gs-line);
  border-radius: 16px;
  background: linear-gradient(145deg,#ffffffea,#fffffff2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--gs-text);
  box-shadow: 0 18px 44px #2a232033;
  padding: 20px 24px;
}
.tutorial__avatar {
  flex: none;
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #faf7f5;
  background-image: url('../assets/img/npc-face.webp');
  /* 얼굴이 원 중앙에 오도록 미리 크롭한 전용 이미지 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 2px solid rgba(233,0,45,.5);
  color: transparent;
}
.tutorial__speech { flex: 1; min-width: 0; }
.tutorial__name {
  font-size: 24px; font-weight: 800; color: var(--gs-cyan-soft); margin-bottom: 8px;
}
/* 글꼴 확대(사용자 지시 2026-09-09). 좁아진 대화창(글 폭 946px)에서 omyu-pretty 로
   대사 23개를 재보니 30px 까지는 최대 2줄이고 32px 부터 3줄이 나온다. 여유를 두고 30px. */
.tutorial__text {
  font-size: 30px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; color: var(--gs-text);
  /* 발주처 요청 14: 대사 길이에 따라 창 높이가 오르내리지 않게 3줄 높이로 고정한다.
     지금 가장 긴 대사가 2줄이라 3줄이면 어느 단계에서도 변하지 않는다. */
  min-height: calc(1.5em * 3);
}
.tutorial__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; gap: 10px;
}
/* 진행 숫자 표기는 발주처 요청 2026-09-08 슬라이드 21 로 없앴다. 버튼만 오른쪽에 둔다. */
.tutorial__actions { display: flex; gap: 10px; margin-left: auto; }
.tutorial__btn {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg,#e9002d,#ff7a01);
  /* 크기 확대(발주처 요청 2026-09-08 슬라이드 21) */
  color: #ffffff; font-family: inherit; font-weight: bold; font-size: 24px;
  padding: 14px 38px; cursor: pointer;
  
  box-shadow: 0 14px 36px #2a232020;
}
.tutorial__btn:active { transform: translateY(0); }
.tutorial__skip {
  position: absolute; top: 13.5%; right: 1.6%; z-index: 40;
  /* 다른 보조 버튼과 같은 얇은 테두리. 예전 3px 진남색 테두리가 남아 있었다. */
  border: 1px solid #d3c8c1; border-radius: 8px;
  background: #faf7f5cc; color: var(--gs-text);
  /* 크기 확대(슬라이드 21). 자리는 상단 고정 바 우측 아래 그대로다(슬라이드 18). */
  font-family: inherit; font-weight: bold; font-size: 18px;
  padding: 11px 22px; cursor: pointer;
  box-shadow: none;
}

/* 연습 중에는 대사창을 상단 바 아래로 올린다(발주처 요청 2026-09-08 슬라이드 18:
   미션창과 겹치지 않게). 창 크기는 그대로 두고 자리만 옮긴다. */
/* 연습 중 대사창을 위로 올리던 규칙(발주처 0908 슬라이드 18)은 쓰지 않는다.
   위로 올리면 대사창이 미션창 위를 덮어 문제가 가렸다(사용자 지적 2026-09-09).
   지금은 대사창을 아래 자리에 두고 미션창을 그 위로 올린다(missionPanel reserveBottom).
   규칙은 되돌릴 때를 위해 남겨 둔다. */
.tutorial__npc--top { top: 13.5%; bottom: auto; }
/* 힌트가 갱신될 때 한 번 번쩍여, 같은 문구여도 바뀐 걸 알 수 있게 한다 */
.tutorial__npc--hint { animation: tut-hint-flash .5s ease; }

/* 튜토리얼에서는 맵을 조작할 수 없다(슬라이드 17). 마우스를 올려도 반응하지 않는다. */
.tutorial .obj { pointer-events: none; cursor: default; }
/* 실게임 전환 시연: 강조 박스 · 6초 교체 카운트다운 · 교체정지 배지.
   발주처 요청 2026-09-10 S7: 원통형(999px) 대신 네모 박스로, 외곽선은 1.3배 두껍게. */
.tut-hi {
  outline: 5px solid var(--c-warn) !important;
  outline-offset: 4px;
  border-radius: 10px;
  animation: tut-pulse 1s ease-in-out infinite;
  position: relative; z-index: 12;
}
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233,0,45,.55); }
  50% { box-shadow: 0 0 0 14px rgba(233,0,45,0); }
}
.tut-demo-badge {
  position: absolute; z-index: 8;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--gs-line); border-radius: 999px;
  background: #f0ebe7;
  box-shadow: 0 14px 36px #2a232020;
  padding: 8px 16px; font-size: 15px; font-weight: bold; color: var(--gs-text);
}
.tut-demo-badge b { color: var(--c-warn); font-size: 18px; }

/*
 * TUT-023 튜토리얼 플레이 완수 팝업 (화면기획서 슬라이드 44)
 *  튜토리얼 완료 안내 + 명예 뱃지·보안 등급 안내.
 *  다시하기 → 튜토리얼 처음부터 재진행 / 홈으로 → MAIN-001
 * 좌표는 목업 프레임(680x512) 기준 px 를 % 로 옮겼다.
 */

/* 튜토리얼 플레이 완료 : x=30 y=34 w=620 h=46 */

/* 튜토리얼 완료 팝업: 배경 전체화면 + 중앙 4:3 카드(프레임 독립) */
.tutdone-screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f7f4f1 52%, #ece7e2 100%);
  color: var(--gs-text); font-family: var(--font-game);
}
.tutdone-frame {
  position: relative;
  container-type: inline-size;
  width: min(84vw, calc(82vh * 680 / 512));
  aspect-ratio: 680 / 512;
  background: linear-gradient(145deg, #fffffff2, #fffffff8);
  border: 1px solid var(--gs-line);
  border-radius: 22px;
  box-shadow: 0 28px 70px #2a23203a;
  overflow: hidden;
}
.tutdone-frame > * { position: absolute; }

.tutdone__title {
  left: 4.41%; top: 6.64%; width: 91.18%; height: 8.98%;
  display: flex; align-items: center; justify-content: center;
  font-size: 4.12cqw; letter-spacing: -.02em;
  color: var(--gs-text);
}

/* 안내 문구 : x=135 y=114 w=410 */
.tutdone__lead {
  left: 13%; top: 22.27%; width: 74%; height: 24%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.2%;
  text-align: center; line-height: 1.5;
  font-size: 2.35cqw; color: var(--gs-text);
}
.tutdone__lead b { font-size: 2.79cqw; }
/* 축하 문구의 강조는 다른 화면과 같은 주황. 빨강은 오답·위험에만 쓴다. */
.tutdone__lead em { font-style: normal; color: var(--gs-orange); font-weight: bold; }

/* 안내 카드 2개 : x=26/353 y=260 w=300 h=110 */
.tutdone__card {
  top: 50.78%; width: 44.12%; height: 21.48%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4%;
  border: 1.5px solid #ffc99a;
  border-radius: 10px;
  background: #fff3e8;
  text-align: center;
}
.tutdone__card--1 { left: 3.82%; }
.tutdone__card--2 { left: 51.91%; }
.tutdone__card-title { font-size: 2.35cqw; color: var(--gs-orange); }
.tutdone__card-body { font-size: 2.06cqw; line-height: 1.5; color: var(--gs-text); }

/* 다시하기 x=152 / 홈으로 x=368 (y=420 w=160 h=38) */
.tutdone__btn {
  top: 82.03%; width: 23.53%; height: 7.42%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gs-line);
  border-radius: 9px;
  font-family: inherit; font-weight: bold; font-size: 2.5cqw;
  cursor: pointer;
}
.tutdone__btn--restart { left: 22.35%; background: #faf7f5cc; color: var(--gs-text); }
.tutdone__btn--restart:hover { background: #faf7f5cc; }
.tutdone__btn--home {
  left: 54.12%; background: linear-gradient(135deg,#e9002d,#ff7a01); border-color: #ff7a01; color: #ffffff;
}
.tutdone__btn--home:hover { background: linear-gradient(135deg,#c00026,#e06a00); }

/* 눌러야 하는 팝업(건너뛰기 확인·홈으로 확인·환경설정)은 NPC 대화창(z 40) 위로 올린다.
   dialog.js 의 배경막은 맵 위에 뜨는 것을 전제로 z 30 을 쓴다. */
.tutorial .dlg-back.tut-modal { z-index: 60; }

/* 환경설정 시연(10페이지): 실제 창을 띄우되 조작은 막는다. 대화창은 그 위에 남는다.
   배경막까지 덧씌우면 강조된 환경설정 버튼과 맵이 두 번 어두워져 투명하게 둔다. */
/* 배경막이 화면 전체를 덮어 상단 홈으로·환경설정·전체화면 버튼까지 막는다.
   버튼은 이미 disabled 라 클릭을 통과시켜도 잃는 조작이 없다. */
.tut-dlg-frozen { background: transparent; pointer-events: none; }
.tut-dlg-frozen .dlg button, .tut-dlg-frozen .ov__btn { pointer-events: none; opacity: .8; }
/* 정답 팝업 시연(요청 12)은 배경막이 보여야 팝업처럼 읽힌다. 환경설정 시연과 달리 반투명을 남긴다. */
.ov-back.tut-dlg-frozen { background: rgba(42, 35, 32, .22); }

/* 제한시간 안내 툴팁: 팝업 대신 상단 바 바로 아래에 붙여 다음 대사까지 유지한다. */
.tut-tip {
  position: absolute; left: 50%; top: 13.5%;
  transform: translateX(-50%); z-index: 41;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 20px; border-radius: 12px;
  border: 1px solid var(--c-warn, #e9002d);
  background: #f4f1eee6;
  box-shadow: 0 12px 30px #2a232033;
  text-align: center; white-space: nowrap;
}
.tut-tip b { font-size: 15px; color: var(--c-warn, #e9002d); }
.tut-tip span { font-size: 13px; color: var(--gs-text); }

/* 유형 소개(5종): 카드 5장을 한 줄로 펼쳐 보여준다 (튜토리얼 시나리오 6단계) */
.tutorial__cards {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  display: none; gap: 1.4%; z-index: 42;
  width: 92%; justify-content: center; align-items: center;
  /* 클릭해 닫는 화면이 아니므로 손 모양 커서를 쓰지 않고 클릭도 가로채지 않는다 */
  pointer-events: none;
}
.tutorial__cards img {
  height: 40vh; max-height: 40%; width: auto; max-width: 18%;
  object-fit: contain;
  filter: drop-shadow(0 14px 34px #2a232040);
  /* 등장 애니메이션에 scale 을 쓰지 않는다(사용자 지적 2026-09-09: 카드가 흐릿함).
     확대·축소가 걸린 요소는 합성 레이어로 올라가는데, 브라우저가 그 레이어를
     작은 배율(.94) 기준으로 한 번 굽고 그대로 늘려 놓아 글자가 뭉개졌다.
     올라오는 느낌은 translateY 만으로도 충분하다. */
  opacity: 0; transform: translateY(14px);
  animation: tut-card-in .42s ease-out forwards;
  /* 마우스를 올린 카드만 살짝 키워 어느 카드를 보고 있는지 알 수 있게 한다.
     등장 애니메이션이 transform 을 계속 쥐고 있어(forwards) 확대는 별도 속성인
     scale 로 준다. transform 으로 주면 애니메이션 값에 덮인다. */
  pointer-events: auto;
  transition: scale .15s ease, filter .15s ease;
}
.tutorial__cards img:hover {
  scale: 1.07;
  filter: drop-shadow(0 18px 40px #2a23204d);
}
@keyframes tut-card-in {
  to { opacity: 1; transform: translateY(0); }
}

/* 튜토리얼 유형 카드: 대화창 위 중앙에 크게 표시 */
.tutorial__card {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  /* 원본이 1114x1411 이라 작게 줄일수록 안쪽 글자가 뭉개진다(사용자 지적 2026-09-09).
     52% → 64% 로 키워 줄이는 비율을 2.5배에서 2.0배로 낮췄다. */
  height: 64%; width: auto; max-width: 42%;
  object-fit: contain; z-index: 42;
  filter: drop-shadow(0 18px 44px #2a232040);
  display: none;
  /* 발주처 요청 12: 눌러도 사라지지 않는다. 누를 수 있는 것처럼 보이지 않게 커서도 기본값. */
  cursor: default; pointer-events: none;
  transition: opacity .2s;
}

@keyframes tut-hint-flash {
  0% { border-color: var(--gs-red, #e9002d); box-shadow: 0 0 0 3px #e9002d40, 0 16px 40px #2a232033; }
  100% { border-color: var(--gs-line); box-shadow: 0 16px 40px #2a232033; }
}