/* 화면 안내(코치마크) 스타일. 토큰은 style.css(수연)의 것만 쓴다. 새 색을 만들지 않는다.
   담당: 현찬 (R2). 수연 파일과 안 부딪히게 따로 둔다. 겹침 순서: 등록 시트 20 < 가로모드 질문 30 < 코치마크 45.
   온보딩 카드 스타일은 9/20 카드를 빼면서 같이 뺐다(스플래시는 수연). 「처음이세요?」 다시보기 버튼도
   요청으로 아예 뺐다(2026-09-20, app.js·setup-screen.js) — main 에 있던 .m-help-chip 스타일(#193)은
   이 브랜치엔 버튼 자체가 없어 죽은 CSS라 같이 지운다. */

.m-head-row { display: flex; align-items: center; gap: 10px; }
.m-page-head .wm { font-size: 22px; line-height: 1; }

.m-coach-tip:focus { outline: none; }

/* ── 코치마크 ── */
.m-coach { position: absolute; inset: 0; z-index: 45; cursor: pointer; }
.m-coach-shade { position: absolute; inset: 0; background: rgba(32, 30, 29, .68); }
.m-coach-spot {
  position: absolute; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(32, 30, 29, .68);
  outline: 2px solid var(--color-accent); outline-offset: 0;
  transition: left 280ms cubic-bezier(.22, 1, .36, 1), top 280ms cubic-bezier(.22, 1, .36, 1),
    width 280ms cubic-bezier(.22, 1, .36, 1), height 280ms cubic-bezier(.22, 1, .36, 1);
}
.m-coach-tip {
  position: absolute; width: min(320px, calc(100% - 24px)); padding: 14px 16px 16px;
  background: var(--color-bg); color: var(--color-text);
  border: 1.5px solid var(--color-text); border-top: 3px solid var(--color-accent);
  box-shadow: 0 12px 32px rgba(32, 30, 29, .32);
  transition: left 280ms cubic-bezier(.22, 1, .36, 1), top 280ms cubic-bezier(.22, 1, .36, 1);
}
.m-coach-tip-measuring { visibility: hidden; left: 12px; top: 12px; }
/* 화살표. 대상 가운데(--arrow)를 가리킨다 */
.m-coach-tip::before {
  content: ''; position: absolute; left: calc(var(--arrow, 50%) - 7px); width: 12px; height: 12px;
  background: var(--color-bg); transform: rotate(45deg);
}
.m-coach-tip-below::before { top: -8px; border-top: 3px solid var(--color-accent); border-left: 3px solid var(--color-accent); }
.m-coach-tip-above::before { bottom: -8px; border-bottom: 1.5px solid var(--color-text); border-right: 1.5px solid var(--color-text); }
.m-coach-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-coach-count { margin: 0; }
.m-coach-skip {
  min-height: 36px; padding: 0 2px; border: 0; background: transparent; cursor: pointer;
  font: 600 13px/1 var(--font-heading); color: var(--color-neutral-700); text-decoration: underline; text-underline-offset: 3px;
}
.m-coach-title { margin: 6px 0 6px; font: 800 17px/1.35 var(--font-heading); letter-spacing: -0.02em; }
.m-coach-body { font: 400 14px/1.65 var(--font-body); color: var(--color-neutral-800); }
.m-coach-nav-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px;
  padding-top: 9px; border-top: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-600); font: 600 10px/1.4 var(--font-body);
}
.m-coach-nav-hint-only { width: 100%; text-align: right; }
.m-coach-edge-hint {
  position: absolute; z-index: 1; right: 12px; bottom: 18px;
  padding: 7px 9px; background: rgba(243,242,242,.92); color: var(--color-neutral-800);
  font: 700 12px/1 var(--font-heading); pointer-events: none;
  animation: m-coach-edge-hint 1.5s ease forwards;
}
@keyframes m-coach-edge-hint {
  0%, 60% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .m-coach-spot, .m-coach-tip { transition: none; }
  .m-coach-edge-hint { animation: none; opacity: 1; }
}