/* responsive.css: 768px 이하 모바일 레이아웃.
   style.css에서 가장 마지막에 import 되므로 데스크톱 규칙을 덮어쓴다. */

@media (max-width: 768px) {

  /* --- 1. 좌측 사이드바를 상단 바로 전환 --- */
  .container {
    flex-direction: column;
  }

  .sidebar {
    /* content-box라서 width:100% + 좌우 padding이 뷰포트를 넘겼다.
       flex column의 자식은 기본으로 늘어나므로 width는 auto로 둔다. */
    box-sizing: border-box;
    width: auto;
    padding: 16px 16px 10px;

    /* 상단 바로 바뀌는 폭에서는 고정을 푼다.
       세로로 쌓인 사이드바를 붙여두면 화면 대부분을 가린다. */
    position: static;
    height: auto;
    overflow-y: visible;
    /* sidebar.css의 align-self: flex-start가 남으면 column 방향에서
       폭이 내용만큼 줄어든다. 상단 바는 가로로 꽉 채운다. */
    align-self: stretch;
  }

  /* 프로필: 사진 왼쪽, 이름·설명 오른쪽 (기존 마크업 그대로 그리드로 배치) */
  .sidebar-profile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "img name"
      "img desc";
    align-items: center;
    column-gap: 12px;
    width: 100%;
    margin-bottom: 14px;
  }

  .sidebar-profile > a {
    grid-area: img;
  }

  .sidebar-profile-img {
    width: 56px;
    height: 56px;
    margin-bottom: 0;
  }

  .sidebar-profile-name {
    grid-area: name;
    align-self: end;
    margin-bottom: 2px;
  }

  .sidebar-profile-desc {
    grid-area: desc;
    align-self: start;
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  /* 메뉴: 한 줄 가로 배치. 좁은 화면에서는 아이콘을 빼고 글자만 남긴다 */
  .sidebar ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 0 0 12px;
    width: 100%;
  }

  .sidebar ul li {
    margin: 0;
  }

  .sidebar .menu-icon-wrapper {
    display: none;
  }

  /* 방문자 수와 SNS 링크를 한 줄에 */
  .sidebar-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
  }

  .sidebar-links {
    margin-top: 0;
    margin-bottom: 4px;
    gap: 22px;
  }

  .sidebar footer {
    display: none;
  }

  /* --- 2. 본문 여백 축소 --- */
  .content-area {
    /* 세로 flex에서 margin:0 auto는 cross-axis stretch를 끄고 폭을 내용에 맞춰
       줄인다(카테고리 페이지가 344px로 좁아지던 원인). 모바일에서는 꽉 채운다. */
    box-sizing: border-box;
    max-width: none;
    margin: 0;
    padding: 22px 16px;
  }

  .post {
    padding: 22px 14px;
  }

  /* --- 3. 글 목록: 고정 폭 카드 -> 2열 유동 --- */
  .post-list {
    gap: 14px;
    margin-top: 24px;
  }

  /* 태블릿 폭에서는 2열. content-box라서 padding이 폭에 더해지는 것을 막는다 */
  .post-card {
    box-sizing: border-box;
    width: calc(50% - 7px);
    padding: 14px 12px;
  }

  /* height는 post.css의 aspect-ratio:2/1이 정한다. 여기서 고정값을 주면
     카드 폭과 비율이 어긋나 썸네일 좌우가 잘린다. */
  .post-img {
    margin-bottom: 12px;
  }
}

/* 휴대폰 폭: 카드 1열. 제목이 170px 폭에서 네 줄로 접히는 것보다 낫다 */
@media (max-width: 480px) {

  .post-card {
    width: 100%;
  }

  /* --- 4. 본문 이미지: 세로 고정값 -> 화면에 맞춤 --- */
  .post-image,
  .post-big-image,
  .post-bigger-image,
  .post-biggest-image {
    width: 100%;
    height: auto;
    max-height: 65vh;
  }

  /* --- 5. 카테고리·태그의 고정 폭 해제 --- */
  .category-card {
    width: 100%;
  }

  .category-post-list {
    margin-left: 16px;
  }

  /* --- 6. 넘치는 콘텐츠 가로 스크롤 처리 --- */
  .post-content pre {
    overflow-x: auto;
  }

  /* table은 display:table이라 overflow-x가 먹지 않는다.
     block으로 바꿔야 실제로 가로 스크롤이 된다. */
  .post-content table {
    display: block;
    overflow-x: auto;
    width: max-content;
    max-width: 100%;
  }

  .post-content img,
  .post-content iframe {
    max-width: 100%;
  }
}