/* ============================================
   Mobile Styles ( ≤ 768px )
   ============================================ */

@media (max-width: 768px) {
  :root {
    /* 콘텐츠 영역 92% (좌우 padding 4vw 씩) — 뷰포트 폭에 비례 */
    --container-pad: 4vw;
    --header-height: 64px;
    --section-gap: 80px;
  }

  /* ============================================
     페이지 배경 — 모바일에서는 fixed + cover 로 반복 차단
     (iOS Safari 는 background-attachment: fixed 미지원 → scroll fallback,
      그래도 cover + no-repeat 가 적용돼 반복은 안 일어남)
     ============================================ */
  body.page-index,
  body.page-our-project,
  body.page-project-detail,
  body.page-company-story,
  body.page-contact,
  body.page-people,
  body.page-privacy-policy,
  body.page-terms-of-use,
  body.page-404 {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  /* ---- Typography Overrides ---- */
  .text-h1 {
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: 0.02em;
  }
  .text-h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .text-h3 {
    font-size: 48px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .text-h4 {
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .text-h5 {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .text-small {
    font-size: 14px;
    line-height: 1.28;
    letter-spacing: 0;
  }

  /* ============================================
     Header / 모바일 드로워
     ============================================ */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: var(--color-bg);
    background-image: url('../img/hambergur_bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: calc(var(--header-height) + 32px) var(--container-pad) 32px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  body.is-menu-open .site-nav {
    transform: translateX(0);
  }
  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .site-nav__link {
    font-family: var(--font-body);
    font-size: 40px;
    font-weight: var(--fw-medium);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none; /* "Portfolio" mixed-case */
  }

  /* 햄버거 — 메뉴 닫혔을 때만 */
  .site-header__toggle { display: inline-flex; }
  body.is-menu-open .site-header__toggle { display: none; }

  /* 닫기 X — 메뉴 열렸을 때만 */
  body.is-menu-open .site-nav__close { display: block; }

  /* ============================================
     Hero
     ============================================ */
  .hero {
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 48px;
  }

  .hero__divider {
    margin: 24px 0;
  }

  .hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .hero__badges {
    gap: 32px;
    align-self: stretch;
    justify-content: space-around;
  }

  .hero__intro {
    max-width: none;
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .btn { padding: 14px 24px; }

  /* ============================================
     Hero Gallery — 가로 스크롤
     ============================================ */
  .hero-gallery {
    padding-bottom: 80px;
  }

  .hero-gallery__list {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-right: var(--container-pad);
    scrollbar-width: none;
  }
  .hero-gallery__list::-webkit-scrollbar { display: none; }

  .hero-gallery__item {
    flex: 0 0 75%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
  }

  /* ============================================
     Capabilities — 모바일: 핀 해제, 단일 슬라이드 + 클릭 컨트롤
     ============================================ */
  .capabilities {
    height: auto;
    min-height: 0;
    padding: 60px 0 32px;
    display: block;
  }

  .capabilities__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 0;
    margin-bottom: 24px;
  }

  /* 슬라이드 — 절대 → 상대 */
  .capabilities__stage {
    position: relative;
  }

  .capabilities__slide {
    position: relative;
    inset: auto;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .capabilities__slide.is-active {
    display: block;
    opacity: 1;
  }

  /* 헤딩: 두 파트가 한 문장으로 자연스럽게 흐르도록 inline 처리
     데스크톱의 absolute overlay 해제 → 정적 흐름으로 복귀 */
  .capabilities__heading {
    position: static;
    transform: none;
    display: block;
    text-align: left;
  }

  .capabilities__heading-part,
  .capabilities__heading-part.is-left,
  .capabilities__heading-part.is-right {
    display: inline;
    padding: 0;
    text-align: left;
  }

  /* 단일 배경: 데스크톱 850px → 모바일 풀폭 */
  .capabilities__bg {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
  }

  /* 콜라주 (3장) → 모바일: 겹친 형태 유지, 폭만 100% 로 축소 */
  .capabilities__photos {
    width: 100%;
    max-width: none;
    margin-bottom: 16px;
  }

  /* 컨트롤 표시 */
  .capabilities__controls {
    display: flex;
    margin-top: 24px;
  }

  /* ============================================
     Featured Works — 가로 스크롤
     ============================================ */
  .works { padding: 60px 0; }

  .works__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  /* 모바일: 5장 모두 1줄 가로 스크롤 (rows 평탄화) */
  .works__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-right: var(--container-pad);
    scrollbar-width: none;
  }
  .works__grid::-webkit-scrollbar { display: none; }

  .works__row {
    display: contents;
  }

  .works__row + .works__row { margin-top: 0; }

  .works__grid > .works__row > .work-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  .work-card__image {
    aspect-ratio: 4 / 3;
  }

  /* ============================================
     Areas of Focus — 모바일: 일반 가로 스크롤 (터치)
     - 데스크톱의 핀/100vh 레이아웃 모두 해제
     - 데스크톱 GSAP transform 잔여 제거
     ============================================ */
  .focus {
    padding: 60px 0;
    min-height: 0;
    display: block;
  }

  .focus__head {
    margin-bottom: 24px;
  }

  .focus__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    /* 스냅 기준점을 padding 과 일치시켜야 첫 카드가 컨테이너 좌측에 정렬됨 */
    scroll-padding-left: var(--container-pad);
    scroll-padding-right: var(--container-pad);
    scrollbar-width: none;
    transform: none !important;
  }
  .focus__track::-webkit-scrollbar { display: none; }

  .focus__card {
    width: 80vw;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .focus__image {
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
  }

  .focus__card-title { margin-bottom: 8px; }

  /* ============================================
     Marquee
     ============================================ */
  .marquee { padding: 48px 0; }

  /* ============================================
     Footer
     ============================================ */
  .site-footer {
    padding: 48px 0 24px;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-bottom: 32px;
  }

  .site-footer__logo-img {
    height: 33px;
  }

  .site-footer__nav-wrap {
    flex-direction: column;
    gap: 24px;
  }

  .site-footer__nav-list {
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
  }

  .site-footer__divider { margin-bottom: 16px; }

  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .site-footer__legal {
    gap: 24px;
  }

  /* ===============================================================
     COMPANY STORY 페이지 — 모바일
     =============================================================== */

  /* Story Hero Image */
  .story-hero-image {
    padding-bottom: 60px;
  }
  .story-hero-image__media {
    aspect-ratio: 4 / 3;
  }

  /* What matters to us — 모바일: 가로 스크롤 (1.x장 노출) */
  .matters {
    padding: 60px 0;
  }
  .matters__title {
    margin-bottom: 24px;
  }
  .matters__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-right: var(--container-pad);
    scrollbar-width: none;
  }
  .matters__grid::-webkit-scrollbar { display: none; }
  .matters__card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  .matters__image {
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
  }

  /* Why choose us — 모바일: 세로 스택 */
  .choose {
    padding: 60px 0;
  }
  .choose__head {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
  }
  .choose__intro {
    max-width: none;
    text-align: left;
  }
  .choose__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
  }
  /* Why choose us — 모바일: 어떤 등장/스크롤 애니메이션도 없도록 강제 */
  .choose,
  .choose__head,
  .choose__grid,
  .choose__card,
  .choose__icon,
  .choose__card-title,
  .choose__card-desc {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    opacity: 1 !important;
  }
  .choose__card {
    padding: 24px 20px;
    height: auto;
    min-height: 240px;
    /* backdrop-filter 가 모바일에서 스크롤 시 늦게 그려지는 이슈 방지 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, 0.06);
  }

  /* Our team — 모바일: 가로 스와이프
     배경 이미지 카드 형태 그대로 유지하되, 카드 폭을 뷰포트 기준으로 줄이고
     overlay 는 항상 보이도록 (hover 가 없는 환경) */
  .team {
    padding: 60px 0;
  }
  .team__title {
    margin-bottom: 24px;
  }
  .team__track {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .team-card {
    width: 80vw;
    height: auto;
    aspect-ratio: 421 / 490;
  }
  /* 모바일은 hover 가 없으므로 캡션을 항상 표시, overlay 는 미사용 */
  .team-card__overlay {
    display: none;
  }
  .team-card__caption {
    display: block;
  }
  .slider-controls {
    justify-content: center;
    margin-top: 24px;
  }

  /* Customer reviews — 모바일: 가로 스와이프 (533:275 가로 비율 유지) */
  .reviews {
    padding: 60px 0;
  }
  .reviews__title {
    margin-bottom: 24px;
  }
  .reviews__track {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .review-card {
    width: 80vw;
    height: auto;
    /* 모바일은 533:275 가로 비율이 너무 납작해서 자연 높이 */
    min-height: 240px;
    padding: 24px 20px;
  }
  .review-card__avatar {
    width: 48px;
    height: 48px;
  }

  /* ===============================================================
     CONTACT 페이지 — 모바일
     =============================================================== */

  /* Hero — 제목 위, 설명 아래로 세로 스택 */
  .contact-hero {
    padding-top: calc(var(--header-height) + 32px);
    padding-bottom: 32px;
  }
  .contact-hero__inner {
    flex-direction: column;
    gap: 16px;
  }
  .contact-hero__desc {
    flex-basis: auto;
    margin-top: 0;
  }

  /* Contact Info — 1열 세로 */
  .contact-info {
    padding-bottom: 24px;
  }
  .contact-info__list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }
  .contact-info__label {
    margin-bottom: 8px;
  }

  /* Form + Map — 세로 스택 */
  .contact-main {
    padding: 32px 0 60px;
  }
  .contact-main__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 폼 모든 행 1열로 (First/Last name, Phone/Email 도 각각 따로) */
  .contact-form__row {
    grid-template-columns: 1fr;
  }

  /* Map — 모바일 적정 높이 */
  .contact-map,
  .contact-map__iframe {
    min-height: 320px;
  }

  /* ===============================================================
     PRIVACY POLICY 페이지 — 모바일
     =============================================================== */
  .policy-hero {
    padding-top: calc(var(--header-height) + 40px);
  }
  .policy-hero__divider {
    margin-top: 24px;
  }

  .policy {
    padding: 32px 0 60px;
  }

  /* TOC 숨기고 콘텐츠만 풀폭 */
  .policy__layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .policy__toc {
    display: none;
  }

  .policy__intro {
    margin-bottom: 40px;
  }

  .policy__section {
    margin-bottom: 40px;
  }

  .policy__heading {
    margin-bottom: 16px;
  }

  .policy__contact {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ===============================================================
     404 페이지 — 모바일
     =============================================================== */
  .not-found {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 48px;
    min-height: auto;
  }
  /* .not-found__bg 모바일 추가 조정 필요시 여기 */
  .not-found__content {
    gap: 24px;
  }
  .not-found__title {
    max-width: none;
  }

  /* ===============================================================
     OUR PROJECTS 페이지 — 모바일
     =============================================================== */
  .projects-hero {
    padding-top: calc(var(--header-height) + 40px);
  }
  .projects-hero__divider {
    margin-top: 24px;
  }

  .projects {
    padding: 24px 0 60px;
  }

  /* head — 설명 위, 탭 아래 (시안 순서) */
  .projects__head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
  }
  .projects__intro {
    max-width: none;
    text-align: left;
  }

  /* List 패널 — 1열, 프리뷰 숨김 */
  .projects__panel--list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .projects__list {
    columns: 1;
  }
  .projects__preview {
    display: none;
  }

  .projects__year {
    flex-basis: 48px;
  }

  /* Gallery panel — 모바일 */
  .projects__panel--gallery {
    gap: 12px;
  }
  .gallery-card {
    width: 50vw;
    aspect-ratio: 4 / 3;
  }
  .gallery__track {
    gap: 12px;
  }
  .gallery-card__overlay {
    padding: 16px;
  }

  /* ===============================================================
     PROJECT DETAIL 페이지 — 모바일
     =============================================================== */
  .detail {
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: 60px;
  }

  .detail__top {
    margin-bottom: 16px;
  }

  .slider {
    cursor: default; /* 모바일은 커스텀 커서 비활성, 기본 커서 */
  }

  /* 커스텀 커서 — 모바일 강제 숨김 */
  .slider__cursor {
    display: none !important;
  }

  /* 보조 화살표 — 모바일 전용으로 표시 */
  .slider__arrow {
    display: flex;
    width: 40px;
    height: 40px;
  }
  .slider__arrow--prev { left: 12px; }
  .slider__arrow--next { right: 12px; }

  /* 시안: 모바일 슬라이드 358×400 (세로형) */
  .slider__slide-image {
    aspect-ratio: 358 / 400;
  }

  /* 메인 → meta → 미리보기 순서 (시안) */
  .detail__slider-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "slider"
      "meta"
      "previews";
    column-gap: 0;
    row-gap: 16px;
  }

  /* 미리보기 — 가로 스크롤 (메인 아래 / meta 아래) */
  .slider__previews {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    height: auto !important;   /* JS 가 desktop 에서 인라인 height 박는 거 모바일은 무효화 */
    gap: 12px;
    padding-bottom: 4px;
  }
  .slider__preview {
    flex: 0 0 auto;
    width: 30vw;
    max-width: 160px;
  }

  /* meta — 모바일 세로 스택 (title/subtitle 위, counter 아래) */
  .detail__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .detail__title {
    font-size: 24px;
  }

  /* Zoom modal — 모바일 패딩/버튼 축소 */
  .zoom-modal { padding: 12px; }
  .zoom-modal__close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .zoom-modal__prev,
  .zoom-modal__next { width: 40px; height: 40px; }
  .zoom-modal__prev { left: 8px; }
  .zoom-modal__next { right: 8px; }
  .zoom-modal__counter { bottom: 16px; font-size: 13px; }

  /* ===============================================================
     PEOPLE 페이지 — 모바일
     =============================================================== */

  /* CEO Message 섹션 */
  .ceo-msg {
    padding-bottom: 80px;
  }

  .ceo-msg__label {
    margin-bottom: 32px;
  }

  .ceo-msg__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ceo-msg__visual {
    gap: 10px;
    align-items: start;
  }
  .ceo-msg__image {
    width: 100%;
  }


  .ceo-msg__content {
    gap: 40px;
    padding-top: 0;
  }

  /* Leadership (Our Team) — 모바일: company_story Our Team과 동일 */
  .team--people {
    padding-bottom: 80px;
  }

  .team--people .team-card {
    width: 80vw;
    height: auto;
    aspect-ratio: 421 / 490;
  }

  .team--people .team-card__overlay {
    display: none;
  }

  .team--people .team-card__caption {
    display: block;
  }

  .team-people__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  .team-people__eyebrow {
    text-align: left;
    max-width: 100%;
  }

  /* CEO Message — 모바일 */
  .ceo-msg__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ceo-msg__tagline {
    font-size: 32px;
    margin-bottom: 10px;
  }



  /* Organization Chart — 모바일: 세로 스택 */
  .org-chart {
    padding: 60px 0;
  }

  .org-chart__heading {
    margin-bottom: 32px;
  }

  .org-row {
    grid-template-columns: 1fr;
  }

  .org-row__dept {
    padding: 16px 0 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .org-row__members {
    grid-template-columns: repeat(3, 1fr);
  }

  .org-member {
    padding: 16px 12px;
  }

  .org-member__name {
    font-size: 13px;
  }
}