/* ==========================================================================
   cookie — 쿠키 설정 모달 내용 (시안 node 136:578)

   카테고리 다섯 줄. 첫 줄(Strictly Necessary)은 끌 수 없어 스위치 대신
   "Always Active" 글자만 둔다. 나머지 넷은 스위치로 켜고 끈다.
   + 를 누르면 설명이 펼쳐지고 − 로 바뀐다.
   ========================================================================== */

/* 높이를 아예 고정한다 — 아코디언을 펴고 접어도 창 크기가 1px 도 변하지 않는다.
   화면이 860px 보다 낮으면 화면에 맞춘다. */
#cookie-settings .modal__dialog {
  height: min(860px, calc(100vh - var(--sp-10)));
  height: min(860px, calc(100dvh - var(--sp-10)));
}

/* 아코디언이 열려도 모달은 커지지 않는다 — 안쪽 .cookie__scroll 만 늘어난다.
   버튼 줄은 스크롤 밖에 있어 항상 보인다. */
.cookie {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cookie__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-10);
  min-height: 0;
  /* 시안 그대로 30px. 토큰 32px 를 쓰면 412 + 64 = 476 이 되어
     다이얼로그 폭 472 를 넘겨 가로 스크롤이 생긴다. */
  padding: 14px 30px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- 윗단 — 로고 · 안내문 · Allow All --------------------------------------- */

.cookie__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: flex-start;
}

.cookie__brand {
  width: 100%;
  padding: 14px 10px;
  border-bottom: 1px solid rgb(0 0 0 / .06);
}
.cookie__brand-img { display: block; width: 128px; height: 12px; }

.cookie__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: #464646;
}

.cookie__title {
  font-size: var(--fs-lg);       /* 18px */
  font-weight: var(--fw-bold);
  line-height: 20px;
}

/* 시안은 12px 이지만 읽기 어려워 14px 로 키웠다.
   행간은 시안 비율(20/12 = 1.67)을 그대로 쓴다. */
.cookie__desc {
  font-size: var(--fs-base);     /* 14px */
  font-weight: var(--fw-regular);
  line-height: 1.67;
}
.cookie__desc > p + p { margin-top: 10px; }

/* 시안에는 없다 — 전달받은 문구에 있어 추가했다 */
.cookie__notice {
  align-self: flex-start;
  color: var(--c-blue-deep);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  text-decoration: underline;
}
.cookie__notice:hover { text-decoration: none; }

/* --- 아랫단 — 카테고리 목록 · 버튼 ------------------------------------------ */

.cookie__prefs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.cookie__prefs-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cookie__list { border-collapse: collapse; }

/* --- 카테고리 한 줄 --------------------------------------------------------- */

.cookie-cat + .cookie-cat { margin-top: -1px; }   /* 테두리가 겹쳐 두 줄로 보이지 않게 */

.cookie-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 15px;
  border: 1px solid #eaeaea;
}

.cookie-cat__trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #464646;
  text-align: left;
}
.cookie-cat__trigger:hover .cookie-cat__name { color: var(--c-blue-deep); }

/* + · − 기호. 펼침 상태는 JS 가 aria-expanded 로 알려 준다 */
.cookie-cat__sign {
  flex: 0 0 auto;
  width: 14px;
  color: var(--c-blue-deep);
  font-size: var(--fs-base);     /* 14px */
  font-weight: var(--fw-semibold);
  line-height: 20px;
  text-align: center;
}
.cookie-cat__sign::before { content: "+"; }
.cookie-cat__trigger[aria-expanded="true"] .cookie-cat__sign::before { content: "\2212"; }

.cookie-cat__name {
  font-size: var(--fs-base);     /* 14px `[2026-09-18]` — 12px 는 모바일에서 읽기 작다 */
  font-weight: var(--fw-semibold);
  line-height: 20px;
}

.cookie-cat__always {
  flex: 0 0 auto;
  color: var(--c-blue-deep);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 20px;
}

.cookie-cat__body {
  padding: var(--sp-3) 15px;
  background: var(--c-chip-off);
  border: 1px solid #eaeaea;
  border-top: 0;
  color: #464646;
  font-size: var(--fs-base);     /* 14px `[2026-09-18]` — 12px 는 본문으로 읽기 작다 */
  font-weight: var(--fw-regular);
  line-height: 22px;
}
.cookie-cat__body > p + p { margin-top: 10px; }

/* --- 스위치 ----------------------------------------------------------------- */
/* 시안은 켜짐·꺼짐 두 장의 SVG 다. 눌러서 바뀌어야 하므로 CSS 로 그렸다.
   크기·색은 시안 그대로 — 43×20, 켜짐 #0057C9 / 꺼짐 #989898 */

.switch {
  /* 숨긴 체크박스가 **이 이름표 안에** 뜨게 한다 `[2026-09-21]`.
     기준이 될 조상이 없으면 position: absolute 는 저 위 .modal__dialog 를
     기준으로 잡는다. 그 상자는 스크롤되지 않으므로 목록만 밀려 내려가고
     체크박스는 제자리에 남는다 — 스위치를 누르면 초점이 그리로 옮겨 가고,
     브라우저가 그것을 보이게 하려고 목록을 통째로 끌어올렸다 */
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* 눈에 보이는 것은 트랙이고 진짜 입력 요소는 그 뒤에 숨는다 —
   키보드·스크린리더는 이쪽을 쓴다.

   1px 짜리로 접어 두지 않고 **트랙을 그대로 덮는다** `[2026-09-21]`.
   작게 접어 두면 초점이 그리로 갈 때 브라우저가 그 자리를 보이게 하려고
   스크롤을 움직인다 — 덮어 두면 눌린 자리가 곧 그 자리라 움직일 이유가 없다.
   누르는 것도 이름표를 거치지 않고 입력 요소가 직접 받는다 */
.switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__track {
  position: relative;
  display: block;
  width: 43px;
  height: 20px;
  background: #989898;
  border-radius: 999px;
  transition: background-color .18s ease;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--c-bg);
  border-radius: 50%;
  transition: transform .18s ease;
}

.switch__input:checked + .switch__track { background: var(--c-blue-deep); }
.switch__input:checked + .switch__track::after { transform: translateX(23px); }

/* 포커스 링을 없애지 않는다 — 입력 요소가 화면에서 숨겨져 있으므로 트랙에 그린다 */
.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--c-blue-deep);
  outline-offset: 2px;
}

/* --- 버튼 ------------------------------------------------------------------- */

/* 버튼 둘은 **한 줄**로 둔다 `[2026-09-18]`.
   375px 에서 줄바꿈되면 "Confirm My Choices" 만 아래로 떨어져 두 번 읽힌다.
   좁아지면 버튼이 같이 줄어들도록 min-width 를 풀고 좌우 여백만 줄인다 */
.cookie__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-5) 30px;
  background: var(--c-bg);
  border-top: 1px solid rgb(0 0 0 / .06);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* 시안 — 좌우 24px / 위아래 6px / 글자 14px / 행간 20px */
.btn--xs {
  padding: 6px var(--sp-6);
  font-size: var(--fs-base);
  line-height: 1.43;
}

/* 좁은 화면 — 한 줄에 들어가도록 여백만 줄인다. 글자는 그대로 둔다 */
@media (max-width: 480px) {
  .cookie__actions { padding: var(--sp-4) var(--sp-4); }
  .cookie__actions .btn { min-width: 0; padding-left: var(--sp-4); padding-right: var(--sp-4); }

  /* 줄은 하나로 유지한다 `[2026-09-18]`. 스위치·Always Active 는 **늘 오른쪽 끝**이고,
     자리가 모자라면 아래로 내려보내지 않고 이름을 두 줄로 접는다 —
     조작하는 것이 줄마다 다른 자리에 있으면 누를 곳을 매번 찾아야 한다 */
  .cookie-cat__head { flex-wrap: nowrap; }
  .cookie-cat__trigger { min-width: 0; }
  .cookie-cat__name { white-space: normal; }
  .cookie-cat__always,
  .cookie-cat__head .switch { margin-left: auto; }

  /* 좁은 화면에서는 스위치를 한 치수 줄인다 — 이름에 줄 폭을 내준다 */
  .switch__track { width: 36px; height: 18px; }
  .switch__track::after { width: 14px; height: 14px; }
  .switch__input:checked + .switch__track::after { transform: translateX(18px); }
}

@media (min-width: 768px) {
  .cookie__desc { max-width: 412px; }
  /* max-width 로 둔다 — 화면이 좁아도 절대 넘치지 않는다 */
  .cookie__prefs { width: 412px; max-width: 100%; }
}