/* tour.css — 튜토리얼 말풍선 (2026-08-26)
   🔴 화면 위에 뜨는 것이라 **테마를 따라가야 한다** — 밤 지면에 흰 말풍선이 뜨면 눈이 부시다(R158).
   🔴 하단 앱바(z-index 300)·학습 화면(.study 1000) 위로 올라가야 가리킬 수 있다. */
.tour-mask{position:fixed;inset:0;z-index:2147483000;display:none;background:transparent}
.tour-hole{position:absolute;border-radius:12px;
  box-shadow:0 0 0 9999px rgba(15,23,42,.62), 0 0 0 2px rgba(99,102,241,.9) inset;
  transition:left .18s ease, top .18s ease, width .18s ease, height .18s ease;
  pointer-events:none}
body.tour-on{overflow:hidden}

.tour-pop{position:fixed;z-index:2147483001;display:none;box-sizing:border-box;
  width:min(320px, calc(100vw - 20px));
  background:#fff;color:#1e293b;border-radius:14px;
  box-shadow:0 12px 40px rgba(15,23,42,.28);
  padding:14px 14px 12px;font-size:13.5px;line-height:1.62;letter-spacing:-.01em;
  word-break:keep-all}
.tour-pop::after{content:'';position:absolute;left:var(--tour-arrow-x,50%);width:0;height:0;
  border:8px solid transparent;transform:translateX(-8px)}
.tour-pop[data-arrow="up"]::after{top:-16px;border-bottom-color:#fff}
.tour-pop[data-arrow="down"]::after{bottom:-16px;border-top-color:#fff}
.tour-pop[data-arrow="none"]::after{display:none}

.tour-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.tour-head b{flex:1;font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.tour-x{flex:0 0 auto;border:none;background:transparent;color:#94a3b8;font:inherit;font-size:14px;
  line-height:1;padding:2px 4px;margin:-2px -4px 0 0;cursor:pointer;border-radius:6px}
.tour-x:hover{background:rgba(148,163,184,.16);color:#475569}
.tour-body{color:#334155}
.tour-body b{font-weight:800;color:#1e293b}
.tour-foot{display:flex;align-items:center;gap:7px;margin-top:12px}
.tour-n{flex:1;font-size:11.5px;font-weight:700;color:#94a3b8;font-variant-numeric:tabular-nums}
.tour-b{border:none;background:#6366f1;color:#fff;font:inherit;font-size:12.5px;font-weight:800;
  padding:8px 15px;border-radius:9px;cursor:pointer;letter-spacing:-.02em}
.tour-b.ghost{background:transparent;color:#64748b;border:1px solid #cbd5e1;padding:7px 12px}

/* 구석의 ? — 하단 앱바 위, 오른쪽. 읽는 중(눈회독 크롬 0)에는 같이 물러난다 */
.tour-btn{position:fixed;right:12px;z-index:899;
  bottom:calc(env(safe-area-inset-bottom,0px) + 74px);
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(120,110,90,.24);background:rgba(255,255,255,.94);color:#64748b;
  font:inherit;font-size:15px;font-weight:800;line-height:1;cursor:pointer;
  box-shadow:0 3px 12px rgba(15,23,42,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tour-btn:hover{color:#4338ca;border-color:rgba(99,102,241,.4)}
body.tour-on .tour-btn{display:none}
/* 🔴 눈회독에서 읽는 동안엔 크롬이 0 이다 — ? 도 같이 물러난다(안 그러면 유일하게 남는 크롬이 된다) */
body[data-mode="eyeread"].studying.rd-mode:not(.rd-ui) .tour-btn{opacity:0;pointer-events:none}
@media(min-width:721px){ .tour-btn{bottom:16px} }

html[data-theme="dark"] .tour-pop{background:#1c1e2e;color:#e2e8f0;box-shadow:0 12px 40px rgba(0,0,0,.5)}
html[data-theme="dark"] .tour-pop[data-arrow="up"]::after{border-bottom-color:#1c1e2e}
html[data-theme="dark"] .tour-pop[data-arrow="down"]::after{border-top-color:#1c1e2e}
html[data-theme="dark"] .tour-body{color:#cbd5e1}
html[data-theme="dark"] .tour-body b{color:#f1f5f9}
html[data-theme="dark"] .tour-head b{color:#f1f5f9}
html[data-theme="dark"] .tour-b.ghost{color:#94a3b8;border-color:#475569}
html[data-theme="dark"] .tour-btn{background:rgba(28,30,46,.94);border-color:rgba(255,255,255,.14);color:#94a3b8}
html[data-theme="dark"] .tour-hole{box-shadow:0 0 0 9999px rgba(2,6,23,.7), 0 0 0 2px rgba(129,140,248,.9) inset}