/* =========================
   반응형
   모바일을 데스크톱의 축소판으로 다루지 않고, 같은 정체성을 유지한 채 구성만 자연스럽게 단순화합니다.
   우선순위: 1.가독성 2.프로젝트 이미지 3.위계 4.여백 5.성능
   모바일에서는 패럴랙스·커스텀 커서 모두 비활성화(js도 matchMedia/pointer 체크로 동일하게 처리)
========================= */

@media (max-width:1280px){
  .works_grid_redesign,.works_grid_personal,.works_grid_team{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}
}

@media (max-width:1024px), (orientation:portrait) and (max-width:1400px){
  .hero_section{display:block;min-height:auto;padding-top:90px}
  .hero_character{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    height:min(52vh,540px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .character_img{width:auto;height:100%;object-fit:contain;object-position:center bottom}
  .hero_copy{
    position:relative;
    inset:auto;
    width:100%;
    max-width:none;
    margin-left:0;
    padding:28px var(--pad) 80px;
    gap:18px;
  }
  .hero_title{font-size:clamp(2.8rem,7vw,4.4rem)}
  .hero_identity_name,.hero_identity_fields{font-size:.6rem}
  .hero_vertical,.scroll_cue{display:none}

  .about_section{ grid-template-columns:1fr; gap:36px; }
  .about_character{height:clamp(360px,120vw,520px)}
}

/* 세로형 태블릿·고해상도 모바일: 겹침 없는 2열로 좌우 공간을 활용합니다. */
@media (min-width:761px) and (max-width:1400px) and (orientation:portrait){
  .hero_section{
    display:grid;
    grid-template-columns:minmax(0,46%) minmax(0,54%);
    align-items:center;
    min-height:auto;
    padding-top:76px;
  }
  .hero_character{
    grid-column:1;
    width:100%;
    height:auto;
    aspect-ratio:941/1180;
    align-self:end;
  }
  .hero_copy{
    grid-column:2;
    align-self:center;
    padding:36px clamp(32px,5vw,72px);
  }
  .hero_title{font-size:clamp(3.2rem,5.4vw,5rem)}
}

@media (max-width:760px){

  /* 헤더: 로고 + 테마 토글 + 햄버거 메뉴 */
  .site_header{padding:18px var(--pad);grid-template-columns:auto 1fr auto auto;justify-content:start;gap:14px}
  .header_meta{display:none}
  .header_wordmark{font-size:1.28rem}
  .theme_toggle{ grid-column:3; gap:8px; font-size:.58rem; }
  .menu_toggle{grid-column:4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:38px;height:38px;border:none;background:none;padding:0;cursor:pointer}
  .menu_toggle span{display:block;width:20px;height:2px;background:var(--text);transition:transform .25s ease,opacity .2s ease}
  .site_header.menu_open .menu_toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site_header.menu_open .menu_toggle span:nth-child(2){opacity:0}
  .site_header.menu_open .menu_toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .header_nav{position:fixed;left:0;right:0;top:75px;z-index:59;display:flex;align-items:stretch;justify-content:flex-start;flex-direction:column;gap:0;padding:0 var(--pad);border-bottom:1px solid var(--line);background:var(--bg);box-shadow:0 18px 32px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility .25s ease;counter-reset:mobile_nav}
  .header_nav a{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0;border-bottom:1px solid var(--line);font-size:.72rem}
  .header_nav a:last-child{border-bottom:0}
  .header_nav a::before{content:'0' counter(mobile_nav);counter-increment:mobile_nav;margin-right:18px;color:var(--accent);font-size:.52rem}
  .site_header.menu_open .header_nav{opacity:1;visibility:visible;transform:none;pointer-events:auto}

  /* HERO: 데스크톱의 크롭 배치를 그대로 축소하지 않고, 모바일 전용 구성으로 다시 짭니다.
     - 캐릭터를 위에, 헤드라인을 아래로 스택
     - object-fit을 cover→contain으로 바꿔서 얼굴이 절대 잘리지 않게 안전하게 처리
     - 패럴랙스는 js/main.js에서 터치 기기 체크로 이미 비활성화되어 있음 */
  .hero_section{ display:block; min-height:auto; padding-top:82px; }
  .hero_character{
    position:relative;
    left:auto; bottom:auto;
    width:100%; height:clamp(300px,92vw,400px);
    aspect-ratio:auto;
    overflow:visible;
    display:flex; align-items:flex-end; justify-content:center;
  }
  .character_img{
    width:auto;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    transform:translateX(clamp(12px,5vw,34px));
  }
  .hero_copy{
    position:relative;
    inset:auto;
    align-items:center;
    width:100%;
    max-width:680px;
    margin:-10px auto 0;
    padding:10px clamp(28px,7vw,58px) 62px;
    gap:13px;
    text-align:center;
  }
  .hero_title{ font-size:clamp(2.3rem,10.2vw,3.5rem); line-height:1; }
  .hero_identity{align-items:center;gap:5px;margin-bottom:4px}
  .hero_sub{max-width:520px;font-size:.9rem;line-height:1.6}
  .hero_sub br{ display:none; }
  .scroll_cue{ display:none; }

  /* WORKS: 1열, 이미지가 먼저 눈에 들어오도록 여백 축소 */
  .works_section{ padding:72px var(--pad) 70px; }
  .works_head{ flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:30px; }
  .works_intro{ text-align:left; }
  .works_title{font-size:clamp(3.6rem,18vw,5.6rem)}
  .works_group{margin-top:44px}
  .works_group_head{grid-template-columns:auto auto 1fr;gap:14px;margin-bottom:22px}
  .works_group_head h3,.works_group_head span{font-size:.62rem}
  .works_grid_redesign,.works_grid_personal,.works_grid_team{grid-template-columns:1fr;gap:34px}

  /* ABOUT: 화면이 좁아지면 cover 크롭 대신 contain으로 바꿔 얼굴이 잘리지 않게 안전하게 처리 */
  .about_section{ padding:80px var(--pad); }
  .about_character{height:clamp(360px,120vw,480px)}
  .about_char_img{
    object-fit:contain;
    object-position:center top;
  }
  .about_desc{ max-width:100%; }

  .about_contact{margin-top:28px;padding-top:22px}

  .site_footer{grid-template-columns:1fr auto;padding:22px var(--pad)}
  .site_footer_thanks{grid-column:1/-1;grid-row:1;margin-bottom:14px}
  .site_footer_copyright{align-items:flex-start;flex-direction:column;gap:3px;white-space:normal}

  /* 프로젝트 상세페이지: 모바일 헤더가 낮아지므로(로고만 남음, ≈53px) 탭바 기준선도 같이 낮춤 */
  .detail_tabs{ top:53px; margin-top:53px; gap:18px; padding:0 var(--pad); }
  .detail_gallery{ grid-template-columns:1fr; gap:18px; padding:0 var(--pad) 70px; }
  .detail_prevnext{ padding:20px var(--pad); }
}

@media (max-width:420px){
  .work_title{ font-size:.86rem; }
}