/* ================================================================
   mobile.css — 400×824 이하 모바일 최적화
   ================================================================ */

@media screen and (max-width: 480px) {

  /* 1. 기본 타이포 & 간격 ----------------------------------------- */
  html {
    font-size: 15px;
  }
  body {
    padding: 0 .75rem;
  }
  main {
    padding: 2rem 0;
  }

  /* 2. 헤더 ------------------------------------------------------- */
  h1 {
    font-size: 1.75rem;
  }
  h1 .en {
    display: block;
    font-size: .9rem;
    margin-top: .15rem;
  }
  .social {
    gap: .8rem;
    font-size: .85rem;
  }

  /* 3. 섹션 제목 --------------------------------------------------- */
  h3 {
    font-size: 1.1rem;
    margin-bottom: .6rem;
  }
  section {
    margin-bottom: 1.4rem;
  }

  /* 4. 경력 블록 --------------------------------------------------- */
  .career-block {
    padding: .75rem .85rem;
    margin-bottom: .6rem;
  }
  .career-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }
  .career-header time {
    margin-left: 0;
    font-size: .75rem;
  }
  .career-header a {
    font-size: 14px;
  }

  /* 자격증 블록 */
  #cert .career-block {
    padding: .45rem .75rem;
  }

  /* 5. details / summary ------------------------------------------ */
  details {
    padding-left: .65rem;
  }
  details summary {
    font-size: 13.5px;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .35rem 0;
  }
  details summary time {
    font-size: .7rem;
    margin-left: 0;
    width: 100%;
    order: 3;
  }
  details summary .role {
    font-size: .65rem;
    padding: .05rem .4rem;
    order: 2;
  }
  details p {
    font-size: 13px;
    line-height: 1.65;
  }

  /* 6. 카테고리 탭 ------------------------------------------------- */
  .category-nav {
    gap: .4rem;
    margin: .8rem 0;
  }
  .category-btn {
    font-size: .7rem;
    padding: .25rem .45rem;
  }

  /* 7. 스택 리스트 ------------------------------------------------- */
  .stack-list {
    gap: .6rem .8rem;
  }
  .stack-list li {
    font-size: .75rem;
  }
  .stack-list img {
    width: 18px;
    height: 18px;
  }

  /* 8. 터미널 ------------------------------------------------------ */
  .terminal {
    margin-top: 1rem;
    font-size: .75rem;
  }
  .terminal-header {
    padding: .4rem .6rem;
  }
  .terminal-dot {
    width: 10px;
    height: 10px;
  }
  .terminal-title {
    font-size: .65rem;
  }
  .terminal-body {
    padding: .75rem;
    min-height: 60px;
  }
  .terminal-output li {
    padding-left: .5rem;
    font-size: .72rem;
  }

  /* 9. 스킬 상세 토글 --------------------------------------------- */
  .skill-items {
    padding-left: 1rem;
  }
  .skill-item {
    font-size: .72rem;
    padding-left: .5rem;
  }

  /* 10. 소개 텍스트 ------------------------------------------------ */
  #intro p {
    font-size: 14px;
  }
  p {
    font-size: 13.5px;
  }
}