/* 가이드 · 테마 · 언어 버튼과 가이드 층 (ui-kit.js). 라이트 테마의 색 토큰도 여기 둔다 —
   다크 토큰은 styles.css 의 :root 가 원본이고, 여기서는 그것을 덮어쓰기만 한다. */

html[data-theme="light"]{
  --ink:#2b2338;                  /* 글자 — 어두운 보라 */
  --ink-dim:#4f4660;
  --ink-faint:#7a7089;
  --bg:#faf6f1;                   /* 주황 기운의 따뜻한 흰색 */
  --bg-raised:#f2eae2;
  --bg-rgb:250,246,241;
  --line: rgba(74,63,92,0.14);
  --line-strong: rgba(74,63,92,0.26);
  --mint:#00a07a;                 /* 흰 바탕에서 읽히게 한 단계 진한 민트 */
  --mint-dim:#7fd9c1;
  --mint-hover:#00b98d;
  --on-mint:#ffffff;
  --warm:#b57e54;
  --warm-dim:#e3c6ae;
  --plum:#4a3f5c;
  --plum-dim:#e4ddee;
}

/* ── 버튼 셋 ─────────────────────────────────────────────────────────── */
.kit-buttons{
  position:fixed; right:16px; bottom:24px; z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.kit-btn{
  width:38px; height:38px; border-radius:50%;
  font:700 13px/1 var(--sans); cursor:pointer;
  background:var(--plum-dim); color:var(--mint);
  border:1px solid var(--line-strong);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.kit-btn.kit-help{
  width:48px; height:48px; font-size:20px;
  background:var(--mint); color:var(--on-mint); border-color:var(--mint);
}
.kit-btn:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

/* ── 가이드 층 ────────────────────────────────────────────────────────── */
.kit-guide{ position:fixed; inset:0; z-index:100; }
.kit-guide-block{ position:absolute; inset:0; }             /* 뒤 화면을 누르지 못하게 */
.kit-guide-dim{ position:absolute; inset:0; background:rgba(128,128,128,.6); }
.kit-guide-hole{
  position:fixed; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(128,128,128,.6);             /* 동그라미 밖만 덮는다 */
  border:2px solid var(--mint);
}
.kit-guide-bubble{
  position:fixed; padding:10px 8px 8px 16px; border-radius:12px;
  background:var(--bg-raised); color:var(--ink);
  border:1px solid var(--line-strong);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.kit-guide-top{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--ink-faint); }
.kit-guide-close{
  width:30px; height:30px; border:0; background:transparent; cursor:pointer;
  color:var(--ink-faint); font-size:15px;
}
.kit-guide-text{ margin:2px 10px 8px 0; font-size:14px; line-height:1.55; }
.kit-guide-actions{ display:flex; justify-content:flex-end; gap:4px; }
.kit-guide-actions button{
  font:600 13px var(--sans); padding:7px 12px; cursor:pointer;
  background:transparent; border:0; color:var(--mint);
}
.kit-guide-actions button:disabled{ color:var(--ink-faint); cursor:default; }