/* BASE */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  background: #f7f7f5;
  color: #333;
}

/* LAYOUT */
.layout {
  display: flex;
}

/* SIDEBAR */
.sidebar {
  width: 170px;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  padding: 40px 18px;
  border-right: 1px solid #e5e5e5;
  background: #f7f7f5;
}

/* PROFILE */
.profile {
  margin-bottom: 30px;
  text-align: center;
}

/* 프로필 이미지 */
.profile-img img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

/* 타이틀 */
.blog-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}

.blog-desc {
  font-size: 12px;
  color: #777;
}

/* MENU */
.menu a {
  display: block;
  font-size: 13px;
  padding: 6px 0;
  color: #555;
  text-decoration: none;
}

.menu a:hover {
  color: #000;
}

/* 카테고리 구분선 */
.menu a:nth-child(3) {
  margin-top: 0;
  border-top: none;
  padding-top: 6px;
}

/* MAIN */
.content {
  margin-left: 170px;
  padding: 60px 50px;
  width: calc(100% - 170px);
}

/* LIST — 2열 그리드 */
.post-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.post-item {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center; /* 기존 flex-start에서 center로 변경 */
  padding-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
}

/* 대표사진 — 카드 왼쪽에 작게 */
.post-thumb {
  flex-shrink: 0;
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-text {
  flex: 1;
  display: block;
  min-width: 0;
}

/* 미리보기 밑줄 제거 */
.post-item a {
  text-decoration: none;
  color: inherit;
}

.title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}

.summary {
  font-size: 13px;
  color: #777;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.date {
  font-size: 12px;
  color: #aaa;
}

/* POST */
.post {
  max-width: 700px;
  margin: 0 auto;
}

.post-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
}

.post-meta {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 40px;
}

/* BODY */
.post-body {
  font-size: 15px;
  line-height: 1.8;
}

.post-body p {
  margin-bottom: 18px;
}

.post-body img {
  max-width: 100%;
  margin: 25px 0;
}

/* PAGING */
.paging {
  text-align: center;
  margin-top: 60px;
}

.paging a {
  margin: 0 10px;
  color: #888;
  text-decoration: none;
}

/* 방문자수 우측 하단 */
.visitor-count {
  position: fixed;
  bottom: 20px;
  right: 24px;
  font-size: 11px;
  color: #888;
  z-index: 100;
}

.visitor-count span {
  color: #555;
  font-weight: 500;
}
/* CSS 맨 아래 미디어 쿼리 부분을 이 코드로 전부 덮어씌우세요 */
@media screen and (max-width: 768px) {
  /* 전체 레이아웃 가로 정렬 해제 및 넘침 방지 */
  .layout {
    display: block !important;
    width: 100% !important;
    overflow-x: hidden;
  }

  /* 사이드바 여백 조정 및 높이 자동 */
  .sidebar {
    width: 100% !important;
    min-height: auto !important;
    position: relative !important;
    padding: 20px 10px !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
  }

  /* 메뉴: 한 줄 유지 및 중앙 정렬 */
  .menu {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important; /* 절대 줄바꿈 금지 */
    overflow-x: auto;             /* 메뉴 많으면 옆으로 밀어서 보기 */
    gap: 12px !important;         /* 메뉴 간격 살짝 축소 */
    padding: 5px 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  .menu a {
    flex-shrink: 0 !important;    /* 글자 크기 유지 */
    font-size: 13px !important;   /* 모바일 가독성을 위해 살짝 조절 */
    white-space: nowrap !important;
  }

  /* 본문 영역 넓이 고정 */
  .content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
  }

  /* 목록: 무조건 한 줄에 하나씩 배치 */
  .post-list {
    display: block !important;    /* 그리드 해제 */
    width: 100% !important;
  }

  .post-item {
    display: flex !important;
    flex-direction: row !important; /* 사진-글 가로 유지 */
    width: 100% !important;
    margin-bottom: 15px !important;
    align-items: center !important;
  }

  /* 사진 크기 고정 */
  .post-thumb {
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0 !important;
  }

  /* 본문 내 이미지/표 등 잘림 방지 */
  .post-body img, .post-body table {
    max-width: 100% !important;
    height: auto !important;
  }
}