@charset "UTF-8";
/* =====================================================================================
   헤더 대표전화 버튼 애니메이션
   -------------------------------------------------------------------------------------
   관리자 설정 : conf/info.xml 의 btn_tel_anim (A / B / N, 기본 A)
   마크업      : include/header.html 의 .tel 에 tel-anim-a | tel-anim-b | tel-anim-n

     A · 은은한 광택   버튼 위로 빛이 한 번 스쳐 지나간다 (6s 주기, 실제 움직임 약 2.4s)
     B · 전화기 흔들림 수화기 아이콘이 감쇠하며 살짝 떨린다 (6s 주기, 실제 움직임 약 0.9s)
     N · 사용 안 함    아무 효과 없음

   [★ 햄버거 버튼과의 시차]
     css/header.css 의 headerBurgerNudge(햄버거 시선유도)와 주기를 6s 로 통일했다.
     주기가 서로 다르면 위상이 밀려 결국 두 요소가 동시에 움직이는 순간이 생긴다.
       햄버거 : 5% ~ 20%  (0.3s ~ 1.2s)   앞구간
       전화 A : 60% ~ 100% (3.6s ~ 6.0s)  뒷구간
       전화 B : 82% ~ 97%  (4.9s ~ 5.8s)  뒷구간
     한쪽 주기를 바꾸면 반드시 다른 쪽도 함께 맞출 것.

   [왜 별도 파일인가]
     css/header.css 는 다른 작업자가 동시 수정 중이라 손대지 않는다.
     이 파일은 header.css 뒤에 로드되어 덮어쓰기가 아니라 "추가"만 한다.

   [특이도 메모]
     header.css 기본 규칙 : .xet-layout .layout__header .tel > span  =  (0,3,0)
     이 파일 규칙         : .xet-layout .layout__header .tel.tel-anim-* > span = (0,4,0)
     position/overflow/animation 은 header.css 가 건드리지 않지만,
     로드 순서가 바뀌어도 안전하도록 한 단계 높여 두었다.

   [톤]  벤치마킹 대상(prugio-riverfront.com) 기준. 과하면 촌스러워지므로
         진폭은 작게, 주기는 여유롭게. 계속 움직이지 않고 대부분의 시간은 정지 상태다.

   [주의]  새 CSS 변수를 만들지 않는다. 색상은 흰빛 하이라이트(rgba)만 쓰므로
           테마색(--theme-color)이 무엇으로 바뀌어도 그대로 어울린다.
   ===================================================================================== */


/* =====================================================================================
   A · 은은한 광택 (shimmer)
   -------------------------------------------------------------------------------------
   버튼 안쪽(span)에 기울어진 밝은 띠를 만들어 좌 -> 우로 한 번 흘려보낸다.
   overflow:hidden 이 border-radius 를 따라가므로 헤더 스타일 B 의 알약형(999px)에서도
   모서리 밖으로 새지 않는다.
   quickbutton.css 의 quickbtnShimmer 와는 이름·주기·진폭이 모두 다르다(이름 충돌 회피).
   ===================================================================================== */
@keyframes headerTelShine {
  0%, 62% {
    opacity: 0;
    transform: translateX(-180%) skewX(-20deg);
  }
  68% {
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(260%) skewX(-20deg);
  }
}

.xet-layout .layout__header .tel.tel-anim-a > span {
  position: relative;
  overflow: hidden;
}
.xet-layout .layout__header .tel.tel-anim-a > span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  /* 모바일은 배경이 투명한 테두리 박스라 흰 띠가 강하면 지저분해진다 -> 옅게 */
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transform: translateX(-180%) skewX(-20deg);
  animation: headerTelShine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
/* 아이콘·번호가 띠에 묻히지 않도록 위로 올린다 (span 은 flex, i/strong 이 직계 자식) */
.xet-layout .layout__header .tel.tel-anim-a > span > i,
.xet-layout .layout__header .tel.tel-anim-a > span > strong {
  position: relative;
  z-index: 2;
}


/* =====================================================================================
   B · 전화기 흔들림 (수화기 아이콘만)
   -------------------------------------------------------------------------------------
   모바일에서는 strong(번호 텍스트)이 display:none 이라 아이콘만 보인다.
   그래서 "버튼 전체"가 아니라 "아이콘"을 흔든다 -> 모바일 아이콘 전용 상태에서도 동일하게 자연스럽다.
   회전만 쓰고 위치는 건드리지 않으므로 레이아웃(flex 정렬)에 영향이 없다.
   진폭 9deg -> 1.5deg 로 감쇠. 전체 5s 중 82% 구간은 완전히 정지 상태다.
   ===================================================================================== */
@keyframes headerTelRing {
  0%, 82%, 100% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(-9deg);
  }
  88% {
    transform: rotate(7deg);
  }
  91% {
    transform: rotate(-5deg);
  }
  94% {
    transform: rotate(3deg);
  }
  97% {
    transform: rotate(-1.5deg);
  }
}

.xet-layout .layout__header .tel.tel-anim-b > span > i {
  /* span 이 flex 라 자식은 어차피 블록화되지만, 인라인으로 처리되는 환경에서도
     transform 이 먹도록 명시한다 (인라인 비대체 요소에는 transform 이 적용되지 않음) */
  display: inline-block;
  transform-origin: 50% 55%;
  animation: headerTelRing 6s ease-in-out infinite;
  will-change: transform;
}


/* =====================================================================================
   N · 사용 안 함
   -------------------------------------------------------------------------------------
   실제로 지정할 스타일은 없지만, A/B/N 세 값이 모두 CSS 와 짝이 맞는지 대조할 수 있도록
   그리고 다른 파일에서 실수로 .tel 에 애니메이션이 붙었을 때를 대비해 명시적으로 끈다.
   ===================================================================================== */
.xet-layout .layout__header .tel.tel-anim-n > span,
.xet-layout .layout__header .tel.tel-anim-n > span::after,
.xet-layout .layout__header .tel.tel-anim-n > span > i {
  animation: none;
}
.xet-layout .layout__header .tel.tel-anim-n > span::after {
  content: none;
}


/* =====================================================================================
   데스크탑 (1024px~)
   -------------------------------------------------------------------------------------
   여기서부터 버튼이 테마색 배경의 CTA 가 되고 번호 텍스트가 함께 보인다.
   배경이 차 있으므로 광택 띠를 조금 더 또렷하게 올려도 촌스럽지 않다.
   ===================================================================================== */
@media (min-width: 1024px) {
  .xet-layout .layout__header .tel.tel-anim-a > span::after {
    width: 40%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 100%);
  }
}


/* =====================================================================================
   다크모드
   -------------------------------------------------------------------------------------
   현재 js/header.js 에서 라이트 강제 중이라 실사용되지 않지만, 복구 대비로 남긴다.
   어두운 배경에서는 같은 밝기의 흰 띠가 더 세게 보이므로 한 단계 낮춘다.
   기존 header.css 의 다크 규칙은 건드리지 않는다.
   ===================================================================================== */
body.color_scheme_dark .xet-layout .layout__header .tel.tel-anim-a > span::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
}


/* =====================================================================================
   접근성 — 모션 최소화
   -------------------------------------------------------------------------------------
   사용자가 OS 에서 "동작 줄이기"를 켰다면 A/B 모두 끈다. (필수 요구사항)
   광택 띠는 애니메이션만 멈추면 시작 위치에 반투명 띠가 남을 수 있으므로 아예 감춘다.
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .xet-layout .layout__header .tel.tel-anim-a > span::after {
    animation: none;
    opacity: 0;
    display: none;
  }
  .xet-layout .layout__header .tel.tel-anim-b > span > i {
    animation: none;
    transform: none;
  }
}