:root {
  --running-primary: #3498db;
  --running-secondary: #2ecc71;
  --running-accent: #e74c3c;
  --korean-font: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "맑은 고딕", sans-serif;
  --body-font-size: 23px;
  --content-max-width: 800px;
}

/* 라이트모드 변수 */
.light, html[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #eaecef;
  --sidebar-bg: #f8f9fa;
  --table-alternate-bg: rgba(52, 152, 219, 0.1);
  --blockquote-bg: rgba(231, 76, 60, 0.1);
  --code-bg: rgba(175, 184, 193, 0.2);
  --pre-bg: #f8f9fa;
}

/* 다크모드 변수 */
.ayu,
.coal,
.navy,
.dark,
html[data-theme="dark"],
html[data-theme="ayu"],
html[data-theme="coal"],
html[data-theme="navy"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --border-color: #444;
  --sidebar-bg: #252525;
  --table-alternate-bg: rgba(52, 152, 219, 0.2);
  --blockquote-bg: rgba(231, 76, 60, 0.2);
  --code-bg: rgba(175, 184, 193, 0.3);
  --pre-bg: #252525;
}

body {
  font-family: var(--korean-font);
  font-size: var(--body-font-size);
  line-height: 1.8;
  color: var(--text-color);
  background-color: var(--bg-color);
  padding-bottom: 40px;
}

.content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 15px 60px 15px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--korean-font);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}

.chapter h1 {
  font-size: 2.2em;
  color: var(--running-primary);
  border-bottom: 2px solid var(--running-primary);
  padding-bottom: 0.5em;
  margin-top: 1em;
}

.chapter h2 {
  font-size: 1.8em;
  color: var(--running-secondary);
  margin-top: 1.2em;
  margin-bottom: 1em;
  padding-bottom: 0.3em;
}

.chapter h3 {
  font-size: 1.5em;
  margin-top: 1em;
}

.chapter h4 {
  font-size: 1.3em;
}

/* 기본 텍스트 설정 */
p {
  margin: 1.2em 0;
  text-align: justify;
  word-break: keep-all;
}

/* 텍스트 선택 스타일 */
::selection {
  background-color: var(--running-primary);
  color: white;
}

/* 링크 스타일 */
a {
  color: var(--running-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--running-primary);
  transition: color 0.3s, border-bottom 0.3s;
}

a:hover {
  color: var(--running-secondary);
  border-bottom: 1px solid var(--running-secondary);
}

/* 인용구 스타일 - 러닝 팁에 사용 */
blockquote {
  border-left: 4px solid var(--running-accent);
  padding: 1em 1.5em;
  background-color: var(--blockquote-bg);
  margin: 1.5em 0;
  font-size: 1.05em;
  border-radius: 0 4px 4px 0;
}

/* 운동 계획 표 스타일 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 4px;
  overflow: hidden;
}

table th {
  background-color: var(--running-primary);
  color: white;
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
}

table td {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

table tr:nth-child(even) {
  background-color: var(--table-alternate-bg);
}

table tr:last-child td {
  border-bottom: none;
}

table tr:hover {
  background-color: rgba(52, 152, 219, 0.05);
}

/* 진행 단계 표시 */
.progression-steps {
  display: flex;
  justify-content: space-between;
  margin: 2em 0;
}

.progression-step {
  flex: 1;
  text-align: center;
  padding: 1em;
  border: 1px solid #ddd;
  border-right: none;
}

.progression-step:last-child {
  border-right: 1px solid #ddd;
}

.progression-step.active {
  background-color: var(--running-secondary);
  color: white;
}

/* 목차 네비게이션 개선 */
.sidebar {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
}

.sidebar-scrollbox {
  padding-top: 1em;
}

.sidebar .chapter {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

.sidebar a {
  border-bottom: none;
}

.sidebar a.active {
  color: var(--running-secondary);
  font-weight: 600;
}

.sidebar a:hover {
  background-color: rgba(46, 204, 113, 0.1);
}

/* 페이지 네비게이션 버튼 */
.nav-chapters {
  border-radius: 4px;
  font-size: 2.5em;
  padding: 0.2em;
  width: 1.5em;
  transition: all 0.3s;
}

.mobile-nav-chapters {
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
}

/* 모바일 최적화 */
@media only screen and (max-width: 768px) {
  :root {
    --body-font-size: 21px;
    --content-max-width: 100%;
  }

  .content {
    padding: 0 10px 40px 10px;
  }

  .chapter h1 {
    font-size: 1.8em;
  }

  .chapter h2 {
    font-size: 1.5em;
  }

  .chapter h3 {
    font-size: 1.3em;
  }

  .chapter h4 {
    font-size: 1.1em;
  }

  .progression-steps {
    flex-direction: column;
  }

  .progression-step {
    margin-bottom: 0.5em;
    border: 1px solid #ddd;
  }

  blockquote {
    padding: 0.8em 1em;
  }

  table {
    font-size: 0.85em;
  }

  table th, table td {
    padding: 8px 10px;
  }
}

/* 경고 메시지 스타일 */
.light .warning,
html[data-theme="light"] .warning {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  color: #856404;
}

.ayu .warning,
.coal .warning,
.navy .warning,
.dark .warning,
html[data-theme="dark"] .warning,
html[data-theme="ayu"] .warning,
html[data-theme="coal"] .warning,
html[data-theme="navy"] .warning {
  background-color: rgba(255, 193, 7, 0.2);
  border-left: 4px solid #ffc107;
  color: #e9d16c;
}

.warning {
  padding: 1em 1.5em;
  margin: 1.5em 0;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: relative;
}

.warning::before {
  content: "⚠️ 주의";
  display: block;
  font-weight: 700;
  margin-bottom: 0.5em;
}

.light .tip,
html[data-theme="light"] .tip {
  background-color: #d4edda;
  border-left: 4px solid #28a745;
  color: #155724;
}

.ayu .tip,
.coal .tip,
.navy .tip,
.dark .tip,
html[data-theme="dark"] .tip,
html[data-theme="ayu"] .tip,
html[data-theme="coal"] .tip,
html[data-theme="navy"] .tip {
  background-color: rgba(40, 167, 69, 0.2);
  border-left: 4px solid #28a745;
  color: #8fe5a0;
}

.tip {
  padding: 1em 1.5em;
  margin: 1.5em 0;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: relative;
}

.tip::before {
  content: "💡 팁";
  display: block;
  font-weight: 700;
  margin-bottom: 0.5em;
}

/* 코드 블록 스타일 */
pre {
  background-color: var(--pre-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1em;
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.95em;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  background-color: var(--code-bg);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre code {
  background-color: transparent;
  padding: 0;
  font-size: 1em;
}

/* 목록 스타일 */
ul, ol {
  padding-left: 2em;
  margin: 1.2em 0;
}

li {
  margin: 0.5em 0;
}

/* 이미지 스타일 */
img {
  max-width: 100%;
  height: auto;
  margin: 1.5em 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 구분선 스타일 */
hr {
  border: 0;
  height: 1px;
  background-color: #ddd;
  margin: 2em 0;
}