/* ==========================================================
  YOU.D STUDIO Portfolio - responsive.css
  - style.css는 PC(기본) 기준 그대로 유지
  - 여기서 태블릿(~1024px), 모바일(~768px) 두 단계만 오버라이드
  - 모바일 블록이 태블릿 블록보다 뒤에 오므로, 768px 이하 화면에서는
두 블록이 같이 적용되고 모바일 쪽이 우선함
  ========================================================== */

/* ============================================================
   태블릿 (~1024px)
============================================================ */
@media (max-width: 1024px) {

  /* 좌우 여백 최소값 10px -> 20px */
  :root { --side-padding: clamp(20px, 5vw, 310px); }

  /* 상단 고정 로고 - fixed 대신 absolute로, 스크롤하면 같이 넘어감 */
  .brand-mark {position: absolute;top: 10px;right: 10px;width: 40px;height: 40px;}

  /* 공통 섹션 - 높이 고정 해제, 상하 패딩만 축소 */
  .section {min-height: unset;padding: 80px 0;  }

  /* Section 01 : Intro */
  .intro .container { padding:0 27px;}
  .intro-title { font-size: 44px; }
  .intro-eyebrow { font-size: 20px; }
  .intro-nav { margin-top: 120px; gap: 32px; font-size: 14px; }
    .intro-nav a::after{ top: 6px;     right: -16px;}
  .intro-title-line {margin-top: -110px;height: 3px;}

  .career-deco {display:none;  }
  .photo-deco {display:none;  }

  /* Section 02 : Career */
  .career-list { grid-template-columns: repeat(4, 1fr); }

  /* Section 03 : About */
  .about-inner {grid-template-columns: 1fr 320px;gap: 5px;align-items: center;}
  .about-photo {margin-top: 0;max-width: 420px;margin-left: auto;margin-right: auto;  }

  /* Section 04 : Portfolio */
  .portfolio-list { grid-template-columns: repeat(2, 1fr); }

  /* Section 05 : Contact */
  .site-footer { flex-wrap: wrap; row-gap: 24px; }
  .site-footer .logo-group { flex-wrap: wrap; row-gap: 16px; }

  /* 모달 - fit-content가 화면 폭을 넘지 않도록 캡 */
  .portfolio-modal-inner { max-width: calc(100% - 40px); }
  .portfolio-modal-info { flex-direction: column; }
  .portfolio-modal-info p { width: auto; margin-bottom: 12px; }
  .portfolio-modal-info .list-type li { width: calc(50% - 10px); height: auto; }
}

/* ============================================================
   모바일 (~768px)
============================================================ */
@media (max-width: 768px) {
 .intro-title-line{display:none;  }
  .section { padding: 60px 0; }

  /* Section 01 : Intro */
  .intro-title { font-size: 30px; line-height: 1.4; }
  .intro-title p, .intro-title strong { padding:0;}
  .intro-eyebrow { font-size: 16px; margin-left: 0; }
  .intro-title strong::before { content:none; }
  .intro-nav {flex-wrap: wrap;gap: 16px 24px;margin-top: 64px;margin-left: 0;  }
  .intro-title-line { margin-top: -96px; height: 3px; }
  .intro-nav a::after {right: -12px;top: 4px;}
  .career-deco {display:none;  }

  /* Section 02 : Career */
  .career.section { padding-bottom:0;} 
  .career-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .career-list li {height: auto;}
  .career-label { font-size: 13px; }

  /* Section 03 : About */
  .about-inner {gap:0;grid-template-columns: 1fr;}
  .about-list {order: 2;background: #f7f7f7;border-radius: 20px;padding: 30px;margin-bottom: 30px;}
.intro .about-photo { display:block;}
.about-photo {  order: 1;}
  .about-item-title {font-size: 14px;}
  .about-item-desc {font-size: 12px;}
  .about-photo {max-width: 280px;width: 50%;}

  /* Section 04 : Portfolio - 1열 아니고 2열 */
  .portfolio-list { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* Section 05 : Contact */
  .contact-lead {font-size: 17px;margin-bottom: 20px;}
  .site-footer { flex-direction: column; align-items: flex-start; }
  .site-footer .logo-group { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer .info dt {width: 120px;font-size: 14px;}
  .site-footer .info dd {font-size: 14px;}
  .site-footer .buttons {width: 100%;flex-direction: column;gap: 8px;display: flex;}
  .site-footer .buttons .btn { flex: 1; margin: 0; padding: 12px 8px; font-size: 13px; }

  /* 모달 - 화면 꽉 채우고, info는 세로 스택으로 (요청사항) */
  .portfolio-modal { padding: 20px; }
  .portfolio-modal-inner { width: 100%; max-width: 100%; margin: 0; }
  .portfolio-modal-info {flex-direction: column;padding: 20px;  }
  .portfolio-modal-info p { width: auto; margin-bottom: 12px; }
  .portfolio-modal-info .list-type { gap: 12px; }
  .portfolio-modal-info .list-type li { width: 100%; height: auto; padding: 16px; }
  .portfolio-modal-close { top: 16px; right: 16px; width: 40px; height: 40px; }
}