/* tutorial.css — 튜토리얼 모드 (2026-09-29). 스포트라이트 가리개 4장 · 대상 링 · 안내 카드 · 하단 자막 띠.
   style.css 의 토큰(--amber·--cyan·--ink·--surface2 …)만 빌려 쓰고 style.css 자체는 손대지 않는다.
   z 순서: 가리개 9000 < 링 9001 < 카드·자막 9002. 화면의 모달(50)·툴팁(40)·토스트(9) 위에 놓인다. */

/* 좁은 화면(≤1420px)은 style.css 가 body 를 스크롤러로 쓴다 — 거기서는 스크롤을 막지 않는다 */
:where(html:not([data-bp~="w1420"])) body.tut-active { overflow: hidden; }  /* @media (min-width: 1421px) → 유효 폭 (uiscale.js 가 html[data-bp] 에 적는다) */
/* 화면의 토스트(z 9)·모달(z 50)은 가리개(9000) 아래 깔리므로 튜토리얼 중엔 위로 올린다 —
   차단 안내 토스트가 보여야 하고, 32단계의 ROM 정보 창을 열고 닫을 수 있어야 한다 */
body.tut-active .toast { z-index: 9100; }
body.tut-active .modal-ov { z-index: 9100; }

/* 가리개 — 대상 사각형 주위 4장. pointer-events 가 살아 있어 뚫린 곳 밖은 클릭이 막힌다 */
.tut-piece {
  position: fixed; z-index: 9000;
  background: rgba(4, 8, 14, .62);
  transition: background .2s;
}
.tut-piece.soft { background: rgba(4, 8, 14, .45); }   /* 소개·마침 카드: 전체를 살짝만 어둡게 */

/* 대상 링 — 클릭을 가로채지 않는다. 사용자가 조작해야 하는 대상은 **깜빡이며** 강조된다(2026-09-29 사용자 요청:
   문구 블록이 아니라 대상 자체가 눈에 띄어야 다음·건너뛰기를 잘못 누르지 않는다). 설명만 하는 단계는 은은한 숨쉬기. */
.tut-ring {
  position: fixed; z-index: 9001; pointer-events: none;
  border: .1875rem solid var(--amber, #cd7f2a); border-radius: .625rem;
  box-shadow: 0 0 0 .25rem rgba(205, 127, 42, .25), 0 0 1.625rem rgba(205, 127, 42, .45);
  animation: tut-breathe 2.2s ease-in-out infinite;
}
.tut-ring.act { animation: tut-blink .9s steps(1, end) infinite; }
@keyframes tut-breathe {
  0%, 100% { box-shadow: 0 0 0 .25rem rgba(205, 127, 42, .22), 0 0 1.375rem rgba(205, 127, 42, .35); }
  50%      { box-shadow: 0 0 0 .4375rem rgba(205, 127, 42, .12), 0 0 2.125rem rgba(205, 127, 42, .55); }
}
@keyframes tut-blink {
  0%   { border-color: #ffd28a; box-shadow: 0 0 0 .375rem rgba(255, 210, 138, .45), 0 0 2.5rem rgba(255, 190, 90, .85), inset 0 0 1.125rem rgba(255, 200, 110, .35); }
  50%  { border-color: var(--amber, #cd7f2a); box-shadow: 0 0 0 .125rem rgba(205, 127, 42, .15), 0 0 .625rem rgba(205, 127, 42, .25); }
}

/* 안내 카드 */
.tut-card {
  position: fixed; z-index: 9002; width: 21.25rem; max-width: calc(100vw - 1rem);
  background: var(--surface2, #16202b); color: var(--ink, #e2e9f0);
  border: 1px solid var(--amber, #cd7f2a); border-radius: .75rem;
  box-shadow: 0 .875rem 2.5rem rgba(0, 0, 0, .6);
  padding: .875rem 1rem .75rem; font-size: .90625rem; line-height: 1.5;
}
.tut-card.center {
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28.75rem;
}
.tut-card-head { display: flex; gap: .375rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.tut-chip {
  font-size: .71875rem; padding: .125rem .5rem; border-radius: 999px;
  border: 1px solid var(--border, #3b4d63); color: var(--ink2, #b3c2d1);
}
.tut-chip.page { border-color: var(--cyan, #2a8fc9); color: var(--cyan, #2a8fc9); }
.tut-chip.mock { border-color: var(--warn, #d9a13b); color: var(--warn, #d9a13b); }
.tut-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .375rem; color: var(--ink, #e2e9f0); }
.tut-card p { margin: 0 0 .375rem; color: var(--ink, #e2e9f0); }
.tut-card p b { color: var(--amber, #cd7f2a); font-weight: 700; }
.tut-card code {
  font-family: var(--mono, Consolas, monospace); font-size: .8125rem;
  background: rgba(226, 233, 240, .08); padding: 1px .3125rem; border-radius: .25rem;
}
/* 카드 순서(2026-10-03): 제목 → 할 일(크게) → 볼 것(→) → 진행 표시 → 짧은 설명(흐리게) → 이유(점선 아래) */
.tut-do { color: var(--ink, #e2e9f0); font-size: .96875rem; font-weight: 600; }
.tut-goal { color: var(--ink2, #b3c2d1); font-size: .84375rem; }
.tut-body { color: var(--muted, #8394a6); font-size: .8125rem; margin-top: .25rem; }
.tut-status { font-family: var(--mono, Consolas, monospace); font-size: .78125rem; color: var(--amber, #cd7f2a); margin-top: .25rem; }
.tut-goal::before { content: "→ "; color: var(--ok, #3fae6a); }
/* 보조 버튼(이전·건너뛰기) — 글자만, 흐리게. 실수로 누를 만큼 눈에 띄지 않게 */
.tut-btn.sub { border-color: transparent; background: transparent; color: var(--muted, #8394a6); padding: .4375rem .5rem; }
.tut-btn.sub:hover { color: var(--ink2, #b3c2d1); border-color: var(--border, #3b4d63); }
.tut-why {
  margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border, #3b4d63);
  font-size: .78125rem; color: var(--muted, #8394a6);
}
.tut-pre { margin-top: .375rem; font-size: .78125rem; color: var(--warn, #d9a13b); }
/* 보조 대상 테두리(also, 2026-10-04) — 깜빡이지 않는 주황 테두리. 구멍은 가리개 clip-path 가 같이 뚫는다 */
.tut-ring.aux { animation: none; border-color: var(--amber, #cd7f2a); box-shadow: 0 0 0 .1875rem rgba(205, 127, 42, .28); }
.tut-missing {
  margin-top: .375rem; font-size: .78125rem; color: var(--warn, #d9a13b);
}
.tut-actions { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; }
.tut-actions .sp { flex: 1; }
.tut-btn {
  padding: .4375rem .75rem; font-size: .84375rem; font-family: inherit; cursor: pointer;
  border-radius: .375rem; border: 1px solid var(--border, #3b4d63);
  background: var(--glass2, rgba(20, 31, 46, .55)); color: var(--ink2, #b3c2d1); white-space: nowrap;
}
.tut-btn:hover { color: var(--ink, #e2e9f0); border-color: var(--ink2, #b3c2d1); }
.tut-btn.primary {
  background: rgba(27, 58, 82, .85); border-color: var(--cyan, #2a8fc9);
  color: var(--ink, #e2e9f0); font-weight: 700;
}
.tut-btn.primary:hover { background: #21495f; }
.tut-btn.exit { color: var(--danger, #d95c4a); }
.tut-btn.exit:hover { border-color: var(--danger, #d95c4a); }

/* 하단 자막 띠 — 지금 어느 페이지에서 무엇을 하는 중인지, 진행 중 내내 보인다 */
.tut-band {
  position: fixed; z-index: 9002; left: 50%; bottom: .875rem; transform: translateX(-50%);
  max-width: min(57.5rem, calc(100vw - 2rem));
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem .5rem .875rem; border-radius: 999px;
  background: rgba(14, 22, 34, .92); border: 1px solid var(--amber, #cd7f2a);
  color: var(--ink, #e2e9f0); font-size: .84375rem; line-height: 1.35;
  box-shadow: 0 .5rem 1.625rem rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
}
.tut-band.top { bottom: auto; top: 3.625rem; }   /* 대상이 화면 아래쪽이면 엔진이 띠를 상단바 밑으로 올린다 */
.tut-band .tut-band-tag {
  font-size: .71875rem; font-weight: 700; letter-spacing: .04em; color: var(--amber, #cd7f2a);
  white-space: nowrap;
}
.tut-band .tut-band-page { font-weight: 700; white-space: nowrap; }
.tut-band .tut-band-cap { color: var(--ink2, #b3c2d1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tut-band .tut-band-n { color: var(--muted, #8394a6); font-family: var(--mono, monospace); font-size: .78125rem; white-space: nowrap; }
.tut-band .tut-btn { padding: .25rem .625rem; font-size: .78125rem; }

/* 마침 카드의 루프 표시 */
.tut-loop { display: flex; flex-wrap: wrap; gap: .375rem; margin: .5rem 0 .25rem; }
.tut-loop span {
  font-size: .78125rem; padding: .1875rem .5625rem; border-radius: 999px;
  border: 1px solid var(--ok, #3fae6a); color: var(--ok, #3fae6a);
}
.tut-list { margin: .25rem 0 0 1.125rem; color: var(--ink2, #b3c2d1); font-size: .8125rem; }
.tut-list li { margin: .125rem 0; }