/* ============================================================
   Cookiebot (Usercentrics) 동의 배너 — LLM Capsule 코너 카드 스킨
   - 2026-08-19 리디자인: 공홈(cubig.ai) 코너카드 컨셉을 캡슐 브랜드(블루·pill)로 이식.
     쿠키봇 설정: Layout=Dialog / Style effect=None(오버레이 제거) /
     Buttons="Reject all / Selection / Allow all" (거부 첫 화면 노출 = GDPR 다크패턴 회피)
   - 캡슐 브랜드: 채움 #1A6FFF / hover #1458D4 · 잉크 #0F1130 · muted #6B7280 · 버튼 pill(999px).
   - 배너는 플러그인이 JS로 주입 → 라이브에서만 노출(로컬 미리보기 X). 라이브 style 주입으로 검증.
   - html 접두사 + !important로 플러그인 주입 스타일을 우선 적용.
   ============================================================ */

/* 폰트 = 캡슐 서체 (배너 전체) */
html #CybotCookiebotDialog,
html #CybotCookiebotDialog * {
  font-family: 'Inter', 'Pretendard', system-ui, -apple-system, sans-serif !important;
}

/* 코너 카드: 중앙 고정 해제 → 우하단. (쿠키봇 Dialog엔 Position 옵션이 없어 CSS로 배치) */
html #CybotCookiebotDialog {
  top: auto !important;
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  transform: none !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: 420px !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(15, 17, 48, .18), 0 3px 10px rgba(15, 17, 48, .08) !important;
  border: 1px solid rgba(15, 17, 48, .07) !important;
  overflow: hidden !important;
}
/* 모바일: 쿠키봇이 자체 풀폭 바텀시트로 전환 → 코너 배치만 해제 */
@media (max-width: 600px) {
  html #CybotCookiebotDialog {
    right: 8px !important;
    bottom: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
  }
}

/* 타이포 위계 */
html #CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F1130 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
}
html #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: #6B7280 !important;
}

/* 버튼 공통 — pill(999px, 캡슐 스타일), 그림자 제거 */
html #CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

/* Primary = Allow all → 채움 블루 */
html #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  background: #1A6FFF !important;
  border-color: #1A6FFF !important;
  color: #fff !important;
}
html #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover {
  background: #1458D4 !important;
  border-color: #1458D4 !important;
}

/* Secondary = 거부 / 선택 허용 / 커스터마이즈 → 아웃라인 (거부도 또렷하게 = 다크패턴 회피) */
html #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline,
html #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
html #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonCustomize {
  background: #fff !important;
  color: #0F1130 !important;
  border-color: rgba(15, 17, 48, .18) !important;
}
html #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline:hover,
html #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
html #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonCustomize:hover {
  border-color: rgba(15, 17, 48, .4) !important;
}

/* 토글: 축소(78%) + ON 블루 / OFF 연회색 */
html #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
  transform: scale(.78);
  transform-origin: center; /* 라벨 아래 중앙 정렬(동의 탭 4열 그리드) — left-origin이면 왼쪽으로 쏠림 */
  background-color: #d8d8d8 !important;
}
html #CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #1A6FFF !important;
}
@media (max-width: 600px) {
  html #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider { transform: scale(.7); }
}
/* 토글 라벨·설명 살짝 축소 */
html #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonWrapper label,
html #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription {
  font-size: 12.5px !important;
}

/* 탭(동의/세부/소개) 활성 = 블루 */
html #CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
html #CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  color: #1A6FFF !important;
  border-bottom-color: #1A6FFF !important;
}

/* 링크(Show details 등) → 블루 */
html #CybotCookiebotDialog a { color: #1A6FFF !important; }

/* Cookiebot 로고 → 연회색(존재감 축소; 완전 제거는 유료 플랜 설정) */
html #CybotCookiebotDialog #CybotCookiebotDialogPoweredbyCybot,
html #CybotCookiebotDialog #CybotCookiebotDialogPoweredbyCybot svg,
html #CybotCookiebotDialog .CybotCookiebotDialogPoweredbyCybot {
  filter: grayscale(1) !important;
  opacity: .32 !important;
}