/* 도움말 모드 공용 스타일 (2026-10-14 신설, academy-hub.html 10/13 구현에서 뼈대만 추출)

   페이지마다 공통으로 쓰는 부분만 담았다 — 톱니 윤곽선 굵기처럼 그 페이지의
   실제 도형에 맞춰 달라지는 세부 강조 스타일은 각 페이지 자신의 <style>에서
   추가로 정의한다(assets/help-mode.js의 안내 주석 참고).

   사용법: <link rel="stylesheet" href="assets/help-mode.css"> 한 줄만 추가하면
   된다 — HelpMode.init()이 만드는 토글 버튼·배너·말풍선이 전부 이 CSS를 쓴다. */
body.help-mode{cursor:help;}
/* box-shadow 링은 일부 환경(예: 윈도우 100% 배율)에서 위쪽 선만 서브픽셀
   반올림으로 사라져 보이는 문제가 있었다(몽후님 스크린샷 신고, 10/29 —
   150%로 확대하면 보이던 선이 100%에선 안 보임) — outline은 테두리와 별개로
   더 안정적으로 그려지는 속성이라 outline으로 교체. */
body.help-mode [data-help]{outline:2.5px solid var(--help-accent,#F2A900);outline-offset:0;}
/* select는 네이티브 드롭다운이 click이 아니라 mousedown 단계에서 열리고, input/
   textarea는 click 전에 이미 mousedown으로 포커스를 받아 그대로 타이핑이 가능해져
   버린다 — 둘 다 캡처 단계 click 리스너의 preventDefault/stopPropagation으로는
   막을 수 없는 네이티브 동작이라(도움말 모드 롤아웃 중 실제 발견, 10/14), 도움말
   모드 중엔 아예 pointer-events로 막아 클릭 자체가 그 엘리먼트에 닿지 않게 한다.
   이 엘리먼트들을 직접 data-help로 태그하면(클릭이 전달 안 돼) 말풍선도 못 뜨므로,
   반드시 감싸는 라벨/wrapper에 data-help를 달 것(assets/help-mode.js 안내 참고). */
body.help-mode select,
body.help-mode input,
body.help-mode textarea{pointer-events:none;}
#help-toggle-btn{background:rgba(255,255,255,0.15);border:none;color:#fff;
  font-size:16px;width:32px;height:32px;border-radius:8px;cursor:pointer;}
#help-toggle-btn.on{background:#F2A900!important;}
#help-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:#1B3A63;color:#fff;font-size:12.5px;font-weight:700;padding:9px 16px;
  border-radius:20px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:910;display:none;
  max-width:90vw;text-align:center;word-break:keep-all;}
#help-banner.show{display:block;}
#help-bubble{position:fixed;max-width:260px;background:#1B3A63;color:#fff;
  border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.55;
  box-shadow:0 8px 26px rgba(0,0,0,.3);z-index:920;display:none;word-break:keep-all;}
#help-bubble.show{display:block;}
#help-bubble .hb-title{font-weight:800;font-size:13.5px;margin-bottom:4px;}
#help-bubble .hb-close{position:absolute;top:6px;right:8px;cursor:pointer;color:#CFE0F7;font-size:13px;}
/* HelpMode.init()이 토글 버튼을 직접 만들 때(페이지가 미리 #help-toggle-btn을
   놓아두지 않은 경우)만 쓰는 기본 위치 — 화면 우하단 고정. 페이지가 자기
   헤더 안에 직접 버튼을 놓아뒀다면(예: academy-hub.html) 이 규칙은 적용되지
   않는다(그 버튼엔 이 클래스가 안 붙으므로). */
#help-toggle-btn.help-floating{position:fixed;right:14px;bottom:14px;z-index:900;
  width:44px;height:44px;border-radius:50%;font-size:20px;
  background:#1B3A63;box-shadow:0 6px 18px rgba(0,0,0,.3);}
#help-toggle-btn.help-floating.on{background:#F2A900!important;}