/* ─────────────────────────────────────────────
   반응형 오버라이드
   데스크톱(≥1280px) 스타일은 각 섹션 CSS에 있고,
   이 파일은 그것을 좁은 화면에서만 덮어쓴다.
   모든 @media 는 이 파일에만 둔다.
   ───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════
   ≤1279px : 여백 연속 축소 + 고정 basis 완화
   구조는 그대로 두고 좁아질 여지만 만든다.

   패딩은 계단식이 아니라 clamp() 로 줄인다.
   계수는 뷰포트 1280px 에서 원래 값과 정확히 일치한다:
     6.25vw × 1280 = 80px
     5.00vw × 1280 = 64px
     3.75vw × 1280 = 48px
   계단식으로 바꾸면 1280→1279px 에서 콘텐츠 폭이
   1120→1199px 로 되레 넓어지는 역전이 생긴다.
   ═══════════════════════════════════════════════ */
@media (max-width: 1279px) {

  /* ─ 좌우 여백 ─ */
  .container            { padding: 0 clamp(20px, 6.25vw, 80px); }
  .nav-inner            { padding: 24px clamp(16px, 3.75vw, 48px); }
  .hero-text            { padding: 80px clamp(20px, 6.25vw, 80px) 60px; }
  .hero-visual-inner    { padding: 80px clamp(20px, 6.25vw, 80px); }
  .traction-inner       { padding: 80px clamp(20px, 6.25vw, 80px); }
  .feature-cards-inner  { padding: 120px clamp(20px, 5vw, 64px); }
  .stage-inner          { padding: 120px clamp(20px, 5vw, 64px); }
  .team-inner           { padding: 120px clamp(20px, 5vw, 64px); }
  .agents-inner         { padding: 72px clamp(20px, 5vw, 64px) 120px; }
  .roi-inner            { padding: 0 clamp(20px, 5vw, 64px) 80px; }
  .roi-cards-area       { padding: 120px clamp(20px, 5vw, 64px); }
  .investors-inner      { padding: 80px clamp(20px, 5vw, 64px); }
  .footer-section       { padding: 0 clamp(20px, 5vw, 64px) 120px; }

  /* ─ 고정 flex-basis → 축소 허용 ─ */
  .hero-title           { flex: 1 1 380px; }
  .hero-desc            { max-width: none; }
  .hero-visual-left     { flex: 1 1 340px; }
  .digitalization-left  { flex: 1 1 340px; }
  .digitalization-right { max-width: none; }
  .roi-heading-block    { flex: 1 1 280px; }
  .team-left            { flex: 0 1 324px; width: auto; }
  .stage-header         { flex: 1 1 360px; width: auto; }

  /* ─ 하위 고정 width → max-width ─ */
  .stage-heading        { width: auto; max-width: 312px; }
  .stage-desc           { width: auto; max-width: 393px; }
  .roi-heading          { width: auto; max-width: 310px; }
  .team-left-img        { width: 100%; max-width: 324px; }
  /* height:384px 고정 탓에 width:auto 만으로는 종횡비가 폭을 320px 에 묶는다.
     height 와 min-width 까지 풀어야 실제로 축소된다. */
  .roi-card-img         { flex: 1 1 0; min-width: 0; width: auto; height: auto;
                          max-width: 320px; }
  .why-card-body        { max-width: none; }

  /* feature 카드의 고정 높이는 데스크톱 2×2 그리드에서 카드끼리 줄을
     맞추려는 장치다. 폭이 좁아지면 텍스트가 더 접혀 overflow:hidden 에
     잘린다. min-height 로 바꿔 정렬은 유지하되 넘치면 자라게 한다. */
  .feat-card--fixed     { height: auto; min-height: 687px; }
  .feat-card-title      { height: auto; min-height: 106px; overflow: visible; }
  .feat-card-features   { height: auto; min-height: 157px; overflow: visible; }
  .traction-desc        { max-width: none; }
}

/* ═══════════════════════════════════════════════
   ≤1023px : 2단 → 1단
   실측상 넘침이 시작되는 지점이 1024px 미만이다.
   ═══════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* ─ 좌우 2단 레이아웃을 세로로 ─ */
  .hero-text,
  .hero-visual-inner,
  .digitalization .container,
  .stage-inner,
  .roi-header-row,
  .agents-text-row,
  .team-inner,
  .footer-inner        { flex-direction: column; }

  /* ─ 세로 전환 후 고정폭 해제 ─ */
  .hero-title,
  .hero-visual-left,
  .digitalization-left,
  .stage-header,
  .roi-heading-block,
  .team-left,
  .footer-nav          { flex: 0 0 auto; width: 100%; }
  .footer-nav          { min-height: 0; }

  .hero-desc,
  .stage-heading,
  .stage-desc,
  .roi-heading         { max-width: none; }

  .hero-screenshot     { max-width: 100%; }
  .team-left-img       { max-width: 324px; }

  /* ─ 그리드 열 축소 ─ */
  .product-cards-grid  { grid-template-columns: repeat(2, 1fr); }
  .feature-cards-grid  { flex-direction: column; }

  /* 카드가 세로로 쌓이면 줄 맞출 상대가 없다. 텍스트 영역 하한을 풀어
     내용 높이만큼만 차지하게 한다. 카드 하한은 이미지 영역(flex:1)이
     붕괴하지 않도록 남긴다. */
  .feat-card-title     { min-height: 0; }
  .feat-card-features  { min-height: 0; }
  .roi-cards-area      { flex-wrap: wrap; }
  .roi-card-img        { flex: 1 1 calc(50% - 16px); }

  /* ─ 햄버거 메뉴 ─
     nav 는 이미 position:sticky 이므로 .nav-inner 에 relative 를 주면
     패널이 nav 바로 아래에 붙는다. */
  .nav-inner           { position: relative; }
  .nav-toggle          { display: flex; }
  .nav-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(16px, 3.75vw, 48px) 20px;
    background: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .nav-items.is-open   { display: flex; }
  .nav-items a         { padding: 14px 0; font-size: 17px; }
  .nav-items .nav-btn  { margin-top: 12px; text-align: center; padding: 14px 20px; }

  /* ─ Agent 다이어그램: 축소 대신 가로 스크롤 ─
     2304x1432 에 라벨 9개라 좁은 화면에서 축소하면 글자가 판독 불가.
     원본을 그대로 두고 가로로 밀어서 보게 한다. */
  .agents-graph        { position: relative; }
  .agents-graph-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .agents-graph img    { width: 900px; max-width: none; }
  /* 우측 페이드 — 더 볼 내용이 있음을 알리는 힌트 (섹션 배경은 흰색) */
  .agents-graph::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
  }

  /* ─ 세로로 쌓이면 간격이 과해지므로 축소 ─ */
  .hero-text           { gap: 16px; }
  .hero-visual-inner   { gap: 40px; }
  .stage-inner         { gap: 32px; }
  .team-inner          { gap: 32px; }
  .footer-inner        { gap: 48px; }
}

/* ═══════════════════════════════════════════════
   ≤640px : 모바일
   좌우 여백은 ≤1279px 의 clamp() 하한(20px)이 이미
   맡고 있으므로 여기서는 세로 여백과 타이포만 줄인다.
   ═══════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ─ 세로 여백 축소 ─ */
  .hero-text           { padding-top: 40px; padding-bottom: 32px; }
  .hero-visual-inner   { padding-top: 48px; padding-bottom: 48px; }
  .traction-inner      { padding-top: 48px; padding-bottom: 48px; }
  .digitalization      { padding: 56px 0; }
  .feature-cards-inner { padding-top: 56px; padding-bottom: 56px; }
  .stage-inner         { padding-top: 56px; padding-bottom: 56px; }
  .team-inner          { padding-top: 56px; padding-bottom: 56px; }
  .agents-inner        { padding-top: 40px; padding-bottom: 56px; }
  .roi-inner           { padding-bottom: 48px; }
  .roi-cards-area      { padding-top: 48px; padding-bottom: 48px; }
  .investors-inner     { padding-top: 48px; padding-bottom: 48px; }
  .why-section         { padding: 56px 0; }
  .why-card            { padding: 32px 24px; }
  .footer-section      { padding-bottom: 56px; }

  /* grid-template-columns:max-content 1fr 이 이메일(끊을 수 없는 문자열)을
     밀어내 320px 화면에서 44px 넘쳤다. 열을 줄이면 이메일이 주소 중간에서
     쪼개지므로("meatos@ncr / edible.ai"), 라벨을 위로 올려 이메일에
     전체 폭을 준다. */
  .footer-emails       { grid-template-columns: 1fr; row-gap: 2px; }
  .footer-email-label  { margin-top: 12px; }
  .footer-inner        { padding-top: 48px; }

  /* ─ 타이포 스케일 다운 ─ */
  .hero-title          { font-size: 32px; line-height: 1.3; }

  .section-heading,
  .feature-cards-title,
  .stage-heading,
  .agents-heading,
  .roi-heading,
  .traction-title,
  .footer-title        { font-size: 24px; line-height: 1.4; }

  .why-card-title,
  .team-title,
  .team-history-title,
  .investors-title     { font-size: 22px; line-height: 1.4; }

  .feat-card-title,
  .stage-label,
  .stage-card-title    { font-size: 20px; line-height: 1.4; }

  .product-card-name,
  .feat-card-label span { font-size: 18px; }

  .hero-desc,
  .section-body,
  .stage-desc,
  .stage-card-body,
  .agents-desc,
  .roi-desc,
  .traction-desc,
  .why-card-body,
  .team-desc,
  .team-tl-event,
  .feat-card-features,
  .product-card-desc,
  .footer-sub          { font-size: 16px; line-height: 1.6; }

  /* ─ 그리드 완전 1열 ─ */
  .product-cards-grid,
  .why-grid            { grid-template-columns: 1fr; }
  .roi-card-img        { flex: 1 1 100%; max-width: 100%; }

  /* ─ 타임라인: 날짜를 이벤트 위로 ─
     .team-tl-date(53px) + .team-tl-dot-wrap(58px) = 111px 고정폭이
     좁은 화면에서 이벤트 텍스트를 압박한다. 세로로 쌓고,
     기준이 사라진 점·세로선은 숨긴다. */
  /* align-items:center 가 세로 전환 시 '가로 중앙 정렬'로 뒤바뀌어
     짧은 항목만 가운데로 몰린다. flex-start 로 되돌린다. */
  .team-tl-row         { flex-direction: column; align-items: flex-start;
                         gap: 4px; min-height: 0; }
  .team-tl-date        { flex: 0 0 auto; }
  .team-tl-event       { text-align: left; }

  /* 배지(120px 고정)가 제목을 밀어 'AX 고 / 도화' 처럼 끊긴다.
     좁은 화면에서는 배지를 제목 아래로 내린다. */
  .stage-row-header    { flex-direction: column; align-items: flex-start; gap: 12px; }
  .team-tl-dot-wrap    { display: none; }
  .team-timeline::before { display: none; }

  /* ─ 데스크톱 전용 강제 개행 숨김 (Task 9에서 클래스 부여) ─ */
  br.br-pc             { display: none; }
}