@charset "utf-8";
/* ============================================================
   스크롤 다운 안내 — 우측 세로형 → 하단 중앙 심플형으로 교체

   [바꾼 이유]
   원본(theartpixel.css:1455~)은
     .right_scroll_wrap { position:absolute; right:1.75rem; width:12px; height:230px; }
     .right_scroll_img  { background:url(../img/scroll.png) }   ← 90도 회전된 SCROLL DOWN 이미지
   구조라 화면 오른쪽 끝에 세로로 붙는다.
   같은 자리에 카카오 문의 버튼(.kakao_fab)이 들어가면서 글자가 겹쳐서,
   위치를 하단 중앙으로 옮기고 회전 이미지 대신 가로 텍스트 + 라인으로 단순화했다.

   [메인비주얼(첫 화면)에서만 노출]
   아래 섹션들은 하단 중앙에 CG 주의문구(ⓘ 홈페이지 제작에 사용된 …)가
   전폭으로 깔려 있어 어디에 두든 겹친다. 스크롤 유도 문구는 첫 화면에서만
   의미가 있으므로 섹션1에서만 보이게 했다.
   (전 섹션에 계속 띄우려면 아래 visibility 규칙 두 줄만 지우면 된다.)

   DOM 구조와 클래스명은 그대로 두었다 — min.js 가
   .right_scroll_wrap 를 fadeIn/fadeOut 하고 .white 를 토글하기 때문.
   visibility 로 제어하는 것도 같은 이유다(jQuery 는 display/opacity 를 건드린다).
   ============================================================ */

.right_scroll_wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: 2rem;
  width: auto;
  height: auto;
  margin: 0 auto;
  transform: none;
  overflow: visible;
  text-align: center;
  pointer-events: none;
  z-index: 99;
  visibility: hidden;
}

/* 메인비주얼(fullPage 첫 섹션)에서만 노출 */
body.fp-viewing-0 .right_scroll_wrap { visibility: visible; }

/* ★ 원본 theartpixel.css 가 .right_scroll_img / .right_scroll 에
   `transition: 0.3s`(= all 0.3s)를 걸어둔다. min.js 는 섹션 전환 중
   이 요소를 fadeOut(display:none) 시키는데, 그 사이에 시작된 transition 이
   끝나지 않고 멈춰서 색·위치가 이전 섹션 값에 붙잡힌다.
   (실제로 밝은 섹션에서도 글자가 계속 흰색으로 남았다.)
   그래서 transition 을 꺼둔다. */
.right_scroll_wrap,
.right_scroll_img,
.right_scroll { transition: none !important; }

/* 회전 PNG(scroll.png) 대신 가로 텍스트.
   메인비주얼은 사진 배경이라 흰 글자 + 옅은 그림자로 고정한다. */
.right_scroll_img {
  width: auto;
  height: auto;
  background: none;
  font-family: 'lexend', 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.right_scroll_img::before { content: 'Scroll Down'; }

/* 짧은 세로 라인 + 아래로 흐르는 점 */
.right_scroll {
  width: 1px;
  height: 34px;
  margin: 10px auto 0;
  background-color: rgba(255, 255, 255, .45);
  overflow: hidden;
}

/* 원래 점(span)은 min.js 가 top 을 9rem 까지 움직인다(라인이 130px 이던 시절 기준).
   라인이 짧아져 맞지 않으므로 숨기고 CSS 애니메이션으로 대체한다. */
.right_scroll span { display: none !important; }

.right_scroll::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12px;
  background-color: #fff;
  animation: scrollHintDot 1.8s cubic-bezier(.6, 0, .4, 1) infinite;
}

@keyframes scrollHintDot {
  0%   { transform: translateY(-12px); opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* 밝은 배경 섹션용 — min.js 가 .white 를 토글한다(원본 scroll2.png = 흰 글자 역할).
   지금은 섹션1에서만 보이므로 실제로 쓰이진 않지만,
   전 섹션 노출로 되돌릴 때를 위해 남겨둔다. */
.right_scroll_wrap:not(.white) .right_scroll_img {
  color: rgba(0, 0, 0, .72);
  text-shadow: 0 1px 5px rgba(255, 255, 255, .8);
}
.right_scroll_wrap:not(.white) .right_scroll { background-color: rgba(0, 0, 0, .2); }
.right_scroll_wrap:not(.white) .right_scroll::after { background-color: #004571; }

/* 섹션1은 min.js 가 .white 를 지웠다 붙였다 해서 상태가 일정하지 않다.
   사진 배경이므로 흰 글자로 고정한다.
   선택자를 한 단계 더 붙인 이유: 위 :not(.white) 규칙이 (0,3,0)이라
   `body.fp-viewing-0 .right_scroll_img`(0,2,1)로는 이기지 못한다. */
body.fp-viewing-0 .right_scroll_wrap .right_scroll_img {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
body.fp-viewing-0 .right_scroll_wrap .right_scroll { background-color: rgba(255, 255, 255, .45); }
body.fp-viewing-0 .right_scroll_wrap .right_scroll::after { background-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .right_scroll::after { animation: none; opacity: 1; }
}