/* ── 쿠키 동의 배너 (htdocs/assets/js/consent.js) ─────────────────────────
   🔴 **tokens.css 변수에 기대지 않는다.** 이 파일은 세 자리에 실린다 —
      ① core.bundle.css(게임), ② 위키 레이아웃이 따로 거는 <link>,
      ③ 안내 사이트가 빌드 때 <style> 로 인라인(scripts/build-site.php 가 이 파일을 읽는다).
      ③에는 tokens.css 가 없으므로 색을 이 블록 안에서 스스로 정한다(값은 tokens.css 의 사본).
   ⚠ position:fixed 라 게임의 --app-min-w(1280px) 가로 스크롤과 무관하게 뷰포트에 붙는다.
      폭 브레이크포인트를 쓰지 않는다(tokens.css 머리 규약) — 폭은 min() 으로만 줄인다. */
.tr1-consent {
  --cn-bg: #1a2030;
  --cn-border: #3a4358;
  --cn-text: #f4f6fb;
  --cn-text-2: #c6ccd9;
  --cn-accent: #d9a441;
  --cn-accent-hi: #f0c06a;

  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 11500; /* 모달(11000~11001) 위, 라이트박스(12000) 아래 */
  box-sizing: border-box;
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1rem 1.1rem;
  background: var(--cn-bg);
  color: var(--cn-text);
  border: 1px solid var(--cn-border);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  font-family: "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
}
.tr1-consent *, .tr1-consent *::before, .tr1-consent *::after { box-sizing: border-box; }
.tr1-consent__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cn-text);
}
.tr1-consent__body { margin: 0; color: var(--cn-text-2); }
.tr1-consent__link { color: var(--cn-accent-hi); text-decoration: underline; }
.tr1-consent__opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.tr1-consent__opts[hidden] { display: none; }
.tr1-consent__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--cn-border);
  border-radius: 6px;
  cursor: pointer;
}
.tr1-consent__opt input { margin: 0.2rem 0 0; accent-color: var(--cn-accent); flex: none; }
.tr1-consent__opt input:disabled { cursor: not-allowed; }
.tr1-consent__opt-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tr1-consent__opt-desc { color: var(--cn-text-2); font-size: 0.8125rem; }
.tr1-consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
/* 「거부」와 「동의」는 같은 모양이다 — 한쪽만 눈에 띄게 만들면 동의를 유도하는 설계가 된다. */
.tr1-consent__btn {
  flex: 1 1 8rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cn-accent);
  border-radius: 6px;
  background: var(--cn-accent);
  color: #1a1206;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tr1-consent__btn:hover { background: var(--cn-accent-hi); border-color: var(--cn-accent-hi); }
.tr1-consent__btn--ghost { background: transparent; color: var(--cn-text); border-color: var(--cn-border); }
.tr1-consent__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--cn-text-2); }
.tr1-consent__btn:focus-visible,
.tr1-consent__link:focus-visible { outline: 2px solid var(--cn-accent-hi); outline-offset: 2px; }

/* 푸터의 「쿠키 설정」 — 링크처럼 보이는 버튼(이동이 아니라 배너를 여는 동작이다). */
button.site-footer__link,
button.wk-footer__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}