/* ============================================================
   쿠키 동의 배너·설정 모달 스타일 — 단일 소스

   js/cookie-consent.js 는 스타일을 주입하지 않는다. 이 파일을 읽지 않는
   페이지에서는 배너가 무스타일로 뜬다(실제로 /lp 가 그랬다).
   style.css 를 쓰지 않는 페이지(랜딩·공유)는 이 파일을 직접 링크한다.
   style.css 는 맨 위에서 이 파일을 @import 한다 — 규칙을 복제하지 않는다.
   ============================================================ */

/* ===== 자립 토큰 =========================================================
   이 파일은 style.css 를 쓰지 않는 페이지(lp.html · s/*.html 10개)에도
   직접 링크된다. 그 페이지들에는 --bg-card·--gold·--text-body 가 없다.
   **폴백 없는 var() 는 선언 자체를 무효로 만든다**(invalid at computed-value
   time) — 속성이 초기값으로 떨어져 background 가 transparent 가 된다.
   실측: /lp 에서 배너 면이 사라지고 '모두 동의' 버튼이 대비 1.10 이 됐다.

   ⚠ --ccb-surface 만은 리터럴로 고정한다. var(--bg-card, #171A28) 로 쓰면
     안 된다 — style.css 페이지에서는 --bg-card 가 **정의되어 있고**
     rgba(23,26,40,.72) 라 폴백이 발동하지 않는다. 배너·모달은
     position:fixed 라 반투명이면 스크롤 콘텐츠가 글자를 통과한다.
     (홈 카드의 반투명은 우주 레이어가 비치도록 한 의도적 변경이라 되돌리지
      않는다 — 같은 토큰을 쓰는 이쪽만 분리한다.)

   글자·강조색은 var(페이지토큰, 리터럴) 로 둔다. 페이지가 정의했으면 따르고
   없으면 리터럴로 성립한다.
   ========================================================================= */
#dyu-cookie-banner,
#dyu-cookie-modal {
  --ccb-surface:    #171A28;                              /* 항상 불투명 */
  --ccb-gold:       var(--gold,        #B8975A);
  --ccb-gold-light: var(--gold-light,  #D4C5A0);
  --ccb-text:       var(--text,        #EDEAF3);
  --ccb-text-body:  var(--text-body,   rgba(237,234,243,.72));
  --ccb-text-muted: var(--text-muted,  rgba(237,234,243,.62));
  --ccb-on-gold:    #12141F;
}

/* ===== Cookie Consent Banner ===== */
#dyu-cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99998;
  background: var(--ccb-surface); border-top: 1px solid rgba(184,151,90,0.2);
  padding: 16px 24px;
  /* 배너는 어느 페이지에나 얹힌다. 그 페이지 body 에 color 가 없으면 초기값(검정)을
     상속해 다크에서 사라진다 — 실제로 report.html 에서 그랬다.
     얹히는 쪽에 기대지 않고 여기서 잡는다. */
  color: var(--ccb-text-body);
}
.ccb-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ccb-text { font-size: 13px; color: var(--ccb-text-body); line-height: 1.6; flex: 1; min-width: 200px; }
.ccb-link { color: var(--ccb-gold); margin-left: 6px; }
.ccb-btns { display: flex; gap: 8px; flex-shrink: 0; }
.ccb-btn {
  padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid rgba(184,151,90,0.3); transition: all 0.2s;
}
.ccb-btn--accept { background: var(--ccb-gold); color: var(--ccb-on-gold); border-color: var(--ccb-gold); }
.ccb-btn--accept:hover { background: var(--ccb-gold-light); }
.ccb-btn--reject { background: transparent; color: var(--ccb-text-body); }
.ccb-btn--reject:hover { background: rgba(255,255,255,0.05); color: var(--ccb-text); }
.ccb-btn--settings { background: transparent; color: var(--ccb-gold); }
.ccb-btn--settings:hover { background: rgba(184,151,90,0.1); }

/* Cookie Settings Modal */
#dyu-cookie-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
}
.ccm-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.72); }
.ccm-card {
  position: relative; background: var(--ccb-surface); border: 1px solid rgba(184,151,90,0.2);
  border-radius: 16px; padding: 32px; max-width: 480px; width: 90%; max-height: 80vh; overflow-y: auto;
}
.ccm-title { font-size: 18px; font-weight: 700; color: var(--ccb-text); margin: 0 0 24px; }
.ccm-group { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.ccm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(184,151,90,0.1);
}
.ccm-info { flex: 1; }
.ccm-info strong { font-size: 14px; color: var(--ccb-text); }
.ccm-info p { font-size: 12px; color: var(--ccb-text-muted); margin: 4px 0 0; line-height: 1.5; }
.ccm-always { font-size: 11px; color: var(--ccb-gold); font-weight: 600; white-space: nowrap; }
.ccm-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.ccm-toggle input { opacity: 0; width: 0; height: 0; }
.ccm-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(237,234,243,.14); border-radius: 24px; cursor: pointer; transition: 0.3s;
}
.ccm-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px;
  background: var(--ccb-text-muted); border-radius: 50%; transition: 0.3s;
}
.ccm-toggle input:checked + .ccm-slider { background: var(--ccb-gold); }
.ccm-toggle input:checked + .ccm-slider::before { transform: translateX(20px); background: var(--ccb-on-gold); }
.ccm-save { width: 100%; padding: 12px; font-size: 14px; }

@media (max-width: 600px) {
  .ccb-inner { flex-direction: column; text-align: center; }
  .ccb-btns { width: 100%; justify-content: center; }
}