/* =========================================================
   외부 로그인 버튼 (구글 · 네이버 · 카카오)

   로그인 화면과 홈 첫 화면이 함께 씁니다. 그래서 어느 한쪽의 페이지
   CSS 가 아니라 여기에 둡니다.

   클래스 이름(.providers, .provider, .Google ...)은 기존 것을 그대로
   씁니다. 이름이 서버에서 나오기 때문입니다.

       <button class="provider @provider.Name">   // provider.Name = Google | Naver | Kakao

   로고는 각 서비스의 자산이라 우리 아이콘 세트로 바꾸지 않고, 기존
   스프라이트 이미지(provider_sm.png)를 그대로 씁니다.

   common.css 가 .providers 에 padding: 50px 0 30px, .provider 에
   margin: 0 20px 를 걸어 둡니다. 그대로 두면 로고 줄 위아래가 크게
   벌어지고 버튼이 한 줄에 들어가지 않아서 여기서 되돌립니다.
   ========================================================= */

.pd-root .providers {
  display: flex;
  justify-content: center;
  gap: var(--pd-space-2);
  flex-wrap: wrap;
  padding: 0;
}
/* 방향을 못 박아 둡니다. 이 폼은 남의 카드 안에 들어가는 일이 많아서,
   바깥에서 폼을 세로로 세우는 규칙에 휩쓸리기 쉽습니다. */
.pd-root .providers form {
  display: flex;
  flex-direction: row;
  gap: var(--pd-space-2);
  width: 100%;
  /* common.css 가 `.providers .provider form` 을 로고 위에 절대배치하고
     hover 에서만 띄웁니다. 옛 SNS연결 화면이 로고 위에 X 이미지를 겹쳐
     보여 주던 방식입니다. 여기서는 해지 버튼을 눌러서 쓰므로 되돌립니다.
     (X 이미지 자체는 .remove-provider 에 걸리므로 그 이름을 쓰지 않습니다.) */
  position: static;
}

/* 같은 이유로 hover 규칙(.providers .provider:hover form)도 덮어 둡니다.
   그대로 두면 마우스를 올릴 때만 display 가 block 으로 바뀝니다. */
.pd-root .providers .provider:hover form { display: flex; }

.pd-root .providers .provider {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 셋이 한 줄에 들어가야 한다. 여백이 크면 최소 폭이 커져 접힌다. */
  gap: var(--pd-space-1);
  margin: 0;
  padding: var(--pd-space-2);
  background: var(--pd-surface);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-md);
  color: var(--pd-text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--pd-dur) var(--pd-ease), background-color var(--pd-dur) var(--pd-ease);
}
.pd-root .providers .provider:hover { border-color: var(--pd-border-hover); background: var(--pd-surface-sunken); }
.pd-root .providers .provider:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pd-root .providers .provider i {
  display: block;
  width: 30px; height: 30px;
  /* common.css 가 margin-bottom: 10px 를 걸고 있습니다 — 로고 **아래**에 이름을
     두던 옛 배치의 여백입니다. 지금은 이름이 로고 옆이거나(로그인 화면) 아예
     없어서(홈), 그 10px 이 로고를 5px 위로 밀어 올릴 뿐입니다. */
  margin-bottom: 0;
  background-image: url('/images/provider_sm.png');
  background-size: 90px 30px;
  flex: 0 0 auto;
}
.pd-root .providers .provider.Google i { background-position-x: 0; }
.pd-root .providers .provider.Naver i { background-position-x: -30px; }
.pd-root .providers .provider.Kakao i { background-position-x: -60px; }
.pd-root .providers .provider p { font-size: 13px; white-space: nowrap; }


/* ---------------------------------------------------------
   타일 배치 (.providers--tile) — 내정보 > SNS연결

   리뉴얼 전 배치입니다. 60px 로고 아래에 이름을 둡니다.

   기본 배치는 로그인 화면처럼 좁은 칸에 셋을 한 줄로 밀어 넣는 자리를
   위한 것입니다. flex: 1 로 늘리기 때문에 SNS연결처럼 넓은 카드
   (container-sm = 1280px) 안에서는 한 칸이 400px 짜리 가로 막대가 되고,
   그 안에 30px 로고만 남아 버튼이 실제보다 작아 보였습니다.
   --------------------------------------------------------- */
.pd-root .providers--tile {
  justify-content: center;
  gap: var(--pd-space-5);
  padding: var(--pd-space-4) 0;
}
.pd-root .providers--tile form {
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pd-space-5);
}
.pd-root .providers--tile .provider {
  /* 늘이지 않는다. 로고 크기가 버튼 크기를 정한다. */
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--pd-space-2);
  min-width: 96px;
  padding: var(--pd-space-3);
  /* 리뉴얼 전에는 테두리도 배경도 없었다. */
  border-color: transparent;
  background: transparent;
}
/* hover 에도 상자를 띄우지 않는다. 기본 배치(.provider:hover)의 테두리·배경을
   그대로 두면 로고 뒤에 네모가 떠서, 로고만 놓인 이 배치에서는 군더더기다.
   기본 규칙과 명시도가 같으므로 순서로 이긴다. */
.pd-root .providers--tile .provider:hover {
  border-color: transparent;
  background: transparent;
}
/* 연동된 계정 쪽 .provider 는 div 다. 누를 수 없으니 손 모양도 주지 않는다. */
.pd-root .providers--tile div.provider { cursor: default; }
.pd-root .providers--tile .provider i {
  /* 60px 스프라이트(provider.png)를 쓴다. provider_sm.png 는 30px 판이다. */
  width: 60px; height: 60px;
  background-image: url('/images/provider.png');
  background-size: 180px 60px;
}
.pd-root .providers--tile .provider.Google i { background-position-x: 0; }
.pd-root .providers--tile .provider.Naver i { background-position-x: -60px; }
.pd-root .providers--tile .provider.Kakao i { background-position-x: -120px; }
.pd-root .providers--tile .provider p { font-size: 12px; }

/* 해지 버튼은 이름 아래 한 줄을 차지한다. 로고 옆에 두면 타일이 옆으로
   퍼져서, 셋이 한 줄에 들어가지 않는다. (좁은 화면 기준. 마우스가 있는
   화면에서는 아래에서 로고 위 X 로 바꾼다.) */
.pd-root .providers--tile .provider form { width: 100%; justify-content: center; }

/* --- 마우스가 있는 화면: 로고 위 X (리뉴얼 전 방식) ------------------
   해지 버튼이 흐름에서 빠지므로 「연동 추가」 타일과 「연동된 계정」 타일의
   높이가 같아진다. 버튼을 이름 아래 두면 두 카드의 줄 높이가 어긋난다.

   hover 가 없는 기기는 제외한다. 터치에서는 X 를 띄울 방법이 없어 해지가
   아예 불가능해진다 — 그쪽은 위의 「연동 해지」 버튼 그대로다. */
@media (min-width: 641px) and (hover: hover) {
  .pd-root .providers--tile .provider { position: relative; }
  .pd-root .providers--tile .provider form {
    position: absolute;
    /* 이름 줄은 덮지 않는다. 로고 자리에만 겹친다. */
    inset: var(--pd-space-3) 0 auto 0;
    width: auto;
    align-items: flex-start;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pd-dur) var(--pd-ease);
  }
  /* 키보드로도 닿아야 한다. hover 만 두면 탭으로는 해지할 수 없다. */
  .pd-root .providers--tile .provider:hover form,
  .pd-root .providers--tile .provider:focus-within form {
    opacity: 1;
    pointer-events: auto;
  }
  .pd-root .providers--tile .provider form .pd-btn {
    width: 60px; height: 60px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url('/images/provider_remove.png') center / 60px 60px no-repeat;
    /* 글자는 지우지 않고 감춘다. 낭독기는 「연동 해지」를 그대로 읽는다. */
    font-size: 0;
    color: transparent;
  }
  /* pd-btn--outline:hover 가 background 를 통째로 다시 쓴다. 그대로 두면
     X 이미지가 회색 네모로 바뀐다. 같은 shorthand 로 되돌린다. */
  .pd-root .providers--tile .provider form .pd-btn:hover {
    background: url('/images/provider_remove.png') center / 60px 60px no-repeat;
    border-color: transparent;
  }
  .pd-root .providers--tile .provider form .pd-btn:focus-visible { box-shadow: var(--pd-focus-ring); }
}

/* 좁은 화면. 리뉴얼 전에는 이 화면에 모바일 규칙이 아예 없어서, 로고가
   20px 씩 벌어진 채 한 줄을 넘겼다. 여기서는 한 줄을 셋이 고르게 나눈다. */
@media (max-width: 640px) {
  .pd-root .providers--tile { gap: var(--pd-space-2); padding: var(--pd-space-2) 0; }
  .pd-root .providers--tile form { width: 100%; gap: var(--pd-space-2); }
  .pd-root .providers--tile .provider {
    flex: 1 1 0;
    /* 0 으로 두지 않으면 로고 60px 이 최소 폭이 되어 셋이 한 줄을 넘긴다. */
    min-width: 0;
    padding: var(--pd-space-2);
  }
  /* 손가락이 닿을 자리를 만든다. 로고만으로는 세로 60px 이라 모자란다. */
  .pd-root .providers--tile button.provider { min-height: 88px; }
  /* 해지 버튼도 44px 를 채운다. pd-btn--sm 은 마우스 기준 높이다. */
  .pd-root .providers--tile .provider form .pd-btn {
    width: 100%;
    min-height: 44px;
    padding-inline: var(--pd-space-1);
  }
}

/* 이름은 감추지 않는다. 연동된 계정 쪽 타일에서는 이 글자가 유일한 이름이라,
   지우면 로고 이미지만 남아 낭독기로 무엇이 연동됐는지 알 수 없다.
   대신 아주 좁은 폭에서 타일을 넘치지 않게 자른다. (base 에서 nowrap 이다) */
.pd-root .providers--tile .provider p {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}