/* FO-ETC-05-01-001 Cookiebot 상세 설정 창(Cookies Setting)을 퍼블 톤으로 맞춤
   - 퍼블 CSS(common_en/css)는 퍼블팀 관리 파일이라 수정하지 않고 이 파일에서 Cookiebot 기본 스타일을 덮어쓴다.
   - Cookiebot 스타일은 스크립트가 나중에 주입하므로 id 를 두 번 겹쳐(#id#id) 우선순위를 높인다.
   - 색·크기 값은 퍼블 토큰(common.css :root)을 그대로 참조한다. */

/* 첫 동의는 퍼블 .cookie-pop이 담당하며, Cookiebot 기본 배너는 html.cb-dialog-open일 때만(Cookies Setting 상세 설정) 노출 */
html:not(.cb-dialog-open) #CybotCookiebotDialog {
  display: none !important;
}

/* 배너 — 우하단 고정 카드 (퍼블 .cookie-pop) */
#CybotCookiebotDialog#CybotCookiebotDialog {
  top: auto;
  left: auto;
  right: 40rem;
  bottom: 40rem;
  transform: none;
  width: 620rem;
  max-width: calc(100% - 80rem);
  max-height: calc(100% - 80rem);
  padding: 40rem;
  background: var(--color-bg-default-white, #fff);
  border: 1px solid var(--color-line-low, #e8e8e8);
  border-radius: var(--radius-600, 24rem);
  box-shadow: none;
  font-family: var(--font-family-eng, "Inter", sans-serif);
  letter-spacing: normal;
  color: var(--color-text-default-medium, #535455);
}
#CybotCookiebotDialog#CybotCookiebotDialog .CybotCookiebotDialogContentWrapper,
#CybotCookiebotDialog#CybotCookiebotDialog .CybotCookiebotScrollContainer {
  padding: 0;
}

/* 본문 문구 — Cookiebot 기본 높이 제한(내부 스크롤) 해제, 넘치면 배너(max-height) 기준으로 스크롤 */
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBody .CybotCookiebotScrollContainer,
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyContent {
  max-height: none;
}
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
  font-family: var(--font-family-eng, "Inter", sans-serif);
  font-size: var(--type-b4, 16rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--lh-body, 1.4);
  color: var(--color-text-default-highest, #111);
}
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText {
  font-size: var(--type-b4, 16rem);
  line-height: var(--lh-body, 1.4);
  color: var(--color-text-default-medium, #535455);
}

/* 버튼 — 퍼블 순서(수락 → 거부 → 설정), 수락은 btn--primary h48 hug, 나머지는 텍스트 버튼 */
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 16rem 32rem;
}
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper .CybotCookiebotDialogBodyButton {
  width: auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-eng, "Inter", sans-serif);
  font-size: var(--type-b4, 16rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--lh-body, 1.4);
}
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  order: -1;
  height: 48rem;
  padding: 0 24rem;
  color: #fff;
  background: var(--color-btn-default-primary, #1475e7);
  border: 1px solid var(--color-btn-default-primary, #1475e7);
  border-radius: 999rem;
}
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline {
  order: 1;
}
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  order: 2;
}
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  height: auto;
  padding: 0;
  color: var(--color-text-default-highest, #111);
  background: none;
  border: 0;
}
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline:hover,
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline:focus-visible,
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:focus-visible {
  color: var(--color-text-point-default, #1475e7);
}
/* 텍스트 버튼 뒤 체브론(›) — 퍼블 .cookie-pop__txtbtn i */
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline::after,
#CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection::after {
  content: "";
  display: inline-block;
  width: 7rem;
  height: 7rem;
  margin-left: 10rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-2rem) rotate(45deg);
}

@media (max-width: 1024px) {
  /* 모바일 — 하단 풀폭 (퍼블 .cookie-pop 모바일) */
  #CybotCookiebotDialog#CybotCookiebotDialog {
    right: 16rem;
    bottom: 16rem;
    left: 16rem;
    width: auto;
    max-width: none;
    max-height: calc(100% - 32rem);
    padding: 32rem 24rem;
  }
  #CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper {
    gap: 16rem 24rem;
  }
}