/* 맥락 툴팁 — 화면을 덮고 가리킬 요소만 뚫어 보여주는 코치마크.
   덮개가 클릭을 전부 받는다: 뒤의 배너·버튼이 눌리지 않아 안내가 엉뚱하게 사라지지 않는다.
   온보딩(10000)보다 위에 둘 이유는 없다 — 그쪽이 떠 있는 동안은 아예 띄우지 않는다. */
.coach-ov {
  position: fixed;
  inset: 0;
  z-index: 9998;
  animation: coach-in 180ms ease-out both;
}

/* 구멍 — 거대한 그림자 하나로 '바깥 전체를 어둡게 + 이 자리만 밝게' 를 같이 만든다.
   클릭은 덮개가 받아야 하므로 이 상자는 이벤트를 받지 않는다. */
.coach-hole {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .58);
  pointer-events: none;
}

/* 말풍선 — 구멍에 붙는 꼬리 한 개. 브랜드색을 여기 쓴다(화면이 덮여 다른 오렌지가 안 보인다). */
.coach-tip {
  position: fixed;
  z-index: 1;
  max-width: min(320px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 14px;
  background: #ff6f0f;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
  animation: coach-tip-in 180ms ease-out both;
}
/* 이전·다음 줄 — 단계 표시는 왼쪽, 버튼은 오른쪽. */
.coach-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.coach-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  color: #d95f00;
  cursor: pointer;
}
.coach-btn-ghost {
  margin-left: auto;          /* 단계 표시와 버튼 사이를 벌린다 */
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.coach-btn-ghost[hidden] { display: none; }
.coach-tip::after {
  content: "";
  position: absolute;
  left: var(--coach-tail, 24px);
  border: 8px solid transparent;
}
/* 구멍 아래에 붙을 때는 꼬리가 위를 향한다. */
.coach-tip[data-side="below"]::after { top: -16px; border-bottom-color: #ff6f0f; }
.coach-tip[data-side="above"]::after { bottom: -16px; border-top-color: #ff6f0f; }

/* 건너뛰기 — 오른쪽 위. 스킵을 막으면 이탈이 는다는 게 투어를 꺼리던 근거였다.
   순서를 잇더라도 빠져나갈 길은 열어 둔다. */
.coach-skip {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 16px;
  z-index: 2;                 /* 구멍이 상단에 뚫려도 그 위에 남는다 */
  border: 0;
  /* 밝은 스포트라이트 위에 걸쳐도 읽히도록 불투명 흰 바탕에 진한 글씨를 쓴다.
     반투명 흰 바탕은 딤 위에서만 보이고, 뚫린 자리와 겹치면 사라진다. */
  background: #fff;
  color: #212124;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
}

/* 단계 표시(2/5) — 이전·다음 줄 왼쪽. */
.coach-hint {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .78);
}

/* 안내 종료 토스트 — 기존 .back-toast 를 그대로 쓰되, 그쪽은 짧은 문구용이라
   nowrap 이 걸려 있다. 이 문장은 길어 잘리므로 여기서만 줄바꿈을 허용한다. */
.coach-toast {
  /* 가로로 넓게 — 화면 폭을 거의 다 쓰면 이 문장이 한 줄에 들어간다.
     좁은 기기에서는 잘리는 대신 두 줄로 접히게 둔다(nowrap 을 쓰지 않는 이유). */
  white-space: normal;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  line-height: 1.5;
}

@keyframes coach-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes coach-tip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .coach-ov, .coach-tip { animation: none; }
}