/* ═══════════════════════════════════════════════════════════════════════════
   말고리즘 — 분석 쿠키 동의 배너

   styles.css 와 blog.css 를 건드리지 않고 별도 파일로 둔다. 랜딩과 블로그가
   같이 쓰므로 어느 한쪽 스타일시트에 넣으면 다른 쪽에서 규칙이 없어진다.

   토큰(--bg-*, --tx-*, --amber)은 두 스타일시트가 모두 정의하므로 그대로 쓴다.
   폴백값을 함께 적어 토큰이 없는 문서에서도 읽을 수 있게 한다.
   ═══════════════════════════════════════════════════════════════════════════ */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 130;
  padding: 14px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* 배너가 붙기 전 프레임에 화면이 튀지 않게 초기 상태를 명시한다 */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .26s ease, transform .26s ease;
}
.consent.is-in { opacity: 1; transform: none; }

.consent__panel {
  pointer-events: auto;
  width: min(680px, 100%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--bg-3, #0E0F16);
  border: 1px solid var(--ln-1, rgba(255, 255, 255, .1));
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}

.consent__txt { flex: 1; min-width: 0; }
.consent__txt b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--tx, #fff);
}
.consent__txt p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tx-6, rgba(255, 255, 255, .6));
  word-break: keep-all;
}
.consent__txt a {
  color: var(--amber-tx, #FFC83D);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.consent__btns { display: flex; gap: 8px; flex: none; }

.consent__btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid var(--ln-2, rgba(255, 255, 255, .18));
  background: transparent;
  color: var(--tx-7, rgba(255, 255, 255, .7));
  transition: border-color .15s, color .15s, filter .15s;
}
.consent__btn:hover { color: var(--tx, #fff); border-color: var(--tx-4, rgba(255, 255, 255, .4)); }

.consent__btn--yes {
  border-color: transparent;
  background: var(--amber, #FFC83D);
  color: var(--on-amber, #1A1500);
}
.consent__btn--yes:hover { filter: brightness(1.06); color: var(--on-amber, #1A1500); }

/* 좁은 화면 — 버튼을 아래로 내리고 폭을 반씩 나눈다.
   가로로 유지하면 스페인어 라벨(Rechazar/Aceptar)이 길어 문구가 눌린다. */
@media (max-width: 560px) {
  .consent__panel { flex-direction: column; align-items: stretch; gap: 12px; }
  .consent__btns { width: 100%; }
  .consent__btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}