/* ==========================================================================
   화살표 채우기 버튼 (Arrow Fill Button)
   components/ui/arrow-fill-button.tsx 를 React·Tailwind 없이 쓰도록 옮긴 버전입니다.

   - portal/arrow-fill-button.js 가 상담·신청 버튼을 찾아 .afb 클래스와
     오른쪽 동그라미 화살표를 붙입니다. (어떤 버튼에 붙는지는 JS 맨 위 목록 참고)
   - 마우스를 올리거나 키보드로 고르면, 휴대폰에서는 누르면
     오른쪽 동그라미가 버튼 전체로 퍼지고 화살표가 새로 들어옵니다.
   - 크기는 em 단위라서 각 버튼의 원래 글자 크기에 맞춰 자동으로 커지고 작아집니다.

   :not(#afb-x) 는 페이지에 없는 이름입니다. 기존 버튼 CSS(#section-… 선택자)보다
   이 파일이 먼저 적용되도록 우선순위만 올리는 장치이니 지우지 마세요.
   ========================================================================== */

/* ---------- 색상 (버튼 종류별) ---------- */
:root .afb--primary:not(#afb-x):not(#afb-x) {
  --afb-bg: #0071e3;
  --afb-text: #ffffff;
  --afb-border: #0071e3;
  --afb-fill: #ffffff;
  --afb-fill-text: #0071e3;
  --afb-arrow: #0071e3;
}
:root .afb--kakao:not(#afb-x):not(#afb-x) {
  --afb-bg: #fee500;
  --afb-text: #191919;
  --afb-border: #fee500;
  --afb-fill: #191919;
  --afb-fill-text: #fee500;
  --afb-arrow: #fee500;
}
:root .afb--green:not(#afb-x):not(#afb-x) {
  --afb-bg: #047857;
  --afb-text: #ffffff;
  --afb-border: #047857;
  --afb-fill: #ffffff;
  --afb-fill-text: #047857;
  --afb-arrow: #047857;
}
:root .afb--green-outline:not(#afb-x):not(#afb-x) {
  --afb-bg: var(--ap-tile, #ffffff);
  --afb-text: #047857;
  --afb-border: rgba(4, 120, 87, 0.45);
  --afb-fill: #047857;
  --afb-fill-text: #ffffff;
  --afb-arrow: #ffffff;
}
:root .afb--neutral:not(#afb-x):not(#afb-x) {
  --afb-bg: var(--ap-tile, #ffffff);
  --afb-text: var(--ap-text, #1d1d1f);
  --afb-border: var(--ap-hairline, #d2d2d7);
  --afb-fill: var(--ap-text, #1d1d1f);
  --afb-fill-text: var(--ap-tile, #ffffff);
  --afb-arrow: var(--ap-tile, #ffffff);
}
:root .afb--soft:not(#afb-x):not(#afb-x) {
  --afb-bg: var(--ap-blue-soft, rgba(0, 113, 227, 0.09));
  --afb-text: var(--ap-link, #0066cc);
  --afb-border: transparent;
  --afb-fill: #0071e3;
  --afb-fill-text: #ffffff;
  --afb-arrow: #ffffff;
}
:root .afb--orange:not(#afb-x):not(#afb-x) {
  --afb-bg: #ea580c;
  --afb-text: #ffffff;
  --afb-border: #ea580c;
  --afb-fill: #ffffff;
  --afb-fill-text: #ea580c;
  --afb-arrow: #ea580c;
}
[data-theme="dark"] .afb--green-outline:not(#afb-x):not(#afb-x) {
  --afb-text: #34d399;
  --afb-border: rgba(52, 211, 153, 0.45);
  --afb-fill: #34d399;
  --afb-fill-text: #04261b;
  --afb-arrow: #04261b;
}

/* ---------- 버튼 몸통 ---------- */
:root .afb:not(#afb-x):not(#afb-x) {
  --afb-circle: 2.25em;
  --afb-gap: 0.3em;
  --afb-iy: calc((100% - var(--afb-circle)) / 2);
  --afb-ease: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --afb-dur: 450ms;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: calc(var(--afb-circle) + var(--afb-gap) * 2 + 2px);
  padding: 0.5em calc(var(--afb-circle) + var(--afb-gap) + 0.95em) 0.5em 1.45em;
  border: 1px solid var(--afb-border);
  border-radius: 999px;
  background: var(--afb-bg);
  color: var(--afb-text);
  box-shadow: none;
  filter: none;
  transform: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: none; /* 기존 'transition: all' 이 모양 바뀜을 천천히 보여주지 않도록 */
}
:root .afb--block:not(#afb-x):not(#afb-x) { display: flex; }
:root .afb--inline:not(#afb-x):not(#afb-x) { display: inline-flex; vertical-align: middle; }

/* 기존 버튼이 쓰던 장식(반짝임, › 표시, 그래디언트 카드 화살표 등)은 끄고 동그라미 채우기로 바꿉니다 */
:root .afb:not(#afb-x):not(#afb-x)::after { content: none; }
:root .afb:not(#afb-x):not(#afb-x) .ext-arrow,
:root .afb:not(#afb-x):not(#afb-x) .gradient-card-arrow { display: none !important; }

/* 퍼지는 동그라미 (처음에는 오른쪽 동그라미 크기) */
:root .afb:not(#afb-x):not(#afb-x)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--afb-iy);
  right: var(--afb-gap);
  bottom: var(--afb-iy);
  left: calc(100% - var(--afb-gap) - var(--afb-circle));
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--afb-fill);
  box-shadow: none;
  opacity: 1;
  transform: none;
  animation: none;
  pointer-events: none;
}

/* 글자 (원래 버튼 안의 글자·아이콘을 그대로 감쌉니다) */
:root .afb:not(#afb-x):not(#afb-x) > .afb-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  min-width: 0;
  color: var(--afb-text);
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  text-wrap: balance;
  pointer-events: none;
}
:root .afb:not(#afb-x):not(#afb-x) > .afb-label * { color: inherit; }

/* 오른쪽 동그라미 + 화살표 두 개 (하나는 나가고, 하나는 들어옵니다) */
:root .afb:not(#afb-x):not(#afb-x) > .afb-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--afb-gap);
  width: var(--afb-circle);
  height: var(--afb-circle);
  margin-top: calc(var(--afb-circle) / -2);
  overflow: hidden;
  border-radius: 999px;
  background: var(--afb-fill);
  color: var(--afb-arrow);
  pointer-events: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
:root .afb:not(#afb-x):not(#afb-x) .afb-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 48%;
  height: 48%;
  transform-origin: center;
}
:root .afb:not(#afb-x):not(#afb-x) .afb-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root .afb:not(#afb-x):not(#afb-x) .afb-arrow--in { transform: translate(-170%, -50%) scale(0); }
:root .afb:not(#afb-x):not(#afb-x) .afb-arrow--out { transform: translate(-50%, -50%) scale(1); }

/* ---------- 움직임 (페이지를 연 직후에는 깜빡이지 않도록 준비된 뒤에만 켭니다) ---------- */
:root .afb.afb-ready:not(#afb-x):not(#afb-x)::before {
  transition-property: top, right, bottom, left;
  transition-duration: var(--afb-dur);
  transition-timing-function: var(--afb-ease);
}
:root .afb.afb-ready:not(#afb-x):not(#afb-x) > .afb-label {
  transition: color 270ms ease 70ms;
}
:root .afb.afb-ready:not(#afb-x):not(#afb-x) .afb-arrow {
  transition: transform var(--afb-dur) var(--afb-ease);
}

/* ---------- 채워진 상태: 마우스 올림 / 키보드 선택 / 휴대폰 누름 ---------- */
@media (hover: hover) {
  :root .afb:not(#afb-x):not(#afb-x):not(:disabled):hover {
    background: var(--afb-bg);
    box-shadow: none;
    filter: none;
    transform: none;
  }
  :root .afb:not(#afb-x):not(#afb-x):not(:disabled):hover::before {
    top: 0; right: 0; bottom: 0; left: 0;
  }
  :root .afb:not(#afb-x):not(#afb-x):not(:disabled):hover > .afb-label {
    color: var(--afb-fill-text);
  }
  :root .afb:not(#afb-x):not(#afb-x):not(:disabled):hover .afb-arrow--in {
    transform: translate(-50%, -50%) scale(1);
  }
  :root .afb:not(#afb-x):not(#afb-x):not(:disabled):hover .afb-arrow--out {
    transform: translate(70%, -50%) scale(0);
  }
}
:root .afb:not(#afb-x):not(#afb-x):focus-visible::before,
:root .afb[data-afb-pressed="true"]:not(#afb-x):not(#afb-x)::before {
  top: 0; right: 0; bottom: 0; left: 0;
}
:root .afb:not(#afb-x):not(#afb-x):focus-visible > .afb-label,
:root .afb[data-afb-pressed="true"]:not(#afb-x):not(#afb-x) > .afb-label {
  color: var(--afb-fill-text);
}
:root .afb:not(#afb-x):not(#afb-x):focus-visible .afb-arrow--in,
:root .afb[data-afb-pressed="true"]:not(#afb-x):not(#afb-x) .afb-arrow--in {
  transform: translate(-50%, -50%) scale(1);
}
:root .afb:not(#afb-x):not(#afb-x):focus-visible .afb-arrow--out,
:root .afb[data-afb-pressed="true"]:not(#afb-x):not(#afb-x) .afb-arrow--out {
  transform: translate(70%, -50%) scale(0);
}
:root .afb:not(#afb-x):not(#afb-x):focus-visible {
  outline: 3px solid rgba(0, 125, 250, 0.45);
  outline-offset: 2px;
}
:root .afb:not(#afb-x):not(#afb-x):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- 머리글(맨 위 메뉴줄)의 작은 버튼: 카톡 상담 · 수어 통화 ---------- */
:root .afb--xs:not(#afb-x):not(#afb-x) {
  --afb-circle: 22px;
  --afb-gap: 3px;
  min-height: 28px;
  padding: 0 calc(22px + 3px + 7px) 0 11px;
}
:root .afb--xs:not(#afb-x):not(#afb-x) > .afb-label { white-space: nowrap; }

/* 움직임 줄이기 설정을 켠 분께는 애니메이션 없이 바로 바뀝니다 */
@media (prefers-reduced-motion: reduce) {
  :root .afb.afb-ready:not(#afb-x):not(#afb-x)::before,
  :root .afb.afb-ready:not(#afb-x):not(#afb-x) > .afb-label,
  :root .afb.afb-ready:not(#afb-x):not(#afb-x) .afb-arrow { transition: none; }
}