/* help.css — 화면 안내(?) (2026-10-01 초안 → 2026-10-03 개편). 상단바의 ? 버튼을 누르면 화면이 어두워지고,
   첫 카드가 화면을 한 줄로 소개한 뒤, 주요 영역을 **한 번에 하나씩** 비추며 문장 하나로 설명한다.
   조작을 요구하지 않고 20초 안에 끝난다. 상태를 바꾸지 않고 서버 호출도 없다.
   style.css 의 토큰만 빌려 쓴다. z 순서: 오버레이 8000 — 화면의 모달(50)·툴팁(40) 위, 튜토리얼(9000) 아래. */

/* ? 버튼 — 상단바, 사용자 메뉴 바로 왼쪽 */
.help-btn {
  margin-left: 1.125rem; align-self: center; flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid var(--border, #3b4d63); background: var(--glass2, rgba(20, 31, 46, .55));
  color: var(--ink2, #b3c2d1); font: 700 .9375rem/1 inherit; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.help-btn:hover { color: var(--ink, #e2e9f0); border-color: var(--ink2, #b3c2d1); }
.help-btn:focus-visible { outline: .125rem solid var(--cyan, #2a8fc9); outline-offset: .125rem; }
.help-btn[aria-expanded="true"] { color: #1a1206; background: var(--amber, #cd7f2a); border-color: var(--amber, #cd7f2a); }
body.tut-active .help-btn { display: none; }   /* 튜토리얼 진행 중엔 겹치지 않게 숨긴다 */

/* 오버레이 뿌리 — 화면 전체를 덮는다. 가리개(svg)가 클릭을 받아 다음으로 넘긴다 */
.help-ov { position: fixed; inset: 0; z-index: 8000; }
.help-ov[hidden] { display: none; }
.help-scrim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }

/* 카드 — 비춘 대상 옆에 하나. 소개 카드(.center)는 화면 가운데 */
.help-card {
  position: absolute; z-index: 1; width: 20rem; max-width: calc(100vw - 1rem);
  background: var(--surface2, #16202b); color: var(--ink, #e2e9f0);
  border: 1px solid var(--border, #3b4d63); border-left: .1875rem solid var(--amber, #cd7f2a);
  border-radius: .625rem; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .6);
  padding: .5625rem .75rem .625rem .8125rem; font-size: .84375rem; line-height: 1.45;
  transition: left .18s ease, top .18s ease;
}
.help-card.center {
  left: 50% !important; top: 42% !important; transform: translate(-50%, -50%);
  width: 23rem; padding: .875rem 1.125rem 1rem 1.25rem; transition: none;
}
.help-card.center h3 { font-size: 1.125rem; }
.help-card.center p { font-size: .9375rem; }

/* 반응형 (2026-10-03) — 유효 폭 기준(uiscale.js 가 html[data-bp] 에 적는다; @media 는 쓰지 않는다)
   w1100 이하: 카드를 조금 좁게. 시트(.sheet — help.js 가 w720 이하 또는 낮은 창에서 붙인다): 화면 아래 가득, 자리 계산 없음 */
:where(html[data-bp~="w1100"]) .help-card { width: 17.5rem; }
:where(html[data-bp~="w1100"]) .help-card.center { width: 20rem; }
.help-card.sheet, .help-card.sheet.center {
  left: .5rem !important; right: .5rem; top: auto !important; bottom: .5rem;
  width: auto; max-width: none; transform: none; transition: none;
  padding: .625rem .875rem .75rem .9375rem;
}
/* w720 이하: 상단바가 넘쳐 ? 가 화면 밖으로 밀리는 화면(학습 데이터 관리)이 있다 — 오른쪽 아래 떠 있는 버튼으로 */
:where(html[data-bp~="w720"]) .help-btn {
  position: fixed; right: .75rem; bottom: .75rem; z-index: 45; margin: 0;
  width: 2.25rem; height: 2.25rem; font-size: 1.125rem;
  box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .5);
}
.help-card.sheet.center h3 { font-size: 1rem; }
.help-card.sheet.center p { font-size: .875rem; }

.help-k { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.help-k .help-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--amber, #cd7f2a); white-space: nowrap; }
.help-k .help-pos { font-size: .6875rem; color: var(--muted, #8394a6); font-family: var(--mono, Consolas, monospace); }
.help-x {
  margin-left: auto; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--muted, #8394a6); font: 700 .75rem/1 inherit; font-family: inherit;
}
.help-x:hover { color: var(--ink, #e2e9f0); background: var(--glass2, rgba(20, 31, 46, .55)); }
.help-x:focus-visible { outline: .125rem solid var(--cyan, #2a8fc9); }

.help-card h3 { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 700; color: var(--ink, #e2e9f0); }
.help-card p { margin: 0 0 .5625rem; color: var(--ink2, #b3c2d1); }
.help-card p em { font-style: normal; color: var(--ink, #e2e9f0); font-weight: 700; }

.help-foot { display: flex; align-items: center; gap: .5rem; }
.help-dots { display: flex; gap: .3125rem; margin-right: auto; }
.help-dots i { width: .375rem; height: .375rem; border-radius: 50%; background: var(--border, #3b4d63); }
.help-dots i.on { background: var(--amber, #cd7f2a); }
.help-hbtn {
  padding: .25rem .6875rem; font-size: .78125rem; font-family: inherit; cursor: pointer; white-space: nowrap;
  border-radius: .375rem; border: 1px solid var(--border, #3b4d63);
  background: var(--glass2, rgba(20, 31, 46, .55)); color: var(--ink2, #b3c2d1);
}
.help-hbtn:hover { color: var(--ink, #e2e9f0); border-color: var(--ink2, #b3c2d1); }
.help-hbtn:focus-visible { outline: .125rem solid var(--cyan, #2a8fc9); outline-offset: 1px; }
.help-hbtn.primary { border-color: var(--amber, #cd7f2a); background: var(--amber, #cd7f2a); color: #1a1206; font-weight: 700; }
.help-hbtn.primary:hover { color: #1a1206; filter: brightness(1.08); }