/* @sian_report 첫 방문 사용법 안내 (tour.js) — portal.css의 토큰·톤을 그대로 따른다 */

/* 상단 [?] — 안내를 끈 뒤에도 되돌아올 수 있는 유일한 문. 항상 보인다. */
.od-help {
  flex: none; width: 28px; height: 28px; padding: 0; line-height: 1;
  font: inherit; font-size: 13px; font-weight: 800;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); cursor: pointer;
}
.od-help:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-weak); }

/* 백드롭 — 클릭을 삼켜 투어 중 오조작을 막는다(스포트라이트 자체는 hole의 box-shadow가 그린다). */
.od-tour-back { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.od-tour-back.is-solid { background: rgba(17, 24, 39, .62); }  /* 대상 없는 카드 — 화면 전체를 덮는다 */
.od-tour-back[hidden] { display: none; }

/* 구멍 — 대상만 남기고 바깥을 어둡게. 영역 스크린샷 선택 박스와 같은 기법(box-shadow spread). */
.od-tour-hole {
  position: fixed; z-index: 1201; pointer-events: none;
  border: 2px solid var(--brand); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(17, 24, 39, .62);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.od-tour-hole[hidden] { display: none; }

/* 툴팁 카드 */
.od-tour-card {
  position: fixed; z-index: 1202; width: 320px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 12px; padding: 16px 16px 13px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  transition: left .18s ease, top .18s ease;
}
.od-tour-card[hidden] { display: none; }
.od-tour-step { font-size: 10.5px; font-weight: 800; color: var(--brand); letter-spacing: .04em; margin-bottom: 5px; }
.od-tour-title { margin: 0 0 7px; font-size: 15px; line-height: 1.35; color: var(--ink); }
.od-tour-body { margin: 0; font-size: 12.5px; line-height: 1.65; color: #374151; white-space: pre-line; }
.od-tour-note {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 7px;
  background: var(--brand-weak); border: 1px solid #bfdbfe;
  font-size: 11.5px; line-height: 1.5; color: #1e40af;
}
.od-tour-note[hidden] { display: none; }

.od-tour-actions { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.od-tour-skip {
  font: inherit; font-size: 11.5px; padding: 7px 2px; margin-right: auto;
  border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: underline;
}
.od-tour-skip:hover { color: var(--ink); }
.od-tour-prev {
  font: inherit; font-size: 12px; font-weight: 600; padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer;
}
.od-tour-prev:hover { border-color: var(--brand); color: var(--brand); }
.od-tour-prev[hidden] { display: none; }
.od-tour-next {
  font: inherit; font-size: 12px; font-weight: 700; padding: 7px 15px;
  border: 0; border-radius: 7px; background: var(--brand); color: #fff; cursor: pointer;
}
.od-tour-next:hover { background: #1d4ed8; }
.od-tour-next:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }