/* ══════════ 사용법 투어 (시퀀스 다음 단계) ══════════
   시퀀스가 "왜 이 지역인가"를 보여줬다면, 투어는 "어떻게 보는가"를 알려준다.
   본편 UI 를 하나씩 밝히고 그 자리에서 설명한다. */

#tourbg{position:fixed;inset:0;z-index:46;display:none}
#tourbg.on{display:block}

/* 클릭 캐처 — 아무 데나 눌러 다음 */
#tourCatch{position:absolute;inset:0;cursor:pointer}

/* 스포트라이트 — box-shadow 로 화면 전체를 덮고 이 사각형만 구멍으로 남긴다.
   위치·크기가 트랜지션되므로 다음 대상으로 '미끄러지듯' 이동한다. */
#tourSpot{position:absolute;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(14,22,16,.68);
  outline:2px solid var(--brand);outline-offset:0;
  transition:top .55s cubic-bezier(.4,0,.2,1),left .55s cubic-bezier(.4,0,.2,1),
             width .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1),
             box-shadow .4s,opacity .3s}

/* 설명 말풍선 */
#tourTip{position:absolute;width:min(360px,88vw);background:#fff;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);padding:20px 22px 18px;
  pointer-events:none;word-break:keep-all;text-wrap:pretty;
  transition:top .55s cubic-bezier(.4,0,.2,1),left .55s cubic-bezier(.4,0,.2,1),opacity .3s}
#tourTip .t-no{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--brand-dk);
  margin-bottom:7px;font-variant-numeric:tabular-nums}
#tourTip h3{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 7px;line-height:1.35}
#tourTip p{font-size:13px;line-height:1.65;color:var(--body);margin:0}
#tourTip p b{color:var(--ink)}
#tourTip .t-foot{display:flex;align-items:center;gap:10px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
#tourTip .t-step{font-size:11px;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums}
#tourTip .t-next{margin-left:auto;pointer-events:auto;border:none;border-radius:9px;
  background:var(--brand);color:#fff;padding:9px 16px;font:800 12.5px Pretendard,sans-serif;cursor:pointer}
#tourTip .t-next:hover{background:var(--brand-dk)}
#tourTip .t-skip{pointer-events:auto;border:none;background:none;color:var(--muted);
  font:700 12px Pretendard,sans-serif;cursor:pointer;padding:9px 4px}
#tourTip .t-skip:hover{color:var(--ink)}

/* 말풍선 꼬리 */
#tourTip:after{content:'';position:absolute;width:12px;height:12px;background:#fff;transform:rotate(45deg)}
#tourTip.pl-bottom:after{top:-6px;left:34px}
#tourTip.pl-top:after{bottom:-6px;left:34px}
#tourTip.pl-right:after{left:-6px;top:28px}
#tourTip.pl-left:after{right:-6px;top:28px}

#tourbg.fading #tourTip{opacity:0}

@media (max-width:880px){
  #tourTip{width:min(320px,92vw);padding:16px 18px 15px}
  #tourTip h3{font-size:15px}
}