html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@font-face {
  font-family: "MonoplexKR";
  src: url("../fonts/MonoplexKR-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "MonoplexKR";
  src: url("../fonts/MonoplexKR-Bold.ttf") format("truetype");
  font-weight: bold;
}
body {
  font-family: "MonoplexKR", sans-serif;
  margin: 0;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  background: #f8f9fa;
  padding: 20px;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 20px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-title {
  margin: 0;
  font-size: 1.5em;
}

.site-title a {
  text-decoration: none;
  color: #333;
}

header nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

header nav ul li {
  margin-left: 20px;
}

header nav ul li a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
}

main {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 250px;
  margin-right: 20px;
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-top: none;
}

.content {
  flex: 1;
  min-width: 0;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-top: none;
}

.content img {
  max-width: 100%;
  height: auto;
  display: block;
}

footer {
  margin-top: 20px;
  padding: 20px;
  text-align: center;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
}

/* Syntax highlighting (Rouge) */
pre {
  background: #f6f8fa;
  padding: 1em;
  overflow: auto;
  border-radius: 6px;
  font-size: 0.9em;
}

code {
  font-family: "MonoplexKR", Menlo, Monaco, "Courier New", monospace;
}

/* For inline code blocks */
:not(pre) > code {
  background-color: #f6f8fa;
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  border-radius: 6px;
}

.highlight {
  background: #f6f8fa;
}

.highlight .c {
  color: #6a737d;
  font-style: italic;
} /* Comment */
.highlight .err {
  color: #d73a49;
}

.highlight .k {
  color: #d73a49;
} /* Keyword */
.highlight .o {
  color: #d73a49;
} /* Operator */
.highlight .cm {
  color: #6a737d;
  font-style: italic;
}

.highlight .cp {
  color: #6a737d;
}

.highlight .c1 {
  color: #6a737d;
  font-style: italic;
}

.highlight .cs {
  color: #6a737d;
  font-style: italic;
}

.highlight .gd {
  color: #b31d28;
  background: #ffeef0;
}

.highlight .ge {
  font-style: italic;
}

.highlight .gh {
  color: #005cc5;
}

.highlight .gi {
  color: #22863a;
  background: #f0fff4;
}

.highlight .gp {
  color: #586069;
}

.highlight .gs {
  font-weight: bold;
}

.highlight .gu {
  color: #b31d28;
}

.highlight .kc {
  color: #d73a49;
}

.highlight .kd {
  color: #d73a49;
}

.highlight .kn {
  color: #d73a49;
}

.highlight .kp {
  color: #d73a49;
}

.highlight .kr {
  color: #d73a49;
}

.highlight .kt {
  color: #d73a49;
}

.highlight .m {
  color: #005cc5;
}

.highlight .s {
  color: #032f62;
}

.highlight .na {
  color: #22863a;
}

.highlight .nb {
  color: #24292e;
}

.highlight .nc {
  color: #005cc5;
}

.highlight .no {
  color: #005cc5;
}

.highlight .nd {
  color: #6f42c1;
}

.highlight .ni {
  color: #d73a49;
}

.highlight .ne {
  color: #005cc5;
}

.highlight .nf {
  color: #6f42c1;
}

.highlight .nl {
  color: #24292e;
}

.highlight .nn {
  color: #005cc5;
}

.highlight .nt {
  color: #22863a;
}

.highlight .nv {
  color: #24292e;
}

.highlight .ow {
  color: #d73a49;
}

.highlight .w {
  color: #d0d0d0;
}

.highlight .mf {
  color: #005cc5;
}

.highlight .mh {
  color: #005cc5;
}

.highlight .mi {
  color: #005cc5;
}

.highlight .mo {
  color: #005cc5;
}

.highlight .sb {
  color: #032f62;
}

.highlight .sc {
  color: #032f62;
}

.highlight .sd {
  color: #032f62;
}

.highlight .s2 {
  color: #032f62;
}

.highlight .se {
  color: #032f62;
}

.highlight .sh {
  color: #032f62;
}

.highlight .si {
  color: #032f62;
}

.highlight .sx {
  color: #032f62;
}

.highlight .sr {
  color: #032f62;
}

.highlight .s1 {
  color: #032f62;
}

.highlight .ss {
  color: #032f62;
}

.highlight .bp {
  color: #24292e;
}

.highlight .vc {
  color: #24292e;
}

.highlight .vg {
  color: #24292e;
}

.highlight .vi {
  color: #24292e;
}

.highlight .il {
  color: #005cc5;
}

/* Line wrapping for long words, URLs, and code blocks */
#content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

pre, code {
  white-space: pre-wrap; /* keep indentation but allow wrap */
  word-wrap: break-word;
}

/*# sourceMappingURL=style.css.map */