/* 화면 단위 넘김 (PC 메인·법인소개)
   fullpage.js 가 조건(마우스를 쓰는 PC, 충분한 창 크기)에 맞을 때 <html> 에 fp 를 붙입니다.
   fp 가 없으면(휴대전화·태블릿·작은 창·스크립트 차단) 아래 규칙은 적용되지 않고 보통 화면 그대로 보입니다. 인쇄에도 적용되지 않습니다. */
.fp-dots { display: none; }

@media screen {
  /* 틀: 상단 메뉴(와 법인소개의 제목 영역·하위 메뉴), 하단 정보 영역, 전화 상담 바는 제자리에 두고 가운데 영역만 넘깁니다. */
  html.fp, html.fp body { height: 100%; overflow: hidden; }
  html.fp body { display: flex; flex-direction: column; }
  html.fp .site-header, html.fp .site-footer, html.fp .callbar { flex: none; }
  html.fp main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html.fp main > .subhero, html.fp main > .subnav { flex: none; }
  html.fp .fp-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  html.fp .fp-track { height: 100%; display: flex; flex-direction: column; transform: translateY(calc(var(--fp-i, 0) * -100%)); transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }
  html.fp .fp-panel { flex: none; height: 100%; overflow: hidden; }
  /* 창이 낮아 한 화면에 다 들어가지 않는 칸은 칸 안에서 먼저 스크롤한 뒤 다음 칸으로 넘어갑니다. */
  html.fp .fp-panel.is-long { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* 칸의 내용은 화면 높이에 맞춰 같은 비율로 줄입니다(fullpage.js 가 --fp-zoom 을 정함). */
  html.fp .fp-panel__in { min-height: 100%; display: flex; flex-direction: column; zoom: var(--fp-zoom, 1); }
  html.fp .fp-panel__in.is-measuring { min-height: 0; zoom: 1; }
  /* 칸 안의 구역은 남는 높이를 나누어 갖고, 내용은 각 구역의 가운데에 둡니다. */
  html.fp .fp-panel__in > section { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }

  /* 고정 영역은 낮게: 가운데 영역을 넓게 쓰기 위함입니다. */
  html.fp .subhero { min-height: 64px; flex-direction: row; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 2px 24px; padding: 8px 24px; }
  html.fp .subhero__en { margin: 0; font-size: 13px; letter-spacing: 5px; }
  html.fp .subhero__title { margin: 0; font-size: 28px; line-height: 40px; }
  html.fp .subhero__crumbs { font-size: 13px; }
  html.fp .subnav { min-height: 48px; padding: 6px 24px; font-size: 15px; }
  html.fp .site-footer { min-height: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  /* 하단 정보 영역(메인·법인소개): 다른 화면처럼 왼쪽(로고·주소·광고책임변호사)과 오른쪽(전화·팩스·이메일)으로 나누어 줄마다 적되, 위아래 여백은 작게 둡니다. */
  html.fp .site-footer__in { padding-top: 14px; padding-bottom: 14px; gap: 8px 24px; align-items: center; font-size: 13px; line-height: 22px; }
  html.fp .site-footer__in > div { display: block; }
  html.fp .site-footer__logo { height: 26px; margin: 0 0 6px; }
  html.fp .site-footer__links { margin-top: 2px; }
  html.fp .callbar { min-height: 60px; }
  html.fp .callbar__in { padding-top: 8px; padding-bottom: 8px; }
  html.fp .callbar__num { font-size: 24px; line-height: 32px; }
  html.fp .callbar__btn { min-height: 42px; }

  /* 칸 안쪽 여백과 크기 */
  html.fp .hero { min-height: 0; padding: 48px 96px; }
  html.fp .home-sec { padding: 40px 0; }
  html.fp .home-head { min-height: 104px; }
  html.fp .sec { padding: 28px 0; }
  /* 법인소개: 인사말과 TEAMWORK 는 각각 한 화면을 씁니다. */
  html.fp .about-team { min-height: 0; padding-top: 48px; }
  /* 사진 배열은 아래 끝에 붙이고, 제목은 그 위 빈 곳의 가운데에 둡니다. */
  html.fp .about-team { justify-content: flex-start; }
  html.fp .about-team__en { margin-top: auto; }
  html.fp .about-team__lineup { padding-top: 28px; }
  html.fp .sec-head { min-height: 64px; }
  html.fp .about-point { min-height: 56px; padding: 10px 32px; }
  html.fp .about-point__text { font-size: 17px; line-height: 26px; }
  html.fp .about-photo { height: 180px; }

  /* 마우스 포인터: 넘어가는 영역에서는 휠 모양으로 바꿔 스크롤할 수 있음을 알립니다. 링크·단추 위에서는 손 모양 그대로입니다. */
  html.fp .fp-view, html.fp .fp-view * { cursor: url(../../img/cursor-scroll.png) 16 16, ns-resize; }
  html.fp .fp-view a, html.fp .fp-view a *, html.fp .fp-view button, html.fp .fp-view button * { cursor: pointer; }

  /* 오른쪽 이동 단추(현재 칸 표시) */
  html.fp .fp-dots { position: absolute; z-index: 5; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; }
  html.fp .fp-dots button { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; }
  html.fp .fp-dots button::before { content: ''; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; background: #FFFFFF; border: 1px solid var(--green); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }
  html.fp .fp-dots button[aria-current="true"]::before { left: 4px; top: 4px; width: 14px; height: 14px; background: var(--gold); border-color: #FFFFFF; box-shadow: 0 0 0 1px var(--green); }
  html.fp .fp-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-radius: 50%; }
  html.fp .fp-dots__tip { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); padding: 4px 10px; background: var(--green); color: #FFFFFF; font-size: 12px; line-height: 18px; white-space: nowrap; opacity: 0; pointer-events: none; }
  /* 칸 안에 스크롤 막대가 생기면 막대를 가리지 않게 안쪽으로 옮깁니다. */
  html.fp .fp-view.is-long-now .fp-dots { right: 16px; }
  html.fp .fp-dots button:hover .fp-dots__tip, html.fp .fp-dots button:focus-visible .fp-dots__tip { opacity: 1; }
}
/* 좁은 창: 이동 단추가 본문 오른쪽 끝(여백 24px)과 겹치지 않게 가장자리에 붙입니다. */
@media screen and (max-width: 1240px) {
  html.fp .fp-dots { right: 0; }
  html.fp .fp-dots button { width: 20px; }
  html.fp .fp-dots button::before { left: 5px; }
  html.fp .fp-dots button[aria-current="true"]::before { left: 3px; }
}
/* 낮은 창(노트북 등): 고정 영역을 한 단계 더 낮춥니다. */
@media screen and (max-height: 820px) {
  html.fp .site-header { min-height: 64px; }
  html.fp .site-header__logo img { height: 32px; }
  html.fp .subhero { min-height: 52px; padding: 6px 24px; }
  html.fp .subhero__title { font-size: 24px; line-height: 34px; }
  html.fp .subnav { min-height: 42px; padding: 4px 24px; }
  html.fp .site-footer__in { padding-top: 10px; padding-bottom: 10px; font-size: 12px; line-height: 19px; }
  html.fp .site-footer__logo { height: 22px; margin-bottom: 4px; }
  html.fp .callbar { min-height: 50px; }
  html.fp .callbar__in { padding-top: 6px; padding-bottom: 6px; }
  html.fp .callbar__num { font-size: 22px; line-height: 28px; }
  html.fp .callbar__btn { min-height: 38px; }
  html.fp .hero { padding: 28px 96px; }
  html.fp .home-sec { padding: 28px 0; }
  html.fp .home-head { min-height: 92px; }
  html.fp .sec { padding: 20px 0; }
  html.fp .about-team { padding-top: 28px; }
  html.fp .about-team__lineup { padding-top: 16px; }
  html.fp .sec-head { min-height: 58px; }
  html.fp .about-point { min-height: 46px; padding: 6px 32px; }
  html.fp .about-photo { height: 150px; }
}
/* 아주 낮은 창(세로 680 미만, 소형 노트북): 하단 정보 영역의 배치는 그대로 두고 글자와 여백만 한 단계 더 줄입니다. */
@media screen and (max-height: 680px) {
  html.fp .site-footer__in { padding-top: 6px; padding-bottom: 6px; font-size: 11.5px; line-height: 17px; }
  html.fp .site-footer__logo { height: 16px; margin-bottom: 2px; }
  html.fp .site-footer__links { margin-top: 0; }
}
@media screen and (prefers-reduced-motion: reduce) {
  html.fp .fp-track { transition: none; }
}
