/* 기본 폰트 - Pretendard Variable */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* 앵커 이동 시 고정 헤더 가림 방지 여백 */
html {
  scroll-padding-top: 64px;
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 90px;
  }
}

/* 키보드 포커스 표시 — Tab 이동 시에만 노출.
   파란 외곽선 + 흰 테두리를 겹쳐 밝은 배경과 어두운 히어로·푸터 양쪽에서 식별 가능 */
:focus-visible {
  outline: 3px solid #0059FF;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF;
}

/* 잘라내는 상자 안에서 외곽선이 잘리지 않도록 안쪽 정렬 */
.overflow-hidden :focus-visible {
  outline-offset: -1px;
}

/* CTA 배너 좌측 그라데이션 (두 겹이라 Tailwind 임의값 대신 여기서 정의).
   기준점은 cta.js 의 md 및 배경 <source media> 와 일치해야 함 —
   한쪽만 바뀌면 밝은 배경에 흰 글씨가 얹혀 판독 불가 */
@media (min-width: 768px) {
  .cta-gradient {
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%),
      linear-gradient(270deg, rgba(33, 96, 168, 0) 43.4%, rgb(33, 96, 168) 100%);
  }
}

/* 맨 위로 버튼 배경 — Tailwind 클래스로 이전 금지. */
#top-button button {
  background-color: #FFFFFF;
}

/* 우리민원 PROBLEM — 폴더 앞판 배경 흐림. */
.problem-folder-blur {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  mask-image: url('assets/images/minwon-problem-folder-front.svg'),
              linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: intersect;

  -webkit-mask-image: url('assets/images/minwon-problem-folder-front.svg'),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
}

/* 가로 스크롤 슬라이더 — 스크롤바만 숨김 (스크롤·스와이프는 정상 동작) */
.slider-x {
  scrollbar-width: none;
}

.slider-x::-webkit-scrollbar {
  display: none;
}

/* 드래그 전환 중 — 글자 선택 시 드래그가 끊기므로 차단 (클래스는 sliderMotion.js 가 토글) */
.slider-x.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* 슬라이더 진행 막대 — 현재 폴더 위치로 이동. */
.slider-progress {
  transition: transform 300ms ease-out;
}

.slider-progress[data-index="1"] { transform: translateX(100%); }
.slider-progress[data-index="2"] { transform: translateX(200%); }
.slider-progress[data-index="3"] { transform: translateX(300%); }
.slider-progress[data-index="4"] { transform: translateX(400%); }

@media (min-width: 768px) {
  .slider-progress[data-index] {
    width: var(--thumb-w, 20%);
    transform: translateX(var(--thumb-x, 0px));
    transition: none;
  }
}

/* ── 아래 두 규칙은 Tailwind 클래스로 이전 금지 ── */

/* 우리민원 ONE-STOP — 폴더 hover 리프트. */
@media (min-width: 1280px) and (hover: hover) {
  #section-onestop [data-slide] {
    transition: transform 200ms ease-out;
  }

  #section-onestop [data-slide]:hover {
    transform: translateY(-8px);
  }
}

/* 우리민원 PKI — 연동 기관 로고 hover 리프트 (마우스를 쓰는 768 부터) */
@media (min-width: 768px) and (hover: hover) {
  #section-pki ul li {
    transition: transform 200ms ease-out;
  }

  #section-pki ul li:hover {
    transform: translateY(-4px);
  }
}

/* 회사소개 OUR VALUE — 고정(pin) 중 화면 한 장 높이 확보. */
@media (min-width: 1280px) {
  #section-value {
    min-height: calc(100vh - 72px);
  }
}

/* 회사소개 OUR VALUE — 배지 ↔ 번호 리스트 hover 연동 (data-on 은 value.js 가 토글). */
@media (min-width: 1280px) and (min-height: 700px) and (hover: hover) {
  #section-value [data-badge],
  #section-value [data-reveal-item] {
    transition: transform 200ms ease-out;
  }

  /* 글 묶음은 왼쪽 끝을 기준으로 확대해야 줄 맞춤이 유지됨 */
  #section-value [data-reveal-item] {
    transform-origin: left center;
  }

  #section-value [data-badge][data-on] {
    transform: scale(1.08);
  }

  #section-value [data-reveal-item][data-on] {
    transform: scale(1.03);
  }
}