/* 전체 */
body,
html {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: #f9f9f9;
  color: #111;
  font-size: 18px;
}

.container {
  display: flex;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: #bfc68a;
}

/* 사이드바 */
.sidebar {
  width: 220px;
  background-color: #eee;
  color: #333;
  padding: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sidebar h1.site-title {
  color: #bfc68a;
  font-size: 1.5em;
  margin-bottom: 30px;
}

.sidebar nav ul {
  list-style: none;
  padding: 0;
}

.sidebar nav ul li {
  margin-bottom: 15px;
}

.sidebar nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.2s;
}

.sidebar nav ul li a:hover,
.sidebar nav ul li a.active {
  color: #bfc68a;
  font-weight: bold;
}

/* 메인 콘텐츠 */
.main-content {
  flex: 1;
  padding: 30px;
  max-width: 800px;
}

/* 페이지 제목 */
h1,
h2 {
  color: #111;
  margin-bottom: 20px;
}

/* 포스트 목록 */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  padding: 12px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-list li a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.post-list li a:hover,
.post-list li a:active {
  color: #bfc68a;
}

/* 날짜 */
.post-list .date {
  color: #888;
  font-size: 0.85em;
  margin-left: 10px;
  flex-shrink: 0;
}

/* 푸터 */
footer {
  text-align: center;
  margin-top: 50px;
  font-size: 0.8em;
  color: #666;
}

/* 개별 글 */
.post-content {
  line-height: 1.8;
  color: #111;
  font-size: 1.05em;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  color: #333;
  margin-top: 1.5em;
}

.post-content p {
  margin-bottom: 1.2em;
}

.post-content a {
  color: #bfc68a;
  text-decoration: underline;
}

.post-content a:hover {
  color: #000;
}

/* 코드 블록 스타일 - macOS 터미널 스타일 */
.post-content pre {
  background-color: #282c34; /* 더 어두운 배경 */
  color: #abb2bf; /* 기본 텍스트 색상 */
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.95em;
  line-height: 1.6;
  margin: 2em 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* macOS 스타일 윈도우 버튼 */
.post-content pre::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff5f56;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
  z-index: 1;
}

.post-content pre code {
  display: block;
  background-color: transparent;
  padding: 45px 20px 20px 20px; /* 상단에 여유 공간 */
  border: none;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 0.9em;
  overflow-x: auto;
}

/* 인라인 코드 스타일 - 가독성 개선 */
.post-content code {
  background-color: #2d2d2d;  /* 어두운 배경 */
  color: #61afef;              /* 밝은 파란색 */
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 0.9em;
  font-weight: 500;
}

/* 구문 강조 스타일 (Prism.js 커스텀 색상 - One Dark 테마) */
/* Prism.js 기본 테마 위에 덮어쓰기 */
.post-content pre[class*="language-"] {
  background-color: #282c34 !important;
  margin: 2em 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.post-content code[class*="language-"] {
  background-color: transparent !important;
  color: #abb2bf !important;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace !important;
  padding: 45px 20px 20px 20px !important;
}

/* 키워드 (const, let, if, return 등) */
.token.keyword,
.token.control,
.token.import,
.token.export,
.token.return {
  color: #c678dd !important; /* 보라색 */
}

/* 함수명 */
.token.function {
  color: #61afef !important; /* 파란색 */
}

/* 문자열 */
.token.string,
.token.template-string {
  color: #98c379 !important; /* 초록색 */
}

/* 숫자 */
.token.number {
  color: #d19a66 !important; /* 주황색 */
}

/* 연산자 (=, +, -, etc) */
.token.operator,
.token.punctuation {
  color: #abb2bf !important; /* 연한 회색 */
}

/* 변수, 파라미터 */
.token.variable,
.token.parameter {
  color: #e06c75 !important; /* 빨간색 */
}

/* 주석 */
.token.comment,
.token.prolog,
.token.doctype {
  color: #5c6370 !important; /* 회색 */
  font-style: italic !important;
}

/* 클래스명 */
.token.class-name {
  color: #e6c07b !important; /* 노란색 */
}

/* 속성 */
.token.property,
.token.attr-name {
  color: #d19a66 !important; /* 주황색 */
}

/* 불린, null, undefined */
.token.boolean,
.token.null,
.token.undefined {
  color: #d19a66 !important; /* 주황색 */
}

/* HTML/XML 태그 */
.token.tag {
  color: #e06c75 !important; /* 빨간색 */
}

/* 속성값 */
.token.attr-value {
  color: #98c379 !important; /* 초록색 */
}

/* 선택자 (CSS) */
.token.selector {
  color: #e06c75 !important; /* 빨간색 */
}

/* 리스트 스타일 개선 */
.post-content ul {
  margin-bottom: 1.2em;
  padding-left: 2em;
  line-height: 1.8;
  list-style-type: disc;
}

.post-content ol {
  margin-bottom: 1.2em;
  padding-left: 2em;
  line-height: 1.8;
  list-style-type: decimal;
  counter-reset: item;
}

.post-content ol li {
  display: list-item;
}

.post-content li {
  margin-bottom: 0.5em;
}

/* 코드 블록 스크롤바 스타일 */
.post-content pre code::-webkit-scrollbar {
  height: 8px;
  background-color: #282c34;
}

.post-content pre code::-webkit-scrollbar-thumb {
  background-color: #4b5263;
  border-radius: 4px;
}

.post-content pre code::-webkit-scrollbar-track {
  background-color: #282c34;
}

/* 표(Table) 스타일 */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 6px;
}

.post-content table thead {
  background-color: #bfc68a;
  color: #fff;
}

.post-content table th {
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #a8af7a;
}

.post-content table td {
  padding: 10px 15px;
  border: 1px solid #ddd;
  color: #333;
}

.post-content table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.post-content table tbody tr:hover {
  background-color: #f0f0f0;
  transition: background-color 0.2s;
}