/* =============================================================
   YOUNG WAVE CREATIVE — mobile.css
   모바일 퍼스트 반응형 전용 스타일시트
   적용 대상: ≤ 768px (스마트폰 세로/가로)
   ============================================================= */

/* ────────────────────────────────────────────────────────────
   0. 전역 기초 — 모든 화면에서 공통 적용
   ──────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
}
body { -webkit-overflow-scrolling: touch; }
img  { max-width: 100%; height: auto; display: block; }

/* ────────────────────────────────────────────────────────────
   1. 태블릿 (≤ 1024px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .section   { padding: 80px 0; }

  /* 갤러리 슬라이더 topbar */
  .gfs-nav-links { display: none !important; }
  .gfs-counter   { display: none; }
}

/* ────────────────────────────────────────────────────────────
   2. 모바일 (≤ 768px) — 핵심 재설계
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── 2-1. 기본 타이포 ── */
  html { font-size: 15px; }
  .container { padding: 0 16px; width: 100%; max-width: 100%; }
  .section   { padding: 56px 0; }
  .section-title {
    font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
    margin-bottom: 14px;
    line-height: 1.25;
  }
  .section-desc  { font-size: 0.88rem; margin-bottom: 28px; }
  .section-label { margin-bottom: 10px; }
  .section-label span { font-size: 0.62rem; letter-spacing: 0.1em; }
  .gradient-text { background-size: 200% auto; }

  /* ── 2-2. 헤더 / 내비게이션 ── */
  .nav { height: 58px; }
  .logo-main { font-size: 1rem; letter-spacing: 0.06em; }
  .logo-sub  { font-size: 0.48rem; }
  .hamburger { display: flex; }
  .nav-menu {
    position: fixed;
    top: 58px; left: 0; right: 0;
    background: rgba(8,12,20,0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: column;
    padding: 14px 12px 18px;
    gap: 2px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: 0.28s cubic-bezier(0.4,0,0.2,1);
    border-bottom: 1px solid rgba(99,102,241,0.15);
    z-index: 998;
  }
  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
  }
  .nav-insta, .nav-yt { width: 34px; height: 34px; font-size: 0.9rem; }

  /* ── 2-3. 갤러리 풀스크린 슬라이더 (GFS) ── */

  /* 높이: dynamic viewport — 주소표시줄 제외한 실제 화면 */
  .gfs-section {
    height: 100svh;
    height: 100dvh;
    min-height: 480px;
    /* iOS safe-area (노치/홈바) */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Topbar — 2줄 구조 */
  .gfs-topbar {
    flex-wrap: wrap;
    padding: 10px 14px 6px;
    gap: 4px 8px;
    align-items: center;
    background: linear-gradient(180deg, rgba(5,8,15,0.95) 0%, rgba(5,8,15,0.6) 70%, transparent 100%);
  }
  .gfs-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
  }
  .gfs-logo     { font-size: 0.82rem; letter-spacing: 0.07em; }
  .gfs-logo-sub { display: none; }
  .gfs-counter  { display: none; }

  /* 필터 탭: 가로 스크롤 (overflow) */
  .gfs-tabs {
    order: 10;            /* 브랜드 아래 두 번째 줄 */
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
  }
  .gfs-tabs::-webkit-scrollbar { display: none; }
  .gfs-tab {
    flex-shrink: 0;
    font-size: 0.64rem;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    touch-action: manipulation;
  }

  /* 슬라이드 이미지 — contain으로 전체 이미지 표시 (잘림 없음) */
  .gfs-slide-img {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    animation: gfsKenBurnsMob 7s ease-out forwards !important;
  }
  @keyframes gfsKenBurnsMob {
    0%   { transform: scale(1.02); }
    100% { transform: scale(1.0); }
  }

  /* 좌우 화살표 */
  .gfs-arrow { width: 36px; height: 36px; font-size: 0.8rem; }
  .gfs-prev  { left: 8px; }
  .gfs-next  { right: 8px; }

  /* 캡션 박스 — 썸네일 위 여유 확보 */
  .gfs-caption-box {
    left: 12px !important;
    right: 12px !important;
    bottom: 90px !important;  /* 썸네일(46px) + 도트(18px) + 여유 */
  }
  .gfs-cap-tag   { font-size: 0.58rem; margin-bottom: 3px; }
  .gfs-cap-title {
    font-size: clamp(0.95rem, 4.5vw, 1.35rem) !important;
    margin-bottom: 3px;
    /* 긴 텍스트 잘림 방지 */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .gfs-cap-sub   { font-size: 0.72rem; }
  .gfs-expand-btn { display: none; }

  /* 도트 인디케이터 */
  .gfs-dots  { bottom: 64px !important; gap: 5px; }
  .gfs-dot   { width: 5px; height: 5px; }
  .gfs-dot.gfs-dot-active { width: 14px; }

  /* 자동재생 버튼 */
  .gfs-autoplay-btn {
    bottom: 58px !important;
    right: 10px !important;
    width: 28px; height: 28px;
    font-size: 0.6rem;
  }

  /* 썸네일 스트립 */
  .gfs-strip-wrap {
    padding-top: 0;
    background: linear-gradient(0deg, rgba(5,8,15,0.92) 0%, rgba(5,8,15,0.0) 100%);
  }
  .gfs-strip {
    padding: 5px 12px 10px !important;
    gap: 5px !important;
  }
  /* iOS safe-area 홈바 위 패딩 */
  .gfs-strip { padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important; }
  .gfs-thumb {
    flex: 0 0 58px !important;
    height: 40px !important;
    border-radius: 6px;
    border-width: 2px;
  }
  .gfs-thumb.gfs-thumb-active { transform: scale(1.04); }

  /* 진행바 */
  .gfs-progress-bar { height: 2px; }

  /* 스크롤 다운 힌트 숨김 */
  .gfs-scroll-hint { display: none !important; }

  /* ── 2-4. galleryGrid 섹션 — 모바일 2열 그리드 ── */
  #galleryGrid { padding-top: 48px; }

  /* 가로 스크롤 → 세로 2열 그리드로 전환 */
  .gallery-scroll-wrap {
    margin: 0;
    overflow: visible;
  }
  .gallery-scroll {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 4px 0 20px !important;
    cursor: default !important;
    scroll-snap-type: none !important;
  }

  /* 모든 카드: 고정 너비 해제 → 그리드 셀에 맞춤 */
  .gs-item,
  .gs-item.gs-wide {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 이미지: 정사각형 비율, contain으로 잘림 없음 */
  .gs-item img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #0d1220 !important;
  }

  .gs-caption { padding: 6px 8px; }
  .gs-caption p  { font-size: 0.7rem; line-height: 1.3; }
  .gs-caption em { font-size: 0.58rem; }

  /* ── 2-5. 그리드 레이아웃 ── */
  .about-grid    { grid-template-columns: 1fr !important; gap: 28px; direction: ltr; }
  .services-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .whyus-grid    { grid-template-columns: 1fr !important; gap: 20px; }
  .partners-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .team-grid     { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .contact-grid  { grid-template-columns: 1fr !important; gap: 24px; }
  .footer-grid   { grid-template-columns: 1fr 1fr !important; gap: 20px; }
  .form-row      { grid-template-columns: 1fr !important; }
  .client-categories { grid-template-columns: 1fr 1fr !important; gap: 10px; }

  /* ── 2-6. Projects 카드 슬라이더 ── */
  .proj-slider-wrap { padding-bottom: 8px; }
  .proj-slider { gap: 14px !important; padding: 6px 0 10px !important; }

  /* 카드: 모바일에서 화면 90% 너비 */
  .proj-card {
    flex: 0 0 calc(100vw - 64px) !important;
    min-width: calc(100vw - 64px) !important;
    max-width: calc(100vw - 64px) !important;
  }
  .proj-card-thumb { aspect-ratio: 16/9; }
  .proj-card-thumb img { width: 100%; height: 100%; object-fit: contain !important; object-position: center; background: #0d1220; }
  .proj-card-body { padding: 14px 14px 16px; gap: 7px; }
  .proj-card-body h3 { font-size: 0.95rem; line-height: 1.3; }
  .proj-card-body p  { font-size: 0.76rem; line-height: 1.45; }
  .proj-card-chips span { font-size: 0.64rem; padding: 3px 9px; }

  /* 카드 내부 미니 이미지 슬라이더: 한 장씩 좌우 스와이프 */
  .proj-img-slider {
    margin-top: 6px;
    border-radius: 8px;
    overflow: hidden;
  }
  .proj-img-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;            /* gap 제거 → 한 장씩 정확히 */
  }
  .proj-img-track::-webkit-scrollbar { display: none; }
  .proj-img-slide {
    flex: 0 0 100%;     /* 한 장씩 꽉 차게 */
    scroll-snap-align: center;
  }
  .proj-img-slide img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain !important;
    object-position: center;
    background: #0d1220;
    display: block;
  }

  /* 링크 버튼 */
  .proj-card-links { gap: 7px; padding-top: 6px; flex-wrap: wrap; }
  .proj-link-btn   { font-size: 0.7rem; padding: 6px 13px; }

  /* 슬라이더 도트 */
  .proj-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 10px;
  }

  /* ── 2-7. 비디오 카드 그리드 ── */
  .vc-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .vc-card-featured { grid-column: span 2 !important; }
  .vc-info { padding: 10px 12px 12px; }
  .vc-info h4 { font-size: 0.84rem; }
  .vc-info p  { font-size: 0.74rem; }
  .vc-tag     { font-size: 0.6rem; }

  /* ── 2-8. About 섹션 ── */
  .about-visual    { height: auto !important; }
  .photo-stack-main img { height: auto; aspect-ratio: 16/9; width: 100%; object-fit: cover; }
  .photo-stack-sub img  { height: auto; aspect-ratio: 16/9; width: 100%; object-fit: cover; }

  /* ── 2-9. Project Detail (프로젝트 상세 블록) ── */
  .project-featured         { grid-template-columns: 1fr !important; direction: ltr; gap: 20px; }
  .project-featured-reverse { direction: ltr !important; }
  .project-block  { padding: 22px 14px; max-width: 100%; overflow: hidden; }
  .project-media-row  { grid-template-columns: 1fr !important; gap: 14px; width: 100%; }
  .project-photo-grid { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .proj-img-wrap      { overflow: hidden; width: 100%; min-width: 0; }
  .proj-img-wrap img  {
    aspect-ratio: 16/9 !important;
    height: auto !important;
    width: 100% !important;
    object-fit: cover;
  }
  .proj-img-wrap.large { grid-column: span 2 !important; }
  .proj-img-wrap.large img { aspect-ratio: 4/3 !important; }
  .project-media { min-height: unset !important; }
  .project-news-img img { aspect-ratio: 16/6; height: auto; }
  .mini-img-wrap { height: auto; aspect-ratio: 16/9; }
  .mini-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

  /* ── 2-10. 마키 ── */
  .marquee-track  { gap: 24px; }
  .marquee-item   { height: 34px; }
  .marquee-item img { height: 100%; width: auto; max-width: none; }

  /* ── 2-11. 서비스 카드 ── */
  .service-card   { padding: 22px 18px; }
  .service-icon   { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: 12px; }
  .service-card h3 span { font-size: 0.95rem; }

  /* ── 2-12. 파트너/팀 카드 ── */
  .partner-card { padding: 20px 14px; }
  .team-card    { padding: 24px 14px; }

  /* ── 2-13. Contact ── */
  .contact-form      { padding: 22px 14px; }
  .contact-info-card { padding: 20px 14px; }
  .cta-banner-inner  { padding: 32px 14px; }

  /* ── 2-14. Footer ── */
  .footer { padding: 44px 0 24px; }

  /* ── 2-15. 이미지 전역 오버플로우 방지 ── */
  img { max-width: 100% !important; }
  [style*="overflow"] { overflow: hidden !important; }

  /* ── 2-16. 비디오 모달 ── */
  .video-modal { align-items: flex-end; }
  .vm-box {
    width: 100vw;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }
  .vm-feature-thumb { padding-top: 56%; border-radius: 18px 18px 0 0; }
  .vm-feature-overlay { padding: 16px 14px 14px; gap: 10px; }
  .vm-title  { font-size: 1rem; }
  .vm-watch-btn { padding: 10px 12px; }
  .vm-watch-icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .vm-watch-text strong { font-size: 0.84rem; }
  .vm-watch-text em     { font-size: 0.7rem; }
  .vm-playlist { padding: 10px 12px 14px; }
  .vm-pl-item  { padding: 7px 8px; gap: 9px; }
  .vm-pl-item img { width: 64px; height: 38px; border-radius: 6px; }
  .vm-pl-meta strong { font-size: 0.82rem; }
  .vm-pl-meta em     { font-size: 0.68rem; }
  .vm-pl-num   { display: none; }
  .vm-close    { top: 14px; right: 14px; }

  /* ── 2-17. 라이트박스 ── */
  .gfs-lb-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1rem; }
  .gfs-lb-prev  { left: 6px;  width: 38px; height: 38px; font-size: 0.9rem; }
  .gfs-lb-next  { right: 6px; width: 38px; height: 38px; font-size: 0.9rem; }
  .gfs-lb-cap   { font-size: 0.76rem; bottom: 12px; max-width: 90vw; }

  /* ── 2-18. 로고 인트로 ── */
  .logo-intro-wave  { font-size: clamp(2.2rem, 12vw, 4rem); letter-spacing: 0.2em; }
  .logo-intro-sub   { font-size: 0.62rem; letter-spacing: 0.18em; }
  .logo-intro-tagline { font-size: 0.78rem; }
  .logo-intro-bar   { width: min(280px, 72vw); }
}

/* ────────────────────────────────────────────────────────────
   3. 소형 모바일 (≤ 480px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  html { font-size: 14px; }
  .container { padding: 0 12px; }
  .section   { padding: 48px 0; }
  .section-title { font-size: clamp(1.2rem, 6.5vw, 1.6rem) !important; }
  .section-desc  { font-size: 0.84rem; }

  /* 헤더 */
  .nav { height: 54px; }
  .nav-menu { top: 54px; padding: 12px 10px 16px; }
  .logo-main { font-size: 0.92rem; }
  .logo-sub  { display: none; }
  .nav-insta, .nav-yt { width: 30px; height: 30px; font-size: 0.82rem; }

  /* GFS 슬라이더 */
  .gfs-section { min-height: 440px; }
  .gfs-topbar  { padding: 8px 10px 4px; }
  .gfs-brand   { display: none; }  /* 공간 확보 */
  .gfs-tab     { font-size: 0.6rem; padding: 3px 10px; }
  .gfs-arrow   { width: 30px; height: 30px; font-size: 0.72rem; }
  .gfs-prev    { left: 5px; }
  .gfs-next    { right: 5px; }
  .gfs-caption-box { bottom: 82px !important; }
  .gfs-cap-title   { font-size: clamp(0.85rem, 5vw, 1.1rem) !important; }
  .gfs-cap-sub     { font-size: 0.68rem; }
  .gfs-dots        { bottom: 58px !important; }
  .gfs-autoplay-btn { bottom: 52px !important; right: 8px !important; width: 26px; height: 26px; }
  .gfs-thumb       { flex: 0 0 50px !important; height: 34px !important; }
  .gfs-strip       { padding: 4px 8px 8px !important; gap: 4px !important; }

  /* Projects 카드 */
  .proj-card {
    flex: 0 0 calc(100vw - 40px) !important;
    min-width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }
  .proj-card-body { padding: 12px 12px 14px; }
  .proj-card-body h3 { font-size: 0.9rem; }

  /* 그리드 1열 전환 */
  .partners-grid  { grid-template-columns: 1fr !important; }
  .team-grid      { grid-template-columns: 1fr !important; }
  .footer-grid    { grid-template-columns: 1fr !important; gap: 18px; }
  .client-categories { grid-template-columns: 1fr !important; }

  /* 비디오 카드 1열 */
  .vc-grid { grid-template-columns: 1fr !important; }
  .vc-card-featured { grid-column: span 1 !important; }

  /* Project detail */
  .project-photo-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .proj-img-wrap.large { grid-column: span 1 !important; }

  /* 갤러리 그리드 (480px 이하에서도 2열 유지) */
  .gallery-scroll {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .gs-item,
  .gs-item.gs-wide {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .gs-item img { aspect-ratio: 1/1 !important; }

  /* 버튼 */
  .btn    { padding: 10px 20px; font-size: 0.8rem; }
  .btn-sm { padding: 7px 14px; font-size: 0.72rem; }

  /* 기타 */
  .dept-chip    { padding: 5px 11px; font-size: 0.74rem; }
  .stat-chip    { font-size: 0.7rem; padding: 4px 10px; }
  .partner-card { padding: 16px 12px; }
  .contact-form { padding: 16px 12px; }
  .cta-banner-inner { padding: 22px 12px; }
}

/* ────────────────────────────────────────────────────────────
   4. 가로 모드 (Landscape + 모바일 높이)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  /* GFS: 가로 모드에서 높이 제한 + 레이아웃 압축 */
  .gfs-section   { height: 100svh; min-height: 280px; }
  .gfs-topbar    { padding: 5px 14px 3px; }
  .gfs-tabs      { display: none; }          /* 공간 절약 */
  .gfs-brand     { display: flex; }
  .gfs-caption-box {
    bottom: 48px !important;
    left: 12px !important;
    right: 48px !important;
  }
  .gfs-cap-title { font-size: clamp(0.8rem, 3vw, 1rem) !important; }
  .gfs-cap-sub   { font-size: 0.66rem; display: none; }
  .gfs-dots      { bottom: 32px !important; }
  .gfs-autoplay-btn { bottom: 26px !important; }
  .gfs-thumb     { flex: 0 0 52px !important; height: 34px !important; }
  .gfs-strip     { padding: 3px 10px 6px !important; }
  .gfs-progress-bar { height: 2px; }

  /* 기타 섹션 압축 */
  .section { padding: 40px 0; }
}

/* ────────────────────────────────────────────────────────────
   5. 아이폰 SE / 소형 기기 (≤ 375px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  html { font-size: 13.5px; }
  .container { padding: 0 10px; }

  .gfs-tab { font-size: 0.56rem; padding: 3px 8px; }
  .gfs-thumb { flex: 0 0 46px !important; height: 30px !important; }

  .proj-card {
    flex: 0 0 calc(100vw - 32px) !important;
    min-width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .gs-item { flex: 0 0 130px !important; min-width: 130px !important; }
}